/* ==========================================================================
   QEMOSA redesign - PRODUCT PAGE LAYER
   Author: TEDBG - https://tedbg.com
   Loaded after Journal's generated CSS and after qemosa-r-base.css, so it
   wins at equal specificity. Everything in this file is scoped under
   html.route-product-product body so it cannot leak to home/category pages.
   Uses the design tokens defined in qemosa-r-base.css (--qr-font, --qr-bg,
   --qr-photo-bg, --qr-ink, --qr-muted, --qr-line, --qr-red, --qr-badge,
   --qr-w-*). Do not redefine tokens here.
   Mobile-first: unprefixed rules are the phone layout, the
   @media (min-width: 992px) block at the bottom adjusts for desktop.
   ========================================================================== */

/* ----- k. Page background everywhere on this route ------------------------ */
html.route-product-product body,
html.route-product-product body .site-wrapper,
html.route-product-product body .global-wrapper,
html.route-product-product body #content,
html.route-product-product body #product-product.container {
    background-color: var(--qr-bg) !important;
}

/* ==========================================================================
   a. Borderless main photo
   ========================================================================== */
html.route-product-product body .product-info .product-left,
html.route-product-product body .product-left-wrapper,
html.route-product-product body .product-image {
    margin: 0 !important;
    padding: 0 !important;
}

html.route-product-product body .product-image,
html.route-product-product body .product-image .main-image,
html.route-product-product body .product-image .swiper-container,
html.route-product-product body .product-image .swiper-wrapper,
html.route-product-product body .product-image .swiper-slide {
    background-color: var(--qr-photo-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* the theme adds a 2px transparent border on .main-image - kill it explicitly */
html.route-product-product body .product-image .main-image {
    border-width: 0 !important;
}

/* true edge-to-edge on phones: break the photo out of the page gutter,
   regardless of how wide that gutter actually is.
   САМО до 767px! От 768 нагоре Journal вече слага снимката в тясна лява
   колона до текста - тогава 100vw я изнасяше 174-224px извън екрана вляво. */
@media (max-width: 767px) {
    html.route-product-product body .product-image {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

/* ==========================================================================
   b. Gallery navigation: hide arrows, pagination becomes a flat scrollbar
   ========================================================================== */
html.route-product-product body .product-image .main-image .swiper-buttons,
html.route-product-product body .product-image .main-image .swiper-button-prev,
html.route-product-product body .product-image .main-image .swiper-button-next {
    display: none !important;
}

/* the controls wrapper is display:none by default in the core theme (it only
   held the arrows in the original design) - re-open it so the pagination bar
   inside it can show */
html.route-product-product body .product-image .main-image .swiper-controls {
    display: block !important;
    position: relative !important;
    inset: auto !important;
}

/* Лентата се центрираше ДВА пъти - веднъж с margin: auto и втори път с
   left: 50% + translateX(-50%). Двете се събираха и я изнасяха надясно до
   ръба на снимката. Автоматичните полета сами я слагат в средата. */
html.route-product-product body .product-image .main-image .swiper-pagination {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 60% !important;
    max-width: 60% !important;
    margin: 8px auto 0 !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
}

html.route-product-product body .product-image .main-image .swiper-pagination .swiper-pagination-bullet {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 3px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 2px !important;
    background-color: var(--qr-line) !important;
    opacity: 1 !important;
}

html.route-product-product body .product-image .main-image .swiper-pagination .swiper-pagination-bullet::before {
    content: none !important;
}

html.route-product-product body .product-image .main-image .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--qr-ink) !important;
}

/* ==========================================================================
   c. Discount badge - flat rectangle glued to the top-left corner
   NOTE: the "-XX%" badge is rendered by Journal's Product Labels feature as
   a fixed label definition (ID 494 on this store, see product-label-494 in
   the DOM), reused sitewide whenever a product has a special price - the
   percentage text changes per product but the ID does not. The other badge
   seen in the DOM (product-label-476, "Любим продукт") is a different label
   and is left untouched.
   ========================================================================== */
html.route-product-product body .product-image .product-labels .product-label-494 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 4 !important;
}

html.route-product-product body .product-image .product-labels .product-label-494 strong {
    display: block;
    background-color: var(--qr-badge) !important;
    color: #ffffff !important;
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-bold) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    padding: 8px 14px !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   d. Product title (left aligned) + SKU line
   ========================================================================== */
html.route-product-product body .title.page-title,
html.route-product-product body #content > h1.title.page-title,
html.route-product-product body .product-info .product-details .title.page-title {
    text-align: left !important;
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-regular) !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    color: var(--qr-ink) !important;
    max-width: none !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
}

html.route-product-product body .product-info .product-stats,
html.route-product-product body .product-info .product-stats ul {
    text-align: left !important;
    justify-content: flex-start !important;
}

html.route-product-product body .product-info .product-stats li.product-sku {
    font-family: var(--qr-font) !important;
    font-size: 12px !important;
    color: var(--qr-muted) !important;
    text-transform: none !important;
}

/* brand logo (.brand-image, 120x120 source image) was overlapping the
   rating / "Напишете мнение" row - pin it top-right of the stats block,
   shrink it and reserve space for it so nothing underneath is covered */
html.route-product-product body .product-info .product-stats {
    position: relative !important;
    padding-right: 96px !important;
    min-height: 52px !important;
}

html.route-product-product body .product-info .product-stats .brand-image {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 80px !important;
    max-width: 80px !important;
}

html.route-product-product body .product-info .product-stats .brand-image img {
    width: auto !important;
    height: auto !important;
    max-width: 80px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    display: block !important;
    margin-left: auto !important;
}

/* the duplicate brand name inside the logo link is redundant next to the
   .tedbg-product-brand text line - keep just the logo */
html.route-product-product body .product-info .product-stats .brand-image span {
    display: none !important;
}

/* ==========================================================================
   e. Price block
   ========================================================================== */
/* stack the two prices vertically: bold new on top, thin old below (Journal
   lays .price-group out as an inline flex row by default) */
html.route-product-product body .product-info .product-price-group .price-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

html.route-product-product body .product-info .product-price-group .product-price-new {
    order: 0 !important;
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-bold) !important;
    font-size: 26px !important;
    color: var(--qr-red) !important;
}

html.route-product-product body .product-info .product-price-group .product-price-old {
    order: 1 !important;
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-light) !important;
    font-size: 22px !important;
    color: var(--qr-ink) !important;
    text-decoration: none !important;
}

/* Двете цени тръгват от един ляв ръб (бележка на клиента 38, 2026-08-04).
   Journal слага align-self: center на старата цена и понеже тя е по-къса от
   новата, стоеше изместена с ~7px навътре. */
html.route-product-product body .product-info .product-price-group .price-group > * {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

/* hide the "без ДДС" line */
html.route-product-product body .product-info .product-price-group .product-tax {
    display: none !important;
}

/* ==========================================================================
   f. Size option label reads as a heading
   ========================================================================== */
html.route-product-product body .product-info .product-options .form-group .control-label {
    display: block !important;
    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-regular) !important;
    font-size: 13px !important;
    color: var(--qr-muted) !important;
    margin: 22px 0 10px !important;
}

/* The required marker is a ::after pseudo-element on the label. Journal's core
   CSS gives it display:flex (and a second rule display:block), so it became a
   block-level box and dropped onto its own line under the label text. Force it
   back inline so it sits right after the last letter. */
html.route-product-product body .product-info .product-options .form-group.required .control-label::after {
    display: inline !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 13px !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    margin: 0 0 0 3px !important;
    padding: 0 !important;
}

/* Journal prints the same "*" three times - as ::before and ::after on the
   label and once more on the wrapper div under it. Only the ::after is kept. */
html.route-product-product body .product-info .product-options .form-group.required .control-label::before,
html.route-product-product body .product-info .product-options .form-group.required .control-label + div::before {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   g. Size swatches
   ========================================================================== */
html.route-product-product body .product-info .product-options .push-option > div[id*="input-option"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

html.route-product-product body .product-info .product-options .push-option > div[id*="input-option"] > div.radio {
    width: 78px !important;
    max-width: 78px !important;
    height: 44px !important;
    margin: 0 !important;
}

html.route-product-product body .product-info .product-options .push-option .radio label {
    width: 100% !important;
    height: 100% !important;
}

html.route-product-product body .product-info .product-options .push-option .option-wrapper {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    background-color: #ececec !important;
    border-radius: 2px !important;
    justify-content: center !important;
    align-items: center !important;
}

html.route-product-product body .product-info .product-options .push-option .option-value {
    font-family: var(--qr-font) !important;
    font-size: 14px !important;
    color: var(--qr-ink) !important;
    text-align: center !important;
}

/* selected size: input and .option-wrapper are sibling elements inside the
   same <label>, so a plain sibling combinator picks up the checked state
   with no JS/class dependency */
html.route-product-product body .product-info .product-options .push-option .radio input:checked ~ .option-wrapper {
    background-color: var(--qr-ink) !important;
}

html.route-product-product body .product-info .product-options .push-option .radio input:checked ~ .option-wrapper .option-value {
    color: #ffffff !important;
}

/* Unavailable / out of stock sizes: Journal's core radio-option template
   (template/product/product.twig, ~line 316-339) does NOT add any class or
   attribute to mark an option value as out of stock - no .disabled,
   .out-of-stock, .not-available or [disabled] exists anywhere in the
   rendered DOM we inspected. There is therefore nothing real to hook into
   from CSS alone. The rules below cover the class the brief asked us to
   fall back to (.qr-unavailable), plus the handful of conventions that are
   sometimes added by option-quantity modules, so the styling is ready the
   day someone wires up the marker - but right now none of these selectors
   match anything on the live page. See the report for what a template
   change would need to do. */
html.route-product-product body .product-info .product-options .push-option .radio.qr-unavailable .option-wrapper,
html.route-product-product body .product-info .product-options .push-option .radio.disabled .option-wrapper,
html.route-product-product body .product-info .product-options .push-option .radio.out-of-stock .option-wrapper,
html.route-product-product body .product-info .product-options .push-option .radio.not-available .option-wrapper,
html.route-product-product body .product-info .product-options .push-option .option-wrapper.qr-unavailable,
html.route-product-product body .product-info .product-options .push-option .option-wrapper.disabled,
html.route-product-product body .product-info .product-options .push-option .radio input:disabled ~ .option-wrapper {
    position: relative !important;
    opacity: 0.45 !important;
    pointer-events: none !important;
}

html.route-product-product body .product-info .product-options .push-option .radio.qr-unavailable .option-wrapper::after,
html.route-product-product body .product-info .product-options .push-option .radio.disabled .option-wrapper::after,
html.route-product-product body .product-info .product-options .push-option .radio.out-of-stock .option-wrapper::after,
html.route-product-product body .product-info .product-options .push-option .radio.not-available .option-wrapper::after,
html.route-product-product body .product-info .product-options .push-option .option-wrapper.qr-unavailable::after,
html.route-product-product body .product-info .product-options .push-option .option-wrapper.disabled::after,
html.route-product-product body .product-info .product-options .push-option .radio input:disabled ~ .option-wrapper::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    height: 1px;
    background-color: var(--qr-ink);
    transform: translateY(-50%) rotate(-8deg);
    pointer-events: none;
}

/* ==========================================================================
   h. Add to cart button + "Добави в любими" link
   ========================================================================== */
/* the theme wraps the buttons in a white card - the approved layout has them
   sitting straight on the page background */
html.route-product-product body .product-info .button-group-page {
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

html.route-product-product body .product-info .button-group-page .buttons-wrapper,
html.route-product-product body .product-info .button-group-page .cart-group {
    width: 100% !important;
}

html.route-product-product body .product-info .button-group-page .btn-cart.btn {
    width: 100% !important;
    min-width: 100% !important;
    height: 56px !important;
    background-color: var(--qr-ink) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 2px !important;
}

html.route-product-product body .product-info .button-group-page .btn-cart .btn-text {
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-medium) !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: #ffffff !important;
}

html.route-product-product body .product-info .button-group-page .wishlist-compare {
    justify-content: flex-start !important;
    font-size: 14px !important;
}

html.route-product-product body .product-info .button-group-page .btn-wishlist.btn {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 14px 0 !important;
    margin: 8px 0 0 !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
}

html.route-product-product body .product-info .button-group-page .btn-wishlist .btn-text {
    font-family: var(--qr-font) !important;
    font-size: 14px !important;
    color: var(--qr-ink) !important;
    text-transform: none !important;
}

/* The heart is icon-font glyph \eaa7 from 'icomoon'. An earlier version of
   this file also forced --qr-font on ::before, which swapped the icon font for
   the text font and left an invisible / broken glyph - the heart vanished.
   Keep icomoon here and only restyle size and colour. */
html.route-product-product body .product-info .button-group-page .btn-wishlist::before {
    font-family: 'icomoon' !important;
    font-size: 16px !important;
    color: var(--qr-ink) !important;
    text-transform: none !important;
    margin-inline-end: 8px !important;
}

/* ==========================================================================
   i. Benefits list (Доставка / замяна / произход / преглед и тест)
   "Преглед и тест" is links-menu-item-4 in the DOM and needs to render
   first - done with a flex container + order, scoped to this exact module
   instance (links-menu-478) so it cannot affect any other links-menu block
   on the site.
   ========================================================================== */
html.route-product-product body .links-menu-478 .module-body {
    display: flex !important;
    flex-direction: column !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* NOTE: "Преглед и тест" is already moved to first position in the module
   data itself (DB reorder of module 478), so no CSS order hack is needed -
   an order rule here would double-shift the list. */

html.route-product-product body .links-menu-478 .menu-item {
    background: none !important;
    border: 0 !important;
    padding: 7px 0 !important;
    margin: 0 !important;
}

html.route-product-product body .links-menu-478 .menu-item > a {
    display: flex !important;
    align-items: center !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

html.route-product-product body .links-menu-478 .menu-item > a::before {
    color: var(--qr-ink) !important;
    margin-inline-end: 10px !important;
}

html.route-product-product body .links-menu-478 .menu-item a .links-text {
    font-family: var(--qr-font) !important;
    font-size: 14px !important;
    color: var(--qr-ink) !important;
    white-space: normal !important;
}

/* ==========================================================================
   j. ОПИСАНИЕ / МНЕНИЯ accordions
   ========================================================================== */
html.route-product-product body .product_accordion.panel-group .panel {
    background: none !important;
    border: 0 !important;
    border-top: 1px solid var(--qr-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

html.route-product-product body .product_accordion.panel-group .panel-heading {
    background: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px 0 !important;
}

html.route-product-product body .product_accordion.panel-group .panel-heading .accordion-toggle {
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-medium) !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: var(--qr-ink) !important;
    justify-content: space-between !important;
    width: 100% !important;
}

html.route-product-product body .product_accordion.panel-group .panel-heading .accordion-toggle::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border: 1px solid var(--qr-line) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--qr-ink) !important;
}

html.route-product-product body .product_accordion.panel-group .panel-heading + .panel-collapse {
    background: none !important;
    padding: 0 0 16px !important;
}

html.route-product-product body .product_accordion.panel-group .panel-body {
    font-family: var(--qr-font) !important;
    font-size: 14px !important;
    color: var(--qr-ink) !important;
}

/* ==========================================================================
   Desktop (>=992px) adjustments
   ========================================================================== */
@media (min-width: 992px) {
    /* the photo fills its own column on desktop, no viewport breakout */
    html.route-product-product body .product-image {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   l. Редът с мненията и центрираният breadcrumb (бележки на клиента 37 и 39)
   ========================================================================== */
/* 37. Звездите и "0 мнения / Напишете мнение" ги няма в макета - махат се.
   Акордеонът МНЕНИЯ отдолу остава, той е част от одобрения дизайн. */
html.route-product-product body .product-info .rating.rating-page,
html.route-product-product body .product-info .product-stats + .rating {
    display: none !important;
}

/* 39. "Скрол менюто" (breadcrumb лентата) стои центрирано и с еднакви
   полета отляво и отдясно. При дълга пътека остава плъзгащо се, а
   "safe" пази началото достъпно вместо да го отреже. */
html.route-product-product body .breadcrumbs ul.breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: safe center !important;
    align-items: center !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* На телефон цялата пътека е по-широка от екрана и центрирането няма как да
   се случи - затова само последната троха (името на продукта) се съкращава с
   многоточие. Така лентата се побира и застава наистина по средата. */
@media (max-width: 767px) {
    html.route-product-product body .breadcrumbs ul.breadcrumb > li:last-child {
        min-width: 0 !important;
        max-width: 38% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html.route-product-product body .breadcrumbs ul.breadcrumb > li:last-child > * {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: block !important;
    }
}