/**
 * Campaign layout for the landing (Black Friday 2026, client request of 05.11.2026).
 * Loaded after thfsales2.css and after the inline settings styles (style.tpl), so it overrides both.
 */

/* ---------- Font: Inter everywhere (icons keep Font Awesome) ---------- */
body.flash-sales,
body.flash-sales *:not(i):not(.fa) {
    font-family: 'Inter', sans-serif !important;
}

/* ---------- Banner: full width up to 1920px, the section has the banner's own dark color ---------- */
body.flash-sales .top-banner {
    background: #0E0F0E;
}
body.flash-sales .top-banner picture,
body.flash-sales .top-banner img {
    display: block;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

body.flash-sales section#main-section {
    padding-top: 20px;
    padding-bottom: 60px;
}
body.flash-sales .main-tabs-content {
    top: 0;
}

/* ---------- "Catre site" (top and bottom): a plain link, not a button ---------- */
body.flash-sales .landing-top {
    display: flex;
    align-items: center;
    min-height: 40px;
}
body.flash-sales .landing-back {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
body.flash-sales .landing-back:hover {
    color: #9CD967;
    text-decoration: none;
}
body.flash-sales .landing-bottom {
    padding: 24px 0 0;
}

/* ---------- Sticky bar: categories + cart ---------- */
body.flash-sales .landing-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
}
body.flash-sales .landing-nav.is-stuck {
    background: #0E0F0E;
    border-bottom-color: #1EAF93;
}
body.flash-sales .landing-nav > .main-menu,
body.flash-sales .landing-nav > .mobile-picker {
    flex: 1 1 auto;
    min-width: 0;
}

/* cart: on the "Catre site" row while the bar is in place, at the right of the bar once it is stuck */
body.flash-sales .landing-nav .landing-cart {
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 2px;
    width: auto;
    background: #1EAF93;
    border-radius: 8px;
}
body.flash-sales .landing-nav.is-stuck .landing-cart {
    position: static;
    margin: 0;
    flex: none;
}
/* desktop: the categories keep the same width whether the cart is above them or beside them,
   so the bar does not change height (and the page does not jump) when it gets stuck */
@media (min-width: 1200px) {
    body.flash-sales .landing-nav {
        padding-right: 125px;
    }
    body.flash-sales .landing-nav.is-stuck {
        padding-right: 0;
    }
    body.flash-sales .landing-nav .landing-cart {
        min-width: 113px;
        text-align: center;
    }
}
body.flash-sales .landing-cart a.cart-icon {
    display: block;
    padding: 8px 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
body.flash-sales .landing-cart:hover {
    background: #9CD967;
}
body.flash-sales .landing-cart:hover a.cart-icon {
    color: #0E0F0E;
}

/* category menu: rounded buttons with a thin outline, left aligned */
body.flash-sales .landing-nav .main-menu {
    min-height: 0;
}
body.flash-sales .landing-nav .desktop-menu .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    border: 0;
}
body.flash-sales .landing-nav .desktop-menu .nav-tabs .nav-item {
    margin: 0;
    background: transparent;
    border: 0;
}
body.flash-sales .landing-nav .desktop-menu .nav-tabs .nav-link {
    height: auto;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
body.flash-sales .landing-nav .desktop-menu .nav-tabs .nav-link:not(.active):hover {
    background: transparent;
    border-color: #9CD967;
    color: #9CD967;
}
body.flash-sales .landing-nav .desktop-menu .nav-tabs .nav-link.active {
    background: #1EAF93;
    border-color: #1EAF93;
    color: #fff;
}

/* ---------- Category title (white, left, green line) ---------- */
body.flash-sales .landing-cat-title {
    margin: 22px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #1EAF93;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
/* the colored subcategory band is replaced by the active subcategory button */
body.flash-sales .sub-title {
    display: none;
}

/* ---------- Subcategories: a row of white buttons above the products ---------- */
body.flash-sales .main-tab .sub-categories {
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
}
body.flash-sales .main-tab .sub-categories .nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
body.flash-sales .main-tab .sub-categories .nav-item a.nav-link {
    display: inline-block;
    padding: 6px 12px !important; /* custom.css forces padding: 5px 0 !important on these links */
    border-radius: 6px;
    background: #fff;
    color: #0E0F0E;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}
body.flash-sales .main-tab .sub-categories .nav-item a.nav-link:hover {
    background: #eaf6e0;
}
body.flash-sales .main-tab .sub-categories .nav-item a.nav-link.active {
    background: #9CD967;
    color: #0E0F0E;
    font-weight: 600;
}

/* ---------- Product list: 5 per row on desktop ---------- */
body.flash-sales .products {
    min-height: 300px;
    padding: 0;
}
body.flash-sales .main-tabs-content .row {
    margin-left: -8px;
    margin-right: -8px;
}
body.flash-sales .sub-category-products {
    margin-bottom: 0;
}
body.flash-sales .main-tabs-content .item {
    margin-bottom: 16px;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
@media (min-width: 1200px) {
    body.flash-sales .main-tabs-content .item {
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    body.flash-sales .main-tabs-content .item {
        flex: 0 0 25%;
        max-width: 25%;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    body.flash-sales .main-tabs-content .item {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}
body.flash-sales .next_page {
    margin-bottom: 8px !important;
}

/* ---------- Product card ---------- */
body.flash-sales article.product_block,
body.flash-sales article.product_block:hover {
    height: 100%;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    text-align: left;
}
body.flash-sales article.product_block .product_box {
    display: flex;
    flex-direction: column;
    height: 100%;
}
body.flash-sales article.product_block .top-box {
    padding: 42px 12px 6px;
}

/* both labels: same shape and size; discount top left, stock top right */
body.flash-sales article.product_block .product-discount {
    position: absolute;
    top: 10px;
    left: 10px;
    width: auto;
    padding: 0 !important;
}
body.flash-sales article.product_block .product-discount .discount-amount,
body.flash-sales article.product_block .in-stock {
    padding: 5px 8px !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
body.flash-sales article.product_block .product-discount .discount-amount {
    background: #0E0F0E;
    color: #DFED4D;
}
body.flash-sales article.product_block .in-stock {
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto;
    margin: 0;
    background: #1EAF93;
    color: #fff;
}

body.flash-sales article.product_block .bottom-box {
    flex: 1 1 auto;
    display: flex;
    padding: 4px 12px 12px !important;
}
body.flash-sales article.product_block .product_description {
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* name: at most 2 full lines, ending in "..." */
body.flash-sales article.product_block .product-name {
    height: auto;
    min-height: 2.8em;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}
body.flash-sales article.product_block .product-name .product_title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: #0E0F0E;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}
/* old price (crossed) above the new one; same height whether or not there is an old price */
body.flash-sales article.product_block .product_prices {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 44px;
    margin-top: auto;
    text-align: left;
}
body.flash-sales article.product_block .product_prices .regular_price {
    font-size: 13px;
    line-height: 1.2;
}
body.flash-sales article.product_block .product_prices .price.st_discounted_price {
    line-height: 1.2;
}
body.flash-sales article.product_block .product_cart {
    margin-top: 10px !important;
}
/* "Adauga in cos" on mobile too (the short "Adauga" had no diacritics) */
body.flash-sales article.product_block .product_button .desktop-add-cart {
    display: inline !important;
}
body.flash-sales article.product_block .product_button .mobile-add-cart {
    display: none !important;
}
body.flash-sales article.product_block .product_button {
    width: 100%;
    padding: 9px 8px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    visibility: visible;
}

/* ---------- Mobile category picker ---------- */
body.flash-sales .mobile-picker {
    position: relative;
}
body.flash-sales .mobile-picker__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 6px 6px 6px 12px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}
body.flash-sales .mobile-picker__toggle:focus {
    outline: none;
}
body.flash-sales .mobile-picker.is-open .mobile-picker__toggle {
    border-radius: 8px 8px 0 0;
}
body.flash-sales .mobile-picker__current {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #0E0F0E;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body.flash-sales .mobile-picker__icon {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #9CD967;
    color: #0E0F0E;
    text-align: center;
}
/* three bars drawn in CSS (the font glyph is too small); an X while the list is open */
body.flash-sales .mobile-picker__icon::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 9px;
    width: 14px;
    height: 2px;
    background: #0E0F0E;
    box-shadow: 0 -5px 0 #0E0F0E, 0 5px 0 #0E0F0E;
}
body.flash-sales .mobile-picker.is-open .mobile-picker__icon::before {
    content: '\2715';
    position: static;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    font-size: 15px;
    line-height: 32px;
}
body.flash-sales .mobile-picker__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 70vh;
    overflow-y: auto;
    border-top: 1px solid #e3e3e3;
    border-radius: 0 0 8px 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
body.flash-sales .mobile-picker.is-open .mobile-picker__list {
    display: block;
}
body.flash-sales .mobile-picker__group {
    padding: 9px 12px 6px;
    background: #f2f3f2;
    color: #6b706c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.flash-sales .mobile-picker__item {
    position: relative;
    display: block;
    width: 100%;
    padding: 11px 36px 11px 16px;
    border: 0;
    border-bottom: 1px solid #eee;
    background: #fff;
    color: #0E0F0E;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
body.flash-sales .mobile-picker__item.is-current {
    background: #eef8ee;
    color: #1EAF93;
    font-weight: 700;
}
body.flash-sales .mobile-picker__item.is-current::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
}

/* ---------- Below 1200px the picker box stands for the title and the subcategory row ---------- */
@media (max-width: 1199px) {
    body.flash-sales .landing-cat-title,
    body.flash-sales .main-tab .sub-categories {
        display: none;
    }
    body.flash-sales .main-tabs-content {
        margin-top: 8px;
    }
}

/* ---------- Mobile: compact ---------- */
@media (max-width: 767px) {
    body.flash-sales section#main-section {
        padding-top: 6px;
        padding-bottom: 24px;
    }
    body.flash-sales .landing-column {
        padding-left: 10px;
        padding-right: 10px;
    }
    body.flash-sales .landing-top {
        min-height: 38px;
    }
    body.flash-sales .landing-nav {
        gap: 8px;
        padding: 6px 0;
    }
    body.flash-sales .landing-cart a.cart-icon {
        padding: 7px 12px;
        font-size: 14px;
    }
    body.flash-sales .main-tabs-content {
        margin-top: 6px;
    }
    body.flash-sales .main-tabs-content .row {
        margin-left: -4px;
        margin-right: -4px;
    }
    body.flash-sales .main-tabs-content .item {
        margin-bottom: 8px;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    body.flash-sales article.product_block .top-box {
        padding: 38px 8px 4px;
    }
    body.flash-sales article.product_block .product-discount {
        top: 8px;
        left: 8px;
    }
    body.flash-sales article.product_block .in-stock {
        top: 8px;
        right: 8px;
    }
    body.flash-sales article.product_block .product-discount .discount-amount,
    body.flash-sales article.product_block .in-stock {
        padding: 4px 6px !important;
        font-size: 12px;
    }
    body.flash-sales article.product_block .bottom-box {
        padding: 2px 8px 8px !important;
    }
    body.flash-sales article.product_block .product-name,
    body.flash-sales article.product_block .product-name .product_title {
        font-size: 13px;
    }
    body.flash-sales article.product_block .product_button {
        padding: 8px 6px;
        font-size: 14px;
    }
    body.flash-sales .landing-bottom {
        padding-top: 12px;
    }
    body.flash-sales .footer {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}