/*
 * mikov - custom storefront styles
 * Loaded last from template/common/header.twig, after the theme stylesheets.
 * Mostly desktop (min-width: 992px); the header card, the home hero and the
 * slider below that width live in the one max-width block further down.
 */

@media (min-width: 992px) {

    /* Header as a floating card, 1710px max, on every page */
    .pr-header {
        /* main.min.js strips .sticky-top from the header while .main-slideshow is
           in the viewport. The hero is now full height, so it never leaves and the
           header would never pin - keep it sticky ourselves, like mikov.cz does. */
        position: sticky;
        z-index: 1020;
        /* body is a column flexbox: without an explicit width the auto margins
           stop the header from stretching and it shrinks to its content */
        width: 100%;
        max-width: clamp(0px, 100% - 24px, 1710px);
        margin-left: auto;
        margin-right: auto;
        border-radius: 12px;
        top: 12px;
    }

    /* Laptop fix. At 1536x864 the header block ate 185px of the hero against
       the original's 135, so the banner lost 55px of visible height and its
       watermark got clipped. Two causes, both undone here:
       - #top (42px) has no counterpart on mikov.cz, so it goes entirely
       - .pr-header-box padded 24px top and bottom against the original's 78px
         row; 16px + the 46px search field reproduces that 78px exactly
       The language switcher moved into .pr-header-buttons in header.twig so it
       survives; the phone lives in the footer. The theme switcher does not
       survive - say the word and it can move across too. */
    #top {
        display: none;
    }

    /* Language pill, matching mikov.cz: #f5f4f1 fill (the same warm grey as
       the search field), radius 10, 10/14 padding, 10px gap, 16px/600
       uppercase #223051 and a 12px #04090d chevron. Only the trigger - the
       dropdown panel is left alone. Nearly every property needs !important:
       .bg-white, .br-8, .py-1, .px-2 and .gap-2 are all !important utilities. */
    .pr-header-locale .lanuage-currency {
        background-color: #f5f4f1 !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        gap: 10px !important;
        min-height: 38px;
        color: #223051 !important;
        font-size: 16px;
        line-height: 1; /* the inherited 1.5 pushed the pill to 44px */
        font-weight: 600;
        text-transform: uppercase;
    }

    .pr-header-locale .lanuage-currency img {
        width: 20px;
        height: auto;
        border-radius: 2px;
    }

    /* the svg carries stroke="#9DA4AE" as an attribute, so CSS wins */
    .pr-header-locale .lanuage-currency .pr-arrow-down {
        width: 12px;
        height: 10px;
    }

    .pr-header-locale .lanuage-currency .pr-arrow-down path {
        stroke: #04090d;
        stroke-width: 1;
    }

    .pr-header-box {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    /* Logo. The canonical size lives in the theme setting
       theme_oct_promo_image_logo_width / _height (75x35 right now), which also
       drives the width/height attributes and the footer and mobile logos.
       This only enlarges the one in the desktop header; height:auto keeps the
       75:35 ratio from those attributes, so 135px maps to 63px. */
    #logo img {
        width: 135px;
        height: auto;
    }

    /* Search field, matching mikov.cz: 650px wide, 46px tall, 16px text, flat
       field with no visible border. Capping the wrapper rather than the form
       keeps #liveSearch - which is positioned against .pr-header-search - the
       same width as the field. */
    .pr-header-search {
        max-width: 650px;
    }

    .pr-header-buttons {
        /* .ms-lg-0 relied on the search growing to push these right */
        margin-left: auto !important;
    }

    .pr-header-search-input {
        height: 46px;
        border-color: transparent;
        border-radius: 5px !important; /* beats the .br-8 utility */
        font-size: 16px !important;    /* beats the .fsz-12 utility */
    }

    /* The original's warm grey. Dark theme keeps the theme's own surface. */
    .light-theme .pr-header-search-input {
        background-color: #f5f4f1;
        border-color: #f5f4f1;
    }

    /* Header category bar. The markup carries .fsz-14 .fw-600 from the vendor
       template octemplates/menu/oct_menu_horizontal.twig, which we do not edit
       in place - both utilities are !important, so we match that here.
       :hover keeps the theme's accent colour (higher specificity). */
    .pr-header-main-categories-link {
        font-size: 1rem !important;  /* .fsz-16 */
        font-weight: 500 !important; /* .fw-500 */
    }

    .light-theme .pr-header-main-categories-link {
        color: #0d1832;
    }

    /* Slider arrows, matching mikov.cz: 50x50 solid white circles with no
       border, 10px from the edge, vertically centred, #0d1832 glyph, and
       #e6e6e6 / #04090d on hover. The theme draws 32px transparent circles
       with a grey 1px border at top:55%. */
    .main-slideshow .swiper-button-prev,
    .main-slideshow .swiper-button-next {
        width: 50px;
        height: 50px;
        top: 50%;
        transform: translate3d(0, -50%, 0);
        margin-top: 0; /* swiper's own -22px (half of --swiper-navigation-size) */
        padding: 0 !important; /* beats the .p-2 utility */
        border: 0;
        background-color: #fff;
        transition: background-color var(--pr-main-transition);
    }

    /* the theme pins these with !important (1rem, and 1.5rem above 1600px) */
    .main-slideshow .swiper-button-prev {
        left: 10px !important;
        right: auto !important;
    }

    .main-slideshow .swiper-button-next {
        right: 10px !important;
        left: auto !important;
    }

    .main-slideshow .swiper-button-prev svg,
    .main-slideshow .swiper-button-next svg {
        width: auto;
        height: 18px;
    }

    .main-slideshow .swiper-button-prev svg path,
    .main-slideshow .swiper-button-next svg path {
        stroke: #0d1832;
        stroke-width: 1.5;
    }

    .main-slideshow .swiper-button-prev:hover,
    .main-slideshow .swiper-button-next:hover {
        background-color: #e6e6e6;
    }

    .main-slideshow .swiper-button-prev:hover svg path,
    .main-slideshow .swiper-button-next:hover svg path {
        stroke: #04090d;
    }

    /* Slider pagination, matching mikov.cz: 56x10 outlined pills 10px apart,
       right aligned 212px in from the slider edge and 79px up from its bottom.
       The theme pins bottom/left with !important and centres the strip with a
       -50% transform, so all three have to be undone explicitly; swiper adds
       width:100% on .swiper-pagination-horizontal, hence width:auto. */
    .pr-slideshow-plus .swiper-pagination {
        left: auto !important;
        right: 212px !important;
        bottom: 74px !important; /* the original centres a zero-height strip on 79px */
        width: auto;
        transform: none;
        justify-content: flex-end;
        gap: 10px;
    }

    .pr-slideshow-plus .swiper-pagination .swiper-pagination-bullet {
        width: 56px;
        height: 10px;
        border: 1px solid #fff;
        border-radius: 30px;
        background-color: transparent;
        opacity: 1;
    }

    .pr-slideshow-plus .swiper-pagination .swiper-pagination-bullet-active {
        width: 56px;
        height: 10px;
        background-color: #f5f4f1;
    }

    /* Mega-menu dropdown items, matching mikov.cz: weight 400, #707282, and
       #0d1832 on hover. Font size is already 1rem, same as the original.
       The <a> does not inherit: the theme paints it with
       `... .pr-menu-catalog-items > li > a { color: var(--pr-dark-text-color) }`
       at specificity (0,4,2), so the override has to carry the full chain.
       The <li> rule covers items rendered as <span> (categories with no link). */
    .pr-header-main-categories .pr-menu-catalog-wide .pr-menu-catalog-item {
        font-weight: 400 !important; /* beats the .fw-500 utility */
    }

    /* The same theme rule that colours the link also sets font-weight:700.
       Equal specificity, so loading later is enough - no !important. */
    .pr-header-main-categories .pr-menu-catalog-wide > .pr-menu-catalog-inner > .pr-menu-catalog-items > li > a {
        font-weight: 400;
    }

    .light-theme .pr-header-main-categories .pr-menu-catalog-wide .pr-menu-catalog-item,
    .light-theme .pr-header-main-categories .pr-menu-catalog-wide > .pr-menu-catalog-inner > .pr-menu-catalog-items > li > a {
        color: #707282;
    }

    /* Follows the theme setting "Колір основних посилань", same as the theme's
       own .pr-menu-catalog-inner a:hover does. */
    .light-theme .pr-header-main-categories .pr-menu-catalog-wide > .pr-menu-catalog-inner > .pr-menu-catalog-items > li > a:hover {
        color: var(--pr-links-color, #0d1832);
    }

    /* Home page hero: the slideshow runs full width and starts at the very top,
       the top bar and the header float above it.
       --pr-hero-overlap and --pr-hero-bleed are set in common/header.twig. */
    body[data-page="home"] #common-home:has(> .main-slideshow:first-child) {
        margin-top: calc(-1 * var(--pr-hero-overlap, 0px));
    }

    body[data-page="home"] #common-home > .main-slideshow:first-child {
        margin-top: 0 !important; /* beats the .mt-4 utility */
        margin-left: calc(-1 * var(--pr-hero-bleed, calc(50vw - 50%)));
        margin-right: calc(-1 * var(--pr-hero-bleed, calc(50vw - 50%)));
    }

    body[data-page="home"] #common-home > .main-slideshow:first-child .pr-slideshow-plus-slide,
    body[data-page="home"] #common-home > .main-slideshow:first-child .pr-slideshow-item-full-img,
    body[data-page="home"] #common-home > .main-slideshow:first-child .pr-slideshow-item-full-img img {
        border-radius: 0 !important; /* beats the .br-4 utility */
    }

    /* Mini banners stay inside .main-slideshow, keep them on the content grid */
    body[data-page="home"] #common-home > .main-slideshow:first-child .pr-slideshow-plus-banners {
        margin-left: var(--pr-hero-bleed, calc(50vw - 50%));
        margin-right: var(--pr-hero-bleed, calc(50vw - 50%));
    }

    /* Top bar sits on the banner - light text and icons.
       The inline SVGs are painted with stroke/fill="var(--pr-black-color)". */
    body[data-page="home"] #top {
        --pr-black-color: #fff;
        color: #fff;
    }

    /* .lanuage-currency is the white language / currency pill - it keeps its own
       .primary-light-text colour, white on white would be invisible */
    body[data-page="home"] #top .dark-text,
    body[data-page="home"] #top .pr-dropdown-toggle:not(.lanuage-currency) {
        color: #fff;
    }

    /* ...but the dropdown panels keep their own white background */
    body[data-page="home"] #top .pr-dropdown,
    body[data-page="home"] #top .pr-dropdown .dark-text {
        --pr-black-color: #121715;
        color: #4f5f99;
    }
}

/*
 * Hero text over the full-image slide. The markup comes from
 * system/my_custom_slideshow_hero.ocmod.xml, which adds it to the
 * "image as background" branch of oct_slideshow_plus.twig.
 *
 * Unlike everything above, the base rules are NOT desktop-only: the OCMOD
 * emits this markup at every width, so it needs styling everywhere or the
 * text would drop out of the slide as an unstyled block. The desktop block
 * further down carries the sizes measured off mikov.cz.
 */
.pr-slideshow-item-full-img {
    position: relative;
}

.pr-slide-hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding-bottom: 1.5rem;
}

.pr-slide-hero-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 5px;
}

.pr-slide-hero-descr {
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 1rem;
    max-width: 700px;
}

.pr-slide-hero-button {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #04090d;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    padding: 0.9rem 1rem;
    text-decoration: none;
    transition: background-color var(--pr-main-transition), border-color var(--pr-main-transition);
}

.pr-slide-hero-button:hover {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
    color: #04090d;
}

@media (min-width: 992px) {
    .pr-slide-hero-overlay {
        padding-bottom: 3.5rem;
    }

    .pr-slide-hero-title {
        font-size: 40px;
        line-height: 52px;
    }

    .pr-slide-hero-descr {
        font-size: 17px;
        line-height: 1.3;
        margin-bottom: 24px;
    }
}

/*
 * Mobile header and home hero, matching mikov.cz below 992px.
 *
 * The only max-width block in this file, and deliberately so: the header card,
 * the slider arrows and the pagination all have desktop counterparts in the
 * min-width: 992px block above, so "base" values would leak upwards. Keeping
 * the whole mobile pass in one block also beats mutating the shared hero-overlay
 * rules further down, which the desktop block inherits from.
 *
 * The header structure is untouched - the burger stays on the left, the phone
 * dropdown and the theme switcher stay where the theme puts them. What changes
 * is the geometry: the header becomes an inset card and the slideshow runs full
 * width underneath it, the way it already does on desktop.
 *
 * Measured off https://www.mikov.cz/en/ at 375x812.
 */
@media (max-width: 991.98px) {

    /* Header card: 6px in from every edge, radius 10, sticky 6px down.
       position:sticky is not declared here - main.min.js disconnects its
       IntersectionObserver below 992px and always adds .sticky-top, and the
       class is in header.twig statically as well. .sticky-top's own top:0 is
       not !important, so loading later is enough to beat it. */
    .pr-header {
        /* body is a column flexbox: without an explicit width the auto margins
           stop the header from stretching and it shrinks to its content */
        width: 100%;
        max-width: calc(100% - 12px);
        margin: 6px auto 0;
        border-radius: 10px;
        top: 6px;
    }

    /* The off-canvas menu repeats the header's search button in its button row.
       The header already carries one (.pr-header-open-mobile-search, kept), so
       inside the panel it is redundant - hidden. .d-flex is an !important utility,
       hence the flag. The theme draws the row's dividers with `button + button`,
       which still matches the cart button once this one is display:none, so its
       now-leading border has to go too. */
    .pr-mobile-menu-content-buttons .pr-header-open-mobile-search {
        display: none !important;
    }

    .pr-mobile-menu-content-buttons .pr-header-open-mobile-search + button {
        border-left: 0;
    }

    /* Home page hero: same treatment as desktop - the slideshow runs full width
       and starts at the very top, with the header card floating above it.
       --pr-hero-overlap and --pr-hero-bleed come from common/header.twig; the
       script is not media-gated, and it accounts for the 6px margin above. */
    body[data-page="home"] #common-home:has(> .main-slideshow:first-child) {
        margin-top: calc(-1 * var(--pr-hero-overlap, 0px));
    }

    body[data-page="home"] #common-home > .main-slideshow:first-child {
        margin-top: 0 !important; /* beats the .mt-4 utility */
        margin-left: calc(-1 * var(--pr-hero-bleed, calc(50vw - 50%)));
        margin-right: calc(-1 * var(--pr-hero-bleed, calc(50vw - 50%)));
    }

    body[data-page="home"] #common-home > .main-slideshow:first-child .pr-slideshow-plus-slide,
    body[data-page="home"] #common-home > .main-slideshow:first-child .pr-slideshow-item-full-img,
    body[data-page="home"] #common-home > .main-slideshow:first-child .pr-slideshow-item-full-img img {
        border-radius: 0 !important; /* beats the .br-4 utility */
    }

    /* Hero height, matching mikov.cz. Both stores serve the same 640x710 mobile
       banner (ours through <picture><source media="(max-width: 767px)">), and the
       original pins min-height: 710px with object-fit: cover on it - so the image
       is scaled to fill a full-width 710px box and cropped at the sides rather
       than shrunk whole. .img-fluid's height:auto would otherwise resolve to the
       file's own ratio: 459px at a 414px viewport, well short of the original.
       Above 640px the auto height passes 710 on its own and nothing is cropped. */
    body[data-page="home"] #common-home > .main-slideshow:first-child .pr-slideshow-item-full-img img {
        min-height: 710px;
        object-fit: cover;
    }

    /* Mini banners stay inside .main-slideshow, keep them on the content grid */
    body[data-page="home"] #common-home > .main-slideshow:first-child .pr-slideshow-plus-banners {
        margin-left: var(--pr-hero-bleed, calc(50vw - 50%));
        margin-right: var(--pr-hero-bleed, calc(50vw - 50%));
    }

    /* No arrows on mobile, like the original - swiping is the control.
       Same specificity as the theme's display:grid, loaded later. */
    .pr-slideshow-plus .swiper-button-prev,
    .pr-slideshow-plus .swiper-button-next {
        display: none;
    }

    /* Pagination, matching mikov.cz: 36x6 outlined pills 7px apart, centred
       32px up from the slider bottom. The theme pins bottom and left with
       !important and centres the strip with a -50% transform, so all three
       have to be undone explicitly. */
    .pr-slideshow-plus .swiper-pagination {
        left: 0 !important;
        right: 0 !important;
        bottom: 32px !important;
        width: auto;
        transform: none;
        justify-content: center;
        gap: 7px;
    }

    .pr-slideshow-plus .swiper-pagination .swiper-pagination-bullet {
        width: 36px;
        height: 6px;
        border: 1px solid #fff;
        border-radius: 30px;
        background-color: transparent;
        opacity: 1;
    }

    .pr-slideshow-plus .swiper-pagination .swiper-pagination-bullet-active {
        width: 36px;
        height: 6px;
        background-color: #f5f4f1;
    }

    /* The scrim the original puts under its hero text. Without it white text on
       a light banner is unreadable at this size, where the overlay covers most
       of the slide. Mobile only - the desktop hero is signed off as it is.
       z-index stays auto so it paints above the image but below the overlay
       (z-index: 1); pointer-events:none keeps the slide link clickable. */
    .pr-slideshow-item-full-img::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(0deg, #04090d, rgba(4, 9, 13, 0) 70%);
        opacity: .5;
    }

    /* Hero text. The base block below already carries the colour, the weight,
       the 5px title margin and line-height 1.3 - which is exactly the original's
       39px at 30px - so only four values differ on mobile. display:block is what
       stretches the button across the .container-xl, as on mikov.cz; the base
       padding and line-height then add up to the same ~56px tall pill. */
    .pr-slide-hero-overlay {
        padding-bottom: 65px;
        text-align: center;
    }

    .pr-slide-hero-title {
        font-size: 30px;
    }

    .pr-slide-hero-descr {
        margin-bottom: 24px;
    }

    .pr-slide-hero-button {
        display: block;
        text-align: center;
    }
}

/*
 * Checkout totals. The sidebar rows come from checkout/oct_smartcheckout/cart.twig,
 * where the row is a justify-content-between flexbox holding two spans: the title
 * and the sum. The shipping row can carry text instead of a sum -
 * "За тарифами перевізника" from system/my_custom_novaposhta_carrier_tariff.ocmod.xml -
 * and that text wraps over two lines, which is when alignment becomes visible.
 * The parent .pr-cart-column-total carries Bootstrap's .text-end, so both halves
 * were ragged right; the title goes left, the sum keeps right.
 *
 * :last-child rather than a class, because smartcheckout.twig renders the same row
 * with the title as a bare text node and only the sum as a span - there the rule on
 * the row itself is what left-aligns the title.
 */
.pr-cart-column-total-item {
    text-align: left;
}

.pr-cart-column-total-item > span:last-child {
    text-align: right;
}

/*
 * Product module grid: 4 columns instead of 5 on desktop.
 *
 * The theme ladder for .pr-module-item in main.min.css is 2 / 3 / 4 / 5 columns:
 *   base              -> calc(50% - 0.5rem)
 *   min-width: 768px  -> calc(33.333% - 0.75rem)
 *   min-width: 1200px -> calc(25% - 0.75rem)
 *   min-width: 1200px and (pointer: fine) -> calc(20% - 0.8rem)
 * so a desktop mouse gets 5 columns and a 1200px+ touch device already gets 4.
 * Only the last step is undone here; the value is the theme's own 4-column one
 * (.pr-module-items is gap-3 = 1rem, 3 gaps over 4 items = 0.75rem each).
 *
 * Same selector and specificity as the theme rule, and custom.css loads after
 * main.min.css - no !important needed.
 *
 * Deliberately not scoped to the home page: "Ми рекомендуємо" (#pr-mp_0) is the
 * only .pr-module grid on the site right now, and 4 across matches the category
 * listing, which is already 4 via .pr-category-products .pr-module-item.product-grid.
 * The theme's own data-type rules (width50, width100, minimal, carousel) and the
 * category / related-products rules are all more specific, so they keep their widths.
 */
@media (min-width: 1200px) and (pointer: fine) {
    .pr-module-item {
        flex: 0 0 calc(25% - 0.75rem);
        max-width: calc(25% - 0.75rem);
    }
}

/*
 * Footer logo: inverted and enlarged.
 *
 * The logo is a single-colour dark-navy SVG (image/catalog/logo-mikov.svg) sitting
 * on the dark footer, where it is barely readable. brightness(0) flattens both the
 * lettering and the frame to black, invert(1) then turns them pure white - a plain
 * invert(1) would only give the complement of the navy (a pale yellow), not white.
 *
 * The img carries width/height attributes of 75x35 from the theme setting
 * theme_oct_promo_image_logo_width / _height, which do not match the SVG itself
 * (134x38) - the logo was being squashed. height:auto drops the attribute height and
 * lets the real 134:38 ratio decide, so 130px wide comes out ~36.9px tall.
 *
 * .pr-footer .pr-footer-logo rather than the bare class: header.twig prints an inline
 * <style> block for .pr-footer-logo when a dark-theme logo is configured, and being
 * later in the document it would otherwise win on equal specificity.
 */
.pr-footer .pr-footer-logo {
    width: 130px;
    height: auto;
    filter: brightness(0) invert(1);
}

/*
 * Home benefits block (oct_benefits, "Переваги"), matched to mikov.cz.
 *
 * The theme renders every item as a .content-block card - white fill, 12px radius,
 * 16px padding, hover shadow - with the icon in a 48px grey rounded tile and a bold
 * 16px title, all left-aligned, and the row left-packed in a 6-column Bootstrap grid
 * (col-lg-2), so four items leave two empty slots on the right.
 *
 * mikov.cz has no card at all: the icon sits bare on the page background and the
 * text is centred under it. Measured on https://www.mikov.cz/ at 1585px:
 *
 *   row      flex, 3 columns, centred in the container, gap 10px
 *   item     flex column, align-items:center, transparent, no padding/radius/shadow
 *   icon     60x60 box, the SVG contained in it (the flag renders 60x39)
 *   text     20px / 32px, weight 400, #223051, centred, ~15px under the icon
 *
 * Reproduced here on the theme's own markup - only geometry and colour change,
 * the Bootstrap grid stays as it is.
 *
 * The icon is a 60x40 contain box rather than the original's 60x60 square:
 * image/catalog/icon-*.svg are a mix of 61x40, 52x37 and 1024x1024 viewBoxes, and
 * a 60px square would render the two square ones half again as tall as the flag.
 * At 60x40 the flag comes out 60x39, exactly as on mikov.cz, and nothing exceeds
 * 40px tall. Both axes have to be declared, plus object-fit: the template prints
 * width="30" height="30" on the img, and those attributes give it a 1:1
 * aspect-ratio hint that width:auto would otherwise follow.
 *
 * The font stays the theme's Rubik; mikov.cz sets this text in Pridi, which is
 * not loaded on our store and would be the only Pridi text on the page.
 *
 * Not desktop-only: the block is rendered at every width, and the card styling has
 * to come off everywhere. Only the two sizes step at 992px, where the grid goes
 * from 2-3 columns to 4 and the columns get wide enough for the 20px text.
 *
 * The !important flags are all beating Bootstrap utilities the template puts on the
 * markup: .p-1, .br-12, .mt-3, .mb-2, .lh-sm, .fw-700 and .mt-1 are every one of
 * them !important in main.min.css.
 */
.pr-advantage {
    /* four items in a 6-column grid - centre them instead of packing left */
    justify-content: center;
    margin-top: 2.5rem !important; /* .mt-1; the cards' own padding used to space this */
    margin-bottom: 1.5rem; /* 24px of its own on top of the 24px before the footer */
}

.pr-advantage .pr-advantages-item,
.pr-advantage .pr-advantages-item:hover {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    text-align: center;
}

.pr-advantage .pr-advantages-item-icon {
    width: 100%;
    height: 60px;
    padding: 0 !important;
    border-radius: 0 !important;
    background-color: transparent;
}

.pr-advantage .pr-advantages-item-icon img {
    width: 100%;
    max-width: 60px;
    height: 34px;
    object-fit: contain;
}

.pr-advantage .pr-advantages-item-title {
    font-size: 16px;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

/* Colour on the light theme only - the template puts .dark-text on the title, which
   resolves to white under html.dark-theme and has to keep doing so. */
.light-theme .pr-advantage .pr-advantages-item-title {
    color: #223051;
}

.pr-advantage .pr-advantages-item-description {
    display: block;
}

@media (min-width: 992px) {
    .pr-advantage .pr-advantages-item-icon img {
        height: 40px;
    }

    .pr-advantage .pr-advantages-item-title {
        font-size: 20px;
    }
}

/* ------------------------------------------------------------------------
   Home - "Популярні категорії". The block runs on the stock Carousel module
   (banner group "Категорії", module_id 29); these rules match it to the
   "Oblíbené kategorie" block on mikov.cz.

   Measured on the reference at 1440px:
     card         flex 0 1 405px, gap 10px -> 3.4 cards in view (405px at 375px
                  the card is 263px, i.e. one card plus a peek)
     wrapper      position relative, border-radius 12px, overflow hidden
     photo        540 tall inside a 556 box, object-fit cover, radius 10px
     caption      absolute over the bottom of the photo, background #fff,
                  border-radius 5px, padding 14.4px 16px, 600 16px/24px,
                  colour #04090d, 260px of the 405px card, centred
     arrows       white circle ~48px, box-shadow 0 0 20px rgba(0,0,0,.1),
                  vertically centred on the photo, hidden below 992px
     heading      centred, 35px/1.3 on desktop, 25px on mobile

   Two deliberate departures from those numbers:
     - the card is 405x556 rather than the reference's 540-in-a-556 cell. The
       outer box is the same 556 either way, so the row height is unchanged.
     - corner radius is 16px on the photo and 18px on the wrapper, up from the
       reference's 10/12, on request - 10px reads as square at this card size.

   THE BANNER SOURCES MUST BE 405:556 - THIS IS NOT OPTIONAL
   ---------------------------------------------------------
   Image::resize() in system/library/image.php FITS and PADS: it scales the
   source to fit inside width x height and centres it on a transparent canvas
   of exactly that size. It NEVER crops. So whenever a source ratio differs
   from the module's width/height, the difference is baked into the cached PNG
   as empty bands, and no CSS can remove it - the emptiness is inside the
   pixels. The first set of banners was ~0.905 against a 0.728 box and came
   back with 54px of transparency top and bottom.

   Current sources are 810x1112 (405:556 at 2x) and the module is set to
   405x556, so resize() only halves them - no padding, nothing for object-fit
   to crop. A replacement banner MUST keep the 405:556 ratio exactly; 810x1112
   or 1215x1668 are the safe sizes. Anything else brings the bands back.

   Composition, copied from the reference: one object on the diagonal filling
   the full height, margin left at the sides. Keep the bottom 88px of the card
   clear - the caption plate sits there (260x53 centred, 35px from the bottom).

   The template (template/extension/module/carousel.twig) prints the caption as
   a plain flex child under the image; the rules below lift it onto the image.
   Card width is what Swiper measures only because
   system/my_custom_categories_carousel.ocmod.xml switches slidesPerView to
   'auto' - without that modification the width here is overwritten inline.

   !important is only where a Bootstrap utility in main.min.css carries its own
   !important: .d-flex, .gap-3, .mb-2, .fw-500, .fw-700.

   Heads-up: the template emits .pr-carousel-title while the theme's CSS only
   styles .pr-carousel-module-item-title, so the vendor hover rule is dead code
   and never competes with these rules.
   ------------------------------------------------------------------------ */

/* Headings of the home page blocks - serif and centred, as on mikov.cz.
   Pridi, the reference face, ships thai/vietnamese/latin only and has no
   Cyrillic, so Bitter stands in: same low-contrast slab feel, with cyrillic
   and cyrillic-ext subsets. Loaded in template/common/header.twig. Scoped to
   #common-home so category, product and checkout titles keep Rubik and stay
   left aligned; it covers both home headings - "Популярні категорії" and
   "Ми рекомендуємо". */
#common-home .pr-page-title {
    font-family: Bitter, Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 500 !important;
    line-height: 1.3;
    text-align: center;
}

/* Fixed-width cards. 75% keeps the mobile card at the reference 263px inside
   the 351px container, while 405px takes over as soon as there is room. */
.pr-carousel-module .swiper-slide {
    position: relative;
    width: 405px;
    max-width: 75%;
    overflow: hidden;
    border-radius: 18px;
}

/* The item also carries .content-block, which paints a white card with 1rem of
   padding (1.5rem from 992px up) and a drop shadow. On the reference the photo
   IS the card, so the card chrome is dropped and the photo fills the slide. */
.pr-carousel-module .pr-carousel-module-item,
.pr-carousel-module .pr-carousel-module-item:hover {
    display: block !important;
    position: relative;
    padding: 0;
    gap: 0 !important;
    background: transparent;
    box-shadow: none;
}

.pr-carousel-module .pr-carousel-module-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 405 / 556;
    margin-bottom: 0 !important;
    border-radius: 16px !important;
    object-fit: cover;
    opacity: 1;
}

/* The caption becomes the white plate over the bottom of the photo. The colour
   is stated outright because the markup carries .dark-text, which resolves to
   white under html.dark-theme - and the plate is white in both themes. */
.pr-carousel-module .pr-carousel-title {
    position: absolute;
    right: 20px;
    bottom: 35px;
    left: 20px;
    z-index: 2;
    max-width: 260px;
    margin-inline: auto;
    padding: 14.4px 16px;
    border-radius: 5px;
    background: #fff;
    color: #04090d;
    font-size: 16px;
    font-weight: 600 !important;
    line-height: 24px;
    transition: background-color .3s ease;
}

/* Hover, measured on the reference: the plate alone reacts - #fff -> #e6e6e6
   over .3s. The text keeps its colour, and neither the photo nor the card
   moves, scales or dims. Hovering the card outside the plate does nothing
   there, so the rule is scoped to the plate rather than to .swiper-slide. */
.pr-carousel-module .pr-carousel-title:hover {
    background: #e6e6e6;
}

/* Below 375px the plate runs out of room for a long label. Its inner width is
   0.75 * (vw - 24) - 72, so 180px at a 360px screen, while "Туризм та
   виживання" measures 179px at 600 16px Rubik - one pixel, which any fallback
   face swallows while Rubik is still loading, and 360px is one of the most
   common Android widths. Pulling the plate 8px closer to the card edges buys
   16px and leaves the reference's 16px type alone. At 375px and up the plate
   stays at the reference's own 20px inset (263px card, 223px plate).

   At 320px even this is not enough for the longest labels and they wrap to two
   lines. That is left alone deliberately: the plate simply grows upward from
   its 35px offset, which reads fine, and shrinking the type to fit one legacy
   width would cost more than it buys. */
@media (max-width: 374.98px) {
    .pr-carousel-module .pr-carousel-title {
        right: 12px;
        left: 12px;
    }
}

/* Round white arrows. The theme gives them 1.5rem and a dark fill on hover,
   which would swallow the chevron now that its stroke is near-black; the
   stroke attribute in the markup (#4F5F99) loses to this rule. */
.pr-carousel-module .swiper-button-next,
.pr-carousel-module .swiper-button-prev {
    display: none;
    width: 48px;
    height: 48px;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

.pr-carousel-module .swiper-button-next:hover,
.pr-carousel-module .swiper-button-prev:hover {
    background-color: #fff;
}

.pr-carousel-module .swiper-button-next svg,
.pr-carousel-module .swiper-button-prev svg {
    width: 12px;
    height: 16px;
}

.pr-carousel-module .swiper-button-next svg path,
.pr-carousel-module .swiper-button-prev svg path {
    stroke: #04090d;
}

@media (min-width: 992px) {
    #common-home .pr-page-title {
        font-size: 35px;
    }

    .pr-carousel-module .swiper-button-next,
    .pr-carousel-module .swiper-button-prev {
        display: grid;
    }
}