/* =========================================
   Matbura / TTYOL - Custom Project Styles
   -----------------------------------------
   Manually maintained layout and UI customizations
   for the Emporium theme.

   This file is NOT generated by the Emporium theme
   settings admin panel and will NOT be overwritten
   when the logo, colors, or other theme settings are
   saved (that only regenerates theme.custom-1.css).

   Loaded after the base Emporium CSS files and after
   theme.custom-1.css (see Head.cshtml) so these rules
   can override theme defaults when necessary.

   Works for both LTR and RTL (uses CSS logical
   properties - *-inline-start/end - plus explicit
   html[dir="rtl"] overrides where needed).
   ========================================= */

/* =========================================
   TTYOL - Category Cards
   Homepage and Subcategory Pages
   ========================================= */

/* Grid layout */
.home-page-category-grid .item-grid,
.sub-category-grid .item-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Reset legacy float layout */
.home-page-category-grid .item-box,
.home-page-category-grid .item-box:nth-child(n),
.sub-category-grid .item-box,
.sub-category-grid .item-box:nth-child(n) {
    float: none;
    clear: none;
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* Equal-height category cards */
.home-page-category-grid .category-item,
.sub-category-grid .sub-category-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #f6f6f6;
}

/* Category image container */
.home-page-category-grid .item-box .picture,
.sub-category-grid .item-box .picture {
    flex: 0 0 auto;
    margin: 0;
    overflow: hidden;
    background-color: #f6f6f6;
}

/* Category image link */
.home-page-category-grid .item-box .picture a,
.sub-category-grid .item-box .picture a {
    position: relative;
    display: block;
}

/* Category image aspect ratio */
.home-page-category-grid .item-box .picture a::before,
.sub-category-grid .item-box .picture a::before {
    padding-top: 70%;
}

/* Category image */
.home-page-category-grid .item-box .picture img,
.sub-category-grid .item-box .picture img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* TTYOL - Hide subcategory images on category/shop pages only.
   Scoped to .sub-category-grid alone (not the combined selector above),
   so the 8 main-category images on the homepage (.home-page-category-grid)
   and product images (unrelated markup) are left untouched. The
   subcategory name/link in .title below is a sibling element and stays
   visible; layout/RTL/LTR rules above are unaffected. */
.sub-category-grid .item-box .picture {
    display: none;
}

/* Category title container */
.home-page-category-grid .item-box .title,
.sub-category-grid .item-box .title {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;

    min-height: 56px;
    margin: 0;
    padding: 0 6px;
    text-align: center;
}

/* Category title text */
.home-page-category-grid .item-box .title a,
.sub-category-grid .item-box .title a {
    display: -webkit-box;
    width: 100%;
    padding: 9px 4px;

    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #444;

    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    transition: color 0.2s ease;
}

/* Tablet layout */
@media all and (min-width: 769px) {
    .home-page-category-grid .item-grid,
    .sub-category-grid .item-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Desktop layout */
@media all and (min-width: 1200px) {
    .home-page-category-grid .item-grid,
    .sub-category-grid .item-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 16px;
    }

    .home-page-category-grid .item-box .title,
    .sub-category-grid .item-box .title {
        min-height: 54px;
    }

    .home-page-category-grid .item-box .title a,
    .sub-category-grid .item-box .title a {
        padding: 8px 3px;
        font-size: 13px;
    }
}
/* =========================================
   TTYOL - Soft Category Tree Navigation
   ========================================= */

.block-category-navigation .list,
.block-category-navigation .sublist {
    list-style: none;
}

.block-category-navigation .list li {
    position: relative;
}

/* Category links */
.block-category-navigation .list li > a {
    position: relative;
    display: block;
    width: 100%;
    padding: 7px 8px;
    padding-inline-start: 24px;
    border-radius: 6px;

    color: #777;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding 0.2s ease;
}

/* Nested category levels */
.block-category-navigation .sublist {
    position: relative;
    margin: 0;
    margin-inline-start: 10px;
    padding: 0;
    padding-inline-start: 14px;
    border-inline-start: 1px solid #e7e9ec;
}

/* Collapsed chevrons for levels 1-3 */
.block-category-navigation .list > li > a::before,
.block-category-navigation .list > li > .sublist > li > a::before,
.block-category-navigation
    .list
    > li
    > .sublist
    > li
    > .sublist
    > li
    > a::before {
    content: "";
    position: absolute;
    inset-inline-start: 7px;
    top: 50%;

    width: 6px;
    height: 6px;
    border-right: 1.5px solid #a5abb3;
    border-bottom: 1.5px solid #a5abb3;

    transform: translateY(-65%) rotate(-45deg);
    transform-origin: center;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

/* RTL collapsed chevrons */
html[dir="rtl"]
    .block-category-navigation
    .list
    > li
    > a::before,
html[dir="rtl"]
    .block-category-navigation
    .list
    > li
    > .sublist
    > li
    > a::before,
html[dir="rtl"]
    .block-category-navigation
    .list
    > li
    > .sublist
    > li
    > .sublist
    > li
    > a::before {
    transform: translateY(-65%) rotate(135deg);
}

/* Expanded branch chevron */
.block-category-navigation .list li:has(> .sublist) > a::before,
html[dir="rtl"]
    .block-category-navigation
    .list
    li:has(> .sublist)
    > a::before {
    transform: translateY(-75%) rotate(45deg);
    border-color: #dc0051;
}

/* Active category path */
.block-category-navigation .list li.active > a {
    color: #444;
    font-weight: 600;
}

/* Soft hover state */
.block-category-navigation .list li > a:hover {
    padding-inline-start: 27px;
    background-color: #f5f6f7;
    color: #444;
}

/* Active and hover chevrons */
.block-category-navigation .list li.active > a::before,
.block-category-navigation .list li > a:hover::before {
    border-color: #dc0051;
}

/* Final level items do not have chevrons */
.block-category-navigation
    .list
    > li
    > .sublist
    > li
    > .sublist
    > li
    > .sublist
    > li
    > a {
    padding-inline-start: 10px;
}

.block-category-navigation
    .list
    > li
    > .sublist
    > li
    > .sublist
    > li
    > .sublist
    > li
    > a::before {
    content: none;
}
/* =========================================
   TTYOL - 1440px Desktop Content Width
   ========================================= */

@media all and (min-width: 1281px) {
    .header-selectors-wrapper,
    .header-lower,
    .header-menu,
    .slider-wrapper,
    .master-wrapper-content {
        width: 88%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .header-menu,
    .master-wrapper-content {
        padding-left: 0;
        padding-right: 0;
    }
}
/* =========================================
   TTYOL - Footer Logo Size
   ========================================= */

.footer-logo img {
    display: block;
    width: 160px;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
/* =========================================
   TTYOL - Registration Success Page
   ========================================= */

.registration-result-page {
    box-sizing: border-box;
    max-width: 680px;
    margin: 60px auto 90px;
    padding: 46px 48px 50px;

    border: 1px solid #eceef1;
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow: 0 14px 40px rgba(24, 32, 44, 0.08);

    text-align: center;
}

/* Success icon */
.registration-result-page .page-title::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;
    margin: 0 auto 24px;

    border-radius: 50%;
    background-color: #dc0051;
    box-shadow: 0 0 0 10px rgba(220, 0, 81, 0.08);

    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

/* Page title */
.registration-result-page .page-title {
    margin: 0;
    padding: 0;
    border: 0;
}

.registration-result-page .page-title h1 {
    margin: 0 0 18px;
    padding: 0;

    color: #30343b;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

/* Result message */
.registration-result-page .page-body {
    margin: 0;
    padding: 0;
}

.registration-result-page .result {
    max-width: 520px;
    margin: 0 auto;

    color: #737982;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
}

/* Continue button container */
.registration-result-page .buttons {
    margin: 30px 0 0;
}

/* Continue button */
.registration-result-page .register-continue-button {
    min-width: 220px;
    min-height: 48px;
    padding: 12px 28px;

    border: 1px solid #dc0051;
    border-radius: 8px;
    background-color: #dc0051;

    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;

    box-shadow: 0 8px 18px rgba(220, 0, 81, 0.2);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.registration-result-page .register-continue-button:hover {
    border-color: #bd0046;
    background-color: #bd0046;
    box-shadow: 0 10px 22px rgba(220, 0, 81, 0.26);
    transform: translateY(-1px);
}

/* Mobile layout */
@media all and (max-width: 768px) {
    .registration-result-page {
        margin: 30px 16px 60px;
        padding: 36px 22px 40px;
        border-radius: 12px;
    }

    .registration-result-page .page-title::before {
        width: 58px;
        height: 58px;
        margin-bottom: 20px;
        font-size: 30px;
        box-shadow: 0 0 0 8px rgba(220, 0, 81, 0.08);
    }

    .registration-result-page .page-title h1 {
        font-size: 23px;
    }

    .registration-result-page .result {
        font-size: 14px;
        line-height: 1.7;
    }

    .registration-result-page .register-continue-button {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================
   TTYOL - Account Activation Success Card
   ========================================= */

.page.account-activation-page {
    position: relative;
    box-sizing: border-box;
    max-width: 680px;
    margin: 70px auto 90px !important;
    padding: 0 !important;
    overflow: hidden;

    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff 0%, #fdfdfd 100%);
    box-shadow: 0 18px 50px rgba(28, 35, 45, 0.09);

    text-align: center;
}

/* Brand accent */
.page.account-activation-page::before {
    content: "";
    display: block;
    width: 100%;
    height: 5px;

}

/* Card header */
.account-activation-page .page-title {
    margin: 0 !important;
    padding: 42px 30px 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Success icon */
.account-activation-page .page-title::before {
    content: "\2713";
    display: flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background-color: #ecfdf3;
    box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.07);

    color: #16a34a;
    font-family: Arial, sans-serif !important;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.account-activation-page .page-title h1 {
    margin: 0;
    color: #30343a;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
}

/* Card content */
.account-activation-page .page-body {
    margin: 0 !important;
    padding: 18px 40px 44px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
}

.account-activation-page .result {
    margin: 0 0 28px;
    color: #6c727c;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

/* Continue button */
.account-activation-page .buttons {
    margin: 0 !important;
    text-align: center;
}

.account-activation-page .button-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 180px;
    min-height: 46px;
    padding: 0 28px;
    border: 0;
    border-radius: 8px;

    background: linear-gradient(135deg, #e50055 0%, #c9004a 100%);
    box-shadow: 0 9px 22px rgba(220, 0, 81, 0.22);

    color: #ffffff !important;
    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 46px;
    text-decoration: none;
    text-transform: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.account-activation-page .button-1:hover {
    color: #ffffff !important;
    box-shadow: 0 13px 28px rgba(220, 0, 81, 0.3);
    transform: translateY(-2px);
}

/* Mobile layout */
@media all and (max-width: 768px) {
    .page.account-activation-page {
        width: auto;
        margin: 35px 15px 60px !important;
    }

    .account-activation-page .page-title {
        padding: 34px 20px 0 !important;
    }

    .account-activation-page .page-title h1 {
        font-size: 24px;
    }

    .account-activation-page .page-body {
        padding: 16px 22px 36px !important;
    }

    .account-activation-page .button-1 {
        width: 100%;
        box-sizing: border-box;
    }
}
/* TTYOL - Login and registration menu */
@media all and (min-width: 1025px) {
    .header-links .login-register-menu {
        width: 280px;
        box-sizing: border-box;
    }

    .header-links .login-register-menu .header-form-holder a {
        white-space: nowrap;
    }
}
/* =========================================
   TTYOL - Vendor Verification Login
   ========================================= */

.login-page.vendor-login-page .customer-blocks.vendor-login-only {
    display: block;
}

.login-page.vendor-login-page .returning-wrapper {
    float: none;
    width: 100%;
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

@media all and (max-width: 768px) {
    .login-page.vendor-login-page .returning-wrapper {
        width: 100%;
        max-width: none;
    }
}
/* =========================================
   TTYOL - Vendor Application Success Card
   ========================================= */

.page.apply-vendor-page:has(.page-body > .result) {
    position: relative;
    box-sizing: border-box;
    max-width: 700px;
    margin: 70px auto 90px !important;
    padding: 0 !important;
    overflow: hidden;

    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff 0%, #fdfdfd 100%);
    box-shadow: 0 18px 50px rgba(28, 35, 45, 0.09);

    text-align: center;
}

/* Success accent */
.page.apply-vendor-page:has(.page-body > .result)::before {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}

/* Card header */
.page.apply-vendor-page:has(.page-body > .result) .page-title {
    margin: 0 !important;
    padding: 42px 30px 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Success icon */
.page.apply-vendor-page:has(.page-body > .result) .page-title::before {
    content: "\2713";
    display: flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background-color: #ecfdf3;
    box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.07);

    color: #16a34a;
    font-family: Arial, sans-serif !important;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.page.apply-vendor-page:has(.page-body > .result) .page-title h1 {
    margin: 0;
    color: #30343a;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
}

/* Success message */
.page.apply-vendor-page:has(.page-body > .result) .page-body {
    margin: 0 !important;
    padding: 18px 40px 46px !important;
    border: 0 !important;
    background: transparent !important;
}

.page.apply-vendor-page:has(.page-body > .result) .result {
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.7;
}

/* Mobile layout */
@media all and (max-width: 768px) {
    .page.apply-vendor-page:has(.page-body > .result) {
        width: auto;
        margin: 35px 15px 60px !important;
    }

    .page.apply-vendor-page:has(.page-body > .result) .page-title {
        padding: 34px 20px 0 !important;
    }

    .page.apply-vendor-page:has(.page-body > .result) .page-title h1 {
        font-size: 24px;
    }

    .page.apply-vendor-page:has(.page-body > .result) .page-body {
        padding: 16px 22px 38px !important;
    }
}
/* =========================================
   TTYOL - Sidebar Block Title / Filter Toggle Colors
   ========================================= */

.block .title strong {
    font-weight: 700;
    display: block;
}

.filter-block .toggleControl {
    position: relative;
    display: block;
    padding: 14px 35px 14px 50px;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    background: #17365d;
    text-overflow: ellipsis;
    color: azure;
}

.block .title {
    position: relative;
    padding: 14px 20px 14px 50px;
    font-size: 17px;
    color: #ffffff;
    background-color: #f47b20;
    cursor: pointer;
    text-align: left;
}
/* =========================================
   TTYOL - RFQ Promo Banners (Anywhere Sliders)
   -----------------------------------------
   Two Anywhere Sliders instances (Custom Class = matbura-rfq-info /
   matbura-rfq-action) are rendered by the SevenSpikes AnywhereSliders
   plugin's own view (Views/Components/AnywhereSliders/AnywhereSliders.cshtml,
   not editable here) as bare sibling <div class="slider-wrapper CUSTOMCLASS">
   elements with no wrapper of their own.

   UPDATED: they previously shared the global "content_before" zone (used on
   every page, before the entire page body), which had no safe common parent
   to flex/grid - only a float+clear hack on the whole-page
   .master-wrapper-content/.master-column-wrapper. They are now configured
   (Admin > Anywhere Sliders > Widgets tab) to render in the standard
   "home_page_before_news" zone instead, which Home/Index.cshtml wraps in a
   dedicated <div class="matbura-rfq-promo-row"> right after the homepage
   category grid. That div is these two banners' own exclusive parent, so a
   plain flex layout can be used directly - same visual result as before
   (50/50 split, ~18px gap, top-aligned, 768px stack) via a simpler,
   non-hacky mechanism now that a real common parent exists.
   Selectors stay scoped to the two custom classes (not ".matbura-rfq-promo-row
   > *"), so even if this zone is ever also used by another widget, that
   widget's own layout is untouched.
   No JS is involved: both sliders have exactly one slide, so the plugin
   marks them "slickless" and its slick-slider JS explicitly skips
   initializing (and therefore never applies inline widths to) them.
   The main homepage slider (separate "home_page_main_slider" zone, no
   custom class) and any other Anywhere Slider instance are unaffected. */
.matbura-rfq-promo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
}

.matbura-rfq-promo-row .slider-wrapper.matbura-rfq-info,
.matbura-rfq-promo-row .slider-wrapper.matbura-rfq-action {
    box-sizing: border-box;
    flex: 1 1 calc(50% - 9px);
    min-width: 0;
}

@media all and (max-width: 768px) {
    .matbura-rfq-promo-row {
        gap: 16px;
    }

    .matbura-rfq-promo-row .slider-wrapper.matbura-rfq-info,
    .matbura-rfq-promo-row .slider-wrapper.matbura-rfq-action {
        flex: 1 1 100%;
    }
}