/* ============================================================
   RXSHOP.MD a?� CUSTOM STYLES
   This file contains all custom overrides and new components.
   It is loaded AFTER the main style.css.

   TABLE OF CONTENTS:
   1.  TOP BAR & HEADER BACKGROUND
   2.  HEADER (rx-topheader) a?� Desktop
   3.  HEADER a?� Phone block smooth scaling
   4.  HEADER a?� Responsive a��890px (stacked: logo a�� search a�� phone)
   5.  NAVBAR a?� Blue bar redesign
   6.  NAVBAR a?� Nav links (smooth font/padding scaling)
   7.  NAVBAR a?� Support indicator
   8.  NAVBAR a?� Favourites button
   9.  NAVBAR a?� Burger dropdown
   10. NAVBAR a?� Main Menu button (a��800px)
   11. NAVBAR a?� Main Menu dropdown overlay
   12. LAYOUT a?� Page blocks (block1, block2, block3)
   13. LAYOUT a?� Banner
   14. CATALOG a?� Feature cards
   15. FOOTER
   ============================================================ */


/* ============================================================
   1. TOP BAR & HEADER BACKGROUND
   ============================================================ */

.rx-topbar {
    width: 100%;
    height: 16px;
    background: linear-gradient(to bottom, #03165a 15px, #1c2d6a 16px);
}

/* Header background gradient a?� 92px tall */
.rx-header-bg {
    width: 100%;
    height: 92px;
    background: linear-gradient(to bottom,
        #ffffff 0px,  #ffffff 1px,
        #b7cdd6 2px,  #bbd7df 3px,
        #c9deec 4px,  #cfe6ef 5px,
        #d4e9f7 6px,  #daedf8 7px,
        #dff5fb 8px,  #e2f5fe 9px,
        #e5f8ff 10px, #effaff 11px,
        #f1fcff 12px, #f7fcff 15px,
        #fafeff 18px, #ffffff 19px,
        #ffffff 66px,                  /* a�? white center zone */
        #fafeff 68px, #fafeff 72px,
        #f7fcff 76px, #f4fbff 78px,
        #effaff 80px, #e5f8ff 81px,
        #e2f5fe 82px, #dff5fb 83px,
        #daedf8 84px, #d4e9f7 85px,
        #cfe6ef 86px, #c9deec 87px,
        #c1dde5 88px, #bbd7df 89px,
        #b7cdd6 90px, #ffffff 91px,
        #ffffff 92px
    );
}

/* At a��900px: double height a?� white center expanded from 66px to 158px */
@media (max-width: 900px) {
    .rx-header-bg {
        height: 184px;
        background: linear-gradient(to bottom,
            #ffffff 0px,  #ffffff 1px,
            #b7cdd6 2px,  #bbd7df 3px,
            #c9deec 4px,  #cfe6ef 5px,
            #d4e9f7 6px,  #daedf8 7px,
            #dff5fb 8px,  #e2f5fe 9px,
            #e5f8ff 10px, #effaff 11px,
            #f1fcff 12px, #f7fcff 15px,
            #fafeff 18px, #ffffff 19px,
            #ffffff 158px,             /* a�? white center expanded */
            #fafeff 160px, #fafeff 164px,
            #f7fcff 168px, #f4fbff 170px,
            #effaff 172px, #e5f8ff 173px,
            #e2f5fe 174px, #dff5fb 175px,
            #daedf8 176px, #d4e9f7 177px,
            #cfe6ef 178px, #c9deec 179px,
            #c1dde5 180px, #bbd7df 181px,
            #b7cdd6 182px, #ffffff 183px,
            #ffffff 184px
        );
    }
}


/* ============================================================
   2. HEADER (rx-topheader) a?� Desktop
   Flex row: [Logo] [Search] [Phone]
   ============================================================ */

.rx-topheader {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px;
    height: 92px;
    display: flex;
    align-items: center;
}

.rx-topheader .rx-header__subheader {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: static !important;
    float: none !important;
}

/* Logo a?� left */
.rx-topheader .rx-header__logo {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    text-align: left;
}

/* Search block a?� center */
.rx-topheader .cautare-ecran-mare {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: none !important;
    width: auto !important;
}

.rx-topheader .cautare-ecran-mare .rx-search {
    position: static !important;
    left: auto !important;
    top: auto !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}

/* Label inside topheader (text above search input) */
.rx-topheader .cautare-ecran-mare .rx-search label {
    display: block;
    font-size: 13px;
    color: #4a6a8a;
    font-weight: 400;
    white-space: nowrap;
    margin-bottom: 5px;
    float: none;
    clear: both;
}

/* Phone block a?� right */
.rx-topheader .rx-header__call {
    float: none !important;
    flex: 0 0 auto !important;
    text-align: right !important;
    width: auto !important;
}

/* Hide the empty   spacer span (was pushing phone down) */
.rx-topheader .rx-header__call-top {
    display: none !important;
}

/* Keep "Call Toll-free:" inline (overrides display:block at 1000px) */
.rx-topheader .rx-header__call-left {
    display: inline !important;
}

/* Hide the small mobile search inside topheader */
.rx-topheader .cautare-ecran-mic {
    display: none !important;
}


/* ============================================================
   3. HEADER a?� Phone block smooth font scaling
   Scales from 1200px down to 1024px
   ============================================================ */

/* "Call Toll-free:" label */
.rx-topheader .rx-header__call-left {
    font-size: clamp(11px, calc(11px + (14 - 11) * ((100vw - 1024px) / (1200 - 1024))), 14px);
}

/* Phone number: 1-888-333-93-63 */
.rx-topheader .rx-header__call-right {
    font-size: clamp(18px, calc(18px + (26 - 18) * ((100vw - 1024px) / (1200 - 1024))), 26px);
}

/* "(9:00 am - 5:00 pm ET)" */
.rx-topheader .rx-header__call-bottom,
.rx-topheader .rx-header__call-top {
    font-size: clamp(10px, calc(10px + (12 - 10) * ((100vw - 1024px) / (1200 - 1024))), 12px);
}


/* ============================================================
   4. HEADER a?� Responsive a��890px
   Stacked column: Logo a�� Search a�� Phone, all centered
   Height doubles to 184px
   ============================================================ */

@media (max-width: 900px) {

    .rx-topheader {
        height: 184px !important;
        min-height: 0 !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Stack: Logo -> Search -> Phone, no gap */
    .rx-topheader .rx-header__subheader {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 1. Logo -- centered */
    .rx-topheader .rx-header__logo {
        flex: 0 0 auto !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 4px !important;
    }
    .rx-topheader .rx-header__logo a { display: block !important; text-align: center !important; }
    .rx-topheader div#logo { margin: 0 auto !important; }

    /* 2. Search wrapper centered */
    .rx-topheader .cautare-ecran-mare {
        display: flex !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: flex-start !important;
        position: static !important;
        left: auto !important;
        margin-bottom: 4px !important;
    }
    .rx-topheader .cautare-ecran-mic { display: none !important; }

    /* rx-search box */
    .rx-topheader .cautare-ecran-mare .rx-search {
        display: block !important;
        text-align: center !important;
    }

    /* FORM: label on own row, inputs on second row */
    .rx-topheader .cautare-ecran-mare .rx-search form {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
    }

    /* Label: full width => own row */
    .rx-topheader .cautare-ecran-mare .rx-search form label {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 4px !important;
        float: none !important;
        flex: 1 1 100% !important;
        order: 0 !important;
    }

    /* Input text: wider, stretch available space */
    .rx-topheader .cautare-ecran-mare .rx-search input[type=text] {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
        order: 1 !important;
    }

    /* Submit button */
    .rx-topheader .cautare-ecran-mare .rx-search input[type=submit] {
        flex: 0 0 auto !important;
        width: auto !important;
        float: none !important;
        order: 2 !important;
    }

    /* Advanced search inline after button */
    .rx-topheader .cautare-ecran-mare .rx-adv-search {
        flex: 0 0 auto !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        padding-left: 8px !important;
        white-space: nowrap !important;
        order: 3 !important;
    }

    /* Kill pauza <p> margins before phone block */
    .rx-topheader .rx-header__call .pauza,
    .rx-topheader .rx-header__call .pauza2 {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Phone -- full size, centered, no extra margin */
    .rx-topheader .rx-header__call {
        flex: 0 0 auto !important;
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
    }
    .rx-topheader .rx-header__call-top {
        display: none !important;
    }
    .rx-topheader .rx-header__call-left {
        display: block !important;
    }
    .rx-topheader .rx-header__call-right {
        display: block !important;
    }
    .rx-topheader .rx-header__call-bottom {
        display: block !important;
    }
}


/* ============================================================
   5. NAVBAR a?� Blue bar redesign
   ============================================================ */

/* Hide old table-based nav lists a?� replaced by flex rx-navbar__list */
.rx-navbar .rx-header__nav-list {
    display: none !important;
}

.rx-navbar {
    width: 100%;
    background: linear-gradient(#0047ac 60%, #00207f 60%, #0047ac 80%);
    border-bottom: 2px solid #fff;
    margin-bottom: 5px;
}

.rx-navbar .rx-header__nav {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 42px;
    overflow: visible !important;
}

.rx-navbar__left,
.rx-navbar__right {
    display: flex;
    align-items: stretch;
}

.rx-navbar__list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rx-navbar__list li {
    position: relative;
}


/* ============================================================
   6. NAVBAR a?� Nav links (smooth font + padding scaling)
   From 1476px (max) down to 800px (min)
   font-size: 20px a�� 13px
   padding:   30px a�� 6px
   ============================================================ */

.rx-navbar__list li a {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 clamp(6px, calc(6px + (30 - 6) * ((100vw - 800px) / (1476 - 800))), 30px);
    color: #fff !important;
    font-size: clamp(13px, calc(13px + (20 - 13) * ((100vw - 800px) / (1476 - 800))), 20px);
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s;
    box-sizing: border-box;
    position: relative;
}

.rx-navbar__list li a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Divider line between nav items */
.rx-navbar__list li:not(:last-child) a:after {
    display: block;
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    right: 0;
    top: 0;
    background: linear-gradient(to bottom, transparent, #000d60, transparent);
}

/* Keep divider on the last item too (FAQ) */
.rx-navbar__last a:after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    width: 1px !important;
    height: 100% !important;
    right: 0 !important;
    top: 0 !important;
    background: linear-gradient(to bottom, transparent, #000d60, transparent) !important;
}

/* Left divider on first item (Sign In) */
.rx-navbar__first a:before {
    display: block;
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, transparent, #000d60, transparent);
}
.rx-navbar__first a { border-left: none !important; }

/* Right divider on Support (last item on right side) */
.rx-navbar__right .rx-navbar__list li:last-child a:after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    width: 1px !important;
    height: 100% !important;
    right: 0 !important;
    top: 0 !important;
    background: linear-gradient(to bottom, transparent, #000d60, transparent) !important;
}

/* Active nav item */
.rx-navbar__list li a._active {
    background: #3891ff !important;
    background: linear-gradient(#3891ff 60%, #2265ff 60%, #3485ff 80%) !important;
}


/* ============================================================
   7. NAVBAR a?� Support indicator (red/green rectangle)
   Displayed inline AFTER "is Offline" text
   ============================================================ */

.rx-navbar__list .rx-support {
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Hide old :before indicator */
.rx-navbar__list .rx-support:before {
    display: none;
    content: "";
}

/* New :after indicator a?� inline after text */
.rx-navbar__list .rx-support:after {
    display: inline-block;
    position: static;
    width: 13px;
    height: 21px;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.5);
    content: "";
}

/* Scale indicator with navbar at a��1476px */
@media (max-width: 1476px) {
    .rx-navbar__list .rx-support {
        gap: clamp(4px, calc(4px + (6 - 4) * ((100vw - 1050px) / (1476 - 1050))), 6px);
    }
    .rx-navbar__list .rx-support:after {
        width:  clamp(10px, calc(10px + (13 - 10) * ((100vw - 1050px) / (1476 - 1050))), 13px);
        height: clamp(16px, calc(16px + (21 - 16) * ((100vw - 1050px) / (1476 - 1050))), 21px);
    }
}

.rx-navbar__list .rx-support_offline:after { background: #d13900; }
.rx-navbar__list .rx-support_online:after  { background: #00ec54; }


/* ============================================================
   8. NAVBAR a?� Favourites button (0 a�?)
   Smooth scaling same range as nav links
   ============================================================ */

.rx-navbar__fav a {
    font-size: clamp(15px, calc(15px + (18 - 15) * ((100vw - 1050px) / (1476 - 1050))), 18px) !important;
    padding: 0 clamp(12px, calc(12px + (20 - 12) * ((100vw - 1050px) / (1476 - 1050))), 20px) !important;
    color: #fff !important;
    letter-spacing: 2px;
}

/* Left divider */
.rx-navbar__fav a:before {
    display: block;
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, transparent, #000d60, transparent);
}

/* No right divider */
.rx-navbar__fav a:after { display: none !important; }


/* ============================================================
   9. NAVBAR a?� Burger dropdown (a?� left side menu)
   ============================================================ */

.rx-navbar__burger { position: relative; }
.rx-navbar__burger a {
    border-left: none !important;
    font-size: 18px;
    padding: 0 20px !important;
}
.rx-navbar__burger a:before {
    display: block;
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, transparent, #000d60, transparent);
}

/* Dropdown panel */
.rx-burger-menu {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    width: 275px;
    background: #eef3f7;
    border: 1px solid #d0dce8;
    border-top: 0;
    z-index: 9999;
}
.rx-burger-menu.open { display: block; }

/* #burgerMenu a?� N???N??�???�N??�N�N?N? N�?�N??�?� JS */
#burgerMenu {
    background: #eef3f7;
    width: 275px;
    border: 1px solid #d0dce8;
    z-index: 9999;
}

#burgerMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#burgerMenu li {
    border-bottom: 1px solid #d8e5ef;
    min-height: 33px;
}

#burgerMenu li a {
    display: flex;
    align-items: center;
    min-height: 33px;
    font-size: 16px !important;
    padding: 0 12px 0 20px !important;
    font-weight: 700;
    color: #0e4299;
    text-decoration: none;
    line-height: 1.3;
    background: #eef3f7;
    white-space: nowrap;
    overflow: hidden;
}

#burgerMenu li a:hover {
    text-decoration: underline;
    background: #d8e9f0;
    color: #0e4299 !important;
}

#burgerMenu .burger-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #a4b5ce !important;
    padding: 8px 12px 6px 20px !important;
    background: #eef3f7;
    text-decoration: none !important;
    border-bottom: 1px solid #d0dce8;
}

#burgerMenu li ul {
    padding-left: 15px;
}

#burgerMenu li ul li a {
    font-weight: 400;
}

#burgerMenu li a span._active {
    color: #06f;
}

/* ============================================================
   10. NAVBAR a?� Main Menu button (a��800px)
   Replaces Drug Lista?�FAQ nav with a single button
   ============================================================ */

/* Hidden by default on desktop */
.rx-navbar__mainmenu-item {
    display: none;
}

.rx-navbar__mainmenu-item a {
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    padding: 0 16px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    background: transparent !important;
}
.rx-navbar__mainmenu-item a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

@media (max-width: 800px) {
    /* Keep navbar left visible */
    .rx-navbar__left { display: flex !important; }

    /* Hide Drug List a�� FAQ items */
    .rx-navbar__left .rx-navbar__list li:not(.rx-navbar__burger):not(.rx-navbar__mainmenu-item) {
        display: none !important;
    }

    /* Show Main Menu button */
    .rx-navbar__mainmenu-item {
        display: flex !important;
        align-items: stretch;
    }

    /* Hide Contact Us from right navbar -- moved to Main Menu dropdown */
    .rx-navbar__right .rx-navbar__contact-us {
        display: none !important;
    }
}


/* ============================================================
   11. NAVBAR a?� Main Menu dropdown overlay (a��800px)
   Full-screen overlay with blue panel listing all nav links
   ============================================================ */

.rx-mainmenu-dropdown {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.5);
}
.rx-mainmenu-dropdown.open { display: block; }

.rx-mainmenu-dropdown__inner {
    background: #0047ac;
    width: 100%;
    padding: 0;
}

.rx-mainmenu-dropdown__close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 16px;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    background: #00207f;
}

.rx-mainmenu-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rx-mainmenu-dropdown__list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.rx-mainmenu-dropdown__list li a {
    display: block;
    padding: 14px 24px;
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none !important;
}
.rx-mainmenu-dropdown__list li a:hover {
    background: rgba(255, 255, 255, 0.15);
}


/* ============================================================
   12. LAYOUT a?� Page blocks
   ============================================================ */

/* --- Block 1: Banner + Right column --- */
.page-block-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
}
.block1-left {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    float: none;
}
.block1-left > .rx-block { margin-bottom: 0; }
.block1-right {
    flex: 0 0 382px;
    width: 382px;
    min-width: 382px;
    max-width: 382px;
    float: none;
    margin: 0 0 0 5px;
    padding: 0;
    box-sizing: border-box;
}
.block1-right .rx-aside,
.block1-right .rx-aside_right {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}


@media (max-width: 1024px) {
    .page-block-1 { flex-wrap: wrap; }
    .block1-left  { flex: 0 0 100%; width: 100%; }
    .block1-right {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        order: 2;
    }
}

/* --- Block 2: Wiki (left) + Why customers (right) --- */
.page-block-2 {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 5px;
    width: 100%;
    margin: 0;
    padding: 0;
}
.block2-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.block2-right {
    flex: 0 0 40%;
    min-width: 382px;
    display: flex;
    flex-direction: column;
}
.block2-left > .rx-block,
.block2-right > .rx-block {
    flex: 1 1 auto;
    box-sizing: border-box;
}


@media (max-width: 1023px) {
    .page-block-2 { flex-direction: column; }
    .block2-right { flex: 0 0 auto; width: 100%; min-width: 0; }
}

/* --- Block 3: Full-width sections --- */
.page-block-3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
}

/* Unified block headings */
.rx-block h2,
.rx-block h3.rx-block-title,
h2.rx-catalog__section-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0e4299 !important;
    font-family: Roboto, sans-serif !important;
    margin: 0 0 12px !important;
    padding: 5px 0 0 !important;
    line-height: 21px !important;
}

/* Manufacturers block a�� padding-top ???�?? N? Pharmacy Online Wiki */
.rx-block:has(.rx-block_manufacturers) {
    padding-top: 0 !important;
}

/* ============================================================
   13. LAYOUT a?� Banner
   ============================================================ */

.bnr-slide {
    transition: filter 0.3s ease;
}
.bnr { margin-top: 0; }
.bnr-slide:hover {
    text-decoration: none;
    filter: brightness(1.08);
}


/* Banner proportional scaling when block1-left goes full-width at <=1024px */
@media (max-width: 1024px) {
    .bnr {
        height: calc(100vw * 440 / 1253);
    }
    .bnr-slides {
        height: calc(100vw * 430 / 1253);
    }
    .bnr-slide {
        height: calc(100vw * 430 / 1253);
        padding: calc(100vw * 48 / 1253) 10px calc(100vw * 31 / 1253) 19px;
    }
    .bnr-slide p {
        font-size: calc(100vw * 36 / 1253);
        line-height: calc(100vw * 52 / 1253);
    }
    .bnr-slide strong {
        font-size: calc(100vw * 114 / 1253);
    }
}

/* ============================================================
   14. CATALOG a?� Feature cards
   ============================================================ */

.feature-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    width: 100%;
    margin: 10px 0;
    box-sizing: border-box;
}

.feature-card {
    flex: 1 1 0;
    min-width: 0;
    background: #f6f6f6;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 20px;
    border: 2px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    container-name: fcard;
    position: relative;
}
.feature-card:hover { background: #ffffff; }
.feature-card:has(.feature-card__fav.is-fav) {
    border-color: #cc0000 !important;
    background: #ffffff;
}

.feature-card__header { position: relative; margin: 0; padding: 0; }

/* Favourite heart button */
.feature-card__fav {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 30px;
    color: rgba(0, 0, 0, 0.09);
    outline: none;
    z-index: 2;
}
.feature-card__fav.is-fav { color: #cc0000; }

.feature-card__product-link {
    display: block;
    text-decoration: none;
    margin-bottom: 6px;
}
.feature-card__brand  { display: block; color: #082658; font-size: 17px; font-weight: 700; line-height: 19px; }
.feature-card__generic { display: block; color: #082658; font-size: 17px; font-weight: 400; line-height: 19px; }

/* Image + price side by side */
.feature-card__media {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    margin: 3px 0 16px;
    flex: 0 0 auto;
    align-self: center;
}
.feature-card__img { flex: 0 0 auto; text-align: center; }
.feature-card__img img { max-width: 100%; display: inline-block; }

.feature-card__price {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.feature-card__price .rx-item__price_normal { font-size: 22px; font-weight: 700; color: #910505; }
.feature-card__price .rx-item__price_old    { font-size: 13px; color: #516786; text-decoration: line-through; }

/* Brand manufacturer logo */
.feature-card__price .rx-item__brand {
    margin-top: 7px;
}
.feature-card__price .rx-item__brand img {
    height: 37px;
    max-height: 37px;
    width: auto;
    display: block;
}

/* Buy button */
.feature-cards .feature-card__buy-btn,
.feature-cards .feature-card__buy-btn:link,
.feature-cards .feature-card__buy-btn:visited,
.feature-cards .feature-card__buy-btn:hover,
.feature-cards .feature-card__buy-btn:focus,
.feature-cards .feature-card__buy-btn:active {
    display: block;
    margin-top: auto;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px;
    background: linear-gradient(#8e1a10 60%, #5a0a05 60%, #8e1a10 80%) !important;
    white-space: nowrap;
    overflow: hidden;
}
.feature-card__buy-btn:hover { opacity: 0.88; }

/* Container query: stack image+price vertically when card < 230px */
@container fcard (max-width: 230px) {
    .feature-card__media { flex-direction: column; align-items: center; }
    .feature-card__price { align-items: center; text-align: center; }
}

/* Shrink button font when card very narrow */
@container fcard (max-width: 189px) {
    .feature-card__buy-btn { font-size: clamp(11px, 3.8cqi, 18px) !important; }
}

/* 4-column grid variant */
.feature-cards--4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    width: 100%;
    margin: 5px 0 10px;
    box-sizing: border-box;
}

@media (max-width: 800px) {
    .feature-cards--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .feature-cards--4col { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
    .feature-cards:not(.feature-cards--4col) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .feature-cards:not(.feature-cards--4col) { grid-template-columns: 1fr; }
}


/* ============================================================
   CATALOG HEADINGS -- left padding when viewport < 1680px
   ============================================================ */

@media (max-width: 1680px) {
    .block1-left h1,
    h2.rx-catalog__section-title {
        padding-left: 20px !important;
    }
}

/* Catalog headings -- fluid font-size from 800px down to 320px (20px -> 16px) */
@media (max-width: 800px) {
    .block1-left h1,
    h2.rx-catalog__section-title {
        font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 320px) / (800 - 320))), 20px) !important;
    }
}

/* ============================================================
   MOBILE <= 480px
   ============================================================ */

@media (max-width: 480px) {

    /* 1. Label above search -- smaller font */
    .rx-topheader .cautare-ecran-mare .rx-search form label {
        font-size: 11px !important;
    }

    /* 2. Advanced search -- own line below input row */
    .rx-topheader .cautare-ecran-mare .rx-adv-search {
        flex: 1 1 100% !important;
        order: 4 !important;
        justify-content: center !important;
        padding-left: 0 !important;
        margin-top: 2px !important;
    }

    /* 3. Phone in one line */
    .rx-topheader .rx-header__call {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: baseline !important;
        gap: 4px !important;
    }
    .rx-topheader .rx-header__call-left {
        display: inline !important;
        flex: 0 0 auto !important;
    }
    .rx-topheader .rx-header__call-right {
        display: inline !important;
        flex: 0 0 auto !important;
    }
    .rx-topheader .rx-header__call-bottom {
        display: block !important;
        flex: 1 1 100% !important;
        text-align: center !important;
    }

    /* 4. Navbar -- reduce padding on main menu and fav only, burger keeps original size */
    .rx-navbar__mainmenu-item a {
        padding: 0 8px !important;
    }
    .rx-navbar__fav a {
        padding: 0 8px !important;
        font-size: 14px !important;
    }

    /* 5+6. Products -- 2 per row for both blocks */
    .feature-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .feature-cards--4col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


@media (max-width: 480px) {
    .rx-navbar {
        margin-bottom: 0 !important;
    }
    .copyright-bar {
        text-align: center !important;
        padding: 0 16px;
    }
    .copyright-bar-wrap {
        height: auto !important;
        padding: 10px 0;
    }
}

/* ============================================================
   15. FOOTER
   ============================================================ */

/* Full-width grey background */
.footer-bg-wrap {
    background: #e3e3e3;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
}
.footer-bg-wrap .rx-footer {
    max-width: 1680px;
    margin: 0 auto;
    box-sizing: border-box;
    background: transparent !important;
    border-color: transparent !important;
    padding: 0 !important;
}

/* Allow full-width bg to escape container */
.rx-container,
.rx-main,
article.rx-content { overflow: visible !important; }

/* 3-column footer layout */
.rx-footer__cols {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 16px;
    padding-bottom: 10px;
}

/* Col 1: nav links */
.rx-footer__col--nav {
    flex: 0 0 268px;
    width: 268px;
    min-width: 268px;
}
.rx-footer__nav-vertical { list-style: none; margin: 0; padding: 0; }
.rx-footer__nav-vertical li { margin-bottom: 7px; }
.rx-footer__nav-vertical li a { font-size: 13px; color: #324565; text-decoration: none; }
.rx-footer__nav-vertical li a:hover { color: #0e4299; text-decoration: underline; }

/* Col 2: shipping & payments */
.rx-footer__col--shipping {
    flex: 0 0 348px;
    width: 348px;
    min-width: 348px;
}
.rx-footer__col--shipping .footer-title {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    color: #324565;
    margin-bottom: 5px;
}
.rx-footer__col--shipping .footer-images {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.rx-footer__col--shipping .footer-note { font-size: 12px; color: #516786; }

/* Col 3: copyright */
.rx-footer__col--copyright {
    flex: 1 1 auto;
    min-width: 200px;
    align-self: flex-start;
}
.rx-footer__col--copyright .copyright { font-size: 13px; color: #324565; line-height: 1.6; }
.footer-dmca { margin-top: 10px; }

/* Copyright bar */
.copyright-bar-wrap {
    background: #d0d0d0;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.copyright-bar { font-size: 13px; font-weight: 300; color: #606060; }

/* Footer responsive */
@media (max-width: 1680px) {
    .rx-footer__cols {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 900px) {
    .rx-footer__cols { flex-wrap: wrap; gap: 14px; }
    .rx-footer__col--nav,
    .rx-footer__col--copyright,
    .rx-footer__col--shipping { flex: 0 0 100%; }
}
@media (max-width: 480px) {
    .rx-footer__col--nav,
    .rx-footer__col--shipping { flex: 0 0 100%; }
}