/* =========================================================================
   ChemiBazar – new design: site-level additions on top of style.css
   (style.css is the compiled reference stylesheet from ./ui; this file adds
   application-specific components, states and the restyling of legacy
   pages so the whole website shares one visual system).
   ========================================================================= */

:root {
    --cb-orange: #ff4000;
    --cb-orange-dark: #b83119;
    --cb-navy: #293b5f;
    --cb-navy-dark: #283a5f;
    --cb-text: #323b5d;
    --cb-muted: #6b7280;
    --cb-border: #e9e9e9;
    --cb-border-light: #eef0f4;
    --cb-shadow: 0px 0px 39.6px 0.4px rgba(0, 0, 0, 0.07);
    --cb-radius: 16px;
}

/* ------------------------------------------------------------------ base */
html { scroll-behavior: smooth; }
body { background: #fff; min-height: 100vh; display: flex; flex-direction: column; }
main.mainWrapper { flex: 1 0 auto; position: relative; background: #fff; }
.hidden { display: none !important; }
.ltr { direction: ltr; }
.rtl { direction: rtl; }
.text-danger { color: var(--cb-orange); }
.text-secondary { color: var(--cb-muted); }
.text-end { text-align: left; }
.text-start { text-align: right; }
.fw-bold { font-weight: 700; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.w-100 { width: 100% !important; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 16px !important; } .mt-4 { margin-top: 24px !important; } .mt-5 { margin-top: 48px !important; }
.mb-1 { margin-bottom: 4px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 16px !important; } .mb-4 { margin-bottom: 24px !important; } .mb-5 { margin-bottom: 48px !important; }
.my-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
.p-2 { padding: 8px !important; } .p-3 { padding: 16px !important; }
.fs-5 { font-size: 18px; } .fs-6 { font-size: 14px; }
.mobile-only { display: none !important; }
@media only screen and (max-width: 840px) {
    .d-md-block { display: none !important; }
    .mobile-only { display: block !important; }
}
@media only screen and (min-width: 840.98px) {
    .d-md-none { display: none !important; }
}
img.lazyload:not([src]) { visibility: hidden; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid rgba(255, 64, 0, 0.45);
    outline-offset: 2px;
}
.btn.btn--icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; line-height: 1; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.btn--bg:disabled:hover { background: var(--cb-orange); }
.btn.btn--border.btn--sm, .btn.btn--bg.btn--sm { padding: 8px 16px; font-size: 14px; }

/* ------------------------------------------------------------------ header */
.navigationWrapper { transition: box-shadow .3s ease-out; }
.navigationWrapper.freez { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); }
.navigationWrapper__rightSide img { max-width: 100%; height: auto; }
.cartButton { position: relative; display: inline-flex; line-height: 0; }
.cartButton svg { display: block; }
.cartNumber { position: absolute; top: -8px; left: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--cb-orange); color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-weight: 700; direction: ltr; }
.cartNumber:empty { display: none; }
.mobileBottomNav { display: none; }
.authMobileNavigation { display: none; }
.navigationWrapper__leftSide--buttonWrapper a:first-child:hover ~ .mask { right: 6px; }

/* header search auto-complete */
#_HeaderSearch form { position: relative; width: 600px; max-width: 100%; margin: auto; }
#_HeaderSearch .form-group { width: 100%; }
#_HeaderSearch .form-group .form-control:focus { border-color: transparent; }
#_HeaderSearch .form-group select { cursor: pointer; color: var(--cb-text); }
#_HeaderSearch .textbox.loading { background-image: url(/Areas/Website/Images/Views/Shared/Loading.svg); background-repeat: no-repeat; background-position: left 12px center; background-size: 22px auto; }
#_HeaderSearch .result { display: none; position: absolute; top: calc(100% + 8px); right: 0; left: 0; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); padding: 8px 0; z-index: 1600; max-height: 60vh; overflow: auto; text-align: right; }
#_HeaderSearch .result.active { display: block; }
#_HeaderSearch .result > div { display: none; }
#_HeaderSearch .result > div > span { display: block; padding: 8px 20px 4px; font-size: 12px; color: var(--cb-muted); font-weight: 600; }
#_HeaderSearch .result ul { list-style: none; margin: 0; padding: 0; }
#_HeaderSearch .result li > span, #_HeaderSearch .result li > span > a { display: block; padding: 10px 20px; color: var(--cb-navy); cursor: pointer; font-size: 14px; }
#_HeaderSearch .result li > span > a { padding: 0; color: var(--cb-orange); font-weight: 600; }
#_HeaderSearch .result li:hover > span { background: #f3f4f6; color: var(--cb-orange); }
#_HeaderSearch .result li.selected > span { background: #f3f4f6; }
#_HeaderSearch .result mark, #_HeaderSearch .result mark.mark { background: transparent; color: var(--cb-orange); font-weight: 700; }
#_HeaderSearch .result li span.landing { font-weight: 700; }
@media only screen and (max-width: 640px) {
    #_HeaderSearch .form-group select { flex: 0 0 auto; max-width: 100px; }
    #_HeaderSearch .result { top: calc(100% + 4px); }
}

/* navigation additions */
.navigationWrapper__navigationSide--mobileHeader { display: none; }
/* Mega menu open state is JS driven (see _Navigation.js); the design :hover rule is neutralised on desktop. */
@media only screen and (min-width: 640.98px) {
    #_Navigation > ul > li.hasDropdown:hover > .dropdown { opacity: 0; visibility: hidden; }
    #_Navigation > ul > li.hasDropdown.open > .dropdown, #_Navigation > ul > li.hasDropdown.focusOpen > .dropdown { opacity: 1; visibility: visible; }
    #_Navigation > ul > li.hasDropdown > .dropdown { transition: opacity .2s ease-out, visibility .2s ease-out; }
    /* A closed panel must not be hit-testable: its default category column keeps visibility:visible for the
       hover switching, which otherwise re-opens the menu when the pointer crosses the invisible panel area. */
    #_Navigation > ul > li.hasDropdown > .dropdown { pointer-events: none; }
    #_Navigation > ul > li.hasDropdown.open > .dropdown, #_Navigation > ul > li.hasDropdown.focusOpen > .dropdown { pointer-events: auto; }
    #_Navigation > ul > li.hasDropdown:not(.open):not(.focusOpen) > .dropdown .leftSide { visibility: hidden; opacity: 0; }
}
.navigationWrapper__navigationSide > ul > li > a { white-space: nowrap; }
.navigationWrapper__navigationSide > ul > li.highlight > a { color: var(--cb-orange); font-weight: 700; }
.navigationWrapper__navigationSide .dropdown .leftSide h4 a { color: inherit; }
.navigationWrapper__navigationSide .dropdown .rightSide > ul > li > a img { flex: 0 0 24px; width: 24px; }
.navigationWrapper__navigationSide .dropdown:not(.type2) .rightSide > ul > li:first-child .leftSide { visibility: visible; opacity: 1; }
.navigationWrapper__navigationSide .dropdown:not(.type2) .rightSide > ul:hover > li:first-child:not(:hover) .leftSide { visibility: hidden; opacity: 0; }
.navigationWrapper__navigationSide .dropdown .leftSide { overflow: auto; max-height: 100%; align-content: flex-start; }
.navigationWrapper__navigationSide .dropdown .leftSide .widget ul li a { font-size: 14px; }
.navigationWrapper__navigationSide .dropdown.type2 .leftSide .widget h4 { color: var(--cb-orange); margin-bottom: 12px; }
.navigationWrapper__navigationSide .dropdown.type2 .leftSide .widget ul { list-style: none; padding: 0 12px 0 0; margin: 0; }
.navigationWrapper__navigationSide .dropdown.type2 .leftSide .widget ul li a { color: #283a5d; font-weight: 500; display: block; line-height: 1.75; transition: .3s; }
.navigationWrapper__navigationSide .dropdown.type2 .leftSide .widget ul li a:hover { color: var(--cb-orange); }
#_Navigation .dropdown.type2 .leftSide .icon { padding: 0; overflow: hidden; }
#_Navigation .dropdown.type2 .leftSide .icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media only screen and (min-width: 640.98px) {
    .navigationWrapper__navigationSide .mobileOnlyItem { display: none; }
    .navigationWrapper__navigationSide > ul { flex-wrap: wrap; }
    .navigationWrapper__navigationSide .dropdown .rightSide > ul > li > .leftSide { display: flex; }
}
@media only screen and (max-width: 640px) {
    .navigationWrapper__navigationSide--mobileHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e5e7eb; }
    .navigationWrapper__navigationSide > ul > li { overflow: visible; }
    .navigationWrapper__navigationSide > ul > li > a { border-bottom: 1px solid #f1f1f1; padding: 12px 8px; }
    .navigationWrapper__navigationSide > ul > li.hasDropdown > a { position: relative; padding-left: 32px; }
    .navigationWrapper__navigationSide > ul > li.hasDropdown > a:after { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; margin: auto; width: 20px; height: 20px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="%23ff4000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') 50% 50% / contain no-repeat; transition: .3s; }
    .navigationWrapper__navigationSide > ul > li.hasDropdown.open > a:after { transform: rotate(-90deg); }
    .navigationWrapper__navigationSide .dropdown .rightSide > ul > li > a { position: relative; }
    .navigationWrapper__navigationSide .dropdown .rightSide > ul > li > .leftSide .widget { padding: 12px 16px; }
    .navigationWrapper__navigationSide .dropdown.type2 .leftSide .icon { display: none; }
    .navigationWrapper__navigationSide .dropdown .leftSide h4 { font-size: 16px; }
}

/* Keep adjacent ad cards in one sticky column so they cannot cover each other. */
.mainWrapper .insideContentWrapper .insideContentWrapper__aside:has(> .widget.add + .widget.add) > .widget.add {
    position: static;
}
@media (min-width: 768px) {
    .mainWrapper .insideContentWrapper .insideContentWrapper__aside:has(> .widget.add + .widget.add) {
        position: sticky;
        top: 164px;
        align-self: flex-start;
    }
}

/* ------------------------------------------------------------------ overlays & global widgets */
#_Loading { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.8) url(/Areas/Website/Images/Views/Shared/Loading.svg) center center / 0 auto no-repeat; opacity: 0; visibility: hidden; z-index: 100000; transition: .3s ease-out; }
#_Loading.active { background-size: 48px auto; opacity: 1; visibility: visible; }
#_ScreenBlock { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; z-index: 1400; transition: .3s ease-out; }
#_ScreenBlock.active { opacity: 1; visibility: visible; }
#_ScrollToTop { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--cb-orange); box-shadow: 0 10px 30px rgba(255, 64, 0, 0.35); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: .3s ease-out; z-index: 1300; cursor: pointer; }
#_ScrollToTop.active { opacity: 1; visibility: visible; }
#_ScrollToTop:hover { transform: translateY(-3px); }
#waIcon { right: auto !important; left: 16px !important; bottom: 16px !important; z-index: 1300 !important; }
#waIcon img { width: 56px; height: 56px; }
#_FilterButton { display: none; position: fixed; right: 24px; bottom: 160px; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--cb-navy) url(/Areas/Website/Images/Views/Shared/Filter_White.svg) center center / 24px auto no-repeat; box-shadow: 0 10px 30px rgba(41, 59, 95, 0.35); z-index: 1300; cursor: pointer; }
#_FilterButton.active { background-image: url(/Areas/Website/Images/Views/Shared/Cross_White.svg); z-index: 1600; bottom: 24px; }
@media only screen and (max-width: 1080px) {
    #_FilterButton { display: block; }
    .asideRight { display: none; }
    .asideRight.active { display: block !important; position: fixed; inset: 0; overflow: auto; background: #f7f7f9; padding: 24px 24px 96px; z-index: 1500; width: 100% !important; max-width: 100%; }
    .insideContentWrapper__aside.filters { display: none; }
    .insideContentWrapper__aside.filters.active { display: block; position: fixed; inset: 0; overflow: auto; background: #f7f7f9; padding: 24px 24px 96px; z-index: 1500; }
    /* Side ads remain visible when the mobile filter controls are closed. */
    .insideContentWrapper__aside.filters.hasSideAds { display: block; }
    .insideContentWrapper__aside.filters.hasSideAds:not(.active) > :not(.widget.add) { display: none; }
}
@media only screen and (max-width: 640px) {
    #_ScrollToTop { right: 16px; bottom: 16px; width: 40px; height: 40px; }
    #_FilterButton { right: 16px; bottom: 140px; width: 44px; height: 44px; background-size: 18px auto; }
}

/* ------------------------------------------------------------------ breadcrumb (server side page path) */
.breadCrumbSection ul li a:hover { color: var(--cb-orange); }
.breadCrumbSection ul { list-style: none; margin: 0; padding: 0; flex-wrap: wrap; row-gap: 8px; }
.breadCrumbSection ul li a, .breadCrumbSection ul li span { font-size: 14px; }
.breadCrumbSection ul li:last-child span { color: var(--cb-orange); }
.breadCrumbSection ul li + li:before { top: 0; bottom: 0; margin: auto; }

/* ------------------------------------------------------------------ inside pages: widgets & center column */
.insideContentWrapper .row { --bs-gutter-y: 1.5rem; }
.insideContentWrapper .widget__body--list ul { list-style: none; margin: 0; padding: 0; }
.insideContentWrapper .widget__body--list .search-filter-list li label { font-size: 15px; }
.insideContentWrapper .widget .widget__body--search .form-group .form-control { border-color: #e9e9e9; }
.insideContentWrapper .widget .widget__body--search .form-group .form-control:focus { border-color: var(--cb-orange); }
.insideContentWrapper .widget .widget__body .aside-loading, .insideContentWrapper .widget.loading .widget__body--list { min-height: 48px; }
.insideContentWrapper .widget.loading .widget__body--list { background: url(/Areas/Website/Images/Views/Shared/Loading.svg) center center / 32px auto no-repeat; }
.insideContentWrapper .widget.loading .widget__body--list > * { opacity: 0; }
.insideContentWrapper .widget.add .widget__body a { display: block; }
.insideContentWrapper .widget.add .widget__body a + a { margin-top: 16px; }
.insideContentWrapper .widget.add .widget__body img { width: 100%; border-radius: 8px; display: block; }
.insideContentWrapper .widget.blogWidget .card--header img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; }
.insideContentWrapper .widget.blogWidget .widget__body--list { max-height: none; }
.insideContentWrapper .widget.emptyWidget .widget__body { color: var(--cb-muted); font-size: 14px; }
.centerSideWrapper__header--sort ul li a { cursor: pointer; transition: .3s; }
.centerSideWrapper__header--sort ul li a:hover { color: var(--cb-orange); }
.centerSideWrapper__header .viewChanger li a img { opacity: .4; transition: .3s; }
.centerSideWrapper__header .viewChanger li a.active img, .centerSideWrapper__header .viewChanger li a:hover img { opacity: 1; }
.centerSideWrapper__body .resultInfo { color: var(--cb-muted); font-size: 14px; margin-bottom: 24px; }
.centerSideWrapper__body .readMoreSection .btn.loading { pointer-events: none; opacity: .6; }
.centerSideWrapper__body.loading { position: relative; min-height: 240px; }
.centerSideWrapper__body.loading:after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.7) url(/Areas/Website/Images/Views/Shared/Loading.svg) center 120px / 48px auto no-repeat; border-radius: 10px; z-index: 5; }
@media only screen and (max-width: 640px) {
    .insideContentWrapper .centerSideWrapper .centerSideWrapper__header, .insideContentWrapper .centerSideWrapper .centerSideWrapper__body { padding: 16px; }
    .insideContentWrapper .centerSideWrapper__header--sort ul { gap: 12px; }
}
@media only screen and (min-width: 840px) and (max-width: 1320px) {
    .insideContentWrapper .col-md-2 { flex: 0 0 auto; width: 25%; }
    .insideContentWrapper .col-md-8 { flex: 0 0 auto; width: 50%; }
}

/* company cards (list) */
.card.company .card__image a img { max-height: 160px; object-fit: contain; }
.card.company .card__body .certificate-list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; align-items: center; }
.card.company .card__body .certificate-list img { width: 28px; height: 28px; object-fit: contain; }
.card.company .card__body--content p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card.company .card__leftInfo--buttonsList a { text-align: center; }
.card.company .favoriteToggle { position: absolute; top: 8px; left: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff url(/Areas/Website/Images/NewDesign/heart.png) center / 18px no-repeat; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); cursor: pointer; opacity: .55; transition: .3s; }
.card.company .favoriteToggle.selected { opacity: 1; }
.card.company .card__image { position: relative; }
@media only screen and (max-width: 840px) {
    .card.company .card__image a { max-width: 200px; margin: auto; }
    .card.company .card__leftInfo--buttonsList { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .card.company .card__leftInfo--buttonsList a + a { margin-top: 0; }
    .card.company .card__leftInfo--buttonsList a:first-child { grid-column: span 2; }
}

/* company detail */
.companyInformationData .card ul { list-style: none; margin: 0; padding: 0; }
.companyInformationData .card ul li { font-size: 15px; color: var(--cb-navy); }
.companyInformationData .card ul li strong { color: #000; }
.companyInformationData .card .card__image a { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 2px solid rgb(189, 198, 219); border-radius: 16px; background: #fff; padding: 12px; }
.companyInformationData .card .card__image a img { max-width: 100%; max-height: 100%; object-fit: contain; }
.companyInformationData .card .certificate-list { display: flex; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.companyInformationData .card .certificate-list img { width: 28px; height: 28px; object-fit: contain; }
.sliderCompanyHero .heroSlider .heroSlider--item img { width: 100%; aspect-ratio: 1200 / 500; object-fit: contain; display: block; }
.sliderCompanyHero__footer--phoneCall .phoneReveal { background: none; border: 0; font: inherit; color: var(--cb-orange); cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; padding: 0; }
.sliderCompanyHero__footer--phoneCall a { color: #000; }
.companyVideo video { width: 100%; max-height: 560px; background: #000; display: block; }
.companyContent .card img { max-width: 100%; height: auto; }
.companyContent .card p, .companyContent .card li { font-size: 16px; line-height: 2; }
.companySection { margin: 32px 0; }
.companySection .card { padding: 24px; border-radius: 16px; box-shadow: var(--cb-shadow); }
.companySection .card > h3 { font-size: 20px; font-weight: 800; color: var(--cb-navy); margin-bottom: 24px; display: flex; align-items: center; gap: 24px; }
.companySection .card > h3:after { content: ""; flex: 1; height: 2px; background: var(--cb-orange); }
.companySection .infoGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; }
.companySection .infoGrid .item { display: flex; gap: 8px; flex-wrap: wrap; font-size: 15px; line-height: 1.8; }
.companySection .infoGrid .item.full { grid-column: span 2; }
.companySection .infoGrid .attribute-title { color: var(--cb-muted); }
.companySection .infoGrid .attribute-text { color: #000; font-weight: 600; word-break: break-word; }
.companySection .infoGrid a { color: var(--cb-navy); }
.companySection .infoGrid a:hover { color: var(--cb-orange); }
.companySection iframe.map { width: 100%; height: 320px; border: 0; border-radius: 16px; }
.companySection .contactLocked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border: 2px dashed #bdc6db; border-radius: 16px; color: var(--cb-navy); }
.mediaGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.mediaGrid li { border: 1px solid var(--cb-border-light); border-radius: 12px; overflow: hidden; background: #fff; text-align: center; }
.mediaGrid li a { display: block; color: var(--cb-navy); }
.mediaGrid li img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: .3s; }
.mediaGrid li:hover img { transform: scale(1.04); }
.mediaGrid li .caption { display: block; padding: 10px 12px; font-size: 14px; font-weight: 600; }
.mediaGrid li video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; }
.mediaGrid.people li img { aspect-ratio: 1; object-fit: cover; }
.mediaGrid.people li .caption small { display: block; color: var(--cb-muted); font-weight: 400; }
.linkList { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.linkList li a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--cb-navy-dark); border-radius: 16px; color: var(--cb-navy-dark); font-weight: 600; transition: .3s; }
.linkList li a:hover { background: var(--cb-navy-dark); color: #fff; }
.fileList { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fileList li a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--cb-border-light); border-radius: 12px; color: var(--cb-navy); font-weight: 600; transition: .3s; }
.fileList li a:hover { border-color: var(--cb-orange); color: var(--cb-orange); }
.fileList li a i { color: var(--cb-orange); font-size: 20px; }
@media only screen and (max-width: 840px) {
    .companySection .infoGrid, .fileList { grid-template-columns: 1fr; }
    .companySection .infoGrid .item.full { grid-column: span 1; }
    .mediaGrid { grid-template-columns: repeat(2, 1fr); }
    .companySection .card { padding: 16px; }
}

/* ------------------------------------------------------------------ home page additions */
.storiesSection .storiesSlider:not(.slick-initialized) { overflow: hidden; gap: 48px; padding: 0 42px; }
.storiesSection .storiesSlider:not(.slick-initialized) .storiesSlider--item { flex: 0 0 auto; }
.storiesSection .storiesSlider--item a { color: inherit; }
.storiesSection .storiesSlider--item .image img { width: 68px; height: 68px; object-fit: cover; background: #fff; border-width: 3px; }
@media only screen and (max-width: 640px) {
    .storiesSection .storiesSlider--item .image img { width: 56px; height: 56px; }
}
.heroSlider { position: relative; width: 100%; max-width: none; margin: 0 auto 8px; overflow: hidden; border: 0; border-radius: 8px; background: #fff; box-shadow: none; }
.heroSlider .heroSlider--item a { display: block; }
#Home .heroSlider .heroSlider--item img { width: 100%; height: clamp(240px, 26.3vw, 520px); object-fit: cover; object-position: center; display: block; border-radius: 0; }
.heroSlider:not(.slick-initialized) .heroSlider--item:not(:first-child) { display: none; }
.heroSlider .slick-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 6px 10px; background: transparent; }
.heroSlider .slick-dots li { display: flex; margin: 0; }
.heroSlider .slick-dots li button { width: 7px; height: 7px; border: 0; border-radius: 50px; background: rgba(0, 0, 0, 0.35); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); text-indent: -9999px; cursor: pointer; padding: 0; transition: width .2s, background .2s; }
.heroSlider .slick-dots li.slick-active button { width: 22px; background: #fff; }
.heroSlider .heroArrow { position: absolute; bottom: 32px; z-index: 6; width: 40px; height: 40px; border: 1px solid #e0e0e2; border-radius: 50%; background: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.heroSlider .heroArrow:before { content: none; }
.heroSlider .heroArrow svg { display: block; width: 20px; height: 20px; color: #424750; transform: none; }
.heroSlider .heroArrow--prev { right: 24px; }
.heroSlider .heroArrow--next { right: 72px; }
.heroSlider .heroArrow:hover { background: #f2f3f5; }
@media (hover: hover) and (pointer: fine) {
    .heroSlider .heroArrow { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
    .heroSlider:hover .heroArrow,
    .heroSlider:focus-within .heroArrow { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .heroSlider .heroArrow { transition: none; }
}
.heroSlider button:focus-visible { outline: 2px solid var(--cb-orange); outline-offset: 3px; }
.heroSlider .slick-list { position: relative; }
.heroSlider .bannerTimeline { position: absolute; right: 0; bottom: 0; left: 0; margin: 0 auto; max-width: 100%; height: 4px; z-index: 5; background: rgba(49, 63, 95, 0.15); pointer-events: none; }
.heroSlider .bannerTimeline span { display: block; width: 100%; height: 100%; background: var(--cb-orange); transform: scaleX(0); transform-origin: right center; }
@media only screen and (max-width: 640px) {
    #Home .heroSlider { margin: 0 auto 4px; border-radius: 0; }
    .heroSlider .heroArrow { width: 30px; height: 30px; bottom: 14px; }
    .heroSlider .heroArrow--prev { right: 10px; }
    .heroSlider .heroArrow--next { right: 46px; }
    .heroSlider .slick-dots { bottom: 10px; gap: 6px; }
}
.categoriesList .categoriesList--item a img { display: block; height: 60px; width: auto; max-width: 100%; object-fit: contain; }
.categoriesList .categoriesList--item a:hover img { filter: brightness(0) invert(1); }
@media only screen and (max-width: 640px) {
    .categoriesList .categoriesList--item a img { height: 32px; width: 32px; filter: brightness(0) invert(1); }
}
.categoriesListBox .row { justify-content: flex-start; }
.aboutUsSection .aboutUsSection__maskSide .color { direction: ltr; unicode-bidi: embed; }
.salesAgahi__body .table { border-collapse: collapse; }
.salesAgahi__body .table td.salesAgahi__body--title a { color: inherit; }
.salesAgahi__body .table td.salesAgahi__body--subtitle a { color: inherit; }
.salesAgahi__body .table td .certificate-list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: nowrap; }
.salesAgahi__body .table td .certificate-list img { width: 16px; height: 16px; object-fit: contain; }
.salesAgahi__body .table td.salesAgahi__body--title { max-width: 220px; }
.salesAgahi__body .emptyState { padding: 32px 16px; color: var(--cb-muted); text-align: center; }
.followUsOnInstagram .card .image { display: block; }
.followUsOnInstagram .card a { font-weight: 700; direction: ltr; }
.blogSection .card.blog .card--header img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.blogSection .card.blog .card--header a { display: block; background: #f3f4f6; }
.blogSection .skeleton { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.blogSection .skeleton > div { border-radius: 40px; background: linear-gradient(90deg, #f3f4f6 25%, #e9ebef 50%, #f3f4f6 75%); background-size: 200% 100%; animation: cbShimmer 1.4s infinite; aspect-ratio: 16 / 9; }
.blogSection .emptyState { text-align: center; color: var(--cb-muted); padding: 32px; }
@keyframes cbShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media only screen and (max-width: 640px) {
    .blogSection .row > .col-md-6 + .col-md-6 { margin-top: 24px; }
    .blogSection .skeleton { grid-template-columns: 1fr; }
}
.brandsList .brandsListSlider .brand--item .card img { height: 75px; width: 100%; object-fit: contain; }
.brandsList .brandsListSlider .brand--item .card a { display: contents; color: inherit; }
.specialRfqSection { margin: 48px 0 0; overflow: hidden; }
.specialRfqSection .titleSection { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 28px; }
.specialRfqSection .titleSection:after { display: none; }
.specialRfqSection .titleSection h2 { grid-column: 2; grid-row: 1; margin: 0; text-align: center; }
.specialRfqSection .titleSection h2:after { content: ""; display: block; width: 48px; height: 3px; margin: 12px auto 0; border-radius: 3px; background: var(--cb-orange); }
.specialRfqSection .titleSection a.read-more { grid-column: 3; grid-row: 1; justify-self: end; font-size: 15px; }
@media only screen and (max-width: 640px) {
    .specialRfqSection .titleSection { grid-template-columns: 1fr; gap: 12px; }
    .specialRfqSection .titleSection h2 { grid-column: 1; }
    .specialRfqSection .titleSection a.read-more { grid-column: 1; grid-row: 2; justify-self: center; font-size: 14px; }
}
.specialRfqSlider .specialRfq--item { padding: 0 12px; }
.specialRfqSlider .card { border-radius: 16px; box-shadow: var(--cb-shadow); overflow: hidden; display: block; color: var(--cb-navy); }
.specialRfqSlider .card .card-header { padding: 12px 16px; font-weight: 700; background: #f5f6f8; font-size: 15px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.specialRfqSlider .card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.specialRfqSlider .slick-arrow { position: absolute; top: 0; bottom: 0; margin: auto; z-index: 10; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--cb-orange) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64px" height="64px" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') 50% 50% / 60% no-repeat; text-indent: -9999px; cursor: pointer; }
.specialRfqSlider .slick-arrow.slick-next { left: -12px; }
.specialRfqSlider .slick-arrow.slick-prev { right: -12px; transform: rotate(180deg); }
.specialRfqSlider .slick-arrow.slick-disabled { opacity: 0; visibility: hidden; }

/* ------------------------------------------------------------------ story player */
.storyModalWrapper .inside { max-width: 100%; max-height: calc(100vh - 32px); }
.storyModalWrapper .storyModalWrapper__header .storiesSlider--item .image img { width: 60px; height: 60px; object-fit: cover; background: #fff; }
.storyModalWrapper .storyModalWrapper__header .storyModalWrapper__company { color: #fff; }
.storyModalWrapper .storyModalWrapper__header .storyModalWrapper__company span { text-align: right; color: #fff; font-weight: 600; }
.storyModalWrapper .storyModalWrapper__header--author.noCompany { visibility: hidden; }
.storyModalWrapper .storyModalWrapper__follow.hidden { display: none; }
.storyModalWrapper .storyModalWrapper__follow.following { background: var(--cb-orange); color: #fff; }
.storyModalWrapper .storyModalWrapper__body--video video { background: #000; }
.storyModalWrapper .storyModalWrapper__body--overlay { opacity: 1; }
.storyModalWrapper .storyModalWrapper__body--overlay .title { display: block; font-weight: 700; }
.storyModalWrapper .storyModalWrapper__body--overlay button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; }
.storyModalWrapper .storyModalWrapper__like.liked img { filter: drop-shadow(0 0 6px rgba(255, 64, 0, 0.9)); }
.storyModalWrapper .storyModalWrapper__like.busy { opacity: .6; pointer-events: none; }
.storyModalWrapper .storyModalWrapper__mute.muted svg .wave { display: none; }
.storyModalWrapper .storyModalWrapper__footer.noProduct { display: none; }
.storyModalWrapper .storyModalWrapper__footer .product { display: block; color: #000; }
.storyModalWrapper .storyModalWrapper__footer .product img { width: 60px; height: 60px; object-fit: cover; }
.storyModalWrapper .storyPlayButton { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.85) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff4000"><path d="M8 5v14l11-7z"/></svg>') 55% 50% / 40px no-repeat; cursor: pointer; z-index: 6; display: none; }
.storyModalWrapper.paused .storyPlayButton { display: block; }
@media only screen and (max-width: 640px) {
    .storyModalWrapper .inside { width: 100%; aspect-ratio: auto; height: 100%; border-radius: 16px; }
}
body.storyOpen { overflow: hidden; }

/* ------------------------------------------------------------------ authentication pages */
body.authPage main.mainWrapper { box-shadow: none; }
.authPage .signup .card, .authPage .login .card { border-radius: 40px; }
.authPage .signup__rightSide--forms form { display: block; }
.authPage .signup__rightSide--forms .form-group .form-control.input-validation-error { border-color: var(--cb-orange); }
.authPage .signup__rightSide--forms .field-validation-error { display: block; color: var(--cb-orange); font-size: 13px; margin: 6px 24px 0; }
.authPage .signup__rightSide--forms .form-group .captchaBox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.authPage .signup__rightSide--forms .form-group .captchaBox .form-control { flex: 1 1 160px; }
.authPage .signup__rightSide--forms .form-group .LBD_CaptchaDiv, .authPage .signup__rightSide--forms .form-group .BDC_CaptchaDiv { margin: 0; }
.authPage .captchaBox captcha { display: block; }
.authPage .captchaBox .BDC_CaptchaDiv { direction: ltr; display: flex !important; align-items: center; gap: 6px; height: auto !important; width: auto !important; }
.authPage .captchaBox .BDC_CaptchaImageDiv { height: auto !important; border-radius: 8px; overflow: hidden; background: #f1f1f4; }
.authPage .captchaBox .BDC_CaptchaImageDiv img { display: block; height: 40px !important; }
.authPage .captchaBox .BDC_CaptchaImageDiv > a { display: none !important; }
.authPage .captchaBox .BDC_CaptchaIconsDiv { width: auto !important; display: flex; flex-direction: column; gap: 4px; }
.authPage .captchaBox .BDC_CaptchaIconsDiv a { display: block; width: 24px; height: 24px; }
.authPage .captchaBox .BDC_CaptchaIconsDiv img { max-width: 100%; }
.authPage .signup__rightSide--forms .form-group .form-checkbox { justify-content: center; }
.authPage .signup__rightSide--forms .form-group .form-checkbox label { text-align: right; }
.authPage .signup__rightSide--forms .formMessage { border-radius: 16px; padding: 12px 16px; font-size: 14px; margin-top: 16px; display: none; }
.authPage .signup__rightSide--forms .formMessage.error { display: block; background: #fff1ec; color: var(--cb-orange); }
.authPage .signup__rightSide--forms .formMessage.success { display: block; background: #edf7ee; color: #1a7f37; }
.authPage .signup__rightSide--forms .footerForm { margin-top: 0; }
.authPage .signup__rightSide--forms .footerForm a { font-size: 14px; }
.authPage .signup__rightSide--forms .resendOtp { background: none; border: 0; color: var(--cb-navy); font: inherit; cursor: pointer; text-decoration: underline; margin: 0; min-width: 0; }
.authPage .signup__rightSide--forms .otpHint { text-align: center; color: var(--cb-muted); font-size: 14px; margin-bottom: 16px; }
.authPage .signup__rightSide--forms button.btn.btn--bg { display: block; }
.authPage .signup__rightSide--forms .passwordField { position: relative; }
.authPage .signup__rightSide--forms .passwordField .view-password { position: absolute; left: 16px; top: 42px; width: 28px; height: 28px; border: 0; background: transparent url(/Areas/Website/Images/Views/Shared/HidePassword.svg) center / 22px no-repeat; cursor: pointer; opacity: .7; }
.authPage .signup__rightSide--forms .passwordField .view-password.show { background-image: url(/Areas/Website/Images/Views/Shared/ShowPassword.svg); }
.authPage .signup__rightSide--forms .form-group .form-control.ltr { direction: ltr; text-align: left; }
.authPage .signup__rightSide--forms select.form-control { background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="%23323b5d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') left 16px center / 20px no-repeat; }
@media only screen and (max-width: 640px) {
    .authPage .signup .card, .authPage .login .card { border-radius: 24px; }
}

/* ------------------------------------------------------------------ legacy components (pages without a dedicated reference design) */
.pageContent { padding: 32px 0 64px; }
.pageContent .card.contentCard { border-radius: 16px; box-shadow: var(--cb-shadow); padding: 32px; }
.pageContent .card.contentCard h1, .pageContent .card.contentCard h2 { font-size: 24px; line-height: 1.5; margin-bottom: 16px; color: var(--cb-navy); }
.pageContent .card.contentCard p, .pageContent .card.contentCard li { font-size: 16px; line-height: 2; }
.pageContent .card.contentCard ul, .pageContent .card.contentCard ol { padding-right: 24px; margin: 16px 0; }
.pageContent .card.contentCard img { max-width: 100%; height: auto; border-radius: 12px; }
@media only screen and (max-width: 640px) {
    .pageContent { padding: 16px 0 32px; }
    .pageContent .card.contentCard { padding: 16px; }
}

.wrapper-large, .wrapper-full, .wrapper-small { width: 100%; }
.wrapper-large.flex { display: flex; gap: 24px; align-items: flex-start; }
.wrapper-large.flex > .aside { flex: 0 0 300px; }
.wrapper-large.flex > .wrapper-full { flex: 1; min-width: 0; }
.center { width: 100%; }
@media only screen and (max-width: 1080px) {
    .wrapper-large.flex { flex-direction: column; }
    .wrapper-large.flex > .aside { flex: 0 0 auto; width: 100%; }
}

.section-box { position: relative; display: block; width: 100%; margin: 0 0 32px; }
.section-box > .section-title, .section-box > h1.section-title, .section-box > h2.section-title, .section-box > p.section-title { display: flex; align-items: center; gap: 24px; font-size: 20px; font-weight: 700; color: var(--cb-navy); margin: 0 0 16px; line-height: 1.5; }
.section-box > .section-title:after { content: ""; flex: 1 0 24px; height: 2px; background: var(--cb-orange); }
.section-box > .section-title a { color: inherit; }
.section-box > .section-line { display: none; }
.section-box .section-content { position: relative; background: #fff; border-radius: 16px; box-shadow: var(--cb-shadow); min-height: 48px; }
.section-box .section-content.withpadding { padding: 24px; }
.section-box .section-content.loading { min-height: 200px; background: #fff url(/Areas/Website/Images/Views/Shared/Loading.svg) center center / 48px auto no-repeat; }
.section-box .section-content.loading > * { opacity: 0; visibility: hidden; }
.section-box .section-content .catalog-detail { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.section-box .section-content .catalog-detail .logo, .section-box .section-content .catalog-detail .catalog-images { border: 2px solid #bdc6db; border-radius: 16px; padding: 16px; display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; }
.section-box .section-content .catalog-detail .logo img { max-width: 100%; max-height: 220px; object-fit: contain; }
.section-box .section-content .catalog-detail .catalog-images { flex-direction: column; position: relative; }
.section-box .section-content .catalog-detail .catalog-images .image-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.section-box .section-content .catalog-detail .catalog-images .image-list img { width: 100%; max-height: 220px; object-fit: contain; }
.section-box .material-items .item, .section-box .catalog-items .item { padding: 4px 0; line-height: 1.8; font-size: 15px; }
.section-box .attribute-title { color: var(--cb-muted); }
.section-box .attribute-text { color: #000; font-weight: 600; word-break: break-word; }
.section-box .attribute-text a { color: var(--cb-navy); }
.section-box .attribute-text a:hover { color: var(--cb-orange); }
.section-box .catalog-items .price .attribute-text, .section-box .catalog-items .red .attribute-text, .section-box .catalog-items .text-danger .attribute-text { color: var(--cb-orange); font-weight: 800; }
.section-box .catalog-items > .col-12 hr { border: 0; border-top: 1px solid var(--cb-border-light); margin: 12px 0; }
.section-box .product-option { display: inline-flex; align-items: center; gap: 6px; margin: 4px 12px 4px 0; }
.section-box .product-option input[type=radio] { accent-color: var(--cb-orange); width: 18px; height: 18px; margin: 0; }
.section-box .addToCartBtns { display: inline-flex; border: 2px solid var(--cb-navy-dark); border-radius: 50px; overflow: hidden; }
.section-box .addToCartBtns .btn { border: 0; border-radius: 0; padding: 8px 16px; font-weight: 700; }
.section-box .addToCartBtns .btn.addToCartCount { background: #fff; color: #000; min-width: 48px; }
.section-box .addToCartBtns .btn.addToCartPlus { background: var(--cb-navy-dark); color: #fff; }
.section-box .addToCartBtns .btn.addToCartMinus { background: var(--cb-orange); color: #fff; }
.addToCartBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 2px solid var(--cb-orange); background: var(--cb-orange); color: #fff; border-radius: 16px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; transition: .3s; }
.addToCartBtn:hover { background: var(--cb-orange-dark); border-color: var(--cb-orange-dark); }
.hidePrice { color: var(--cb-muted) !important; text-decoration: line-through; font-weight: 400 !important; font-size: 14px !important; }
@media only screen and (max-width: 840px) {
    .section-box .section-content .catalog-detail { grid-template-columns: 1fr; }
    .section-box .section-content.withpadding { padding: 16px; }
}

.section-aside { position: relative; background: #fff; border-radius: 8px; box-shadow: var(--cb-shadow); margin-bottom: 24px; overflow: hidden; transition: .3s ease-out; }
.section-aside .aside-title { display: block; width: 100%; padding: 16px 48px 16px 16px; border: 0; background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="%23ff4000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') left 16px center / 24px no-repeat; font: inherit; font-weight: 700; font-size: 18px; color: var(--cb-navy); text-align: right; cursor: pointer; }
.section-aside.hide .aside-title { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="%23ff4000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.section-aside .aside-search { padding: 0 16px 16px; }
.section-aside .aside-search .aside-search-textbox { display: block; width: 100%; background: #e9e9e9 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" fill="none"><path d="M18.7651 7.98374C15.9551 5.17374 11.4051 5.17374 8.59512 7.98374C5.78512 10.7937 5.78512 15.3437 8.59512 18.1537C11.4051 20.9637 15.9651 20.9637 18.7651 18.1537C21.5751 15.3437 21.5751 10.7937 18.7651 7.98374ZM31.0551 29.3637L29.9751 30.4437C28.9451 31.4737 27.2751 31.4737 26.2451 30.4437L20.1751 24.3737C15.1951 27.2437 8.72511 26.5437 4.46511 22.2837C-0.624887 17.1937 -0.624887 8.93375 4.46511 3.84375C9.55511 -1.24625 17.8151 -1.24625 22.9051 3.84375C27.1651 8.10375 27.8551 14.5737 24.9951 19.5537L31.0651 25.6237C32.0851 26.6637 32.0851 28.3337 31.0551 29.3637Z" fill="%23FF4000"/></svg>') left 16px center / 18px no-repeat; border: 2px solid #e9e9e9; border-radius: 50px; min-height: 40px; padding: 8px 24px 8px 40px; font: inherit; font-size: 14px; color: var(--cb-text); outline: none; transition: .3s; }
.section-aside .aside-search .aside-search-textbox:focus { border-color: var(--cb-orange); }
.section-aside .aside-content { padding: 0 16px 16px; max-height: 312px; overflow: auto; transition: .3s ease-out; scrollbar-width: thin; scrollbar-color: #f83e00 transparent; }
.section-aside .aside-content::-webkit-scrollbar { width: 6px; }
.section-aside .aside-content::-webkit-scrollbar-thumb { background: #f83e00; border-radius: 10px; }
.section-aside .aside-content.withpadding { padding: 16px; }
.section-aside.hide .aside-content, .section-aside.hide .aside-search { display: none; }
.section-aside .aside-loading { position: absolute; inset: 56px 0 0 0; background: rgba(255, 255, 255, 0.75) url(/Areas/Website/Images/Views/Shared/Loading.svg) center center / 40px auto no-repeat; opacity: 0; visibility: hidden; transition: .3s; z-index: 2; }
.section-aside.loading .aside-loading { opacity: 1; visibility: visible; }
.section-aside.loading .aside-content { min-height: 80px; }
.section-aside .commercialaside-list, .section-aside .latestblogaside-list { list-style: none; margin: 0; padding: 0; }
.section-aside .commercialaside-list li + li, .section-aside .latestblogaside-list li + li { margin-top: 16px; }
.section-aside .commercialaside-list img { width: 100%; border-radius: 8px; display: block; }
.section-aside .latestblogaside-list li a { display: flex; gap: 12px; align-items: center; color: var(--cb-navy); }
.section-aside .latestblogaside-list li a img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: 0 0 64px; }
.section-aside .latestblogaside-list li a .blog-title { font-size: 14px; font-weight: 600; line-height: 1.6; }
.section-aside .latestblogaside-list li a:hover .blog-title { color: var(--cb-orange); }
.section-aside .supplier-info { text-align: center; padding: 8px 0; }
.section-aside .supplier-info .logo { width: 120px; height: 120px; object-fit: contain; margin: 0 auto 12px; border: 2px solid #bdc6db; border-radius: 16px; padding: 8px; display: block; }
.section-aside .supplier-info .title { display: block; font-size: 18px; font-weight: 800; color: #000; margin-bottom: 12px; }
.section-aside .supplier-info a.detail, .section-aside .supplier-info a.message { display: block; border: 2px solid var(--cb-navy-dark); border-radius: 16px; padding: 8px 16px; color: var(--cb-navy-dark); font-weight: 600; margin-top: 8px; transition: .3s; }
.section-aside .supplier-info a.message { background: var(--cb-orange); border-color: var(--cb-orange); color: #fff; }
.section-aside .supplier-info a.detail:hover { background: var(--cb-navy-dark); color: #fff; }
.section-aside .supplier-info a.message:hover { background: var(--cb-orange-dark); border-color: var(--cb-orange-dark); }

.search-filter-list { list-style: none; margin: 0; padding: 0; }
.search-filter-list li { padding: 6px 0; }
.search-filter-list li input[type=checkbox] { position: absolute; opacity: 0; visibility: hidden; width: 0; height: 0; }
.search-filter-list li label { cursor: pointer; color: var(--cb-navy); font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.search-filter-list li label:before { content: ""; display: block; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 4px; border: 2px solid #000; background-size: contain !important; transition: .2s; }
.search-filter-list li input:checked + label:before { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"/></svg>') 50% 50%; }
.search-filter-list li label:hover { color: var(--cb-orange); }

.index-view-option { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding: 24px 32px; border-bottom: 1px solid var(--cb-border-light); }
.index-view-option .title { font-weight: 700; color: var(--cb-navy); }
.index-view-option > input[type=button] { background: none; border: 0; font: inherit; font-weight: 700; color: var(--cb-navy); cursor: pointer; padding: 0; transition: .3s; }
.index-view-option > input[type=button].selected, .index-view-option > input[type=button]:hover { color: var(--cb-orange); }
.index-view-changer { margin-right: auto; display: flex; gap: 12px; }
.index-view-changer input[type=button] { width: 28px; height: 28px; border: 0; background: transparent center / 24px auto no-repeat; cursor: pointer; opacity: .4; transition: .3s; }
.index-view-changer input[type=button].selected, .index-view-changer input[type=button]:hover { opacity: 1; }
.index-view-changer input.list { background-image: url(/Areas/Website/Images/NewDesign/sorticon1.png); }
.index-view-changer input.tile { background-image: url(/Areas/Website/Images/NewDesign/sorticon2.png); }
@media only screen and (max-width: 640px) {
    .index-view-option { padding: 16px; gap: 8px 16px; }
    .index-view-changer { display: none; }
}

#_SearchInventory { display: none; padding: 16px 32px 0; }
#_SearchInventory ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
#_SearchInventory li input[type=button] { border: 1px solid var(--cb-navy); background: #fff url(/Areas/Website/Images/Views/Shared/Cross_Black.svg) right 12px center / 10px auto no-repeat; border-radius: 50px; padding: 6px 32px 6px 14px; font: inherit; font-size: 13px; color: var(--cb-navy); cursor: pointer; transition: .3s; }
#_SearchInventory li input[type=button]:hover { background-color: var(--cb-orange); background-image: url(/Areas/Website/Images/Views/Shared/Cross_White.svg); color: #fff; border-color: var(--cb-orange); }
#_SearchInventory li.remove { transform: scale(0); transition: .3s; }
#_SearchCategory { display: none; }
.search-result { padding: 32px; }
.search-result.loading { min-height: 240px; background: url(/Areas/Website/Images/Views/Shared/Loading.svg) center 120px / 48px auto no-repeat; }
@media only screen and (max-width: 640px) {
    .search-result { padding: 16px; }
    #_SearchInventory { padding: 16px 16px 0; }
}

.catalog-list, .catalog-tile { list-style: none; margin: 0; padding: 0; }
.catalog-list > li + li { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--cb-border-light); }
.catalog-list > li > article, .catalog-list > li > div { display: grid; grid-template-columns: 180px minmax(0, 1fr) 220px; gap: 32px; align-items: start; }
.catalog-list > li h4.hidden { display: none; }
.catalog-image-container { position: relative; aspect-ratio: 1; border: 2px solid #bdc6db; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 16px; background: #fff; }
.catalog-image-container .catalog-image-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.catalog-image-container img.catalog-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.catalog-image-container img.noimage { opacity: .5; padding: 16px; }
.favorite-button { position: absolute; top: 8px; left: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff url(/Areas/Website/Images/NewDesign/heart.png) center / 18px no-repeat; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); opacity: .55; transition: .3s; z-index: 2; }
.favorite-button.selected, .favorite-button:hover { opacity: 1; }
.catalog-image-container .ribbon, .catalog-image-container .ribbon-discount { position: absolute; top: -2px; right: 12px; width: 48px; height: auto; z-index: 2; }
.catalog-items { display: flex; flex-wrap: wrap; margin: 0; min-width: 0; }
.catalog-items > .title, .catalog-items > a.title { display: block; width: 100%; font-size: 20px; font-weight: 800; color: #000; margin-bottom: 12px; line-height: 1.4; transition: .3s; }
.catalog-items > .title:hover { color: var(--cb-orange); }
.catalog-items > div { padding: 4px 0; line-height: 1.7; font-size: 14px; }
.catalog-items .item.full, .catalog-items > .full { width: 100%; }
.catalog-items .shortDescription { font-size: 14px; color: #374151; margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.catalog-items .certificate-list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.catalog-items .certificate-list img { width: 24px; height: 24px; object-fit: contain; }
.catalog-sideinfo { display: flex; flex-direction: column; gap: 12px; text-align: center; min-width: 0; }
.catalog-sideinfo .side-logo { width: 96px; height: 96px; object-fit: contain; margin: 0 auto; border: 1px solid var(--cb-border-light); border-radius: 12px; padding: 6px; background: #fff; }
.catalog-sideinfo .company-name { font-weight: 700; color: var(--cb-navy); margin: 0; }
.catalog-sideinfo > a.title { font-size: 22px; color: #000; }
.catalog-sideinfo .certificate-list { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.catalog-sideinfo .certificate-list img { width: 28px; height: 28px; object-fit: contain; }
a.button, .catalog-sideinfo .button { display: block; border-radius: 16px; padding: 10px 16px; font-weight: 600; font-size: 14px; text-align: center; border: 2px solid var(--cb-navy-dark); color: var(--cb-navy-dark); background: #fff; transition: .3s; cursor: pointer; font-family: inherit; }
a.button.main, .catalog-sideinfo .button.main { background: var(--cb-orange); border-color: var(--cb-orange); color: #fff; }
a.button:not(.main):hover, .catalog-sideinfo .button:not(.main):hover { background: var(--cb-navy-dark); color: #fff; }
a.button.main:hover, .catalog-sideinfo .button.main:hover { background: var(--cb-orange-dark); border-color: var(--cb-orange-dark); }
.catalog-tile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.catalog-tile > li > article, .catalog-tile > li > div { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--cb-border-light); border-radius: 16px; padding: 16px; height: 100%; }
.catalog-tile .catalog-items > div:not(.price):not(.red):not(.full) { display: none; }
.catalog-tile .catalog-items > .title { font-size: 16px; }
.catalog-tile .catalog-sideinfo .side-logo, .catalog-tile .catalog-sideinfo .company-name, .catalog-tile .catalog-sideinfo .button.product { display: none; }
@media only screen and (max-width: 1080px) {
    .catalog-tile { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 840px) {
    .catalog-list > li > article, .catalog-list > li > div { grid-template-columns: 1fr; gap: 16px; }
    .catalog-image-container { max-width: 220px; margin: 0 auto; }
    .catalog-sideinfo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
    .catalog-sideinfo .side-logo, .catalog-sideinfo .company-name, .catalog-sideinfo > a.title, .catalog-sideinfo .certificate-list { grid-column: span 2; }
    .catalog-sideinfo .button.form { grid-column: span 2; }
}
@media only screen and (max-width: 640px) {
    .catalog-tile { grid-template-columns: 1fr; }
}

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 32px 0 0; margin: 0; list-style: none; }
.pagination .pagination-info { font-size: 14px; color: var(--cb-muted); }
.pagination .pagination-button-list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; direction: ltr; flex-wrap: wrap; }
.pagination .pagination-button-list li input[type=button] { min-width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--cb-navy-dark); background: #fff; color: var(--cb-navy-dark); font: inherit; font-weight: 700; cursor: pointer; transition: .3s; padding: 0 8px; }
.pagination .pagination-button-list li input[type=button]:hover:not(.selected) { background-color: #fff1eb; border-color: var(--cb-orange); color: var(--cb-navy-dark); }
.pagination .pagination-button-list li input[type=button].selected { background: var(--cb-orange); border-color: var(--cb-orange); color: #fff; cursor: default; }
.pagination .pagination-button-list li input.first, .pagination .pagination-button-list li input.previous, .pagination .pagination-button-list li input.next, .pagination .pagination-button-list li input.last { font-size: 0; background-position: center; background-repeat: no-repeat; background-size: 16px; }
.pagination .pagination-button-list li input.first { background-image: url(/Areas/Website/Images/Views/Shared/DoubleArrow_Left_Black.svg); }
.pagination .pagination-button-list li input.previous { background-image: url(/Areas/Website/Images/Views/Shared/Arrow_Left_Black.svg); }
.pagination .pagination-button-list li input.next { background-image: url(/Areas/Website/Images/Views/Shared/Arrow_Right_Black.svg); }
.pagination .pagination-button-list li input.last { background-image: url(/Areas/Website/Images/Views/Shared/DoubleArrow_Right_Black.svg); }
.pagination .pagination-size { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cb-muted); }
.pagination .pagination-size select { border: 2px solid var(--cb-border); border-radius: 50px; padding: 6px 16px; font: inherit; font-size: 14px; background: #fff; }
.pagination .page-item .page-link { display: block; min-width: 40px; height: 40px; line-height: 36px; text-align: center; border-radius: 12px; border: 2px solid var(--cb-navy-dark); color: var(--cb-navy-dark); font-weight: 700; padding: 0 10px; transition: .3s; }
.pagination .page-item.active .page-link, .pagination .page-item .page-link:hover { background: var(--cb-orange); border-color: var(--cb-orange); color: #fff; }
.pagination.blogPagination { justify-content: center; gap: 8px; direction: ltr; }
@media only screen and (max-width: 640px) {
    .pagination { justify-content: center; }
    .pagination .pagination-size { display: flex; justify-content: center; flex-basis: 100%; }
}

#_PagePath { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 12px 0; border-bottom: 2px solid #f83e00; box-shadow: var(--cb-shadow); margin: 0 0 32px; }
#_PagePath a, #_PagePath h1 { position: relative; color: var(--cb-navy-dark); font-weight: 600; font-size: 14px; margin: 0; }
#_PagePath a + a:before, #_PagePath a + h1:before { content: ""; position: absolute; right: -28px; top: 0; bottom: 0; margin: auto; width: 24px; height: 24px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64px" height="64px" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="%23ff4000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') 50% 50% / contain no-repeat; }
#_PagePath a:last-child { color: var(--cb-orange); }
#_PagePath a:hover { color: var(--cb-orange); }
#_DidYouMean { padding: 0 0 16px; color: var(--cb-muted); font-size: 14px; }
#_DidYouMean a { color: var(--cb-orange); margin: 0 4px; font-weight: 600; }
#_SearchNotFound { padding: 48px 16px; text-align: center; }
#_SearchNotFound .image { width: 180px; margin: 0 auto 16px; display: block; }
#_SearchNotFound .title { display: block; font-weight: 700; color: var(--cb-navy); font-size: 18px; }
.secondPageSlider { margin-bottom: 24px; border-radius: 16px; overflow: hidden; }
.secondPageSlider a, .headerBanner a { display: block; }
.secondPageSlider img, .headerBanner img { width: 100%; height: auto; display: block; }
/* Promotional banners keep readable frames throughout the responsive layout. */
@media (max-width: 1080px) {
    .secondPageSlider { border-radius: 0; }
    .secondPageSlider img,
    .sliderCompanyHero .heroSlider .heroSlider--item img { height: clamp(240px, 26.3vw, 520px); aspect-ratio: auto; object-fit: cover; object-position: center; border-radius: 0; }
    .heroSlider, .mainWrapper .insideContentWrapper .sliderCompanyHero .card { border-radius: 0; }
    .insideContentWrapper .widget.add { border-radius: 0; }
    .insideContentWrapper .widget.add .widget__body img { width: auto; max-width: 100%; height: auto; max-height: 240px; margin-inline: auto; object-fit: contain; border-radius: 0; }
    .sliderCompanyHero__footer { overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
    .secondPageSlider img,
    .sliderCompanyHero .heroSlider .heroSlider--item img { height: clamp(180px, 46.15vw, 240px); }
    #BlogIndex .blogSearch .form-group { min-width: 0; width: 100%; }
    .heroSlider .heroArrow { display: none !important; }
    .heroSlider .slick-dots { bottom: 12px; border-radius: 20px; background: rgba(0, 0, 0, .2); }
    .heroSlider .slick-dots li button { background: rgba(255, 255, 255, .55); }
    .heroSlider .slick-dots li.slick-active button { background: #fff; }
    .mainWrapper .insideContentWrapper .sliderCompanyHero .sliderCompanyHero__footer { padding: 12px 16px; }
    .mainWrapper .insideContentWrapper .sliderCompanyHero .sliderCompanyHero__footer .sliderCompanyHero__footer--website,
    .mainWrapper .insideContentWrapper .sliderCompanyHero .sliderCompanyHero__footer .sliderCompanyHero__footer--phoneCall { font-size: 16px; }
    .specialRfqSlider .slick-arrow { display: none !important; }
}
.commercials-left-horizental, .commercials-right-horizental { display: none !important; }
.commercials-left-vertical .section-aside .aside-content, .commercials-right-vertical .section-aside .aside-content { max-height: none; }

form:has(> .form-section) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 20px; width: 100%; margin: 0 0 20px; }
form .form-section.column-span-1 { grid-column: span 1; }
form .form-section.column-span-2 { grid-column: span 2; }
form .form-section.column-span-3 { grid-column: span 3; }
form .form-section.column-span-4 { grid-column: span 4; }
form .form-section > label { display: block; font-size: 15px; color: var(--cb-text); margin-bottom: 8px; }
form .form-section > label .required, .required { color: var(--cb-orange); padding: 0 4px; font-weight: 700; }
form .form-section input[type=text], form .form-section input[type=password], form .form-section input[type=email], form .form-section input[type=tel], form .form-section input[type=number], form .form-section select, form .form-section textarea, .form-control:not(.form-group .form-control) { display: block; width: 100%; border-radius: 50px; border: 2px solid var(--cb-border); min-height: 48px; padding: 12px 24px; font: inherit; font-size: 14px; color: var(--cb-text); outline: none; transition: .3s; background: #fff; }
form .form-section textarea, textarea.form-control { border-radius: 24px; min-height: 120px; resize: vertical; }
form .form-section input:focus, form .form-section select:focus, form .form-section textarea:focus, .form-control:focus { border-color: var(--cb-orange); }
form .form-section input[type=checkbox], form .form-section input[type=radio] { width: 18px; height: 18px; accent-color: var(--cb-orange); vertical-align: middle; margin-left: 6px; }
form .form-section > button, form .form-section > input[type=button], form .form-section > input[type=submit], form .form-section > a.button { display: block; width: 100%; border-radius: 50px; padding: 12px 16px; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; border: 2px solid var(--cb-navy-dark); background: #fff; color: var(--cb-navy-dark); text-align: center; transition: .3s; }
form .form-section > button.main, form .form-section > input.main, form .form-section > a.button.main { background: var(--cb-orange); border-color: var(--cb-orange); color: #fff; }
form .form-section > button:hover, form .form-section > input[type=button]:hover, form .form-section > a.button:hover { background: var(--cb-navy-dark); color: #fff; }
form .form-section > button.main:hover, form .form-section > a.button.main:hover { background: var(--cb-orange-dark); border-color: var(--cb-orange-dark); }
form .form-section > button.view-password, form .form-section .view-password { width: auto; }
.field-validation-error, .validation-summary-errors { display: block; color: var(--cb-orange); font-size: 13px; margin-top: 6px; }
.input-validation-error { border-color: var(--cb-orange) !important; }
form .form-section .result { position: relative; }
@media only screen and (max-width: 840px) {
    form .form-section.column-span-1 { grid-column: span 2; }
    form .form-section.column-span-2, form .form-section.column-span-3 { grid-column: span 4; }
}

.itemgridviewer .itemgridviewer-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; }
.itemgridviewer .itemgridviewer-list li article a { display: block; padding: 16px; border: 1px solid var(--cb-border-light); border-radius: 16px; text-align: center; color: var(--cb-navy); transition: .3s; height: 100%; }
.itemgridviewer .itemgridviewer-list li article a:hover { border-color: var(--cb-orange); }
.itemgridviewer .itemgridviewer-list li article .image { width: 100px; height: 100px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.itemgridviewer .itemgridviewer-list li article .image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.itemgridviewer .itemgridviewer-list li article .title { display: block; font-weight: 700; font-size: 14px; line-height: 1.5; }
.itemgridviewer .itemgridviewer-list li article .subtitle { display: block; font-size: 12px; color: var(--cb-muted); }
.itemslider { position: relative; padding: 0 40px; }
.itemslider .itemslider-list { display: flex; gap: 16px; overflow: auto; list-style: none; margin: 0; padding: 4px 0; scroll-behavior: smooth; scrollbar-width: none; }
.itemslider .itemslider-list::-webkit-scrollbar { display: none; }
.itemslider .itemslider-list li { flex: 0 0 200px; }
.itemslider .itemslider-list li a { display: block; text-align: center; color: var(--cb-navy); }
.itemslider .itemslider-list li a .image { width: 120px; height: 120px; margin: 0 auto 12px; background-position: center; background-repeat: no-repeat; background-size: contain; border: 1px solid var(--cb-border-light); border-radius: 12px; }
.itemslider .itemslider-list li a .title { display: block; font-weight: 700; font-size: 14px; }
.itemslider .itemslider-list li a .subtitle { display: block; font-size: 12px; color: var(--cb-muted); }
.itemslider input[type=button] { position: absolute; top: 0; bottom: 0; margin: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--cb-orange) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64px" height="64px" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') 50% 50% / 60% no-repeat; cursor: pointer; }
.itemslider input.next { left: 0; }
.itemslider input.previous { right: 0; transform: rotate(180deg); }
.material-grid, .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.material-grid li a, .product-grid li a { display: block; padding: 12px; border: 1px solid var(--cb-border-light); border-radius: 16px; text-align: center; color: var(--cb-navy); transition: .3s; height: 100%; }
.material-grid li a:hover, .product-grid li a:hover { border-color: var(--cb-orange); }
.material-grid li .image-container, .product-grid li .image-container { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: hidden; }
.material-grid li .image-container img, .product-grid li .image-container img { max-width: 100%; max-height: 100%; object-fit: contain; }
.material-grid li .title, .product-grid li .title { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; }
@media only screen and (max-width: 1080px) {
    .itemgridviewer .itemgridviewer-list { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (max-width: 640px) {
    .itemgridviewer .itemgridviewer-list, .material-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* wizard inquiry (price request dialog) */
#_WizardInquiry { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 1700; display: none; overflow: auto; }
#_WizardInquiry .wrapper { position: relative; width: 800px; max-width: calc(100% - 32px); margin: 64px auto; padding: 56px 24px 24px; background: #fff; border-radius: 24px; text-align: center; }
#_WizardInquiry .wrapper .close-button { position: absolute; top: 20px; left: 20px; width: 20px; height: 20px; border: 0; background: transparent url(/Areas/Website/Images/Views/Shared/Close_Black.svg) center / contain no-repeat; cursor: pointer; }
#_WizardInquiry .wrapper .elevator { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 420px; margin: 0 auto 24px; }
#_WizardInquiry .wrapper .elevator .step { padding: 10px 12px; border: 2px solid var(--cb-navy-dark); border-radius: 50px; color: var(--cb-navy-dark); font-weight: 600; text-align: center; }
#_WizardInquiry .wrapper .elevator .step.selected { background: var(--cb-orange); border-color: var(--cb-orange); color: #fff; }
#_WizardInquiry .wrapper form { text-align: right; }
#_WizardInquiry .wrapper form > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 20px; margin-bottom: 16px; }
#_WizardInquiry .wrapper form > div.hidden { display: none; }
#_WizardInquiry .wrapper form .form-section { position: relative; }
#_WizardInquiry .wrapper .success-tab { padding: 32px 0; }
#_WizardInquiry .wrapper .success-tab img { width: 64px; height: 64px; margin: 0 auto 24px; }
#_WizardInquiry .wrapper .success-tab .title { font-size: 18px; font-weight: 700; color: var(--cb-navy); display: block; }
#_WizardInquiry .wrapper #inquiryWizardMiniResult, .inquiry-section .result, .inquiry-section #inquiryMiniResult { display: none; position: absolute; top: 100%; right: 0; left: 0; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); max-height: 300px; overflow: auto; z-index: 20; text-align: right; }
#_WizardInquiry .wrapper #inquiryWizardMiniResult.active, .inquiry-section .result.active, .inquiry-section #inquiryMiniResult.active { display: block; }
#_WizardInquiry .wrapper #inquiryWizardMiniResult div > span, #inquiryMiniResult div > span { display: none; }
#_WizardInquiry .wrapper #inquiryWizardMiniResult ul, #inquiryMiniResult ul { list-style: none; margin: 0; padding: 8px 0; }
#_WizardInquiry .wrapper #inquiryWizardMiniResult li span, #inquiryMiniResult li span { display: block; padding: 8px 16px; cursor: pointer; font-size: 14px; color: var(--cb-navy); }
#_WizardInquiry .wrapper #inquiryWizardMiniResult li:hover span, #inquiryMiniResult li:hover span { background: #f3f4f6; }
#_WizardInquiry .wrapper #inquiryWizardMiniResult mark, #inquiryMiniResult mark { background: transparent; color: var(--cb-orange); }
@media only screen and (max-width: 840px) {
    #_WizardInquiry .wrapper { margin: 16px auto; padding: 56px 16px 16px; }
    #_WizardInquiry .wrapper form > div { grid-template-columns: 1fr 1fr; }
    #_WizardInquiry .wrapper form .form-section.column-span-2, #_WizardInquiry .wrapper form .form-section.column-span-4 { grid-column: span 2; }
}

/* company contact (phone reveal) popup */
#_companycontactpopup { position: fixed; inset: 0; display: none; background: rgba(0, 0, 0, 0.7); z-index: 1700; overflow: auto; }
#_companycontactpopup.active { display: block; }
#_companycontactpopup .container { position: relative; width: 440px; max-width: calc(100% - 32px); margin: 100px auto; background: #fff; border-radius: 24px; padding: 40px 32px 32px; }
#_companycontactpopup .container .button-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 0; background: transparent url(/Areas/Website/Images/Views/Shared/Close_Black.svg) center / 14px no-repeat; cursor: pointer; }
#_companycontactpopup .container .contact-list { list-style: none; padding: 16px 0; margin: 0; display: none; }
#_companycontactpopup .container .contact-list li a { display: block; text-align: center; font-size: 24px; font-weight: 800; color: var(--cb-orange); direction: ltr; padding: 8px; }
#_companycontactpopup .container form { margin: 0; }
#_companycontactpopup .container form label { text-align: center; }

/* inquiry mini form (legacy home) & message forms */
.inquiry-section form { grid-template-columns: 1fr !important; }

/* blog pages */
.blog-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.blog-list li a { display: block; color: var(--cb-navy); }
.blog-list li .blog-image img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 40px; display: block; background: #f3f4f6; }
.blog-list li .blog-content { padding: 16px 32px; }
.blog-list li .blog-title { display: flex; align-items: baseline; gap: 8px; font-size: 20px; line-height: 1.5; margin-bottom: 8px; font-weight: 700; }
.blog-list li .blog-title:before { content: ""; display: block; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: #fe4000; }
.blog-list li .blog-datetime { display: block; text-align: left; color: var(--cb-navy); font-weight: 600; font-size: 14px; }
.blog-list li .blog-lead { display: block; margin-top: 12px; color: #374151; font-size: 14px; }
.blog-list li .blog-lead p { font-size: 14px; }
.blog-list li a:hover .blog-title { color: #fe4000; }
.blogDetail .card { padding: 32px; }
.blogDetail .blogHero img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 24px; display: block; margin-bottom: 24px; }
.blogDetail .blogBody { font-size: 16px; line-height: 2; }
.blogDetail .blogBody img { max-width: 100%; height: auto; border-radius: 12px; }
.blogDetail .blogBody h2, .blogDetail .blogBody h3 { margin: 24px 0 12px; font-size: 22px; line-height: 1.5; }
@media only screen and (max-width: 840px) {
    .blog-list { grid-template-columns: 1fr; }
    .blog-list li .blog-content { padding: 16px; }
    .blog-list li .blog-title { font-size: 16px; }
    .blogDetail .card { padding: 16px; }
}

/* generic footer subscribe states */
footer.mainFooter .subscribe .formMessage { font-size: 13px; margin-top: 8px; display: none; }
footer.mainFooter .subscribe .formMessage.error { display: block; color: var(--cb-orange); }
footer.mainFooter .subscribe .formMessage.success { display: block; color: #1a7f37; }
footer.mainFooter .subscribe .form-control { border-radius: 50px; border: 2px solid var(--cb-border); min-height: 48px; padding: 8px 20px; font: inherit; font-size: 14px; width: 100%; outline: none; transition: .3s; }
footer.mainFooter .subscribe .form-control:focus { border-color: var(--cb-orange); }
footer.mainFooter .subscribe button[type=submit] { background: var(--cb-navy); color: #fff; }
footer.mainFooter .subscribe button[type=submit]:hover { background: var(--cb-orange); }
footer.mainFooter .cardBorder.brands img { max-height: 100px; width: auto; max-width: 100%; cursor: pointer; }
footer.mainFooter .cardBorder.brands a, footer.mainFooter .cardBorder.brands button { display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; }
footer.mainFooter .mainFooter__topSide .phoneNumber a { direction: ltr; }
footer.mainFooter .socials li a img { width: 32px; height: 32px; object-fit: contain; }
footer.mainFooter .mainFooterLogo img { max-width: 100%; }

/* ------------------------------------------------------------------ authentication: shared pieces */
.authPage .authTitle { font-size: 22px; font-weight: 800; color: var(--cb-navy); text-align: center; margin-bottom: 8px; }
.authPage .form-checkbox input:checked ~ label:after { opacity: 1; visibility: visible; }
.authPage #reset-password { display: none; }
.authPage #reset-password.error { display: block; }
.authPage .signup__rightSide--forms form.hidden { display: none; }
.authPage .signup__rightSide--forms .footerForm .row { align-items: center; }
.emptyWidgetText { color: var(--cb-muted); font-size: 14px; margin: 0; padding: 4px 0 8px; }
#companyResults.gridMode .companyList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
#companyResults.gridMode .card.company + .company { margin-top: 0; }
#companyResults.gridMode .card.company { border: 1px solid var(--cb-border-light); border-radius: 16px; padding: 16px; }
#companyResults.gridMode .card.company > .row > .col-md-3 { flex: 0 0 auto; width: 100%; }
#companyResults.gridMode .card.company .card__image a { max-width: 160px; margin: 0 auto; }
#companyResults.gridMode .card.company > .row > .col-md, #companyResults.gridMode .card.company > .row > .col-md-auto { flex: 0 0 auto; width: 100%; }
#companyResults.gridMode .card.company .card__body--title { justify-content: center; }
#companyResults.gridMode .card.company .card__leftInfo--buttonsList { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#companyResults.gridMode .card.company .card__leftInfo--buttonsList a + a { margin-top: 0; }
#companyResults.gridMode .card.company .card__leftInfo--buttonsList a:first-child { grid-column: span 2; }
@media only screen and (max-width: 840px) {
    #companyResults.gridMode .companyList { grid-template-columns: 1fr; }
}
.blogSearch .form-group { display: flex; align-items: center; background: #e9e9e9; border-radius: 50px; padding: 0 8px 0 4px; min-width: 280px; }
.blogSearch .form-group .form-control { background: none; border: 0; border-radius: 50px; min-height: 44px; }
.blogSearch .form-group .form-control:focus { border: 0; }
.blogTitle { font-size: 22px; font-weight: 800; color: var(--cb-navy); margin: 0; }

/* ------------------------------------------------------------------ static / legacy page shells */
.pageContent .wrapper-large.flex > .aside:empty { display: none; }
.pageContent > .section-box, .pageContent .wrapper-large > .section-box, .pageContent .center > .section-box { max-width: 1100px; margin: 0 auto 32px; }
.pageContent .section-box.small { max-width: 560px; }
.pageContent .section-content.withpadding p, .pageContent .section-content.withpadding span, .pageContent .section-content.withpadding li { font-size: 16px; line-height: 2; }
.pageContent .section-content.withpadding ul { padding-right: 24px; }
.pageContent .section-content.withpadding img { max-width: 100%; height: auto; border-radius: 12px; }
.pageContent .section-content.withpadding iframe { width: 100%; min-height: 320px; border: 0; border-radius: 16px; margin-bottom: 16px; }
.pageContent .landingpage-list { list-style: none; margin: 0; padding: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pageContent .landingpage-list li a { display: block; padding: 12px 16px; border: 1px solid var(--cb-border-light); border-radius: 12px; color: var(--cb-navy); font-weight: 600; transition: .3s; }
.pageContent .landingpage-list li a:hover { border-color: var(--cb-orange); color: var(--cb-orange); }
.landingDescription .card h2 { font-size: 20px; margin: 16px 0 8px; color: var(--cb-navy); }
.landingDescription .card p { font-size: 15px; line-height: 2; }
.insideContentWrapper .companySection.landingDescription { margin-top: 32px; }
.priceWidget .widget__body { padding-top: 8px; }
.buyers, .sellers { position: relative; }
@media only screen and (max-width: 840px) {
    .pageContent .landingpage-list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ static content pages (_StaticPageStart / _StaticPageEnd) */
.staticPage { border-radius: 16px; box-shadow: var(--cb-shadow); padding: 32px 40px 40px; background: #fff; }
.staticPage__header { margin-bottom: 24px; }
.staticPage__header h1 { display: flex; align-items: center; gap: 24px; font-size: 24px; font-weight: 800; color: var(--cb-navy); margin: 0; line-height: 1.5; }
.staticPage__header h1:after { content: ""; flex: 1 0 24px; height: 2px; background: var(--cb-orange); }
.staticPage__lead { margin: 12px 0 0; color: var(--cb-muted); font-size: 15px; line-height: 1.9; }
.staticPage__content { font-size: 16px; line-height: 2.1; color: var(--cb-text); }
.staticPage__content h2, .staticPage__content h3 { font-size: 18px; font-weight: 800; color: var(--cb-navy); margin: 28px 0 8px; position: relative; padding-right: 16px; }
.staticPage__content h2:before, .staticPage__content h3:before { content: ""; position: absolute; right: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--cb-orange); }
.staticPage__content h2:first-child, .staticPage__content h3:first-child { margin-top: 0; }
.staticPage__content p { margin: 0 0 12px; }
.staticPage__content ul, .staticPage__content ol { margin: 8px 0 16px; padding-right: 24px; }
.staticPage__content li { margin-bottom: 4px; }
.staticPage__content img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 16px auto; }
.staticPage__content a { color: var(--cb-orange); }
.staticPage__content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.staticPage__content table th, .staticPage__content table td { border: 1px solid var(--cb-border-light); padding: 8px 12px; }
.staticPage__content .WordSection1 { padding: 0 !important; }
.staticPage__content .WordSection1 h3 { font: inherit !important; font-weight: 700 !important; margin: 8px 0 !important; text-indent: 0 !important; }
@media only screen and (max-width: 640px) {
    .staticPage { padding: 20px 16px 24px; }
    .staticPage__header h1 { font-size: 20px; gap: 12px; }
    .staticPage__content { font-size: 15px; }
}

/* FAQ accordion */
.faqList { display: flex; flex-direction: column; gap: 12px; }
.faqItem { border: 1px solid var(--cb-border-light); border-radius: 16px; overflow: hidden; transition: .3s; }
.faqItem[open] { border-color: var(--cb-orange); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
.faqItem summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 20px; font-weight: 700; color: var(--cb-navy); position: relative; }
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary:after { content: ""; position: absolute; right: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="%23ff4000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat; transition: .3s; }
.faqItem[open] summary:after { transform: rotate(180deg); }
.faqItem__body { padding: 0 20px 16px; color: var(--cb-text); border-top: 1px dashed var(--cb-border-light); }
.faqItem__body p { margin: 12px 0 0; }

/* contact page */
.contactGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.contactGrid__item { border: 1px solid var(--cb-border-light); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; background: #fafafb; }
.contactGrid__label { color: var(--cb-muted); font-size: 13px; font-weight: 700; }
.contactGrid__value { font-weight: 700; color: var(--cb-navy); font-size: 16px; line-height: 1.8; }
.contactGrid__value[href]:hover { color: var(--cb-orange); }
.mapFrame { border-radius: 16px; overflow: hidden; border: 1px solid var(--cb-border-light); aspect-ratio: 16 / 7; }
.mapFrame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media only screen and (max-width: 640px) { .contactGrid { grid-template-columns: 1fr; } .mapFrame { aspect-ratio: 4 / 3; } }

/* show room links */
.linkChips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.linkChips a { display: inline-block; padding: 10px 20px; border: 2px solid var(--cb-border-light); border-radius: 50px; color: var(--cb-navy); font-weight: 600; transition: .3s; }
.linkChips a:hover { border-color: var(--cb-orange); color: var(--cb-orange); }

/* status (payment result) */
.statusCard { text-align: center; padding: 24px 16px; }
.statusCard__icon { display: block; width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%; background: #e8f7ee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="%232e9e5b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 44px no-repeat; }
.statusCard--error .statusCard__icon { background: #fdeceb url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="%23d64545" stroke-width="2.5" stroke-linecap="round"/></svg>') center / 40px no-repeat; }
.statusCard h2 { font-size: 22px; color: var(--cb-navy); margin: 0 0 12px; }
.statusCard--error h2 { color: #d64545; }
.statusCard__message { color: #d64545; margin-bottom: 16px; }
.statusCard__hint { color: var(--cb-muted); font-size: 13px; margin-top: 24px; }
.statusCard .btn { margin-top: 8px; }

/* buyers / sellers image maps */
.imageMapPage { margin: -8px 0 0; }
.imageMapPage img { width: 100%; display: block; border-radius: 12px; }
.imageMapPage .overlayBtn { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.imageMapPage .overlayBtn a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: clamp(10px, 1vw, 16px); }
.imageMapPage .overlayBtn a:hover { color: #fff; text-decoration: underline; }

/* design forms inside legacy section boxes (messages, comments, inquiry) */
.designForm .form-group { margin-bottom: 16px; }
.designForm .form-group label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--cb-navy); font-size: 14px; }
.designForm .form-group label .required, .designForm .required { color: var(--cb-orange); }
.designForm .form-control, .designForm input[type=text], .designForm input[type=number], .designForm input[type=tel], .designForm input[type=email], .designForm select, .designForm textarea { display: block; width: 100%; border-radius: 50px; border: 2px solid #e9e9e9; min-height: 48px; padding: 12px 24px; font: inherit; font-size: 14px; color: var(--cb-text); outline: none; background: #fff; transition: .3s; }
.designForm textarea, .designForm textarea.form-control { border-radius: 16px; min-height: 120px; resize: vertical; }
.designForm .form-control:focus, .designForm input:focus, .designForm select:focus, .designForm textarea:focus { border-color: var(--cb-orange); }
.designForm .field-validation-error, .designForm span[data-valmsg-for]:not(:empty) { display: block; color: #d64545; font-size: 13px; margin-top: 6px; }
.designForm .input-validation-error { border-color: #d64545 !important; }
.designForm__recipient { margin: 0 0 16px; color: var(--cb-muted); }
.designForm__actions { display: flex; justify-content: flex-start; gap: 12px; margin-top: 8px; }
.designForm form:has(> .form-section) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.designForm .form-section { display: flex; flex-direction: column; gap: 8px; }
.designForm .form-section > label { font-weight: 700; color: var(--cb-navy); font-size: 14px; }
.designForm .form-section > label .required { color: var(--cb-orange); margin-right: 4px; }
.designForm .form-section.column-span-4 { grid-column: span 4; }
.designForm .form-section.column-span-3 { grid-column: span 3; }
.designForm .form-section.column-span-2 { grid-column: span 2; }
.designForm .form-section.column-span-1 { grid-column: span 1; }
.designForm .form-section.column-gap { display: none; }
.designForm .form-section button, .designForm .form-section input[type=submit] { border: 2px solid var(--cb-orange); background: var(--cb-orange); color: #fff; border-radius: 50px; padding: 12px 32px; font: inherit; font-weight: 700; cursor: pointer; transition: .3s; align-self: flex-start; }
.designForm .form-section button:hover { background: var(--cb-orange-dark); border-color: var(--cb-orange-dark); }
.designForm .form-section .BDC_CaptchaDiv { direction: ltr; display: flex !important; align-items: center; gap: 6px; height: auto !important; width: auto !important; }
.designForm .form-section .BDC_CaptchaImageDiv { border-radius: 8px; overflow: hidden; height: auto !important; }
.designForm .form-section .BDC_CaptchaImageDiv > a { display: none !important; }
.designForm > p { color: var(--cb-muted); margin-bottom: 20px; line-height: 2; }
.designForm > p a { color: var(--cb-orange); font-weight: 700; }
@media only screen and (max-width: 840px) {
    .designForm form:has(> .form-section) { grid-template-columns: 1fr; }
    .designForm .form-section.column-span-4, .designForm .form-section.column-span-3, .designForm .form-section.column-span-2 { grid-column: span 1; }
}
.noticeBox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px dashed var(--cb-border-light); border-radius: 16px; background: #fafafb; color: var(--cb-muted); }
.emptyState { margin: 0; color: var(--cb-muted); text-align: center; padding: 16px 0; }

/* supplier widget (detail pages) */
.supplierWidget .supplierCard { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 8px 0 4px; }
.supplierWidget .supplierCard__logo { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border: 2px solid #bdc6db; border-radius: 16px; padding: 10px; background: #fff; }
.supplierWidget .supplierCard__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.supplierWidget .supplierCard__name { font-size: 17px; font-weight: 800; color: #000; line-height: 1.6; }
.supplierWidget .supplierCard__name:hover { color: var(--cb-orange); }
.supplierWidget .supplierCard__meta { color: var(--cb-muted); font-size: 13px; }
.supplierWidget .supplierCard .btn { width: 100%; justify-content: center; margin-top: 4px; }

/* comments */
.commentList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.commentList--replies { margin: 12px 48px 0 0; padding-right: 16px; border-right: 2px solid var(--cb-border-light); }
.comment { display: flex; gap: 12px; align-items: flex-start; }
.comment__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px; }
.commentList--replies .comment__avatar { width: 40px; height: 40px; flex-basis: 40px; }
.comment__body { flex: 1; background: #fafafb; border: 1px solid var(--cb-border-light); border-radius: 16px; padding: 12px 16px; }
.comment__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin-bottom: 6px; }
.comment__meta strong { color: var(--cb-navy); }
.comment__meta time { color: var(--cb-muted); font-size: 12px; }
.comment__text { margin: 0; line-height: 1.9; white-space: pre-line; }
.comment__reply { padding: 0; margin-top: 8px; font-size: 13px; color: var(--cb-orange); }

/* related advertisements */
.rfqGrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rfqCard { height: 100%; border: 1px solid var(--cb-border-light); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: .3s; }
.rfqCard:hover { border-color: var(--cb-orange); }
.rfqCard__image { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #f4f5f8; }
.rfqCard__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rfqCard__title { font-size: 14px; font-weight: 700; line-height: 1.6; margin: 0; min-height: 44px; }
.rfqCard__title a { color: var(--cb-navy); }
.rfqCard__title a:hover { color: var(--cb-orange); }
.rfqCard__price, .rfqCard__company { margin: 0; font-size: 13px; color: var(--cb-muted); }
.rfqCard__price strong { color: var(--cb-orange); }
.rfqCard__company a { color: var(--cb-navy); font-weight: 600; }
.rfqCard .certificate-list { margin-top: auto; }
@media only screen and (max-width: 1080px) { .rfqGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* detail pages */
.detailPage .section-box:last-child { margin-bottom: 0; }
.detailPage .secondPageSlider { margin-bottom: 24px; }

/* cart / shopping packages (Bootstrap pages) re-themed to the design */
.cartPage, .packagePage { padding: 16px 0 48px; }
.cartPage .card, .packagePage .card { border: 0; border-radius: 16px; box-shadow: var(--cb-shadow); }
.cartPage .card-header { background: #fff; border-bottom: 1px solid var(--cb-border-light); border-radius: 16px 16px 0 0 !important; font-weight: 800; color: var(--cb-navy); padding: 16px 24px; }
.cartPage .card-body { padding: 24px; }
.cartPage h4, .cartPage h5 { color: var(--cb-navy); font-weight: 800; }
.cartPage .btn-primary, .cartPage .btn-success, .packagePage .btn-primary, .packagePage .btn-success { background: var(--cb-orange); border-color: var(--cb-orange); border-radius: 50px; font-weight: 700; padding: 10px 24px; }
.cartPage .btn-primary:hover, .cartPage .btn-success:hover, .packagePage .btn-primary:hover, .packagePage .btn-success:hover { background: var(--cb-orange-dark); border-color: var(--cb-orange-dark); }
.cartPage .btn-secondary, .cartPage .btn-outline-secondary, .cartPage .btn-light, .packagePage .btn-secondary { border-radius: 50px; font-weight: 700; }
.cartPage .form-control, .cartPage .form-select { border-radius: 50px; border: 2px solid #e9e9e9; min-height: 44px; }
.cartPage textarea.form-control { border-radius: 16px; }
.cartPage .form-control:focus { border-color: var(--cb-orange); box-shadow: none; }
.cartPage .cart-item { border-bottom: 1px solid var(--cb-border-light); padding-bottom: 16px; }
.cartPage .cart-item:last-child { border-bottom: 0; }
.cartPage .cart-item-img { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; border: 1px solid var(--cb-border-light); padding: 6px; }
.cartPage .cart-item-title { font-weight: 800; color: var(--cb-navy); }
.cartPage .cart-item-price { color: var(--cb-orange); font-weight: 800; }
.cartPage .table { border-radius: 12px; overflow: hidden; }
.cartPage .table th { background: var(--cb-navy); color: #fff; font-weight: 700; border: 0; }
.cartPage .modal-content { border-radius: 16px; }
.packagePage .table { border-radius: 16px; overflow: hidden; box-shadow: var(--cb-shadow); background: #fff; }
.packagePage .table thead th { background: var(--cb-navy); color: #fff; border-color: rgba(255, 255, 255, 0.15); font-weight: 700; vertical-align: middle; }
.packagePage .table-striped > tbody > tr:nth-of-type(odd) > * { background: #fafafb; }
.packagePage h1 { font-size: 26px; font-weight: 800; color: var(--cb-navy); }
.packagePage .package-selection-card { border-radius: 16px; overflow: hidden; transition: .3s; }
.packagePage .package-selection-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); }

/* ------------------------------------------------------------------ homepage category tiles: the images carry their own caption */
@media only screen and (min-width: 640.98px) {
    .categoriesList .categoriesListBox .categoriesList--item a { justify-content: center; align-items: center; padding: 0px; }
    .categoriesList .categoriesListBox .categoriesList--item a span { display: none; }
    .categoriesList .categoriesListBox .categoriesList--item a:hover img { filter: none; }
    .categoriesList .categoriesListBox .categoriesList--item a:hover { background: #fff; box-shadow: 0 0 60px 2px rgba(165, 171, 191, 0.45); transform: translateY(-4px); }
    .categoriesList .categoriesListBox .categoriesList--item a img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
}
@media only screen and (max-width: 640px) {
    #Home .categoriesListBox .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
    #Home .categoriesListBox .categoriesList--item { width: auto; padding: 0; margin: 0; }
    #Home .categoriesListBox .categoriesList--item a { padding: 0; aspect-ratio: 1; justify-content: center; align-items: center; background: #fff; border-radius: 8px; }
    #Home .categoriesListBox .categoriesList--item a span { display: none; }
    #Home .categoriesListBox .categoriesList--item a img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; filter: none; }
    #Home .categoriesListBox .categoriesList--item a:hover { background: #fff; }
}
/* stories strip sits directly under the hero on the homepage */
#Home .storiesSection { padding: 4px 0 0; }
@media only screen and (max-width: 640px) { #Home .storiesSection { padding: 4px 0 0; } }

/* ------------------------------------------------------------------ authentication pages: refined sizes and positions */
.authPage main > section.login .inside, .authPage main > section.signup .inside { padding: 32px 0; }
.authPage .signup .card, .authPage .login .card { border-radius: 32px; overflow: hidden; box-shadow: 0 30px 80px rgba(41, 59, 95, 0.18); }
.authPage .signup__rightSide { padding: 40px 48px 32px; display: flex; flex-direction: column; justify-content: center; }
.authPage .signup__rightSide--logo { margin-bottom: 28px; }
.authPage .signup__rightSide--logo img { width: 220px; height: auto; }
.authPage .authTitle { font-size: 22px; font-weight: 800; color: var(--cb-navy); text-align: center; margin: 0 0 6px; }
.authPage .otpHint { text-align: center; color: var(--cb-muted); font-size: 14px; line-height: 1.9; margin: 0 0 24px; }
.authPage .signup__rightSide--forms .form-group { margin-bottom: 18px; }
.authPage .signup__rightSide--forms .form-group > label { display: block; font-size: 14px; font-weight: 700; color: var(--cb-navy); margin: 0 12px 8px; }
.authPage .signup__rightSide--forms .form-group > label span { color: var(--cb-orange); }
.authPage .signup__rightSide--forms .form-control { min-height: 50px; padding: 12px 20px; font-size: 14px; }
.authPage .signup__rightSide--forms .form-control::placeholder { color: #a6acbd; font-size: 13px; }
.authPage .signup__rightSide--forms .form-control.ltr:placeholder-shown { direction: rtl; text-align: right; }
.authPage .signup__rightSide--forms .passwordField .form-control { padding-left: 52px; }
.authPage .signup__rightSide--forms .passwordField .view-password { position: absolute !important; left: 18px !important; top: 38px !important; width: 28px !important; height: 28px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 0; background: transparent url(/Areas/Website/Images/Views/Shared/HidePassword.svg) center / 22px no-repeat; cursor: pointer; opacity: .6; transition: .2s; }
.authPage .signup__rightSide--forms .passwordField .view-password:hover { opacity: 1; }
.authPage .signup__rightSide--forms .passwordField .view-password.show { background-image: url(/Areas/Website/Images/Views/Shared/ShowPassword.svg); }
.authPage .signup__rightSide--forms .captchaBox { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.authPage .signup__rightSide--forms .captchaBox .form-control { flex: 1 1 auto; min-width: 0; }
.authPage .signup__rightSide--forms .captchaBox captcha { flex: 0 0 auto; display: block; }
.authPage .captchaBox .BDC_CaptchaDiv { display: flex !important; align-items: center; gap: 8px; direction: ltr; width: auto !important; height: auto !important; }
.authPage .captchaBox .BDC_CaptchaImageDiv { width: auto !important; height: auto !important; border-radius: 12px; overflow: hidden; border: 2px solid #e9e9e9; background: #f7f7f9; }
.authPage .captchaBox .BDC_CaptchaImageDiv .BDC_CaptchaImageDiv { border: 0; border-radius: 0; }
.authPage .captchaBox .BDC_CaptchaImage { display: block; height: 46px !important; width: auto !important; }
.authPage .captchaBox .BDC_CaptchaIconsDiv { width: auto !important; display: flex; }
.authPage .captchaBox .BDC_ReloadLink { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f1f1f4; transition: .2s; }
.authPage .captchaBox .BDC_ReloadLink:hover { background: #ffe3d8; }
.authPage .captchaBox .BDC_ReloadIcon { width: 18px; height: 18px; }
.authPage .signup__rightSide--forms .formMessage { margin: 0 0 16px; }
.authPage .signup__rightSide--forms .field-validation-error, .authPage .signup__rightSide--forms span[data-valmsg-for]:not(:empty) { display: block; color: var(--cb-orange); font-size: 12px; margin: 6px 12px 0; }
.authPage .signup__rightSide--forms button.btn.btn--bg { display: block; width: 100%; min-width: 0 !important; margin: 8px 0 24px !important; min-height: 50px; font-size: 16px; font-weight: 700; border-radius: 50px; }
.authPage .signup__rightSide--forms .form-checkbox { justify-content: flex-start; margin-bottom: 8px; }
.authPage .signup__rightSide--forms .form-checkbox label { font-size: 13px; line-height: 1.8; }
.authPage .signup__rightSide--forms .footerForm { margin: 0; padding-top: 16px; border-top: 1px dashed var(--cb-border-light); }
.authPage .signup__rightSide--forms .footerForm + .footerForm { border-top: 0; padding-top: 12px; }
.authPage .signup__rightSide--forms .footerForm a, .authPage .signup__rightSide--forms .footerForm .resendOtp { font-size: 13.5px; color: var(--cb-navy); }
.authPage .signup__rightSide--forms .footerForm .resendOtp { min-width: 0 !important; margin: 0 !important; padding: 0; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.authPage .signup__rightSide--forms .footerForm .resendOtp:disabled { opacity: .5; cursor: default; }
.authPage .signup__leftSide { height: 100%; min-height: 560px; }
.authPage .signup__leftSide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.authPage .copyRight { margin-top: 24px; font-size: 13px; color: var(--cb-muted); }
@media only screen and (min-width: 1081px) {
    .authPage .login .inside > .col-lg-9, .authPage .signup .inside > .col-lg-9 { flex: 0 0 auto; width: 940px; max-width: 100%; }
}
@media only screen and (max-width: 1080px) {
    .authPage .signup__rightSide { padding: 32px 28px 24px; }
}
@media only screen and (max-width: 991px) {
    .authPage .signup__leftSide { min-height: 0; height: 180px; }
    .authPage .login .signup__leftSide img { object-position: center 35%; }
}
@media only screen and (max-width: 640px) {
    .authPage main > section.login .inside, .authPage main > section.signup .inside { padding: 12px 0; }
    .authPage .signup .card, .authPage .login .card { border-radius: 20px; }
    .authPage .signup__rightSide { padding: 24px 20px 20px; }
    .authPage .signup__rightSide--logo { margin-bottom: 20px; }
    .authPage .signup__rightSide--logo img { width: 180px; }
    .authPage .signup__rightSide--forms .captchaBox { flex-wrap: wrap; }
    .authPage .signup__rightSide--forms .captchaBox .form-control { flex: 1 1 100%; }
    .authPage .signup__leftSide { height: 140px; }
}

/* ------------------------------------------------------------------ stories band (homepage, under the hero) */
#Home .storiesBand__title { display: none; }
#Home .storiesBand { background: #fff; border: 0; border-bottom: 1px solid #eef0f3; border-radius: 0; padding: 12px 0 20px; box-shadow: none; max-width: 1440px; margin: 0 auto; }
#Home .storiesSlider { display: block; position: relative; }
#Home .storiesSlider:not(.slick-initialized) { display: flex; gap: 0; padding: 0; }
#Home .storiesSlider .slick-list { padding: 4px 0; }
#Home .storiesSlider .storiesSlider--item { width: 84px; margin: 0 8px; text-align: center; }
#Home .storiesSlider .storyOpener { display: block; padding: 2px 0; color: var(--cb-navy); }
#Home .storiesSlider .storyOpener:focus-visible { outline: 2px solid var(--cb-orange); outline-offset: 2px; border-radius: 8px; }
#Home .storiesSlider .storiesSlider--item .image { display: block; width: 74px; height: 74px; margin: 0 auto 6px; padding: 3px; border-radius: 50%; background: linear-gradient(35deg, #ffd776 0%, #f56040 30%, #e1306c 60%, #833ab4 100%); }
#Home .storiesSlider .storiesSlider--item .image:before { display: none; }
#Home .storiesSlider .storiesSlider--item .image img { display: block; width: 68px; height: 68px; border: 3px solid #fff; border-radius: 50%; object-fit: cover; background: #fff; transform: none; }
#Home .storiesSlider .storiesSlider--item a > span:last-child { display: block; font-size: 12px; font-weight: 400; line-height: 1.6; color: #262626; width: 100%; margin: 0 auto; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#Home .storiesSlider .storiesSlider--item a > span:last-child br { display: none; }
#Home .categoriesList { margin-top: 44px; }
@media only screen and (max-width: 640px) {
    #Home .storiesBand { padding: 8px 0 16px; }
    #Home .storiesSlider .storiesSlider--item { width: 72px; margin: 0 4px; }
    #Home .storiesSlider .storiesSlider--item .image { width: 62px; height: 62px; }
    #Home .storiesSlider .storiesSlider--item .image img { width: 56px; height: 56px; }
    #Home .categoriesList { margin-top: 24px; }
}

/* ------------------------------------------------------------------ legacy catalog lists rendered as cards */
.catalog-list > li { border: 1px solid var(--cb-border-light); border-radius: 16px; padding: 20px 24px; background: #fff; transition: .3s; }
.catalog-list > li + li { margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--cb-border-light); }
.catalog-list > li:hover { border-color: #d9dce6; box-shadow: 0 12px 32px rgba(41, 59, 95, 0.08); }
.catalog-list > li > article, .catalog-list > li > div { gap: 24px; }
.catalog-items > .title, .catalog-items > a.title { font-size: 18px; }
.catalog-tile > li > article:hover, .catalog-tile > li > div:hover { border-color: #d9dce6; box-shadow: 0 12px 32px rgba(41, 59, 95, 0.08); }
.search-result { padding: 24px; }
@media only screen and (max-width: 640px) { .catalog-list > li { padding: 16px; } .search-result { padding: 12px; } }

/* ------------------------------------------------------------------ cart empty state */
.emptyCart { text-align: center; padding: 64px 16px 72px; }
.emptyCart__icon { display: block; width: 96px; height: 96px; margin: 0 auto 20px; border-radius: 50%; background: #fff3ee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff4000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>') center / 44px no-repeat; }
.emptyCart h2 { font-size: 22px; font-weight: 800; color: var(--cb-navy); margin: 0 0 8px; }
.emptyCart p { color: var(--cb-muted); margin: 0 0 20px; }
/* ------------------------------------------------------------------ shopping package selection page */
.packagePage .select-package-background { background: transparent !important; }
.packagePage .topDots, .packagePage .downDots { display: none !important; }
.packagePage .select-package-background > .col-md-12 { padding: 8px 0 24px; }
.packagePage h1 { font-size: 26px; font-weight: 800; color: var(--cb-navy); margin: 0 0 8px; display: inline-flex; align-items: center; gap: 16px; }
.packagePage h1:before, .packagePage h1:after { content: ""; width: 48px; height: 2px; background: var(--cb-orange); }
.packagePage__lead { color: var(--cb-muted); font-size: 14px; margin: 0; }
.packagePage .package { padding: 12px !important; }
.packagePage .package-selection-card { max-width: 100%; margin: 0; background: #fff; border: 1px solid var(--cb-border-light); border-radius: 20px; padding: 10px; box-shadow: 0 10px 30px rgba(41, 59, 95, 0.08); overflow: hidden; }
.packagePage .package-selection-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(41, 59, 95, 0.16); border-color: #ffd2c2; }
.packagePage .package-backend-image { border-radius: 14px; }
.packagePage .package-price-overlay { right: 5%; left: 5%; bottom: 5%; border-radius: 14px; height: 56px; background: linear-gradient(90deg, #192873, #293b5f); }
.packagePage .package-noghre, .packagePage .package-talaei { filter: none; }
.packagePage .modal-content { border-radius: 20px; border: 0; }
.packagePage .modal-header { border-bottom: 1px solid var(--cb-border-light); }
.packagePage .modal-title { font-weight: 800; color: var(--cb-navy); }
@media only screen and (max-width: 767px) { .packagePage h1 { font-size: 20px; } .packagePage h1:before, .packagePage h1:after { width: 24px; } }

/* ------------------------------------------------------------------ header account buttons: two equal cells, highlight sized to the cell */
header.navigationWrapper .navigationWrapper__leftSide--buttonWrapper { display: inline-flex; align-items: stretch; padding: 0; }
header.navigationWrapper .navigationWrapper__leftSide--buttonWrapper a { flex: 1 1 0; min-width: 104px; padding: 11px 22px; white-space: nowrap; line-height: 1.4; transition: color .3s ease-out; }
header.navigationWrapper .navigationWrapper__leftSide--buttonWrapper a:hover { color: var(--cb-navy); }
header.navigationWrapper .navigationWrapper__leftSide--buttonWrapper .mask { top: 5px; bottom: 5px; right: 5px; width: calc(50% - 10px) !important; border-radius: 16px; }
header.navigationWrapper .navigationWrapper__leftSide--buttonWrapper a:first-child:hover ~ .mask { right: 5px !important; }
header.navigationWrapper .navigationWrapper__leftSide--buttonWrapper a:nth-child(2):hover ~ .mask { right: calc(50% + 5px) !important; }
header.navigationWrapper .navigationWrapper__leftSide--buttonWrapper:before { height: 18px; background: #c9ccd6; }

/* stories strip: paging arrows */
.storiesBand__slider { position: relative; padding: 0 36px; }
.storiesBand__slider .slick-list { overflow: hidden; }
.storiesBand .storiesArrow { position: absolute; top: 50%; margin-top: -22px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="%23293b5f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 18px no-repeat; box-shadow: 0 4px 14px rgba(41, 59, 95, 0.18); cursor: pointer; z-index: 5; text-indent: -9999px; overflow: hidden; transition: .2s; }
.storiesBand .storiesArrow:hover { background-color: var(--cb-orange); box-shadow: 0 6px 18px rgba(255, 64, 0, 0.35); }
.storiesBand .storiesArrow:hover { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="%23ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.storiesBand .storiesArrow.next { right: -4px; transform: rotate(180deg); }
.storiesBand .storiesArrow.prev { left: -4px; }
.storiesBand .storiesArrow.slick-disabled { opacity: 0; visibility: hidden; pointer-events: none; }
.storiesBand .storiesArrow.slick-disabled:hover { background-color: #fff; }
@media only screen and (max-width: 840px) { .storiesBand__slider { padding: 0; } }
/* story player: follow button states */
.storyModalWrapper .storyModalWrapper__follow.following { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.7); }
.storyModalWrapper .storyModalWrapper__follow.following:before { content: "\2713\00a0"; }
.storyModalWrapper .storyModalWrapper__follow:disabled { opacity: .6; }
.storyModalWrapper .storyModalWrapper__follow.shake { animation: storyShake .4s; }
@keyframes storyShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.storyModalWrapper .storyModalWrapper__companyLogo { object-fit: cover; }

/* ------------------------------------------------------------------ homepage advertisement tables: equal cards, uniform rows */
.salesAgahi .row.gy-4 > [class*="col-"] { display: flex; }
.salesAgahi .row.gy-4 > [class*="col-"] > .card { width: 100%; display: flex; flex-direction: column; }
.salesAgahi__body { flex: 1 1 auto; }
/* rows are laid out as a grid: title and company share the free space, badges and button take what they need */
.salesAgahi__body .table, .salesAgahi__body .table tbody { display: block; width: 100%; }
.salesAgahi__body .table tbody tr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 84px max-content; align-items: center; gap: 10px; min-height: 56px; }
.salesAgahi__body .table tbody tr + tr { border-top: 1px solid var(--cb-border-light); }
.salesAgahi__body .table td { display: block; width: auto !important; max-width: none !important; height: auto !important; padding: 4px 4px !important; border: 0 !important; background: none; }
.salesAgahi__body .table td.salesAgahi__body--title a, .salesAgahi__body .table td.salesAgahi__body--subtitle, .salesAgahi__body .table td.salesAgahi__body--subtitle a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.7; }
.salesAgahi__body .table td.salesAgahi__body--title a { font-size: 15px; font-weight: 700; }
.salesAgahi__body .table td.salesAgahi__body--subtitle { font-size: 13px; color: var(--cb-navy); }
.salesAgahi__body .table td.onlyDesktop { justify-self: center; }
.salesAgahi__body .table td.onlyDesktop .certificate-list { justify-content: center; }
.salesAgahi__body .table td.salesAgahi__body--readMore { justify-self: end; text-align: left; }
.salesAgahi__body .table td.salesAgahi__body--readMore .btn { white-space: nowrap; padding: 6px 14px; font-size: 13px; }
@media only screen and (max-width: 640px) {
    .salesAgahi__body .table tbody tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) max-content; min-height: 48px; gap: 6px; }
    .salesAgahi__body .table td.salesAgahi__body--title a { font-size: 14px; }
    .salesAgahi__body .table td.salesAgahi__body--readMore .btn { padding: 5px 10px; font-size: 12px; }
}

/* footer contact block: right-to-left alignment */
footer.mainFooter .mainFooter__topSide p.info { text-align: right !important; direction: rtl; line-height: 2; }
footer.mainFooter .mainFooter__topSide .phoneNumber a { direction: rtl; display: inline-flex; align-items: center; gap: 8px; }
footer.mainFooter .mainFooter__topSide .phoneNumber a bdi { font-variant-numeric: tabular-nums; letter-spacing: .5px; }
footer.mainFooter .mainFooter__topSide .phoneNumber a .text { margin: 0; }
footer.mainFooter .mainFooter__topSide .phoneNumber a .color { margin: 0; }

/* certificate badge lists everywhere: small inline icons, no bullets */
ul.certificate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
ul.certificate-list li { margin: 0; padding: 0; line-height: 0; }
ul.certificate-list img { width: 24px; height: 24px; object-fit: contain; display: block; }
.rfqCard .certificate-list { margin-top: auto; padding-top: 6px; }
.rfqCard .certificate-list img { width: 22px; height: 22px; }

/* Bootstrap (loaded per page on cart / package pages) underlines links; the design never does */
body a, body a:hover, body a:focus { text-decoration: none; }
body .staticPage__content a:hover, body .comment__reply:hover { text-decoration: underline; }

/* package cards: price bar sized to the card */
.packagePage .package-price-overlay { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 12px; white-space: nowrap; }
.packagePage .package-price-label { font-size: 15px; font-weight: 700; color: #ff9b7a; }
.packagePage .package-price-value { font-size: 24px; font-weight: 800; line-height: 1; color: #fff; }
.packagePage .package-price-unit { font-size: 10px; line-height: 1.15; color: #fff; text-align: right; }
.packagePage .package-selection-card { padding: 8px; }
@media only screen and (max-width: 1200px) {
    .packagePage .package-price-overlay { gap: 6px; height: 46px; }
    .packagePage .package-price-label { font-size: 13px; }
    .packagePage .package-price-value { font-size: 20px; }
}

/* ------------------------------------------------------------------ blog cards: homepage "آخرین مقالات" + related posts */
.card.blog .card--header { border-radius: 24px; background: #f3f4f6; }
.card.blog .card--header a { display: block; }
.card.blog .card--header img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; display: block; }
.card.blog:hover .card--header img { transform: scale(1.03); }
.card.blog .card--body { padding: 16px 20px 8px; }
.card.blog .card--body h2 { font-size: 18px; font-weight: 700; line-height: 1.6; margin-bottom: 6px; }
.card.blog .card--body h2 a { display: flex; align-items: flex-start; gap: 10px; }
.card.blog .card--body h2 a:before { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 10px; }
.card.blog .card--body span.date { font-size: 13px; padding-right: 20px; text-align: right; color: var(--cb-muted); }
.card.blog .card--body span.date span { color: var(--cb-orange); }
.blogSection .row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.blogSection .row > .col-md-6 { flex: 0 0 50%; max-width: 50%; padding: 0 12px; }
.blogSection .row > .col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 12px; }
.blogSection .skeleton > div { border-radius: 24px; }
@media only screen and (max-width: 767px) {
    .blogSection .row > .col-md-6 { flex: 0 0 100%; max-width: 100%; }
    .blogSection .row > .col-md-6 + .col-md-6 { margin-top: 16px; }
    .card.blog .card--header { border-radius: 16px; }
    .card.blog .card--body { padding: 12px 8px 4px; }
    .card.blog .card--body h2 { font-size: 15px; }
}

/* ------------------------------------------------------------------ aside "مقالات" widget: compact thumbnail rows */
.mainWrapper .insideContentWrapper .widget.blogWidget .widget__body .widget__body--list { max-height: none; overflow: visible; padding: 4px 0 0; }
.insideContentWrapper .widget.blogWidget .blogMini { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; color: var(--cb-navy); border-top: 1px solid var(--cb-border-light); }
.insideContentWrapper .widget.blogWidget .blogMini:first-child { border-top: 0; padding-top: 4px; }
.insideContentWrapper .widget.blogWidget .blogMini__image { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: #f3f4f6; }
.insideContentWrapper .widget.blogWidget .blogMini__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease-out; }
.insideContentWrapper .widget.blogWidget .blogMini:hover .blogMini__image img { transform: scale(1.06); }
.insideContentWrapper .widget.blogWidget .blogMini__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.insideContentWrapper .widget.blogWidget .blogMini__title { font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--cb-navy); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s ease-out; }
.insideContentWrapper .widget.blogWidget .blogMini:hover .blogMini__title { color: var(--cb-orange); }
.insideContentWrapper .widget.blogWidget .blogMini__date { font-size: 11px; color: var(--cb-muted); direction: ltr; text-align: right; }
.insideContentWrapper .widget.blogWidget .blogMini__more { display: block; margin-top: 8px; padding: 8px 0 2px; border-top: 1px solid var(--cb-border-light); font-size: 12px; font-weight: 700; color: var(--cb-orange); text-align: center; }
.insideContentWrapper .widget.blogWidget .blogMini__more:hover { color: var(--cb-navy); }
.insideContentWrapper .widget.blogWidget .emptyWidgetText { font-size: 13px; color: var(--cb-muted); margin: 0; padding: 4px 0; }

/* homepage blog card image: the full picture (contain) over a blurred copy of itself, so portrait
   or square featured images are neither cropped nor letterboxed with flat bars */
.card.blog .card--header a { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e9ebef; }
.card.blog .card--header a img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.card.blog .card--header a img.card--blur { object-fit: cover; filter: blur(18px) saturate(1.1); transform: scale(1.15); opacity: .85; }
.card.blog .card--header a img.card--picture { object-fit: contain; }
.card.blog:hover .card--header img.card--picture { transform: scale(1.03); }
.card.blog:hover .card--header img.card--blur { transform: scale(1.15); }

/* ------------------------------------------------------------------ shop product overview (material / product detail) */
#_MaterialOverview .section-content.withpadding, #_ProductOverview .section-content.withpadding { padding: 28px; }
#_MaterialOverview .catalog-detail, #_ProductOverview .catalog-detail { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; }
#_MaterialOverview .catalog-images, #_ProductOverview .catalog-images { border: 1px solid var(--cb-border-light); border-radius: 20px; padding: 14px; background: #fafbfd; align-self: start; }
.catalog-images #main-carousel { width: 100%; max-height: none !important; border-radius: 14px; overflow: hidden; background: #fff; }
.catalog-images #main-carousel .splide__slide { height: 260px !important; width: auto; display: flex; align-items: center; justify-content: center; background: #fff; }
.catalog-images #main-carousel .splide__slide img { width: 100%; height: 100%; object-fit: contain !important; border: 0 !important; }
.catalog-images #main-carousel .splide__pagination { bottom: 6px; }
.catalog-images .splide__pagination__page { width: 7px; height: 7px; background: #cbd5e1; opacity: 1; margin: 3px; }
.catalog-images .splide__pagination__page.is-active { background: var(--cb-orange); transform: scale(1.3); }
.catalog-images #thumbnail-carousel { margin-top: 12px; padding: 0 30px; }
.catalog-images #thumbnail-carousel .splide__slide { border: 2px solid transparent; border-radius: 10px; overflow: hidden; opacity: .6; transition: .2s; background: #fff; }
.catalog-images #thumbnail-carousel .splide__slide:hover { opacity: 1; }
.catalog-images #thumbnail-carousel .splide__slide.is-active { border-color: var(--cb-orange); opacity: 1; }
.catalog-images #thumbnail-carousel .splide__slide img { object-fit: contain !important; border: 0 !important; }
.catalog-images .splide__arrow { width: 26px; height: 26px; background: var(--cb-navy); opacity: 1; border: 0; }
.catalog-images .splide__arrow:hover { background: var(--cb-orange); }
.catalog-images .splide__arrow svg { fill: #fff; width: 10px; height: 10px; }
.catalog-images .splide__arrow--prev { left: 0; }
.catalog-images .splide__arrow--next { right: 0; }
.catalog-images .splide__arrow:disabled { opacity: .3; }
.catalog-images .image-list img.noimage { max-height: 240px; }

#_MaterialOverview .catalog-items, #_ProductOverview .catalog-items { display: flex; flex-wrap: wrap; align-content: start; margin: 0; }
#_MaterialOverview .catalog-items > div, #_ProductOverview .catalog-items > div { width: 50%; padding: 8px 0; font-size: 15px; line-height: 1.8; margin: 0 !important; }
#_MaterialOverview .catalog-items > .col-12, #_ProductOverview .catalog-items > .col-12,
#_MaterialOverview .catalog-items > .col-xl-12, #_ProductOverview .catalog-items > .col-xl-12,
#_MaterialOverview .catalog-items > .full, #_ProductOverview .catalog-items > .full { width: 100%; }
#_MaterialOverview .catalog-items > .col-12 hr, #_ProductOverview .catalog-items > .col-12 hr { margin: 8px 0; }
#_MaterialOverview .catalog-items > div:has(.product-option), #_ProductOverview .catalog-items > div:has(.product-option) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; padding: 10px 0; }
#_MaterialOverview .catalog-items > div:has(.product-option) > .attribute-title, #_ProductOverview .catalog-items > div:has(.product-option) > .attribute-title { flex: 0 0 auto; margin-left: 6px; font-weight: 700; color: var(--cb-navy); }
.section-box .catalog-items .attribute-title { color: var(--cb-muted); font-size: 14px; }
.section-box .catalog-items .attribute-text { color: #111827; font-weight: 700; }
.section-box .catalog-items .attribute-text.casnumber { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* option chips (grade / packaging) */
.section-box .product-option { position: relative; display: inline-flex; margin: 0 !important; padding: 0; }
.section-box .product-option input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.section-box .product-option label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 2px solid #e5e7eb; border-radius: 50px; background: #fff; color: var(--cb-navy); font-size: 14px; font-weight: 600; line-height: 1.6; cursor: pointer; transition: .2s; margin: 0; }
.section-box .product-option label:before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #cbd5e1; box-sizing: border-box; background: #fff; transition: .2s; flex: 0 0 12px; }
.section-box .product-option label:hover { border-color: #bdc6db; }
.section-box .product-option input:checked + label { border-color: var(--cb-orange); background: #fff4ef; }
.section-box .product-option input:checked + label:before { border-color: var(--cb-orange); background: var(--cb-orange); box-shadow: inset 0 0 0 2px #fff; }
.section-box .product-option input:focus-visible + label { outline: 2px solid var(--cb-navy); outline-offset: 2px; }

/* price */
#_MaterialOverview .catalog-items > .text-danger, #_ProductOverview .catalog-items > .text-danger { display: flex; align-items: center; gap: 12px; margin-top: 8px !important; padding: 14px 0 6px; border-top: 1px dashed var(--cb-border-light); }
.section-box .catalog-items > .text-danger .attribute-title { font-size: 15px; }
.section-box .catalog-items .price .attribute-text, .section-box .catalog-items .text-danger .attribute-text.price { font-size: 24px; font-weight: 800; color: var(--cb-orange); line-height: 1.4; }
.section-box .catalog-items .attribute-text.price > div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-box .catalog-items .attribute-text.price .hidePrice { font-size: 14px !important; color: #9ca3af !important; font-weight: 600; text-decoration: line-through; }

/* quantity + add to cart */
.section-box .catalog-items .purchaseRow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px !important; padding: 18px 0 0 !important; border-top: 1px solid var(--cb-border-light); }
.section-box .addToCartBtns { display: inline-flex; align-items: center; gap: 4px; border: 0; background: #f1f3f7; border-radius: 50px; padding: 4px; overflow: visible; }
.section-box .addToCartBtns .btn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; transition: .2s; }
.section-box .addToCartBtns .btn i { margin: 0 !important; }
.section-box .addToCartBtns .btn.addToCartCount { background: transparent !important; color: var(--cb-navy) !important; min-width: 40px; width: auto; padding: 0 6px; font-size: 17px; opacity: 1 !important; }
.section-box .addToCartBtns .btn.addToCartPlus { background: var(--cb-navy); color: #fff; }
.section-box .addToCartBtns .btn.addToCartPlus:hover:not(:disabled) { background: var(--cb-navy-dark); }
.section-box .addToCartBtns .btn.addToCartMinus { background: #fff; color: var(--cb-navy); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.section-box .addToCartBtns .btn.addToCartMinus:hover:not(:disabled) { color: var(--cb-orange); }
.section-box .addToCartBtns .btn:disabled { opacity: .4; cursor: not-allowed; }
.section-box .addToCartBtn { flex: 1 1 240px; max-width: 360px; width: auto; margin: 0 !important; border-radius: 50px; padding: 12px 28px; font-size: 16px; font-weight: 700; box-shadow: 0 8px 20px rgba(255, 64, 0, .25); }
.section-box .addToCartBtn i { font-size: 18px; margin: 0 !important; }
.section-box .addToCartBtn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 64, 0, .3); }
@media only screen and (max-width: 1100px) {
    #_MaterialOverview .catalog-detail, #_ProductOverview .catalog-detail { grid-template-columns: 1fr; gap: 24px; }
    #_MaterialOverview .catalog-images, #_ProductOverview .catalog-images { max-width: 420px; margin: 0 auto; }
}
@media only screen and (max-width: 640px) {
    #_MaterialOverview .section-content.withpadding, #_ProductOverview .section-content.withpadding { padding: 16px; }
    #_MaterialOverview .catalog-items > div, #_ProductOverview .catalog-items > div { width: 100%; padding: 6px 0; }
    .catalog-images #main-carousel .splide__slide { height: 220px !important; }
    .section-box .catalog-items .purchaseRow { flex-direction: column; align-items: stretch; }
    .section-box .addToCartBtns { justify-content: space-between; }
    .section-box .addToCartBtn { flex: 0 0 auto; max-width: none; min-height: 48px; }
}

/* Material detail: keep the product and purchase controls usable on narrow screens. */
#Material-Detail .catalog-detail > *, #Material-Detail .section-box { min-width: 0; }
#Material-Detail .section-title, #Material-Detail .attribute-text,
#Material-Detail .attribute-title { overflow-wrap: anywhere; }
#Material-Detail .catalog-images #main-carousel { padding: 0; }
#Material-Detail .catalog-images #thumbnail-carousel { width: 100%; }
@media (min-width: 1081px) {
    #Material-Detail > .container-fluid > .row { display: grid; grid-template-columns: clamp(190px, 14vw, 244px) minmax(0, 1fr) clamp(190px, 14vw, 244px); gap: 24px; margin-inline: 0; }
    #Material-Detail > .container-fluid > .row > :is(.col-md-2, .col-md-8) { width: 100%; min-width: 0; padding-inline: 0; }
    #Material-Detail #_MaterialOverview .catalog-detail { grid-template-columns: clamp(200px, 17vw, 280px) minmax(0, 1fr); gap: 24px; }
    #Material-Detail #_MaterialOverview .catalog-images { width: 100%; max-width: none; margin: 0; }
    #Material-Detail :is(#_MaterialOverview, #_MaterialDetail) .catalog-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #Material-Detail :is(#_MaterialOverview, #_MaterialDetail) .catalog-items > div { width: auto; min-width: 0; padding: 10px 12px; background: #f7f8fa; border-radius: 12px; }
    #Material-Detail :is(#_MaterialOverview, #_MaterialDetail) .catalog-items > :is(.full, .col-12, .col-xl-12),
    #Material-Detail #_MaterialDetail .catalog-items > .col-xl-6 { grid-column: 1 / -1; }
    #Material-Detail :is(#_MaterialOverview, #_MaterialDetail) .catalog-items > div > .attribute-title { display: block; margin-bottom: 4px; font-size: 13px; }
    #Material-Detail #_MaterialOverview .catalog-items > :is(.col-12, .col-xl-12) { padding-inline: 0; background: transparent; }
    #Material-Detail #_MaterialOverview .catalog-items > .col-xl-12 > .attribute-title { flex: 0 0 100%; font-size: 14px; }
    #Material-Detail .product-option, #Material-Detail .product-option label { max-width: 100%; }
    #Material-Detail .product-option label { white-space: normal; overflow-wrap: anywhere; }
    #Material-Detail #_MaterialOverview .catalog-items > .text-danger { flex-wrap: wrap; background: #fff7f2; border: 0; padding: 12px; }
    #Material-Detail .purchaseRow .addToCartBtns { flex: 0 0 auto; }
    #Material-Detail .purchaseRow .addToCartBtn { flex: 1 1 200px; min-width: 0; min-height: 48px; max-width: none; padding: 10px 16px; border-radius: 12px; font-size: 15px; box-shadow: none; }
    #Material-Detail #materialDescription { display: block; overflow-wrap: anywhere; }
    #Material-Detail #materialDescription img { max-width: 100%; height: auto; }
    #Material-Detail #materialDescription table { display: block; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 1080px) {
    #Material-Detail > .container-fluid > .row > .col-md-8 { order: -1; width: 100%; min-width: 0; }
    #Material-Detail > .container-fluid > .row > .insideContentWrapper__aside { width: 100%; min-width: 0; }
    .mainWrapper #Material-Detail .insideContentWrapper__aside,
    .mainWrapper #Material-Detail .insideContentWrapper__aside > .widget { position: static; top: auto; }
    #Material-Detail .secondPageSlider img { height: auto; object-fit: contain; }
    #Material-Detail #_MaterialOverview .catalog-detail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    #Material-Detail #_MaterialOverview .catalog-images { width: 100%; max-width: 360px; }
    #Material-Detail :is(#_MaterialOverview, #_MaterialDetail) .catalog-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
    #Material-Detail :is(#_MaterialOverview, #_MaterialDetail) .catalog-items > div { width: auto; min-width: 0; padding: 12px; border-radius: 12px; background: #f7f8fa; font-size: 14px; line-height: 1.8; }
    #Material-Detail :is(#_MaterialOverview, #_MaterialDetail) .catalog-items > :is(.full, .col-12, .col-xl-12) { grid-column: 1 / -1; }
    #Material-Detail #_MaterialDetail .catalog-items > .col-xl-6 { grid-column: 1 / -1; }
    #Material-Detail :is(#_MaterialOverview, #_MaterialDetail) .catalog-items > div > .attribute-title { display: block; margin: 0 0 4px; font-size: 12px; }
    #Material-Detail #_MaterialOverview .catalog-items > .col-xl-12 { background: #fff; padding-inline: 0; }
    #Material-Detail #_MaterialOverview .catalog-items > .col-xl-12 > .attribute-title { flex: 0 0 100%; font-size: 14px; }
    #Material-Detail .product-option { max-width: 100%; }
    #Material-Detail .product-option label { max-width: 100%; min-height: 44px; padding: 8px 12px; white-space: normal; overflow-wrap: anywhere; }
    #Material-Detail #_MaterialOverview .catalog-items > .text-danger { flex-wrap: wrap; background: #fff7f2; border: 0; padding: 12px; }
    #Material-Detail #_MaterialOverview .catalog-items .attribute-text.price { min-width: 0; font-size: 20px; }
    #Material-Detail #_MaterialOverview .catalog-items > .purchaseRow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; background: #fff; border-radius: 0; padding-inline: 0; }
    #Material-Detail .purchaseRow .addToCartBtns { justify-self: start; justify-content: center; gap: 8px; width: auto; }
    #Material-Detail .purchaseRow .addToCartBtns .btn { width: 44px; min-width: 44px; height: 44px; }
    #Material-Detail .purchaseRow .addToCartBtn { width: 100%; max-width: none; min-height: 48px; height: auto; padding: 10px 16px; border-radius: 12px; font-size: 14px; line-height: 1.8; box-shadow: none; }
    #Material-Detail :is(#_MaterialOverview, #_MaterialDetail, #_MaterialDescription) .section-content.withpadding { padding: 16px; }
    #Material-Detail #materialDescription { display: block; overflow-wrap: anywhere; }
    #Material-Detail #materialDescription img { max-width: 100%; height: auto; }
    #Material-Detail #materialDescription table { display: block; max-width: 100%; overflow-x: auto; }
}
@media (min-width: 641px) and (max-width: 1080px) {
    #Material-Detail #_MaterialOverview .catalog-detail { grid-template-columns: minmax(180px, .65fr) minmax(0, 1fr); }
    #Material-Detail #_MaterialOverview .catalog-images { max-width: none; }
    #Material-Detail > .container-fluid > .row > .insideContentWrapper__aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
    #Material-Detail .insideContentWrapper__aside > .widget { min-width: 0; margin: 0; }
    #Material-Detail .insideContentWrapper__aside > .widget.add { grid-column: 1 / -1; }
    #Material-Detail .widget.add .widget__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; align-items: center; }
    #Material-Detail .widget.add .widget__body a + a { margin-top: 0; }
    #Material-Detail .widget.add .widget__body img { max-height: 220px; }
}
@media (max-width: 640px) {
    #Material-Detail .section-box > .section-title { display: block; font-size: 18px; line-height: 1.8; }
    #Material-Detail .section-box > .section-title:after { display: none; }
}

/* ------------------------------------------------------------------ checkout (cart step 2) */
.cartPage .progress-bar-wrapper { background: #fff; border-radius: 16px; box-shadow: var(--cb-shadow); padding: 20px 24px 14px; margin: 0 0 24px !important; }
.cartPage .status-bar { height: 3px; background: #e5e7eb; top: 21px; }
.cartPage .current-status { height: 3px; background: var(--cb-orange); }
.cartPage li.section { padding-top: 46px; font-size: 14px; font-weight: 700; color: var(--cb-muted); overflow: visible; line-height: 1.5; }
.cartPage li.section:before { content: ""; width: 32px; height: 32px; left: calc(50% - 16px); top: 5px; background: #fff; border: 3px solid #e5e7eb; border-radius: 50%; box-sizing: border-box; line-height: 26px; font-size: 14px; color: #fff; }
.cartPage li.section.visited { color: var(--cb-navy); }
.cartPage li.section.visited:before { content: "\2714"; background: var(--cb-orange); border-color: var(--cb-orange); animation: none; }
.cartPage li.section.visited.current:before { box-shadow: 0 0 0 4px #ffe3d6; }
.cartPage li.section.visited.current { color: var(--cb-orange); }

.cartPage .card.mt-3 { margin-top: 24px !important; }
.cartPage .card-body.row { margin: 0; padding: 12px 12px 24px; }
.cartPage .form-group { padding: 12px; margin: 0 !important; }
.cartPage .form-group > label { display: block; font-size: 14px; font-weight: 700; color: var(--cb-navy); margin-bottom: 8px; }
.cartPage .form-group > label .text-danger { color: var(--cb-orange) !important; }
.cartPage .form-group > label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; cursor: pointer; }
.cartPage input[type=checkbox], .cartPage input[type=radio] { accent-color: var(--cb-orange); width: 18px; height: 18px; margin: 0 !important; flex: 0 0 18px; }
.cartPage .form-control { font-size: 15px; padding: 8px 18px; background: #fff; color: #111827; }
.cartPage .form-control::placeholder { color: #9ca3af; }
.cartPage .alert { border-radius: 12px; }
.cartPage .alert h6 { margin: 0; font-size: 14px; }
.cartPage .v-select .vs__dropdown-toggle { border-radius: 50px; border: 2px solid #e9e9e9; min-height: 44px; padding: 0 12px 0 8px; background: #fff; }
.cartPage .v-select.vs--open .vs__dropdown-toggle { border-color: var(--cb-orange); }
.cartPage .vs__selected-options { padding: 0 4px; align-items: center; }
.cartPage .vs__selected { color: #111827; font-size: 15px; margin: 0; padding: 0 4px; border: 0; }
.cartPage .vs__search, .cartPage .vs__search:focus { font-size: 15px; margin: 0; padding: 0 4px; }
.cartPage .vs__actions { padding: 0 4px; }
.cartPage .vs__dropdown-menu { border-radius: 12px; border: 1px solid var(--cb-border-light); box-shadow: var(--cb-shadow); font-size: 14px; padding: 6px 0; }
.cartPage .vs__dropdown-option { padding: 8px 16px; }
.cartPage .vs__dropdown-option--highlight { background: var(--cb-orange); color: #fff; }

.cartPage .col-md-3 .card { position: sticky; top: 100px; }
.cartPage .col-md-3 .card-body > .d-flex.justify-content-between { align-items: baseline; gap: 12px; font-size: 15px !important; color: #4b5563; padding: 7px 0; margin: 0 !important; }
.cartPage .col-md-3 .card-body > .d-flex.justify-content-between > span:last-child { white-space: nowrap; font-weight: 700; color: var(--cb-navy); }
.cartPage .col-md-3 .card-body > .d-flex .text-success { color: #15803d !important; }
.cartPage .col-md-3 .card-body > .d-flex:has(> .text-danger) { border-top: 1px dashed var(--cb-border-light); margin-top: 8px !important; padding-top: 14px; font-size: 17px !important; }
.cartPage .col-md-3 .card-body > .d-flex > .text-danger { color: var(--cb-navy) !important; font-weight: 800; }
.cartPage .col-md-3 .card-body > .d-flex > span.text-danger:last-child { color: var(--cb-orange) !important; }
.cartPage .input-group { flex-wrap: nowrap; gap: 8px; margin: 8px 0 0 !important; }
.cartPage .input-group > .form-control { border-radius: 50px !important; min-width: 0; }
.cartPage .input-group > .btn { border-radius: 50px !important; border: 2px solid var(--cb-navy); background: #fff; color: var(--cb-navy); font-weight: 700; padding: 8px 18px; white-space: nowrap; }
.cartPage .input-group > .btn:hover:not(:disabled) { background: var(--cb-navy); color: #fff; }
.cartPage .input-group > .btn:disabled { opacity: .45; }
.cartPage .terms { max-height: 180px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--cb-border-light); background: #f8fafc; border-radius: 12px; font-size: 13px; line-height: 1.9; color: #374151; }
.cartPage .terms::-webkit-scrollbar { width: 6px; }
.cartPage .terms::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
.cartPage .terms p, .cartPage .terms li { font-size: 13px; margin: 0 0 6px; }
.cartPage .col-md-3 .col-12.mt-2 label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; color: var(--cb-navy); cursor: pointer; margin: 0; }
.cartPage .col-md-3 .col-12.mt-2 label.text-danger { color: var(--cb-orange) !important; font-size: 13px; margin-top: 6px; }
.cartPage .btn-lg { font-size: 16px; padding: 12px 24px; border-radius: 50px; }
.cartPage .btn-info { background: var(--cb-navy); border-color: var(--cb-navy); color: #fff; font-weight: 700; border-radius: 50px; }
.cartPage .btn-info:hover { background: var(--cb-navy-dark); border-color: var(--cb-navy-dark); color: #fff; }
.cartPage .btn-warning { border-radius: 50px; font-weight: 700; }
.cartPage .modal-header { border-bottom: 1px solid var(--cb-border-light); }
.cartPage .table-responsive table { font-size: 13px; }
@media only screen and (max-width: 767px) {
    .cartPage .form-group.col-6 { flex: 0 0 100%; max-width: 100%; }
    .cartPage .col-md-3 .card { position: static; margin-top: 24px; }
    .cartPage .progress-bar-wrapper { padding: 16px 8px 10px; }
    .cartPage li.section { font-size: 12px; }
}

/* ------------------------------------------------------------------ file download links (MSDS / analysis PDFs) */
.section-box .fileLink { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 14px; border: 2px solid var(--cb-border-light); border-radius: 50px; color: var(--cb-navy); font-weight: 700; font-size: 14px; background: #fff; transition: .2s; margin: 4px 0; }
.section-box .fileLink:before { content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff4000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>') center / contain no-repeat; }
.section-box .fileLink:hover { border-color: var(--cb-orange); color: var(--cb-orange); }

/* ------------------------------------------------------------------ shop listing cards */
#Product-Index .search-result, :is(#Material-Index, #Material-Category) .search-result { padding: 16px 24px 24px; }
#Product-Index .catalog-list > li, :is(#Material-Index, #Material-Category) .catalog-list > li { padding: 20px; border-radius: 20px; }
#Product-Index .catalog-list > li + li, :is(#Material-Index, #Material-Category) .catalog-list > li + li { margin-top: 16px; }
.catalog-list > li > article { display: grid; grid-template-columns: 150px minmax(0, 1fr) 190px; gap: 24px; align-items: start; }
.catalog-list .catalog-image-container { position: relative; width: 150px; height: 150px; border: 1px solid var(--cb-border-light); border-radius: 16px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; padding: 0px; }
.catalog-list .catalog-image-container .catalog-image-link { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 0px; }
.catalog-list .catalog-image-container img.catalog-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.catalog-list .catalog-image-container .ribbon, .catalog-list .catalog-image-container .ribbon-discount { position: absolute; top: 0; right: 0; width: 48px; height: 48px; }
.catalog-list .catalog-image-container .favorite-button { position: absolute; top: 8px; left: 8px; }
.catalog-list .catalog-items { align-content: start; }
.catalog-list .catalog-items > .title { font-size: 18px; font-weight: 800; line-height: 1.6; margin-bottom: 8px; color: var(--cb-navy); }
.catalog-list .catalog-items > div { width: 50%; padding: 3px 0; font-size: 14px; line-height: 1.8; }
.catalog-list .catalog-items > div.full, .catalog-list .catalog-items > .item.full { width: 100%; }
.catalog-list .catalog-items > div.mobile-only { display: none; }
.catalog-list .catalog-items .attribute-title { color: var(--cb-muted); }
.catalog-list .catalog-items .attribute-text { color: #111827; font-weight: 700; }
.catalog-list .catalog-items > div.ltr .attribute-text { direction: ltr; unicode-bidi: embed; display: inline-block; }
.catalog-list .catalog-items > .price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--cb-border-light); }
.catalog-list .catalog-items > .price .attribute-text { font-size: 18px; font-weight: 800; color: var(--cb-orange); }
.catalog-list .catalog-items > .price .attribute-text a { color: var(--cb-orange); }
.catalog-list .catalog-items .shortDescription { font-size: 13px; color: #6b7280; line-height: 1.9; margin-top: 8px; -webkit-line-clamp: 2; }
.catalog-list .catalog-sideinfo { gap: 10px; padding-right: 20px; border-right: 1px solid var(--cb-border-light); align-self: stretch; justify-content: center; }
.catalog-list .catalog-sideinfo .side-logo { width: 72px; height: 72px; }
.catalog-list .catalog-sideinfo .company-name { font-size: 13px; line-height: 1.6; }
.catalog-list .catalog-sideinfo .button { border-radius: 50px; padding: 8px 14px; font-size: 13px; border-width: 2px; }
.catalog-list .catalog-sideinfo .addToCartBtn { border-radius: 50px; padding: 10px 14px; font-size: 14px; font-weight: 700; gap: 8px; box-shadow: 0 6px 16px rgba(255, 64, 0, .22); text-decoration: none; }
.catalog-list .catalog-sideinfo .addToCartBtn i { font-size: 16px; margin: 0 !important; }
.catalog-list .catalog-sideinfo .addToCartBtn:hover { color: #fff; transform: translateY(-1px); }
@media only screen and (max-width: 1100px) {
    .catalog-list > li > article { grid-template-columns: 120px minmax(0, 1fr); }
    .catalog-list .catalog-image-container { width: 120px; height: 120px; }
    .catalog-list .catalog-sideinfo { grid-column: 1 / -1; border-right: 0; padding-right: 0; border-top: 1px solid var(--cb-border-light); padding-top: 14px; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
    .catalog-list .catalog-sideinfo .side-logo { display: none; }
    .catalog-list .catalog-sideinfo .company-name { width: 100%; text-align: right; }
}
@media only screen and (max-width: 640px) {
    .catalog-list > li > article { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
    .catalog-list .catalog-image-container { width: 96px; height: 96px; }
    .catalog-list .catalog-items > div { width: 100%; }
    .catalog-list .catalog-items > .title { font-size: 15px; }
    .catalog-list .catalog-sideinfo .button, .catalog-list .catalog-sideinfo .addToCartBtn { flex: 1 1 45%; }
}

/* sort bar of the listings */
.centerSideWrapper__header .index-view-option { padding: 18px 24px; gap: 8px 16px; }
.centerSideWrapper__header .index-view-option .title { color: var(--cb-muted); font-weight: 600; margin-left: 4px; }
.centerSideWrapper__header .index-view-option > input[type=button] { padding: 6px 14px; border-radius: 50px; background: #f5f6fa; color: var(--cb-navy); font-weight: 600; font-size: 14px; }
.centerSideWrapper__header .index-view-option > input[type=button].selected { background: var(--cb-orange); color: #fff; }
.centerSideWrapper__header .index-view-option > input[type=button]:hover:not(.selected) { background: #e9ecf3; color: var(--cb-navy); }
.centerSideWrapper__header .index-view-changer { margin-right: auto; }

/* ------------------------------------------------------------------ price range widget (shop) */
.priceWidget .widget__body { padding: 8px 16px 20px !important; }
.priceWidget .section-aside .aside-title { display: none; }
.priceWidget .section-aside.loading { background: none; min-height: 0; }
.priceWidget .section-aside.loading > * { opacity: 1; visibility: visible; }
.priceWidget .box { max-width: none; width: 100%; padding: 8px 4px 4px; background: none; box-shadow: none; border-radius: 0; --primary: var(--cb-orange); --headline: var(--cb-navy); --text: var(--cb-muted); }
.priceWidget .box .values { display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; font-size: 13px; color: var(--cb-muted); font-weight: 600; }
.priceWidget .box .values > div { display: flex; align-items: baseline; gap: 4px; margin: 0 !important; }
.priceWidget .box .values > div > span { color: var(--cb-navy); font-weight: 800; font-size: 14px; direction: ltr; unicode-bidi: embed; }
.priceWidget .box .slider { margin-top: 44px; --primary: var(--cb-orange); --handle: #fff; --handle-hover: #fff4ef; --handle-active: #ffe1d5; --handle-border: 3px solid var(--cb-orange); --line: #dfe3ea; --line-active: var(--cb-orange); }
.priceWidget .box .slider .ui-slider-handle { direction: ltr; }
.priceWidget .box .slider .ui-slider-handle div { box-shadow: 0 2px 6px rgba(0,0,0,.12); }

/* ------------------------------------------------------------------ cart page items */
.cartPage .card-body > .col-12 h4 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--cb-navy); margin: 4px 0 0; }
.cartPage .card-body > .col-12 h4 i { color: var(--cb-orange); font-size: 14px; }
.cartPage .card-body > .col-12 hr { border: 0; border-top: 1px solid var(--cb-border-light); margin: 12px 0 4px; opacity: 1; }
.cartPage .cart-item { min-height: 0 !important; padding: 16px 0 !important; border-bottom: 1px solid var(--cb-border-light) !important; gap: 16px; }
.cartPage .cart-item:last-child { border-bottom: 0 !important; }
.cartPage .cart-item .flex-shrink-0 a { display: block; }
.cartPage .cart-item-img { width: 104px !important; height: 104px !important; max-width: none !important; max-height: none !important; object-fit: contain; border-radius: 14px !important; border: 1px solid var(--cb-border-light) !important; padding: 8px !important; background: #fff; margin: 0 !important; }
.cartPage .cart-item-info { margin: 0 !important; padding: 0 !important; min-width: 0; }
.cartPage .cart-item-title { font-size: 17px !important; font-weight: 800 !important; line-height: 1.6; color: var(--cb-navy); margin-bottom: 6px !important; }
.cartPage .cart-item-title a { color: var(--cb-navy) !important; }
.cartPage .cart-item-title a:hover { color: var(--cb-orange) !important; }
.cartPage .cart-item-company, .cartPage .cart-item-count, .cartPage .cart-item-type { font-size: 13px !important; color: #6b7280 !important; line-height: 1.9; }
.cartPage .cart-item-price { font-size: 16px !important; font-weight: 800; color: var(--cb-orange); }
.cartPage .cart-item-price .hidePrice { font-size: 13px; font-weight: 600; color: #9ca3af; margin-left: 6px; }
.cartPage .cart-item .d-flex.flex-row-reverse { align-items: center; gap: 12px; flex-wrap: wrap; }
.cartPage .addToCartBtns { display: inline-flex; align-items: center; gap: 4px; background: #f1f3f7; border: 0 !important; border-radius: 50px !important; padding: 4px; margin: 0 !important; }
.cartPage .addToCartBtns .btn { width: 38px; height: 38px; padding: 0; border: 0 !important; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: none !important; }
.cartPage .addToCartBtns .btn i { margin: 0 !important; }
.cartPage .addToCartBtns .btn.addToCartCount { background: transparent !important; color: var(--cb-navy) !important; min-width: 36px; width: auto; padding: 0 4px; font-size: 16px; opacity: 1 !important; }
.cartPage .addToCartBtns .btn.addToCartPlus { background: var(--cb-navy) !important; color: #fff !important; }
.cartPage .addToCartBtns .btn.addToCartMinus { background: #fff !important; color: var(--cb-navy) !important; }
.cartPage .addToCartBtns .btn.btn-light { background: #fff !important; color: #dc2626 !important; }
.cartPage .addToCartBtns .btn.btn-light:hover { background: #fee2e2 !important; }
.cartPage .addToCartBtns .btn:disabled { opacity: .35; }
.cartPage .card-body > .cart-item > .btn-light { border-radius: 50%; }
@media only screen and (max-width: 640px) {
    .cartPage .cart-item { flex-direction: column; }
    .cartPage .cart-item-img { width: 80px !important; height: 80px !important; }
}

/* Shared address, inquiry and listing dropdowns (vue-select). */
select.cb-select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; clip-path: inset(50%); overflow: hidden; pointer-events: none; }
.cb-select { position: relative; width: 100%; min-width: 0; font: inherit; text-align: right; }
.pagination-size .cb-select { width: 100px; flex: 0 0 100px; }
.cb-select.vs--open { z-index: 40; }
select.input-validation-error + .cb-select .vs__dropdown-toggle { border-color: var(--cb-orange) !important; }
.cb-select .vs__dropdown-menu { min-width: 100%; }
.cb-select--above .vs__dropdown-menu { top: auto !important; bottom: calc(100% + 6px); }
:is(.cartPage .v-select, .cb-select) { font-size: 15px; }
:is(.cartPage .v-select, .cb-select) .vs__dropdown-toggle { border-radius: 50px !important; border: 2px solid #e9e9e9 !important; min-height: 46px; padding: 0 8px 0 8px !important; background: #fff; align-items: center; transition: border-color .2s; }
:is(.cartPage .v-select, .cb-select).vs--open .vs__dropdown-toggle, :is(.cartPage .v-select, .cb-select):focus-within .vs__dropdown-toggle { border-color: var(--cb-orange) !important; }
:is(.cartPage, .cb-select) .vs__selected-options { align-items: center; flex-wrap: nowrap; padding: 0 8px; min-height: 42px; min-width: 0; }
:is(.cartPage, .cb-select) .vs__selected { margin: 0 !important; padding: 0 !important; border: 0; color: #111827; font-weight: 600; background: transparent; }
:is(.cartPage, .cb-select) .vs--single.vs--open .vs__selected { opacity: .35; }
:is(.cartPage, .cb-select) .vs__search, :is(.cartPage, .cb-select) .vs__search:focus { margin: 0 !important; padding: 0 4px !important; font-size: 15px; color: #111827; border: 0; }
:is(.cartPage, .cb-select) .vs__search::placeholder { color: #9ca3af; }
:is(.cartPage, .cb-select) .vs__actions { padding: 0 !important; gap: 4px; flex-shrink: 0; }
:is(.cartPage, .cb-select) .vs__clear { display: none; }
:is(.cartPage, .cb-select) .vs__open-indicator { width: 30px; height: 30px; flex-shrink: 0; padding: 8px; border-radius: 50%; background: #f1f3f7; fill: var(--cb-navy); }
:is(.cartPage .vs--open, .cb-select.vs--open) .vs__open-indicator { background: #fff1eb; fill: var(--cb-orange); }
:is(.cartPage, .cb-select) .vs__dropdown-menu { top: calc(100% + 6px); border-radius: 16px !important; border: 1px solid var(--cb-border-light) !important; box-shadow: 0 14px 36px rgba(41, 59, 95, .16) !important; padding: 6px !important; max-height: 280px; }
:is(.cartPage, .cb-select) .vs__dropdown-menu::-webkit-scrollbar { width: 6px; }
:is(.cartPage, .cb-select) .vs__dropdown-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
:is(.cartPage, .cb-select) .vs__dropdown-option { padding: 9px 14px !important; border-radius: 10px; font-size: 14px; color: var(--cb-navy); white-space: normal; }
:is(.cartPage, .cb-select) .vs__dropdown-option--highlight { background: #fff1eb !important; color: var(--cb-orange) !important; }
:is(.cartPage, .cb-select) .vs__dropdown-option--selected { font-weight: 800; color: var(--cb-orange); }
:is(.cartPage, .cb-select) .vs__no-options { padding: 12px; color: var(--cb-muted); font-size: 13px; }

/* vue-select renders its menu left-to-right unless dir=rtl is set on the component: force RTL text in the checkout dropdowns */
:is(.cartPage, .cb-select) .v-select, :is(.cartPage, .cb-select) .vs__dropdown-toggle, :is(.cartPage, .cb-select) .vs__dropdown-menu { direction: rtl; }
:is(.cartPage, .cb-select) .vs__dropdown-menu, :is(.cartPage, .cb-select) .vs__dropdown-option, :is(.cartPage, .cb-select) .vs__no-options { text-align: right !important; }
:is(.cartPage, .cb-select) .vs__search, :is(.cartPage, .cb-select) .vs__search:focus { text-align: right; direction: rtl; }
:is(.cartPage, .cb-select) .vs__selected-options { justify-content: flex-start; }

/* ------------------------------------------------------------------ shop listing styled like the company list (/company) */
/* sort bar: plain text links with the active one in orange, same as the company page header */
.centerSideWrapper__header .index-view-option { padding: 32px 32px 24px; border-bottom: 0; gap: 8px 24px; }
.centerSideWrapper__header .index-view-option .title { color: var(--cb-navy); font-weight: 700; font-size: 15px; margin: 0; }
.centerSideWrapper__header .index-view-option > input[type=button] { padding: 0; border-radius: 0; background: none; color: var(--cb-navy); font-weight: 700; font-size: 15px; }
.centerSideWrapper__header .index-view-option > input[type=button].selected { background: none; color: var(--cb-orange); }
.centerSideWrapper__header .index-view-option > input[type=button]:hover:not(.selected) { background: none; color: var(--cb-orange); }
.centerSideWrapper__header .index-view-changer input[type=button] { width: 28px; height: 28px; background-size: 24px auto; }
#Product-Index .search-result, :is(#Material-Index, #Material-Category) .search-result { padding: 0 32px 32px; }
#Product-Index .resultInfo, :is(#Material-Index, #Material-Category) .resultInfo { font-size: 14px; color: var(--cb-muted); margin: 0 0 24px; }
#Product-Index .pagination .pagination-info { display: none; }

/* cards: open layout without boxes, square framed image, big black title, buttons column on the left */
#Product-Index .catalog-list > li, :is(#Material-Index, #Material-Category) .catalog-list > li { border: 0; border-radius: 0; padding: 0; box-shadow: none; background: none; }
#Product-Index .catalog-list > li:hover, :is(#Material-Index, #Material-Category) .catalog-list > li:hover { box-shadow: none; }
#Product-Index .catalog-list > li + li, :is(#Material-Index, #Material-Category) .catalog-list > li + li { margin-top: 48px; padding-top: 0; border-top: 0; }
#Product-Index .catalog-list > li > article, :is(#Material-Index, #Material-Category) .catalog-list > li > article { grid-template-columns: 200px minmax(0, 1fr) 200px; gap: 32px; }
#Product-Index .catalog-list .catalog-image-container, :is(#Material-Index, #Material-Category) .catalog-list .catalog-image-container { width: 200px; height: 200px; border: 2px solid #bdc6db; border-radius: 16px; }
#Product-Index .catalog-list .catalog-image-container .catalog-image-link, :is(#Material-Index, #Material-Category) .catalog-list .catalog-image-container .catalog-image-link { padding: 16px; }
#Product-Index .catalog-list .catalog-items > .title, :is(#Material-Index, #Material-Category) .catalog-list .catalog-items > .title { font-size: 22px; font-weight: 800; color: #000; margin-bottom: 12px; line-height: 1.4; }
#Product-Index .catalog-list .catalog-items > .title:hover, :is(#Material-Index, #Material-Category) .catalog-list .catalog-items > .title:hover { color: var(--cb-orange); }
#Product-Index .catalog-list .catalog-items > div, :is(#Material-Index, #Material-Category) .catalog-list .catalog-items > div { font-size: 14px; padding: 2px 0; }
#Product-Index .catalog-list .catalog-items .attribute-text, :is(#Material-Index, #Material-Category) .catalog-list .catalog-items .attribute-text { color: #000; }
#Product-Index .catalog-list .catalog-items > .price, :is(#Material-Index, #Material-Category) .catalog-list .catalog-items > .price { border-top: 0; margin-top: 12px; padding-top: 0; }
#Product-Index .catalog-list .catalog-items > .price .attribute-text, :is(#Material-Index, #Material-Category) .catalog-list .catalog-items > .price .attribute-text { font-size: 20px; }
#Product-Index .catalog-list .catalog-items .shortDescription, :is(#Material-Index, #Material-Category) .catalog-list .catalog-items .shortDescription { font-size: 15px; color: #000; line-height: 1.9; margin-top: 16px; -webkit-line-clamp: 3; }
#Product-Index .catalog-list .catalog-sideinfo, :is(#Material-Index, #Material-Category) .catalog-list .catalog-sideinfo { border-right: 0; padding-right: 0; justify-content: flex-start; gap: 12px; }
#Product-Index .catalog-list .catalog-sideinfo .side-logo, :is(#Material-Index, #Material-Category) .catalog-list .catalog-sideinfo .side-logo { display: none; }
#Product-Index .catalog-list .catalog-sideinfo .company-name, :is(#Material-Index, #Material-Category) .catalog-list .catalog-sideinfo .company-name { order: -2; font-size: 16px; font-weight: 800; color: #000; margin-bottom: 8px; line-height: 1.6; }
#Product-Index .catalog-list .catalog-sideinfo .addToCartBtn, :is(#Material-Index, #Material-Category) .catalog-list .catalog-sideinfo .addToCartBtn { order: -1; border-radius: 16px; box-shadow: none; padding: 10px 16px; font-size: 14px; }
#Product-Index .catalog-list .catalog-sideinfo .addToCartBtn:hover, :is(#Material-Index, #Material-Category) .catalog-list .catalog-sideinfo .addToCartBtn:hover { transform: none; background: var(--cb-orange-dark); border-color: var(--cb-orange-dark); }
#Product-Index .catalog-list .catalog-sideinfo .button, :is(#Material-Index, #Material-Category) .catalog-list .catalog-sideinfo .button { border-radius: 16px; padding: 10px 16px; font-size: 14px; }
@media only screen and (max-width: 1100px) {
    #Product-Index .catalog-list > li > article, :is(#Material-Index, #Material-Category) .catalog-list > li > article { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }
    #Product-Index .catalog-list .catalog-image-container, :is(#Material-Index, #Material-Category) .catalog-list .catalog-image-container { width: 140px; height: 140px; }
    #Product-Index .catalog-list .catalog-sideinfo, :is(#Material-Index, #Material-Category) .catalog-list .catalog-sideinfo { border-top: 0; padding-top: 4px; }
    #Product-Index .catalog-list .catalog-sideinfo .company-name, :is(#Material-Index, #Material-Category) .catalog-list .catalog-sideinfo .company-name { display: none; }
    #Product-Index .catalog-list > li + li, :is(#Material-Index, #Material-Category) .catalog-list > li + li { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--cb-border-light); }
}
@media only screen and (max-width: 640px) {
    .centerSideWrapper__header .index-view-option { padding: 16px; gap: 8px 16px; }
    #Product-Index .search-result, :is(#Material-Index, #Material-Category) .search-result { padding: 0 16px 16px; }
    #Product-Index .catalog-list > li > article, :is(#Material-Index, #Material-Category) .catalog-list > li > article { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
    #Product-Index .catalog-list .catalog-image-container, :is(#Material-Index, #Material-Category) .catalog-list .catalog-image-container { width: 96px; height: 96px; }
    #Product-Index .catalog-list .catalog-image-container .catalog-image-link, :is(#Material-Index, #Material-Category) .catalog-list .catalog-image-container .catalog-image-link { padding: 8px; }
    #Product-Index .catalog-list .catalog-items > .title, :is(#Material-Index, #Material-Category) .catalog-list .catalog-items > .title { font-size: 16px; }
}
/* the header wrapper already carries the 32px padding of the company page header */
.centerSideWrapper__header .index-view-option { padding: 0; }
@media only screen and (max-width: 640px) { .centerSideWrapper__header .index-view-option { padding: 0; } }
/* Catalog listings: responsive RTL cards in both listing modes. */
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result { padding: 20px; direction: rtl; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list, :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-tile { display: grid; gap: 20px; margin: 0 0 20px; padding: 0; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list { grid-template-columns: minmax(0, 1fr); }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-tile { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list > li, :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-tile > li { min-width: 0; margin: 0; padding: 20px; border: 1px solid #e0e5ed; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(41, 59, 95, .07); transition: box-shadow .2s, border-color .2s; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list > li:hover, :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-tile > li:hover { border-color: #bec8d8; box-shadow: 0 8px 24px rgba(41, 59, 95, .12); }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list > li > :is(div, article) { display: grid; grid-template-columns: 132px minmax(0, 1fr) 176px; align-items: start; gap: 20px; direction: rtl; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-tile > li > :is(div, article) { display: flex; flex-direction: column; height: 100%; gap: 16px; border: 0; padding: 0; border-radius: 0; direction: rtl; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-image-container { width: 132px; height: 132px; max-width: 100%; margin: 0; border: 1px solid #edf0f4; border-radius: 10px; background: #fafbfc; padding: 0px; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-image-container .catalog-image-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0px; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-image-container .catalog-image { width: 100%; height: 100%; object-fit: contain; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-tile .catalog-image-container { width: 100%; height: 180px; max-width: none; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px 16px; width: 100%; min-width: 0; margin: 0; direction: rtl; text-align: right; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items > .title { grid-column: 1 / -1; width: auto; margin: 0 0 6px; padding: 0; color: var(--cb-navy); font-size: 17px; font-weight: 700; line-height: 1.8; overflow-wrap: anywhere; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items > div { display: block; width: auto; max-width: none; min-width: 0; padding: 0; margin: 0; direction: rtl; text-align: right; font-size: 13px !important; line-height: 1.9; overflow-wrap: anywhere; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items > .full { grid-column: 1 / -1; width: auto; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items .attribute-title { color: #758094; font-weight: 400; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items .attribute-text { color: #293b5f; font-weight: 500; unicode-bidi: isolate; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items > .price { margin-top: 6px; padding-top: 10px; border-top: 1px solid #edf0f4; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items > .price .attribute-text { font-size: 16px; font-weight: 700; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items .shortDescription { margin: 0; color: #687386; font-size: 13px; line-height: 1.9; -webkit-line-clamp: 2; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-sideinfo { display: flex; flex-direction: column; align-items: stretch; grid-column: auto; gap: 10px; padding: 0 16px 0 0; border: 0; border-right: 1px solid #edf0f4; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-sideinfo .company-name { display: block; font-size: 13px; line-height: 1.8; margin: 0; overflow-wrap: anywhere; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-sideinfo .button, :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-sideinfo .addToCartBtn { display: block; width: 100%; min-width: 0; padding: 9px 10px; margin: 0; border-radius: 8px; font-size: 12px; line-height: 1.8; white-space: normal; text-align: center; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-tile .catalog-items { grid-template-columns: minmax(0, 1fr); flex: 1; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-tile .catalog-sideinfo { width: 100%; margin-top: auto; padding: 12px 0 0; border: 0; border-top: 1px solid #edf0f4; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > input[data-sortby] { color: #536079; padding: 6px 10px; border-radius: 8px; font-size: 14px; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > input[data-sortby]:hover:not(.selected) { color: #293b5f; background: #f3f5f8; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > input[data-sortby].selected { color: var(--cb-orange); background: #fff2ec; }
@media only screen and (max-width: 1200px) {
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list > li > :is(div, article) { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-image-container { width: 112px; height: 112px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-sideinfo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 0 0; border: 0; border-top: 1px solid #edf0f4; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-sideinfo .company-name { grid-column: 1 / -1; text-align: right; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-items { grid-template-columns: minmax(0, 1fr); }
}
@media only screen and (max-width: 640px) {
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result { padding: 12px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-tile { grid-template-columns: minmax(0, 1fr); }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list > li, :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-tile > li { padding: 14px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list > li > :is(div, article) { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-image-container { width: 76px; height: 76px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items > .title { font-size: 15px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option { gap: 6px; }
}
@media only screen and (max-width: 640px) {
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-changer { display: flex; width: 100%; justify-content: flex-end; margin: 8px 0 0; }
}
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-items .price a { color: var(--cb-orange); font-weight: 700; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .centerSideWrapper__body { padding: 0; }
@media only screen and (max-width: 640px) {
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .centerSideWrapper__header { padding: 16px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-image-container .ribbon { width: 24px; height: auto; }
}
/* Promotion descriptions span the card rather than a metadata column. */
@media (max-width: 1080px) {
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) > .container-fluid > .row > .col-md-8 { order: -1; width: 100%; min-width: 0; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) > .container-fluid > .row > .col-md-2:not(.active) { width: 100%; }
    .mainWrapper :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .insideContentWrapper__aside:not(.active),
    .mainWrapper :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .insideContentWrapper__aside > .widget { position: static; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .widget.add .widget__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; align-items: center; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .widget.add .widget__body a + a { margin-top: 0; }
    .centerSideWrapper__header .index-view-changer input[type=button] { width: 44px; height: 44px; border-radius: 10px; background-color: #f5f6fa; }
    .centerSideWrapper__header .index-view-changer input.selected { background-color: #fff2ec; }
    body.filters-open { overflow: hidden; }
    .mainWrapper .insideContentWrapper__aside.filters.active { width: 100%; max-width: none; margin: 0; padding: 20px 16px 100px; }
    .insideContentWrapper__aside.filters.active > :is(.widget.add, .blogWidget) { display: none; }
    .insideContentWrapper__aside.filters.active .widget__body--list li label { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
    .insideContentWrapper__aside.filters.active .form-control { min-height: 44px; font-size: 16px; }
    #_FilterButton.active { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; height: 48px; border-radius: 12px; background-image: none; color: #fff; display: flex; align-items: center; justify-content: center; }
    #_FilterButton.active:after { content: "نمایش نتایج"; font-size: 15px; font-weight: 700; }
}
@media (max-width: 640px) {
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > .title { grid-column: 1; grid-row: 1; font-size: 12px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-changer { grid-column: 2; grid-row: 1; display: flex; width: auto; margin: 0; gap: 6px; justify-content: flex-end; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > input[data-sortby] { min-width: 0; width: 100%; height: 44px; font-size: 12px; border-radius: 10px; background: #f5f6fa; padding: 6px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list > li > :is(div, article) { grid-template-columns: 88px minmax(0, 1fr); gap: 10px 12px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-image-container { width: 88px; height: 88px; grid-column: 1; grid-row: 1; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-items { display: contents !important; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-items > .title { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 14px; line-height: 1.8; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-items > div { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding: 0; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-items > .mobile-only { display: none !important; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-items > .price { padding-top: 10px; margin: 0; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-items .price .attribute-text { font-size: 16px; overflow-wrap: anywhere; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-items .shortDescription { font-size: 12px; margin: 0; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-sideinfo :is(.button, .addToCartBtn) { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 10px; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-sideinfo .addToCartBtn { grid-column: 1 / -1; }
}
/* Match the company listing: ads flank the results at tablet landscape widths. */
@media (min-width: 840px) and (max-width: 1080px) {
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) > .container-fluid > .row > .col-md-8 { order: 0; width: 50%; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) > .container-fluid > .row > .col-md-2:not(.active) { width: 25%; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .widget.add .widget__body { display: block; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .widget.add .widget__body a + a { margin-top: 16px; }
}
#Promotion-Index .search-result .catalog-items > .red,
#Promotion-Index .search-result .catalog-items > div:last-child { grid-column: 1 / -1; }
#Promotion-Index .search-result .catalog-items > div:last-child p { margin: 0; color: #687386; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#Promotion-Index .search-result .catalog-items > div:last-child p > br:first-child { display: none; }
#Promotion-Index .search-result .catalog-sideinfo .side-logo { display: none !important; }

/* Company cards share the catalog spacing and RTL alignment. */
#Company-Index #companyResults { padding: 20px; direction: rtl; }
#Company-Index #companyResults .companyList { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
#Company-Index #companyResults.gridMode .companyList { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
#Company-Index #companyResults .card.company { min-width: 0; margin: 0; padding: 20px; border: 1px solid #e0e5ed; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(41, 59, 95, .07); transition: box-shadow .2s, border-color .2s; }
#Company-Index #companyResults .card.company:hover { border-color: #bec8d8; box-shadow: 0 8px 24px rgba(41, 59, 95, .12); }
#Company-Index #companyResults .card.company > .row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 176px; gap: 20px; align-items: start !important; margin: 0; direction: rtl; }
#Company-Index #companyResults .card.company > .row > div { width: auto; min-width: 0; padding: 0; margin: 0; }
#Company-Index #companyResults .card__image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 132px; max-width: none; margin: 0; padding: 0px; border: 1px solid #edf0f4; border-radius: 10px; background: #fafbfc; }
#Company-Index #companyResults .card__image img { width: 100%; height: 100%; object-fit: contain; }
#Company-Index #companyResults .card__body { text-align: right; min-width: 0; }
#Company-Index #companyResults .card__body--title { display: block; font-size: 17px; line-height: 1.8; margin: 0 0 10px; overflow-wrap: anywhere; }
#Company-Index #companyResults .card__body--title a { color: var(--cb-navy); }
#Company-Index #companyResults .card__body--companyInfo { font-size: 13px; line-height: 2; color: #758094; overflow-wrap: anywhere; }
#Company-Index #companyResults .card__body--companyInfo strong { color: #293b5f; font-weight: 500; }
#Company-Index #companyResults .card__body--content p { font-size: 13px; color: #687386; line-height: 1.9; margin: 12px 0 0; }
#Company-Index #companyResults .card__leftInfo { padding: 0 16px 0 0; border-right: 1px solid #edf0f4; }
#Company-Index #companyResults .card__leftInfo--countProduct { text-align: center; margin-bottom: 10px; font-size: 13px; }
#Company-Index #companyResults .card__leftInfo--buttonsList { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#Company-Index #companyResults .card__leftInfo--buttonsList a { width: 100%; margin: 0; padding: 9px 10px; border-radius: 8px; font-size: 12px; line-height: 1.8; white-space: normal; grid-column: auto; }
#Company-Index #companyResults.gridMode .card.company > .row { display: flex; flex-direction: column; height: 100%; gap: 16px; }
#Company-Index #companyResults.gridMode .card.company > .row > div { width: 100%; }
#Company-Index #companyResults.gridMode .card.company > .row > .col-md { flex: 1; }
#Company-Index #companyResults.gridMode .card__image a { height: 180px; }
#Company-Index #companyResults.gridMode .card__leftInfo { border: 0; border-top: 1px solid #edf0f4; padding: 12px 0 0; }
#Company-Index .centerSideWrapper__header--sort a[data-sortby] { display: inline-block; color: #536079; padding: 6px 10px; border-radius: 8px; font-size: 14px; }
#Company-Index .centerSideWrapper__header--sort a[data-sortby]:hover:not(.active) { color: #293b5f; background: #f3f5f8; }
#Company-Index .centerSideWrapper__header--sort a[data-sortby].active { color: var(--cb-orange); background: #fff2ec; }
@media only screen and (max-width: 1200px) {
    #Company-Index #companyResults .card.company > .row { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
    #Company-Index #companyResults .card.company > .row > .col-md-auto { grid-column: 1 / -1; }
    #Company-Index #companyResults .card__leftInfo { border: 0; border-top: 1px solid #edf0f4; padding: 12px 0 0; }
    #Company-Index #companyResults .card__leftInfo--buttonsList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #Company-Index #companyResults .card__leftInfo--buttonsList a:first-child { grid-column: 1 / -1; }
}
@media only screen and (max-width: 640px) {
    #Company-Index #companyResults { padding: 12px; }
    #Company-Index .centerSideWrapper__header { padding: 16px; }
    #Company-Index #companyResults.gridMode .companyList { grid-template-columns: minmax(0, 1fr); }
    #Company-Index #companyResults .card.company { padding: 14px; }
    #Company-Index #companyResults .card.company > .row { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
    #Company-Index #companyResults .card__image a { height: 76px; }
    #Company-Index #companyResults .card__body--title { font-size: 15px; }
}
#Company-Index #companyResults .card__body--title a { font-size: inherit; line-height: inherit; text-align: right; }
#Company-Index #companyResults .card__body > .row { display: flex; flex-direction: column; align-items: stretch !important; gap: 8px; margin: 0; }
#Company-Index #companyResults .card__body > .row > div { width: 100%; padding: 0; }
#Company-Index #companyResults .card__body > .row > .col-auto { order: 1; }
#Company-Index #companyResults .card__leftInfo--countProduct span { font-size: 14px; }
#Company-Index #companyResults .card__leftInfo--countProduct strong { font-size: 18px; }
@media only screen and (max-width: 640px) {
    #Company-Index .centerSideWrapper__header > .row > div { width: 100%; }
    #Company-Index .centerSideWrapper__header--sort > .row { display: block; }
    #Company-Index .centerSideWrapper__header--sort ul { gap: 8px; margin-top: 10px; }
    #Company-Index .centerSideWrapper__header--sort ul li { padding: 0; }
}
/* Image stories use the same player controls and preserve the full image. */
.storyModalWrapper .storyImage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.storyModalWrapper .storyImage[hidden], .storyModalWrapper video[hidden] { display: none !important; }
.storyModalWrapper.imageStory .storyModalWrapper__mute { display: none; }

/* Promotion details: keep the image and each label/value pair in stable grid tracks. */
#_PromotionDetailDetails .catalog-detail { grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: 24px; }
#_PromotionDetailDetails .catalog-images { width: 100%; min-width: 0; box-sizing: border-box; }
#_PromotionDetailDetails .image-list a { display: block; width: 100%; }
#_PromotionDetailDetails .image-list img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
#_PromotionDetailDetails .catalog-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; min-width: 0; }
#_PromotionDetailDetails .catalog-items .item { display: grid; grid-template-columns: 1fr; align-content: start; gap: 4px; min-width: 0; margin: 0; padding: 0; }
#_PromotionDetailDetails .catalog-items .item.full { grid-column: 1 / -1; width: auto; }
#_PromotionDetailDetails .attribute-text { min-width: 0; overflow-wrap: anywhere; }
#_PromotionDetailDetails .attribute-text a[href^="tel:"] { display: inline-block; direction: ltr; unicode-bidi: isolate; }
#_PromotionDetailDetails .item.red { border-top: 1px solid var(--cb-border-light); padding-top: 16px; }
@media only screen and (max-width: 1199px) {
    #_PromotionDetailDetails .catalog-detail { grid-template-columns: 1fr; }
    #_PromotionDetailDetails .catalog-images { max-width: 300px; justify-self: center; }
}
@media only screen and (max-width: 575px) {
    #_PromotionDetailDetails .catalog-items { grid-template-columns: 1fr; }
}

/* Company details use the same label/value grid as the other detail pages. */
#_CompanyDetail .company-detail-header { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; direction: rtl; }
#_CompanyDetail .card__image, #_CompanyDetail .card__body { min-width: 0; }
#_CompanyDetail .card__image a { width: 100%; max-width: none; margin: 0; box-sizing: border-box; }
#_CompanyDetail .card__body--title { display: block; margin: 0 0 20px; text-align: right; overflow-wrap: anywhere; }
#_CompanyDetail .company-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; text-align: right; }
#_CompanyDetail .company-detail-meta > div { display: grid; align-content: start; gap: 4px; min-width: 0; }
#_CompanyDetail .company-detail-meta-wide { grid-column: 1 / -1; }
#_CompanyDetail .company-detail-meta dt { margin: 0; color: var(--cb-navy); font-size: 14px; font-weight: 400; line-height: 1.8; }
#_CompanyDetail .company-detail-meta dd { margin: 0; color: #000; font-size: 15px; font-weight: 700; line-height: 1.9; overflow-wrap: anywhere; }
#_CompanyDetail .card__body .certificate-list { flex-wrap: wrap; margin-top: 16px; }
@media only screen and (max-width: 1199px) {
    #_CompanyDetail .company-detail-header { grid-template-columns: minmax(0, 1fr); }
    #_CompanyDetail .card__image { width: 140px; justify-self: center; }
}
@media only screen and (max-width: 575px) {
    #_CompanyDetail .company-detail-meta { grid-template-columns: minmax(0, 1fr); }
}

/* Promotion gallery shares the material gallery frame and thumbnail styling. */
#_PromotionDetailDetails .promotion-gallery { border: 1px solid var(--cb-border-light); border-radius: 20px; padding: 14px; background: #fafbfd; align-self: start; }
#_PromotionDetailDetails .promotion-gallery-image { display: block; position: relative; width: 100%; height: 100%; }
#_PromotionDetailDetails .promotion-gallery #thumbnail-carousel img { width: 100%; height: 100%; }
#_PromotionDetailDetails .promotion-gallery-lens { position: absolute; z-index: 2; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 0 7px rgba(255,255,255,.85), 0 0 7px 7px rgba(0,0,0,.25); background-color: #fff; background-repeat: no-repeat; pointer-events: none; }
#_PromotionDetailDetails .promotion-gallery-lens[hidden] { display: none; }

/* Search category picker, aligned with the site's navy and orange controls. */
#_HeaderSearch .form-group { overflow: visible; }
#_HeaderSearch .form-group .textbox { min-width: 0; border-radius: 0 30px 30px 0; }
#_HeaderSearch select.category[hidden] { display: none; }
#_HeaderSearch .search-category-dropdown { position: relative; flex: 0 0 auto; direction: rtl; border-right: 1px solid var(--cb-navy); }
#_HeaderSearch .search-category-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 104px; padding: 5px 10px; border: 0; background: transparent; color: var(--cb-navy); font: inherit; font-size: 14px; line-height: 1.5; cursor: pointer; }
#_HeaderSearch .search-category-arrow { width: 7px; height: 7px; flex: 0 0 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
#_HeaderSearch .search-category-toggle[aria-expanded="true"] .search-category-arrow { transform: translateY(2px) rotate(225deg); }
#_HeaderSearch .search-category-toggle:focus-visible { outline: 2px solid var(--cb-orange); outline-offset: 2px; border-radius: 8px; }
#_HeaderSearch .search-category-options { position: absolute; top: calc(100% + 18px); left: 0; z-index: 1700; width: 180px; padding: 6px; border: 1px solid var(--cb-border-light); border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(41,59,95,.16); text-align: right; }
#_HeaderSearch .search-category-options[hidden] { display: none; }
#_HeaderSearch .search-category-option { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; color: var(--cb-navy); font-size: 14px; line-height: 1.6; cursor: pointer; }
#_HeaderSearch .search-category-option:hover, #_HeaderSearch .search-category-option:focus { background: #f3f5f8; outline: none; }
#_HeaderSearch .search-category-option[aria-selected="true"] { color: var(--cb-orange); background: #fff2ec; font-weight: 700; }
#_HeaderSearch .search-category-option[aria-selected="true"]:after { content: '\2713'; margin-right: 16px; }
@media only screen and (max-width: 640px) {
    #_HeaderSearch .search-category-toggle { min-width: 88px; min-height: 44px; gap: 8px; padding: 5px 8px; font-size: 13px; }
    #_HeaderSearch .form-group .textbox { flex: 1 1 0; width: 0; padding-inline: 8px; direction: rtl; text-align: right; text-overflow: ellipsis; }
    #_HeaderSearch .form-group .textbox::placeholder { font-size: 14px; opacity: 1; }
    #_HeaderSearch .form-group button[type="submit"] { width: 44px; height: 48px; }
}

/* Let authentication forms determine the card height; keep artwork flush with its edges. */
body.authPage main > :is(.login, .signup) .card > .row { align-items: stretch; }
body.authPage main > :is(.login, .signup) .card > .row > .order-before { display: flex; align-self: stretch; }
body.authPage main > :is(.login, .signup) .signup__leftSide img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media only screen and (min-width: 1080px) {
    body.authPage main > :is(.login, .signup) .signup__leftSide { position: relative; width: 100%; height: auto; min-height: 0; max-height: none; flex: 1 1 auto; }
}
/* Match the custom grid's 1080px desktop breakpoint. */
@media only screen and (max-width: 1079.98px) {
    body.authPage main > :is(.login, .signup) .card > .row > .order-before { order: -1; }
    body.authPage main > :is(.login, .signup) .signup__leftSide { width: 100%; height: 180px; min-height: 0; max-height: none; flex: 1 1 auto; }
    body.authPage main > :is(.login, .signup) .signup__leftSide img { object-position: center 65%; }
    body.authPage main > :is(.login, .signup) .signup__rightSide { padding: 28px; }
    body.authPage main > :is(.login, .signup) .signup__rightSide--logo { margin-bottom: 24px; }
}
@media only screen and (max-width: 640px) {
    body.authPage main > :is(.login, .signup) .signup__leftSide { height: 140px; }
    body.authPage main > :is(.login, .signup) .signup__rightSide { padding: 24px 20px; }
    body.authPage main > :is(.login, .signup) .signup__rightSide--logo { margin-bottom: 20px; }
    .authPage .signup__rightSide--forms .form-control { font-size: 16px; }
    .authPage .signup__rightSide--logo img { max-width: 100%; }
}
/* Homepage layouts: fluid tablet columns and touch-friendly phone controls. */
@media (max-width: 1080px) {
    #Home > section { margin-block: 32px; }
    #Home .container { max-width: 100%; padding-inline: 20px; }
    #Home .row > * { min-width: 0; }
    #Home .titleSection { flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
    #Home .titleSection h2 { flex: 1 1 auto; font-size: clamp(20px, 3vw, 28px); line-height: 1.6; }
    #Home .titleSection:after { flex: 1 1 40px; width: auto; }
    #Home .titleSection .read-more { font-size: 14px; white-space: normal; }
    #Home .categoriesListBox .row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin: 0; }
    #Home .categoriesListBox .categoriesList--item { width: auto; padding: 0; margin: 0; }
    #Home .categoriesListBox .categoriesList--item a { padding: 0; gap: 0; aspect-ratio: 1; height: auto; min-height: 0; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #fff; color: var(--cb-navy); }
    #Home .categoriesListBox .categoriesList--item a:hover,
    #Home .categoriesListBox .categoriesList--item a:focus-visible { background: #fff; box-shadow: 0 0 60px 2px rgba(165, 171, 191, 0.45); transform: translateY(-4px); }
    #Home .categoriesListBox .categoriesList--item a img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; filter: none; }
    #Home .categoriesListBox .categoriesList--item a span { display: none; }
    #Home .aboutUsSection .card { overflow: hidden; border-radius: 24px; }
    #Home .aboutUsSection .card > .row { align-items: center; }
    #Home .aboutUsSection .card .aboutUsSection__textSide { padding: 24px; }
    #Home .aboutUsSection .card .aboutUsSection__textSide h2 { width: auto; font-size: clamp(24px, 3vw, 32px); line-height: 1.6; margin-bottom: 16px; }
    #Home .aboutUsSection .card .aboutUsSection__textSide p { font-size: 15px; line-height: 2; }
    #Home .aboutUsSection .card .aboutUsSection__textSide p br { display: none; }
    #Home .aboutUsSection .card .aboutUsSection__maskSide { width: 100%; padding: 24px; border-radius: 0; }
    #Home .aboutUsSection .card .aboutUsSection__maskSide:before,
    #Home .aboutUsSection .card .aboutUsSection__maskSide:after { display: none; }
    #Home .aboutUsSection .card .aboutUsSection__maskSide .big { font-size: clamp(28px, 4vw, 42px); line-height: 1.5; }
    #Home .aboutUsSection .card .aboutUsSection__maskSide .medium { font-size: clamp(20px, 2.5vw, 26px); }
    #Home .aboutUsSection .card .aboutUsSection__imageSide { margin: 0; padding: 16px; }
    #Home .aboutUsSection__imageSide img { max-height: 300px; margin: auto; object-fit: contain; }
    #Home .salesAgahi > .container > .row > * { width: 100%; }
    #Home .salesAgahi .salesAgahi__body .table td { overflow-wrap: anywhere; }
    #Home .salesAgahi .salesAgahi__body--readMore a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
    #Home .followUsOnInstagram .card { padding: 24px; font-size: 22px; border-radius: 24px; }
    #Home .followUsOnInstagram .card > .row { gap: 16px 0; }
    #Home .followUsOnInstagram .card .image { position: static; width: 72px; margin: 0; }
    #Home .followUsOnInstagram .card a { position: static; font-size: 18px; color: #fff; padding: 12px; }
    #Home .informationSection .row > * { width: 50%; }
    #Home .information--item { height: 100%; padding: 20px; border-radius: 20px; }
    #Home .information--item h5 { font-size: 17px; line-height: 1.7; }
    #Home .information--item p { font-size: 14px; line-height: 1.9; }
    #Home .chancesForSaleAndBuy .row { --bs-gutter-y: 24px; }
    #Home .chancesForSaleAndBuy--item { height: 200px; border-radius: 24px; margin: 0; }
    #Home .chancesForSaleAndBuy--item a { padding: 24px; }
    #Home .chancesForSaleAndBuy--item a span { font-size: 26px; position: relative; }
    #Home .chancesForSaleAndBuy--item img { max-width: 55%; height: 190px; object-fit: contain; }
    #Home .chancesForSaleAndBuy--item.buyer img { right: 0; top: 0; bottom: 0; margin: auto; height: 190px; }
    #Home .chancesForSaleAndBuy--item.saler img { left: 0; top: 0; bottom: 0; margin: auto; height: 190px; }
    #Home .brandsListSlider { margin-inline: 16px; }
}
@media (min-width: 641px) and (max-width: 1080px) {
    #Home .aboutUsSection .card > .row > .col-md-7 { width: 65%; }
    #Home .aboutUsSection .card > .row > .col-md-5 { width: 35%; }
    #Home .chancesForSaleAndBuy .row > * { width: 50%; }
}
@media (max-width: 640px) {
    #Home .container { padding-inline: 16px; }
    /* Keep a readable mobile banner instead of shrinking desktop artwork into a strip. */
    #Home .heroSlider .heroSlider--item img { height: clamp(180px, 46.15vw, 240px); aspect-ratio: auto; object-fit: cover; }
    #Home .heroSlider .heroArrow { display: none !important; }
    #Home .categoriesListBox .row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    #Home .mainCategoryToggle a { min-height: 52px; }
    #Home .mainCategoryToggle a span { font-size: 20px; }
    #Home .aboutUsSection .card .aboutUsSection__textSide,
    #Home .aboutUsSection .card .aboutUsSection__maskSide { padding: 20px; }
    #Home .aboutUsSection .card .aboutUsSection__maskSide .row { gap: 8px; margin: 0; }
    #Home .aboutUsSection .card .aboutUsSection__maskSide .row > * { padding: 0; flex: 1 1 120px; }
    #Home .salesAgahi .salesAgahi__header--title { padding: 12px 20px; }
    #Home .salesAgahi .salesAgahi__body .table,
    #Home .salesAgahi .salesAgahi__body tbody { display: block; }
    #Home .salesAgahi .salesAgahi__body tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--cb-border-light); }
    #Home .salesAgahi .salesAgahi__body tr:last-child { border: 0; }
    #Home .salesAgahi .salesAgahi__body .table td { padding: 0; max-width: none; }
    #Home .salesAgahi .salesAgahi__body--title { grid-column: 1; }
    #Home .salesAgahi .salesAgahi__body--subtitle { grid-column: 1; font-size: 13px; }
    #Home .salesAgahi .salesAgahi__body--readMore { grid-column: 2; grid-row: 1 / 3; align-self: center; }
    #Home .followUsOnInstagram .card { padding: 20px; font-size: 16px; line-height: 1.9; border-radius: 20px; text-align: center; }
    #Home .followUsOnInstagram .card > .row { flex-direction: column; align-items: center !important; gap: 16px; margin: 0; }
    #Home .followUsOnInstagram .card > .row > * { width: 100%; min-width: 0; padding: 0; }
    #Home .followUsOnInstagram .card > .row > .col-auto > .row { display: flex; flex-direction: row-reverse; direction: ltr; justify-content: center; align-items: center !important; gap: 10px; margin: 0; }
    #Home .followUsOnInstagram .card > .row > .col-auto > .row > * { width: auto; padding: 0; margin: 0; }
    #Home .followUsOnInstagram .card a { display: inline-flex; align-items: center; min-height: 48px; padding: 0; font-size: 18px; line-height: 1.5; }
    #Home .followUsOnInstagram .card .image { width: 48px; height: 48px; object-fit: contain; }
    #Home .informationSection .row { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
    #Home .information--item { padding: 16px; }
    #Home .information--item h5 { font-size: 15px; }
    #Home .information--item p { font-size: 13px; }
    #Home .chancesForSaleAndBuy--item.saler img { right: 0; left: auto; }
    #Home .blogSection .titleSection:after { display: none; }
    #Home .blogSection .card.blog { border-radius: 20px; }
}
/* The shared header switches to its drawer before desktop links get cramped. */
@media (max-width: 1080px) {
    #siteHeader .onlyDesktop { display: none; }
    #siteHeader .onlyMobile { display: block; }
    #siteHeader > .container-fluid > .row > .col-auto { width: auto; flex: 0 0 auto; }
    #siteHeader .mobileNavigation { flex: 1; width: auto; }
    #siteHeader > .container-fluid > .row > .col-md-6 { width: 100%; }
    #siteHeader .navigationWrapper__rightSide { padding: 16px 0; }
    #siteHeader .navigationWrapper__centerSide { padding: 0 0 12px; }
    #siteHeader #_HeaderSearch form { width: 100%; }
    #siteHeader .hamburgerButton, #siteHeader .cartButton { width: 44px; height: 44px; }
    #siteHeader .hamburgerButton img { width: 32px; }
    #siteHeader #_Navigation { position: fixed; inset: 0; width: min(350px, 90vw); height: 100dvh; padding: 20px; overflow-y: auto; overscroll-behavior: contain; background: #fff; z-index: 1500; border-left: 1px solid var(--cb-border); transform: translateX(100%); transition: transform .3s; visibility: hidden; }
    body.activeNavigation { overflow: hidden; }
    body.activeNavigation #siteHeader #_Navigation { transform: translateX(0); visibility: visible; }
    #siteHeader #_Navigation .navigationWrapper__navigationSide--mobileHeader { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--cb-border); }
    #siteHeader #_Navigation .closeNavigation { width: 44px; height: 44px; }
    #siteHeader #_Navigation > ul { flex-direction: column; }
    #siteHeader #_Navigation > ul > li { overflow: visible; }
    #siteHeader #_Navigation > ul > li > a { white-space: normal; padding: 12px 8px; min-height: 44px; }
    #siteHeader #_Navigation .mobileOnlyItem { display: block; }
    #siteHeader #_Navigation > ul > li > .dropdown { position: static; display: none; height: auto; box-shadow: none; background: #fff !important; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
    #siteHeader #_Navigation .dropdown .rightSide { width: 100%; border: 0; }
    #siteHeader #_Navigation .dropdown .rightSide > ul > li > .leftSide { position: static; display: none; opacity: 1; visibility: visible; transition: none; }
    #siteHeader #_Navigation .dropdown .leftSide .widget { padding: 12px; }
    #siteHeader #_Navigation .dropdown.type2 .leftSide { padding: 12px; }
    #siteHeader #_Navigation .dropdown.type2 .icon { display: none; }
    #siteHeader #_Navigation .dropdown a { min-height: 44px; }
    #siteHeader input { font-size: 16px; }
}
/* App-style navigation shares the header's mobile breakpoint. */
@media (max-width: 1080px) {
    body { --mobile-nav-height: calc(68px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--mobile-nav-height); }
    .authMobileNavigation { display: block; }
    .authPage .mainWrapper > :is(.login, .signup) .inside { min-height: calc(100vh - var(--mobile-nav-height)); min-height: calc(100dvh - var(--mobile-nav-height)); }
    html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    #siteHeader > .container-fluid > .row > .col-auto { width: 100%; }
    #siteHeader .navigationWrapper__rightSide { display: flex; justify-content: center; padding: 12px 0; }
    #siteHeader .mobileBottomNav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; inset: auto 0 0; z-index: 1350; height: var(--mobile-nav-height); padding: 4px max(8px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); background: #fff; border-top: 1px solid var(--cb-border-light); box-shadow: 0 -4px 20px rgba(41, 59, 95, .08); }
    #siteHeader .mobileBottomNav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-width: 0; min-height: 56px; margin: 0; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--cb-muted); font: inherit; font-size: 11px; font-weight: 500; line-height: 1.5; text-align: center; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    #siteHeader .mobileBottomNav__item > svg,
    #siteHeader .mobileBottomNav__icon > svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    #siteHeader .mobileBottomNav__item[aria-current="page"],
    #siteHeader .mobileBottomNav__item[aria-expanded="true"] { color: var(--cb-orange); background: #fff2ec; font-weight: 700; }
    #siteHeader .mobileBottomNav__item:active { background: #f3f5f8; }
    #siteHeader .mobileBottomNav__icon { position: relative; display: block; }
    #siteHeader .mobileBottomNav .cartNumber { top: -5px; left: -10px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; box-shadow: 0 0 0 2px #fff; }
    #waIcon { bottom: calc(var(--mobile-nav-height) + 12px) !important; }
    #waIcon img { width: 44px; height: 44px; }
    #_ScrollToTop { bottom: calc(var(--mobile-nav-height) + 12px); }
    #siteHeader #_Navigation { width: min(400px, 92vw); padding: 0; background: #f7f8fa; border-left: 0; box-shadow: -8px 0 40px rgba(41,59,95,.15); }
    #siteHeader #_Navigation .navigationWrapper__navigationSide--mobileHeader { position: sticky; top: 0; z-index: 2; margin: 0; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background: #fff; border-bottom: 1px solid var(--cb-border-light); }
    #siteHeader #_Navigation .closeNavigation { display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 12px; background: #f3f5f8; }
    #siteHeader #_Navigation > ul { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px calc(24px + env(safe-area-inset-bottom, 0px)); margin: 0; list-style: none; }
    #siteHeader #_Navigation > ul > li { width: 100%; border: 1px solid var(--cb-border-light); border-radius: 14px; background: #fff; }
    #siteHeader #_Navigation > ul > li > a { display: flex; align-items: center; min-height: 52px; padding: 12px 16px; padding-left: 40px; border-bottom: 0; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.8; color: var(--cb-navy); }
    #siteHeader #_Navigation > ul > li > a:active,
    #siteHeader #_Navigation > ul > li.open > a { background: #fff2ec; color: var(--cb-orange); }
    #siteHeader #_Navigation > ul > li.highlight > a { color: var(--cb-orange); }
    #siteHeader #_Navigation > ul > li.hasDropdown > a:after { left: 14px; }
    #siteHeader #_Navigation .dropdown { border-top: 1px solid var(--cb-border-light); border-radius: 0 0 14px 14px; }
    #siteHeader #_Navigation .dropdown .rightSide > ul { padding: 8px; list-style: none; }
    #siteHeader #_Navigation .dropdown .rightSide > ul > li > a { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; font-size: 14px; }
    #siteHeader #_Navigation .dropdown .rightSide > ul > li > a[aria-expanded="true"] { background: #f3f5f8; color: var(--cb-orange); }
    #siteHeader #_Navigation .dropdown .rightSide > ul > li > a:after { content: '+'; margin-right: auto; font-size: 20px; }
    #siteHeader #_Navigation .dropdown .rightSide > ul > li > a[aria-expanded="true"]:after { content: '\2212'; }
    #siteHeader #_Navigation .dropdown .leftSide { width: 100%; max-height: none; overflow: visible; }
    #siteHeader #_Navigation .dropdown > .leftSide { position: static; display: block; opacity: 1; visibility: visible; padding: 8px; }
    #siteHeader #_Navigation .dropdown .leftSide .widget { flex: 0 0 100%; width: 100%; padding: 8px 12px; border-bottom: 1px solid var(--cb-border-light); }
    #siteHeader #_Navigation .dropdown .leftSide .widget h4 { font-size: 14px; line-height: 1.8; }
    #siteHeader #_Navigation .dropdown .leftSide .widget ul { padding: 0; list-style: none; }
    #siteHeader #_Navigation .dropdown .leftSide .widget a { display: block; padding: 10px 4px; min-height: 44px; font-size: 14px; line-height: 1.8; }
    #siteHeader #_Navigation .mobileMenuAllLink { display: block; padding: 12px 16px; min-height: 44px; color: var(--cb-orange); font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--cb-border-light); }
    #siteHeader #_Navigation .dropdown.type2 .row { margin: 0; }
    #siteHeader #_Navigation .dropdown.type2 .row > .col-md { width: 100%; flex: 0 0 100%; padding: 0; }
}
@media (max-width: 640px) {
    #Home .heroSlider .slick-dots { bottom: 12px; border-radius: 20px; background: rgba(0, 0, 0, .2); }
    #Home .heroSlider .slick-dots li button { background: rgba(255, 255, 255, .55); }
    #Home .heroSlider .slick-dots li.slick-active button { background: #fff; }
    #Home .salesAgahi .salesAgahi__body td.onlyDesktop { display: none; }
}
@media (max-width: 1080px) {
    footer.mainFooter .container { max-width: 100%; padding-inline: 20px; }
    footer.mainFooter .mainFooter__topSide > .row > * { flex: 0 0 50%; min-width: 0; }
    footer.mainFooter .mainFooter__bottomSide > .row > * { width: 100%; }
    footer.mainFooter .socials { flex-wrap: wrap; gap: 12px 20px; }
    footer.mainFooter .subscribe .col { min-width: 0; }
    footer.mainFooter .subscribe input { font-size: 16px; }
    footer.mainFooter .widget li a { display: inline-block; padding-block: 8px; }
}
@media (max-width: 480px) {
    footer.mainFooter .mainFooter__topSide > .row > * { flex-basis: 100%; }
}

/* Story viewer: RTL tap navigation and a segmented timeline above the title. */
#storyModal .inside { width: min(450px, calc((100dvh - 32px) * 9 / 16)); height: min(800px, calc(100dvh - 32px)); aspect-ratio: 9 / 16; }
#storyModal .storyModalWrapper__header { padding: 12px 16px 24px; pointer-events: none; }
#storyModal .storyModalWrapper__header button,
#storyModal .storyModalWrapper__header a,
#storyModal .storyTimeline { pointer-events: auto; }
#storyModal .storyTimeline { display: flex; direction: rtl; gap: 3px; padding: 8px 0; }
#storyModal .storyTimelineSegment { flex: 1; min-width: 0; height: 3px; background: rgba(255,255,255,.4); border-radius: 3px; }
#storyModal .storyTimelineSegment.complete { background: #fff; }
#storyModal .proggress { position: relative; height: 100%; width: 100%; touch-action: none; cursor: pointer; }
#storyModal .proggress:before { content: ''; position: absolute; inset: -8px 0; }
#storyModal .proggress .fill { position: absolute; right: 0; top: 0; bottom: 0; background: #fff; border-radius: 3px; pointer-events: none; }
#storyModal .proggress .circle { display: none; }
#storyModal .storyHeading { display: flex; direction: rtl; align-items: center; gap: 8px; margin: 6px 0 12px; color: #fff; }
#storyModal .storyHeading .title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
#storyModal .storyHeading button { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
#storyModal .storyHeading button { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .15s; }
#storyModal .storyHeading button:hover { background: rgba(255,255,255,.12); }
#storyModal .storyHeading svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#storyModal .storyPause .playIcon { display: none; }
#storyModal.paused .storyPause .pauseIcon { display: none; }
#storyModal.paused .storyPause .playIcon { display: block; }
#storyModal .storyAuthorRow { gap: 10px; flex-wrap: nowrap; }
#storyModal .storyAuthorRow > .col { min-width: 0; }
#storyModal .storyModalWrapper__companyName { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#storyModal .storyModalWrapper__header .storiesSlider--item .image:before { display: none; }
#storyModal .storyModalWrapper__header .storiesSlider--item .image img { border: 1px solid rgba(255,255,255,.5); }
#storyModal .storyModalWrapper__follow { padding: 5px 12px; min-height: 32px; border: 1px solid rgba(255,255,255,.65); border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s; }
#storyModal .storyModalWrapper__follow:hover { background: rgba(255,255,255,.16); }
#storyModal .storyModalWrapper__follow.following { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
#storyModal .storyModalWrapper__follow.following:before { content: none; }
#storyModal .storyModalWrapper__like svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#storyModal .storyModalWrapper__like.liked svg { fill: #ff385c; stroke: #ff385c; }
#storyModal .storyModalWrapper__body--overlay button { width: 44px; min-height: 44px; border-radius: 22px; background: rgba(0,0,0,.2); }
#storyModal .storyModalWrapper__likeCount { font-size: 12px; }
#storyModal .storyModalWrapper__header .storiesSlider--item .image img { width: 36px; height: 36px; }
#storyModal .storyModalWrapper__header--author.noCompany { display: none; }
#storyModal .storyTapZone { position: absolute; top: 0; bottom: 0; width: calc(100% / 3); border: 0; padding: 0; background: transparent; z-index: 5; cursor: pointer; touch-action: manipulation; }
#storyModal .storyTapZone--prev { right: 0; }
#storyModal .storyTapZone--toggle { left: calc(100% / 3); }
#storyModal .storyTapZone--next { left: 0; }
#storyModal .storyTapZone:disabled { cursor: default; }
#storyModal .storyTapZone:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: -4px; }
#storyModal .storyModalWrapper__body--overlay { z-index: 7; opacity: 1; pointer-events: none; background: none; }
#storyModal .storyModalWrapper__body--overlay button { pointer-events: auto; }
#storyModal .storyModalWrapper__body--video { position: absolute; inset: 0; }
#storyModal .storyModalWrapper__footer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 8; padding: 24px 16px 20px; background: linear-gradient(transparent,rgba(0,0,0,.65)); }
#storyModal .storyModalWrapper__body--overlay { bottom: 100px; padding: 12px 16px; }
#storyModal .storyModalWrapper__footer .product { display: flex; direction: rtl; align-items: center; gap: 12px; max-width: 360px; margin: auto; padding: 10px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; background: rgba(35,35,35,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.16); transition: background .15s; }
#storyModal .storyModalWrapper__footer .product:hover { background: rgba(55,55,55,.85); }
#storyModal .storyModalWrapper__footer .product img { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 10px; background: #fff; object-fit: cover; }
#storyModal .storyProductCopy { flex: 1; min-width: 0; text-align: right; }
#storyModal .storyProductLabel { display: block; color: rgba(255,255,255,.65); font-size: 11px; font-weight: 400; margin-bottom: 2px; }
#storyModal .storyModalWrapper__footer .storyModalWrapper__productTitle { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#storyModal .storyProductArrow { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
    #storyModal { padding: 0; }
    #storyModal .inside { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    #storyModal .storyModalWrapper__header { padding-top: max(12px, env(safe-area-inset-top)); }
    #storyModal .storyModalWrapper__footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

#storyModal .storyPlayButton { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; width: 64px; height: 64px; align-items: center; justify-content: center; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3); }
#storyModal.paused .storyPlayButton { display: flex; }
#storyModal .storyPlayButton svg { display: block; flex: 0 0 30px; width: 30px; height: 30px; fill: #fff; margin: 0; }

/* Listing filters stay in the right column on tablets; phones use the filter panel. */
:is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .filterWidget { min-width: 0; }
:is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .filterWidget :is(.widget__title, .widget__body, .widget__body--search, .form-group) { min-width: 0; max-width: 100%; }
:is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .filterWidget .form-control { min-width: 0; width: 100%; padding-left: 36px; }
:is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .filterWidget .form-submit { width: 32px; padding: 4px; }
:is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .filterWidget .widget__title h4 { min-width: 0; overflow-wrap: anywhere; }
:is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-filter-list label { min-height: 44px; overflow-wrap: anywhere; line-height: 1.7; padding-block: 6px; }
@media (min-width: 641px) {
    #_FilterButton { display: none; }
    .insideContentWrapper .asideRight.filters:not(.active) { display: block; }
    .insideContentWrapper .asideRight.filters.hasSideAds:not(.active) > :not(.widget.add) { display: block; }
}
@media (min-width: 641px) and (max-width: 1320px) {
    :is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) > .container-fluid > .row { display: grid; grid-template-columns: clamp(160px, 20vw, 240px) minmax(0, 1fr) clamp(110px, 15vw, 190px); gap: 16px; margin-inline: 0; align-items: start; }
    :is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) > .container-fluid > .row > :is(.col-md-2, .col-md-8) { order: 0; width: 100%; min-width: 0; padding-inline: 0; }
    :is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) > .container-fluid > .row > .col-md-2:not(.active) { width: 100%; }
    .mainWrapper :is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .insideContentWrapper__aside { position: static; }
    :is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .widget.add .widget__body { display: block; }
    :is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .widget.add .widget__body a + a { margin-top: 16px; }
    :is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .filterWidget { padding: 12px; }
    :is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .filterWidget .widget__body--search { padding-inline: 0; }
    :is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .filterWidget :is(.widget__title h4, .search-filter-list label) { font-size: 13px; }
    :is(#Company-Index, #Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .filterWidget .form-control { font-size: 12px; text-overflow: ellipsis; }
    .priceWidget .box .values { flex-wrap: wrap; white-space: normal; gap: 6px; font-size: 12px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > .title { grid-row: 1; grid-column: 1; font-size: 12px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-changer { grid-row: 1; grid-column: 2; margin: 0; justify-content: flex-end; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > input[data-sortby] { width: 100%; min-width: 0; min-height: 44px; font-size: 12px; padding: 6px; background: #f5f6fa; border-radius: 10px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-sideinfo { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 0 0; border: 0; border-top: 1px solid #edf0f4; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-sideinfo .side-logo { display: none; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-sideinfo :is(.company-name, .addToCartBtn, .button.main, .button.form) { grid-column: 1 / -1; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-sideinfo .company-name { order: -2; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-sideinfo :is(.addToCartBtn, .button.main, .button.form) { order: -1; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-sideinfo :is(.button, .addToCartBtn) { min-width: 0; min-height: 44px; padding: 8px; border-radius: 10px; font-size: 12px; line-height: 1.8; display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; }
}
@media (max-width: 1320px) {
    #Company-Index .centerSideWrapper__header > .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin: 0; align-items: start !important; }
    #Company-Index .centerSideWrapper__header > .row > div { min-width: 0; width: auto; padding: 0; }
    #Company-Index .centerSideWrapper__header > .row > .col,
    #Company-Index .centerSideWrapper__header--sort,
    #Company-Index .centerSideWrapper__header--sort > .row { display: contents; }
    #Company-Index .centerSideWrapper__header > .row > .col-auto { grid-column: 2; grid-row: 1; margin: 0; }
    #Company-Index .centerSideWrapper__header--sort .col-auto { padding: 0; max-width: 100%; }
    #Company-Index .centerSideWrapper__header--sort > .row > .col-auto:first-child { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
    #Company-Index .centerSideWrapper__header--sort > .row > .col-auto:last-child { grid-column: 1 / -1; grid-row: 2; margin: 0; }
    #Company-Index .centerSideWrapper__header--sort span { font-size: 12px; }
    #Company-Index .centerSideWrapper__header--sort ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
    #Company-Index .centerSideWrapper__header--sort ul li { padding: 0; margin: 0; width: auto; min-width: 0; }
    #Company-Index .centerSideWrapper__header .centerSideWrapper__header--sort ul a { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 44px; font-size: 12px; border-radius: 10px; padding: 6px 2px; background: #f5f6fa; overflow-wrap: normal; white-space: nowrap; }
    #Company-Index .viewChanger { display: flex; gap: 6px; margin: 0; }
    #Company-Index .viewChanger li a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: #f5f6fa; }
    #Company-Index .viewChanger li a.active { background: #fff2ec; }
}

/* Shop controls use the same visible selection and action layout on every screen. */
body:has(#isShoppingPage) #Product-Index .index-view-option { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body:has(#isShoppingPage) #Product-Index .index-view-option > .title { grid-row: 1; grid-column: 1; align-self: center; font-size: 13px; }
body:has(#isShoppingPage) #Product-Index .index-view-changer { grid-row: 1; grid-column: 2; display: flex; justify-content: flex-end; width: auto; margin: 0; gap: 4px; }
body:has(#isShoppingPage) #Product-Index .index-view-option > input[data-sortby] { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid transparent; border-radius: 12px; background: #f5f6fa; color: #536079; font-size: 13px; }
body:has(#isShoppingPage) #Product-Index .index-view-option > input[data-sortby].selected { background: #fff2ec; color: var(--cb-orange); }
body:has(#isShoppingPage) #Product-Index .index-view-option > input[data-sortby]:hover:not(.selected) { background: #e9ecf3; color: var(--cb-navy); }
body:has(#isShoppingPage) #Product-Index .index-view-changer input[type=button] { width: 44px; height: 44px; margin: 0; flex: 0 0 44px; border-radius: 10px; background-color: #f5f6fa; background-size: 24px; opacity: .55; }
body:has(#isShoppingPage) #Product-Index .index-view-changer input.selected { background-color: #fff2ec; opacity: 1; }
body:has(#isShoppingPage) #Product-Index .index-view-option input:focus-visible { outline: 2px solid var(--cb-navy); outline-offset: 2px; }
@media (min-width: 841px) and (max-width: 1320px) {
    body:has(#isShoppingPage) #Product-Index .index-view-option { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body:has(#isShoppingPage) #Product-Index .index-view-option > .title { grid-column: 1 / 4; }
    body:has(#isShoppingPage) #Product-Index .index-view-changer { grid-column: 4; }
    body:has(#isShoppingPage) #Product-Index .index-view-option > input[data-sortby] { font-size: 12px; padding-inline: 2px; }
}
@media (min-width: 1321px) {
    body:has(#isShoppingPage) #Product-Index .index-view-option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
    body:has(#isShoppingPage) #Product-Index .index-view-option > .title { font-size: 14px; }
    body:has(#isShoppingPage) #Product-Index .index-view-option > input[data-sortby] { width: auto; padding-inline: 10px; }
    body:has(#isShoppingPage) #Product-Index .index-view-changer { margin-right: auto; }
}
@media (max-width: 1320px) {
body:has(#isShoppingPage) #Product-Index .search-result .catalog-sideinfo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; gap: 10px; width: 100%; padding: 12px 0 0; border: 0; border-top: 1px solid #edf0f4; }
body:has(#isShoppingPage) #Product-Index .search-result .catalog-sideinfo .side-logo { display: none; }
body:has(#isShoppingPage) #Product-Index .search-result .catalog-sideinfo .company-name { grid-column: 1 / -1; order: -2; text-align: right; }
body:has(#isShoppingPage) #Product-Index .search-result .catalog-sideinfo .addToCartBtn { grid-column: 1 / -1; order: -1; }
body:has(#isShoppingPage) #Product-Index .search-result .catalog-sideinfo :is(.button, .addToCartBtn) { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 44px; padding: 10px; margin: 0; border-radius: 12px; font-size: 13px; line-height: 1.8; white-space: normal; overflow-wrap: anywhere; box-shadow: none; }
body:has(#isShoppingPage) #Product-Index .search-result .catalog-tile .catalog-sideinfo .button.product { display: flex; }
}
@media (min-width: 641px) and (max-width: 1320px) {
    body:has(#isShoppingPage) #Product-Index .search-result .catalog-list > li > article { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 1321px) {
    body:has(#isShoppingPage) #Product-Index .catalog-sideinfo .addToCartBtn { order: -1; }
    body:has(#isShoppingPage) #Product-Index .catalog-list .catalog-sideinfo .company-name { order: -2; }
    body:has(#isShoppingPage) #Product-Index .catalog-list .catalog-sideinfo .side-logo { display: none; }
}
#Company-Index .centerSideWrapper__header .viewChanger { display: flex; align-items: center; gap: 4px; margin: 0; }
#Company-Index .centerSideWrapper__header .viewChanger > li { margin: 0; padding: 0; flex: 0 0 44px; }
#Company-Index .centerSideWrapper__header .viewChanger li a.viewMode { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: #f5f6fa; }
#Company-Index .centerSideWrapper__header .viewChanger li a.viewMode.active { background: #fff2ec; }
#Company-Index .centerSideWrapper__header .viewChanger li a.viewMode img { width: 24px; height: 24px; opacity: .55; }
#Company-Index .centerSideWrapper__header .viewChanger li a.viewMode.active img { opacity: 1; }
#Company-Index .centerSideWrapper__header .viewChanger li a.viewMode:focus-visible { outline: 2px solid var(--cb-navy); outline-offset: 2px; }
#Company-Index .centerSideWrapper__header .centerSideWrapper__header--sort ul a { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid transparent; border-radius: 12px; background: #f5f6fa; color: #536079; }
#Company-Index .centerSideWrapper__header .centerSideWrapper__header--sort ul a.active { background: #fff2ec; color: var(--cb-orange); }
#Company-Index .centerSideWrapper__header .centerSideWrapper__header--sort ul a:hover:not(.active) { background: #e9ecf3; color: var(--cb-navy); }
#Company-Index .centerSideWrapper__header .centerSideWrapper__header--sort ul a:focus-visible { outline: 2px solid var(--cb-navy); outline-offset: 2px; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result .catalog-list .catalog-items > div { justify-content: flex-start; text-align: right; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .search-result :is(.catalog-list, .catalog-tile) .catalog-sideinfo .company-name { text-align: center; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > .title { grid-row: 1; grid-column: 1; align-self: center; font-size: 13px; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-changer { grid-row: 1; grid-column: 2; display: flex; justify-content: flex-end; width: auto; margin: 0; gap: 4px; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > input[data-sortby] { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid transparent; border-radius: 12px; background: #f5f6fa; color: #536079; font-size: 13px; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > input[data-sortby].selected { background: #fff2ec; color: var(--cb-orange); }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > input[data-sortby]:hover:not(.selected) { background: #e9ecf3; color: var(--cb-navy); }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-changer input[type=button] { width: 44px; height: 44px; margin: 0; flex: 0 0 44px; border-radius: 10px; background-color: #f5f6fa; background-size: 24px; opacity: .55; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-changer input.selected { background-color: #fff2ec; opacity: 1; }
:is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option input:focus-visible { outline: 2px solid var(--cb-navy); outline-offset: 2px; }
@media (min-width: 841px) and (max-width: 1320px) {
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option { --sort-columns: 3; grid-template-columns: repeat(var(--sort-columns), minmax(0, 1fr)); }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option:has(> input[data-sortby]:nth-of-type(4)) { --sort-columns: 4; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > .title { grid-column: 1 / -2; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-changer { grid-column: -2 / -1; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > input[data-sortby] { font-size: 12px; padding-inline: 2px; }
}
@media (min-width: 1321px) {
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > .title { font-size: 14px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-option > input[data-sortby] { width: auto; padding-inline: 10px; }
    :is(#Material-Index, #Material-Category, #Product-Index, #Promotion-Index) .index-view-changer { margin-right: auto; }
}
body:has(#isShoppingPage) #Product-Index .search-result .catalog-sideinfo .company-name { order: -2; text-align: center; }
body:has(#isShoppingPage) #Product-Index .search-result .catalog-list .catalog-items > div { justify-content: flex-start; text-align: right; }
@media (min-width: 1321px) {
    #Company-Index .centerSideWrapper__header--sort > .row { gap: 12px; margin: 0; }
    #Company-Index .centerSideWrapper__header--sort > .row > .col-auto { padding: 0; margin: 0; }
    #Company-Index .centerSideWrapper__header--sort span { font-size: 14px; }
    #Company-Index .centerSideWrapper__header .centerSideWrapper__header--sort ul { gap: 12px; margin: 0; }
    #Company-Index .centerSideWrapper__header--sort ul li { padding: 0; margin: 0; }
    #Company-Index .centerSideWrapper__header .centerSideWrapper__header--sort ul a { padding: 8px 10px; font-size: 13px; }
}