/*--------- Import Fonts ---------*/
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

/* Screen-reader-only text: gives icon-only links real anchor text (fixes SEO
   "links with no anchor text") without changing the visual layout. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}
/*--------- Default CSS ---------*/
:host {
    color-scheme: light !important;
}
:root {
     color-scheme: light !important;
}
[data-theme="light"] {
    color-scheme: light !important;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
/* The companion the reset above has always needed.
   `hidden` works because the BROWSER stylesheet says [hidden] { display: none }
   — and a browser rule loses to any author rule, however unspecific. So the
   line above quietly disables the hidden attribute on all eleven of those
   elements: setting `el.hidden = true` on a <section> updates the property,
   reports true when read back, and changes nothing on screen. It fails in the
   most misleading way possible, because every check short of reading the
   computed style says it worked.
   (Found 2026-08-22: the program request popup hides its "When" and "Where"
   sections on the spreadsheet lane — the JS ran, the attribute was set, the
   sections stayed. They are <section> elements.)
   Element+attribute beats a bare element selector, so no !important needed. */
article[hidden], aside[hidden], details[hidden], figcaption[hidden], figure[hidden],
footer[hidden], header[hidden], hgroup[hidden], menu[hidden], nav[hidden], section[hidden] {
    display: none;
}
* {
    font-family: "Red Hat Display", sans-serif;
    font-size: 16px;
    font-weight: 500;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}
body {
    line-height: normal;
    font-family: "Red Hat Display", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #1A1A1A;
    margin: 0;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.row {
    display: flex;
}
.row>col {
    font-size: 4vh;
    color: white;
    background: gray;
    margin: .1em;
    padding: .3em;
    border-radius: 3px;
    flex: 1;
}
.container {
    max-width: 1780px;
    padding: 0 30px;
    margin-inline: auto;
}
:root {
    --primary:          #2AA466;
    --primary-light:    #F2F7EE;
    --primary-gradient: var(--primary-gradient);
    --green:            #2AA466;
    --light-blue:       #F2F7EE;
    --white: #ffffff;
    --black: #000000;
    --light-green: #a9c38f;
    --gray: #555555;
    --light-gray: #f5f5f5;
    --normal-gray: #9c9c9c;
    --light-yellow: #efef43;
    --yellow: #ffc339;

    /* ── Pickup Request status palette (red → yellow → green across the flow).
       Single source of truth — used by the list status tags, the filter
       swatches, and the details-page timeline. Each stage has a saturated
       foreground (-fg, for text/swatch/current node) and a light tint (-bg). */
    --pur-st-draft-fg:#C5303A;                    --pur-st-draft-bg:#FBE4E5;
    --pur-st-requested-fg:#BD541C;                --pur-st-requested-bg:#FCE7DC;
    --pur-st-under-reuzeit-evaluation-fg:#A66E14; --pur-st-under-reuzeit-evaluation-bg:#FCEFDB;
    --pur-st-pending-user-checkout-fg:#997610;    --pur-st-pending-user-checkout-bg:#FBF2D7;
    --pur-st-ready-for-scheduling-fg:#8A790C;     --pur-st-ready-for-scheduling-bg:#F8F4D2;
    --pur-st-scheduled-fg:#6F7D16;                --pur-st-scheduled-bg:#F1F5D6;
    --pur-st-in-transit-fg:#587F20;               --pur-st-in-transit-bg:#EAF3D8;
    --pur-st-arrived-fg:#3C8A3E;                  --pur-st-arrived-bg:#E2F1DC;
    --pur-st-checked-in-fg:#258A58;               --pur-st-checked-in-bg:#DCF0E5;
    --pur-st-completed-fg:#1F8A57;                --pur-st-completed-bg:#DCF1E6;
    --pur-st-cancelled-fg:#6B7178;                --pur-st-cancelled-bg:#EDEFF1;

    /* ── Pickup Request ROI bucket palette (red → yellow → green). Used by the
       ROI value color + gradient marker in both the list and the details form.
       Bucket boundaries mirror the API's percent buckets. */
    --pur-roi-negative-fg:#C5303A;   --pur-roi-negative-bg:#FBE4E5;
    --pur-roi-0-25-fg:#C25E1C;       --pur-roi-0-25-bg:#FCE9DB;
    --pur-roi-25-50-fg:#A67912;      --pur-roi-25-50-bg:#FBF1D6;
    --pur-roi-50-75-fg:#7F8016;      --pur-roi-50-75-bg:#F1F5D6;
    --pur-roi-75-100-fg:#587F20;     --pur-roi-75-100-bg:#EAF3D8;
    --pur-roi-100-1000-fg:#2F8A48;   --pur-roi-100-1000-bg:#DEF1E3;
    --pur-roi-over-1000-fg:#1F8A57;  --pur-roi-over-1000-bg:#DCF1E6;
    /* The fixed gradient used by the ROI spectrum bar */
    --pur-roi-gradient: linear-gradient(90deg,#E5484D 0%,#EF7A2E 18%,#ECA516 36%,#C2C024 52%,#8FBE3B 70%,#46A85C 86%,#2AA466 100%);
}

/* ── PUR status tags on the list card (.sales-card-meta .tag.<slug>).
   Colored by the shared palette above; falls back to the default grey. */
.sales-card-meta .tag.draft{background:var(--pur-st-draft-bg);color:var(--pur-st-draft-fg);}
.sales-card-meta .tag.requested{background:var(--pur-st-requested-bg);color:var(--pur-st-requested-fg);}
.sales-card-meta .tag.under-reuzeit-evaluation{background:var(--pur-st-under-reuzeit-evaluation-bg);color:var(--pur-st-under-reuzeit-evaluation-fg);}
.sales-card-meta .tag.pending-user-checkout{background:var(--pur-st-pending-user-checkout-bg);color:var(--pur-st-pending-user-checkout-fg);}
.sales-card-meta .tag.ready-for-scheduling{background:var(--pur-st-ready-for-scheduling-bg);color:var(--pur-st-ready-for-scheduling-fg);}
.sales-card-meta .tag.scheduled{background:var(--pur-st-scheduled-bg);color:var(--pur-st-scheduled-fg);}
.sales-card-meta .tag.in-transit{background:var(--pur-st-in-transit-bg);color:var(--pur-st-in-transit-fg);}
.sales-card-meta .tag.arrived{background:var(--pur-st-arrived-bg);color:var(--pur-st-arrived-fg);}
.sales-card-meta .tag.checked-in{background:var(--pur-st-checked-in-bg);color:var(--pur-st-checked-in-fg);}
.sales-card-meta .tag.completed{background:var(--pur-st-completed-bg);color:var(--pur-st-completed-fg);}
.sales-card-meta .tag.cancelled{background:var(--pur-st-cancelled-bg);color:var(--pur-st-cancelled-fg);}

/* ── Filter sidebar color swatch (opt-in: rendered when an option carries a color) */
.list-filter-block .filter-swatch{
    display:inline-block;width:10px;height:10px;border-radius:3px;
    margin-right:7px;vertical-align:middle;flex:0 0 auto;
}

/* ── Filter sidebar colour PILL (opt-in). Renders the whole option label as a
   rounded coloured badge, matching the /my-equipment "Asset Status" .badge-status
   style, so the filter looks consistent across pages. Colours come from the
   shared PUR status / ROI palettes. */
.list-filter-block .filter-pill{
    display:inline-block;padding:2px 10px;border-radius:999px;
    font-size:12px;line-height:18px;font-weight:500;vertical-align:middle;
}
.list-filter-block .filter-pill.pur-st-draft{background:var(--pur-st-draft-bg);color:var(--pur-st-draft-fg);}
.list-filter-block .filter-pill.pur-st-requested{background:var(--pur-st-requested-bg);color:var(--pur-st-requested-fg);}
.list-filter-block .filter-pill.pur-st-under-reuzeit-evaluation{background:var(--pur-st-under-reuzeit-evaluation-bg);color:var(--pur-st-under-reuzeit-evaluation-fg);}
.list-filter-block .filter-pill.pur-st-pending-user-checkout{background:var(--pur-st-pending-user-checkout-bg);color:var(--pur-st-pending-user-checkout-fg);}
.list-filter-block .filter-pill.pur-st-ready-for-scheduling{background:var(--pur-st-ready-for-scheduling-bg);color:var(--pur-st-ready-for-scheduling-fg);}
.list-filter-block .filter-pill.pur-st-scheduled{background:var(--pur-st-scheduled-bg);color:var(--pur-st-scheduled-fg);}
.list-filter-block .filter-pill.pur-st-in-transit{background:var(--pur-st-in-transit-bg);color:var(--pur-st-in-transit-fg);}
.list-filter-block .filter-pill.pur-st-arrived{background:var(--pur-st-arrived-bg);color:var(--pur-st-arrived-fg);}
.list-filter-block .filter-pill.pur-st-checked-in{background:var(--pur-st-checked-in-bg);color:var(--pur-st-checked-in-fg);}
.list-filter-block .filter-pill.pur-st-completed{background:var(--pur-st-completed-bg);color:var(--pur-st-completed-fg);}
.list-filter-block .filter-pill.pur-roi-negative{background:var(--pur-roi-negative-bg);color:var(--pur-roi-negative-fg);}
.list-filter-block .filter-pill.pur-roi-0-25{background:var(--pur-roi-0-25-bg);color:var(--pur-roi-0-25-fg);}
.list-filter-block .filter-pill.pur-roi-25-50{background:var(--pur-roi-25-50-bg);color:var(--pur-roi-25-50-fg);}
.list-filter-block .filter-pill.pur-roi-50-75{background:var(--pur-roi-50-75-bg);color:var(--pur-roi-50-75-fg);}
.list-filter-block .filter-pill.pur-roi-75-100{background:var(--pur-roi-75-100-bg);color:var(--pur-roi-75-100-fg);}
.list-filter-block .filter-pill.pur-roi-100-1000{background:var(--pur-roi-100-1000-bg);color:var(--pur-roi-100-1000-fg);}
.list-filter-block .filter-pill.pur-roi-over-1000{background:var(--pur-roi-over-1000-bg);color:var(--pur-roi-over-1000-fg);}

/* ── Item Partner Variant lifecycle status — a red→yellow→green progression
   across the seven `variant_status` stages (Registered = early/cold → Delivered
   = complete). ONE palette drives both the sidebar filter pills (.filter-pill
   .ipv-st-*) AND the status badge on the list cards + the variant detail page
   header (.tag.ipv-status.*), so the colour a user picks in the filter is the
   exact colour they see on the card and on the record. Namespaced with the
   `ipv-status` marker class so it never clobbers the Orders page's own
   .tag.shipped / .paid / .ordered colours. */
.list-filter-block .filter-pill.ipv-st-registered,
.tag.ipv-status.registered{background:#FCE4E2;color:#C0392B;}
.list-filter-block .filter-pill.ipv-st-approved,
.tag.ipv-status.approved{background:#FBE7D6;color:#B5642A;}
.list-filter-block .filter-pill.ipv-st-published,
.tag.ipv-status.published{background:#FDF2C6;color:#A18612;}
.list-filter-block .filter-pill.ipv-st-ordered,
.tag.ipv-status.ordered{background:#F1F3C4;color:#7F8A1E;}
.list-filter-block .filter-pill.ipv-st-paid,
.tag.ipv-status.paid{background:#E7F2CF;color:#5E8B2E;}
.list-filter-block .filter-pill.ipv-st-shipped,
.tag.ipv-status.shipped{background:#DCEFD7;color:#357A3C;}
.list-filter-block .filter-pill.ipv-st-delivered,
.tag.ipv-status.delivered{background:#CDEBD6;color:#1E7B45;}

/* ── IPV `type` — Exclusive (the upgraded listing that overrides the item on the
   shop + channels) reads as brand green; Regular is neutral. Same dual-home
   pattern as the status palette above. */
.list-filter-block .filter-pill.ipv-ty-exclusive,
.tag.ipv-type.exclusive{background:#E8F6EE;color:#1E7B45;}
.list-filter-block .filter-pill.ipv-ty-regular,
.tag.ipv-type.regular{background:#F2F3F5;color:#6B7280;}

/* ── IPV `custom_settlement_status` — whether the deal's ECONOMICS are final,
   NOT whether money moved. Settled is deliberately NEUTRAL, not green: it is a
   closed state rather than a good one, and colouring it like success would read
   as "paid" — which it is not. Open carries the same amber "awaiting" as a
   pending approval, because that is exactly what it is. */
.list-filter-block .filter-pill.ipv-se-open,
.tag.ipv-settlement.open{background:#FDF2C6;color:#A18612;}
.list-filter-block .filter-pill.ipv-se-settled,
.tag.ipv-settlement.settled{background:#F2F3F5;color:#6B7280;}

/* ── IPV `custom_approval` — Approved reads brand green (owner has signed off,
   partner Status editing unlocked); Pending is a neutral amber "awaiting". Same
   .tag pill shape as status/type above; shown on every variant list card. */
.tag.ipv-approval.approved{background:#CDEBD6;color:#1E7B45;}
.tag.ipv-approval.pending{background:#FDF2C6;color:#A18612;}

/* ── Invoice TYPE chip — what a Sales Invoice is on a cross-partner deal
   (Customer invoice / Owner invoice / REUZEit fee / Rebate / Credit note).
   Deliberately NOT styled as a `.tag`: the status chip beside it answers
   "has it been paid?", this answers "what is it?". Two different questions
   sitting side by side read as one control unless they look different — so
   this is an outline chip, not a filled one.
   Lives here rather than beside either consumer because it is worn on both
   the invoice detail page (cart.css) and the invoices list card (orders.css),
   and two copies of a palette drift. global.css is loaded on every page. */
.inv-kind{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:11px;
    font-size:11px;font-weight:600;letter-spacing:.3px;line-height:18px;
    border:1px solid currentColor;background:transparent;}
.inv-kind.kind-owner{color:#A8511D;}
.inv-kind.kind-customer{color:#1C6B47;}
.inv-kind.kind-fee{color:#5B4B9E;}
.inv-kind.kind-rebate{color:#0F6C99;}
.inv-kind.kind-credit{color:#B23B3B;}
.inv-kind.kind-other{color:#878D99;}

/* ── ROI bucket colour classes (shared by the list card + details form). The
   value text and the spectrum marker both read `currentColor` from these. */
.roi-bucket-negative{color:var(--pur-roi-negative-fg);}
.roi-bucket-0-25{color:var(--pur-roi-0-25-fg);}
.roi-bucket-25-50{color:var(--pur-roi-25-50-fg);}
.roi-bucket-50-75{color:var(--pur-roi-50-75-fg);}
.roi-bucket-75-100{color:var(--pur-roi-75-100-fg);}
.roi-bucket-100-1000{color:var(--pur-roi-100-1000-fg);}
.roi-bucket-over-1000{color:var(--pur-roi-over-1000-fg);}

/* ── ROI spectrum bar: a fixed red→yellow→green gradient with a marker showing
   where this PUR's ROI sits (low / mid / high). */
.roi-spectrum{position:relative;width:100%;min-width:120px;height:6px;margin-top:6px;}
.roi-spectrum-bar{width:100%;height:6px;border-radius:3px;background:var(--pur-roi-gradient);}
.roi-spectrum-marker{
    position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
    background:#fff;border:2px solid currentColor;transform:translate(-50%,-50%);
    box-shadow:0 1px 2px rgba(0,0,0,.25);
}
section {
    padding: 60px 0;
}
section.no-padding {
    padding: 0;
}
section.no-padding-top {
    padding-top: 0;
}
section.no-padding-bottom {
    padding-bottom: 0;
}
img {
    max-width: 100%;
    vertical-align: bottom;
}
a {
    color: #17181A;
    transition: 0.3s all;
}
a:hover {
    color: var(--primary);
}
.btn {
    width: auto;
    padding: 0 25px;
    margin-top: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease, border 0.3s ease;
    outline: 0;
    text-align: center;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--primary);
}
.btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-light);
}
.btn.outline {
    background: transparent;
    color: var(--primary);
}
.btn.outline:hover {
    background: var(--primary);
    color: #fff;
}
.btn.secondary {
    background-color: var(--green);
}
p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 12px;
}
h1.title, h1 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}
.page h1.title,.page h1 {
    font-weight: 600;
}
h2.title, .h2 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}
.page-title {
    padding: 25px;
    background-color: #e9f1e9;
    text-align: center;
}
.page-title h1.title {
    color: var(--primary);
}
/*--------- Header CSS ---------*/
.header-search-input input:focus + .custom-placeholder,
.header-search-input input:not(:placeholder-shown) + .custom-placeholder {
    opacity: 0;
}
.custom-placeholder {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    line-height: 24px;
    pointer-events: none;
    display: flex;
    gap: 6px;
    align-items: center;
    transition: opacity 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
}
header.header {
    position: relative;
    z-index: 10000;
}
.header-top-wrapper {
    border-bottom: 1px solid #ccc;
    position: fixed;
    top: 0;
    background: #fff;
    left: 0;
    right: 0;
    z-index: 99;
}
.header-top-main {
    justify-content: space-between;
}
.top-links {
    display: flex;
    gap: 21px;
}
.top-links li>a, .top-links li>span {
    font-size: 12px;
    text-transform: uppercase;
    color: #6a6a6a;
    position: relative;
    transition: 0.3s all;
    display: inline-block;
    line-height: 45px;
    cursor: pointer;
}
.top-links a:after, .top-links li span::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 15px;
    background-color: var(--black);
    top: 14px;
    right: -11px;
}
.top-links li:last-child a:after, .top-links li:last-child span::after {
    display: none;
}
.top-links a:hover {
    color: #000;
}
.header-main {
    flex-direction: column;
}
.header-midle {
    justify-content: space-between;
    padding: 17px 0;
    align-items: center;
}
img.logo {
    height: auto;
}
.header-left img.logo {
    max-width: 100%;
}
.logo-wrapper > a {
    display: inline-block;
}
.header-midle .col ul {
    display: flex;
    align-items: center;
}
.header-search-input {
    position: relative;
    display: flex;
    overflow: hidden;
}
.search-form {
    position: relative;
    display: flex;
}
.search-form input, .header-search-input input {
    width: 390px;
    border-radius: 12px;
    outline: 0;
    font-size: 14px;
    border: 1px solid #CED5D9;
    padding: 10px 60px 10px 15px;
    height: 50px;
    font-weight: 500;
}
.search-form input::placeholder, .header-search-input input::placeholder {
    color: #878D99;
}
.search-form input::-ms-input-placeholder, .header-search-input input::-ms-input-placeholder {
   color: #878D99;
}
.search-form button, .header-search-input .search_btn {
    padding: 0;
    background: no-repeat;
    border: 0;
    width: 56px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -56px;
    cursor: pointer;
    background-color: var(--primary);
    border-radius: 12px;
    z-index: 1;
}
.search-form button img {
    width: 24px;
}
.contact-info-main {
    display: flex;
    align-items: center;
    height: 52px;
    background-color: var(--light-gray);
    border-radius: 6px;
    padding: 0 15px;
    margin-left: 15px;
}
.contact-icon {
    width: 28px;
}
.contact-icon img {
    width: 100%;
    opacity: .8;
}
.contact-title {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    gap: 1px;
}
.info-subtitle {
    font-size: 10px;
    text-transform: uppercase;
}
.contact-title a {
    color: var(--black);
    font-weight: 500;
}
.user-item-block {
    width: 64px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    background-image: url(/assets/img/shopping-cart-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
}
.disposition-cart .user-item-block {
    background-image: url(/assets/img/disposition-icon.svg);
}
.pickup-cart .user-item-block {
    background-image: url(/assets/img/truck-delivery-icon.svg);
}
.notification .user-item-block {
    background-image: url(/assets/img/notification-icon.svg);
}
.wishlist .user-item-block {
    background-image: url(/assets/img/heart-icon.svg);
}
.conversations-icon .user-item-block {
    background-image: url(/assets/img/chat-icon.svg);
}
.user-profile .user-item-block {
    background-image: url(/assets/img/user-icon.svg);
}
.shop-bag img {
    width: 30px;
}
.items-number-count {
    position: absolute;
    background-color: var(--primary);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    right: -3px;
    top: -3px;
    border-radius: 100%;
    color: var(--white);
}
input::-webkit-input-placeholder {
    color: #aeaeae;
}
input:-ms-input-placeholder {
    color: #aeaeae;
}
input::placeholder {
    color: #aeaeae;
}
.no-number-count .items-number-count {
    display: none;
}
.no-number-count .user-item-block {
    opacity: 0.4;
}
.menu {
    display: flex;
    flex-wrap: wrap;
}
.menu a {
    color: #17181A;
}
li.menu-item>a {
    padding: 8px 12px;
    display: inline-block;
    font-size: 16px;
    transition: 0.3s all;
    border-width: 0;
    position: relative;
    line-height: 24px;
    font-weight: 600;
}
.currency_selector {
    appearance: none;
}
li.menu-item.has-children>a:not(.shop-menu):hover:after {
    border-color: var(--primary);
}
li.menu-item {
    position: relative;
}

.user-profile .dropdown-content {
    position: absolute;
    background-color: #fff;
    padding: 10px 0;
    width: 260px;
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.3s,opacity 0.3s;
    box-shadow: 0 10px 50px 0 rgba(61, 66, 69, .18);
    border-radius: 8px;
}
.sub-menu-item a:hover, .dropdown-content a:hover {
    color: var(--primary);
    background-color: var(--primary-light);
}
.user-profile .dropdown-content span {
    padding: 8px 16px;
    font-weight: 700;
    display: block;
}
/*---- END Header CSS ----*/
/*--------- Mobile menu CSS ---------*/
.custom-header_mobile {
    display: none;
}
/*---- END Mobile menu CSS ----*/
/*--------- Search product CSS ---------*/
.search-data-wrapper {
    position: absolute;
    right: 0;
    width: 720px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 3px;
    min-height: 3.5rem;
    z-index: 1000;
    text-align: left;
    overflow: hidden;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .3);
    margin-top: 60px;
    border-top: 2px solid #689769;
    display: none;
    z-index: 9;
}
.search-form-wrapper {
    position: relative;
}
/* Search history dropdown */
.search-history-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 1000;
    padding: 8px 0;
    margin-top: 2px;
}
.search-history-dropdown.search-history-above {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 2px;
    border-radius: 12px 12px 0 0;
}
.search-history-label {
    font-size: 12px;
    font-weight: 600;
    color: #878D99;
    padding: 4px 16px 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.search-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background .15s;
}
.search-history-item:hover {
    background: #f5f5f5;
}
.search-history-item svg {
    flex-shrink: 0;
}
.search-data-content-left {
    flex: 1 1 32%;
    border-right: 1px solid #ebebeb;
    max-height: 350px;
    overflow: auto;
}
.search-data-content.right {
    flex: 1 1 62%;
    max-height: 350px;
    overflow: auto;
}
.data-title {
    padding: 8px 10px;
    border-bottom: 1px solid #ebebeb;
    position: sticky;
    top: 0;
    background: #f5f5f5;
}
.search-data-title, .show-totle {
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    color: #000;
}
.header-midle .col ul.search-menu {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.search-menu-title {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    padding: 7px 10px;
    display: block;
}
.search-menu-item {
    width: 100%;
    transition: 0.3s all;
}
.search-menu-title:hover, .search-product-item>a:hover {
    background: var(--light-gray);
}
.highlight-text {
    font-weight: 500;
    color: var(--green);
}
.search-product-item>a {
    display: flex;
    border-bottom: 1px solid #ebebeb;
    align-items: center;
    color: #000;
    padding: 10px;
    transition: 0.3s all;
}
.product-img {
    height: 80px;
    width: 80px;
    margin-right: 10px;
}
.product-img img {
    height: 80px;
    max-width: 80px;
    display: block;
    margin: auto;
    object-fit: contain;
}
.product-meta {
    flex: 1 1 calc(100% - 90px);
}
.product-meta-title {
    font-size: 15px;
    font-weight: 500;
    color: #000000;
}
.product-meta-description {
    font-size: 13px;
    padding: 5px 0 8px;
    line-height: 17px;
    color: #676767;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    max-height: 40px;
    margin-bottom: 4px;
}
.product-meta-price .price {
    font-weight: 600;
    color: var(--gray);
    font-size: 14px;
}
.show-all-wrapper {
    border-top: 1px solid #ebebeb;
    background-color: #f5f5f5;
    display: block;
    text-align: center;
}
.show-all a {
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    padding: 10px 0;
    display: block;
}
.show-all a:hover {
    text-decoration: underline;
}
.search-product-item:last-child a {
    border: 0;
}
.search-data-inner {
    display: flex;
    flex-direction: column;
}
.header-midle .col ul .search-product-items {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.data-title-wrapper {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 9;
}
.data-title-wrapper .close-btn-wrapper {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 5px;
    top: 10px;
    text-align: center;
}
.data-title-wrapper .close-btn-wrapper .closebtn {
    font-size: 22px;
    line-height: 12px;
    color: #000;
}

/* Universal cross-document header search (suppliers & resellers).
   Rendered inside the recent-searches dropdown area (.search-history-dropdown),
   but BIGGER -- wider + taller + scrollable -- to hold grouped results. */
.search-results-dropdown {
    width: min(680px, 92vw);
    left: 0;
    right: auto;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 0;
}
.us-state {
    padding: 16px 14px;
    font-size: 14px;
    color: #878D99;
    text-align: center;
}
.us-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid #ebebeb;
    background: #f5f7f6;
    position: sticky;
    top: 0;
    z-index: 2;
}
.us-group-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #2c3e50;
}
.us-group-count {
    font-size: 12px;
    font-weight: 600;
    color: #878D99;
}
.us-results {
    list-style: none;
    margin: 0;
    padding: 0;
}
.us-result a,
.us-result .us-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid #f0f0f0;
    color: #000;
    text-decoration: none;
    transition: background .15s;
}
.us-result a:hover {
    background: #f4faf6;
}
.us-result.us-nolink .us-row {
    cursor: default;
}
.us-row-thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-radius: 6px;
    overflow: hidden;
}
.us-row-thumb img {
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
}
.us-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.us-row-id {
    font-size: 12px;
    font-weight: 600;
    color: #2AA466;
    line-height: 1.3;
}
.us-row-title {
    font-size: 14px;
    color: #2c3e50;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.us-row-meta {
    font-size: 12px;
    color: #878D99;
    line-height: 1.3;
}
@media (max-width: 1023px) {
    .search-results-dropdown { width: 92vw; max-height: 65vh; }
}
.loader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgb(128 128 128 / 20%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader img {
    max-width: 40px;
}
.desktop-hide {
    display: none;
}

/* toast msg */
.toast-msg-wrapper {
    padding: 50px;
}
.toast-msg {
    max-width: 100% !important;
    padding: 8px 12px 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 12px !important;
    gap: 10px !important;
    justify-content: space-between !important;
    margin-bottom: 15px !important;
    margin-top: 15px !important;
}
.toast-msg.success,
.toast-msg.success * {
    background: #F2F7EE !important;
    color: #2AA466 !important;
}
.toast-msg.error {
    background: #fae5e5 !important;
    color: #e0312d !important;
}
.toast-msg.info {
    background: #b3e7f5;
}
.toast-msg.warning {
    background: #fdf0d6;
    color: #c07600;
}
.toast-icon {
    line-height: 30px !important;
    width: 22px !important;
}
.toast-content {
    width: calc(100% - 22px) !important;
    padding-left: 12px !important;
}
.toast-icon img {
    width: 100% !important;
}
.toast-title {
    font-size: 22px !important;
    margin-bottom: 2px !important;
    display: block !important;
    font-weight: 500 !important;
}
.toast-text {
    font-size: 15px !important;
    margin-bottom: 0 !important;
    line-height: 20px;
}
.toast-btn {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}
.toast-btn img {
    height: 100% !important;
}
.toast-mg-left {
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
}
.toast-btn {
    cursor: pointer;
}
/* end toast msg */

.payment-card img {
    max-width: 200px;
}
/* Wallet marks (Apple Pay / Google Pay / Amazon Pay / ACH) are supplied as
   padded PNGs on image.reuzeit.com — the artwork only fills the middle 44-57%
   of each canvas, so a flat height:35px like the card marks beside them would
   render the logos at roughly half the visual weight. Scale each one so the
   ARTWORK lands at ~30px tall, then pull the surplus transparent padding back
   out with negative block margins so the row keeps its original 35px height. */
.payment-card img.wallet-mark {
    width: auto;
}
.payment-card img.pm-apple {
    height: 57px;
    margin-block: -11px;
}
.payment-card img.pm-google {
    height: 60px;
    margin-block: -13px;
}
.payment-card img.pm-amazon {
    height: 68px;
    margin-block: -17px;
}
.payment-card img.pm-ach {
    height: 53px;
    margin-block: -9px;
}
.top-links ul.dropdown-content {
    position: absolute;
}
.top-links>li {
    position: relative;
}
.top-links li ul.dropdown-content {
    z-index: 9;
    width: 200px;
    left: -24px;
    border: 1px solid #e9e9e9;
    top: 102%;
    background-color: #fff;
    border-top: 0;
}
.top-links li ul.dropdown-content a {
    line-height: 20px;
    display: block;
    padding: 4px 24px;
    text-transform: inherit;
    font-size: 14px;
    color: #6a6a6a;
}
.top-links li ul.dropdown-content a:hover {
    color: #000;
}
.toast-mg-right {
    display: none;
}
.search-product-item {
    width: 100%;
}
.condition_detail {
    font-size: 14px;
    font-weight: 600;
    position: relative;
    padding-left: 24px;
    background-image: url(/assets/img/used-icon-new.svg);
    background-size: 18px;
    background-position: left 1px;
    background-repeat: no-repeat;
}
.condition_detail.needs-repairs {
    background-image: url(/assets/img/repair-icon.svg);
    background-size: 17px;
    background-position: left 1px;
    padding-left: 22px;
}
.condition_detail.for-parts-or-not-working {
    background-image: url(/assets/img/not-working-2.svg);
    background-size: 15px;
    background-position: left 1px;
    padding-left: 22px;
}
.condition_detail.new, .condition_detail.new-other-see-details  {
    background-image: url(/assets/img/new-icon.svg);
    background-size: 17px;
    background-position: left 1px;
    padding-left: 21px;
}
.pro-card-products-box .condition_detail, .region .details {
    padding-bottom: 0;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    background-image: url(/assets/img/used-icon-new.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left center;
    padding-left: 26px;
}
.region-and-condition {
    display: flex;
    padding-bottom: 12px;
}
.region {
    display: flex;
    align-items: center;
}
.details.us_country_flag {
    background-image: url(/assets/img/us-flag-icon.svg);
}
.details.uk_country_flag {
    background-image: url(/assets/img/uk-flag-icon.svg);
}
.details.eu_country_flag {
    background-image: url(/assets/img/eu-flag-icon.svg);
}
.region .details {
    background-position: left center;
    padding-left: 24px;
    font-size: 14px;
    background-size: 17px;
    text-transform: uppercase;
}
.region * {
    color: #17181A;
}
.region span.dot {
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    font-size: 13px;
    line-height: 19px;
}
.search-form-wrapper .region-and-condition .region .details {
    background-position: left 2px;
    padding-left: 20px;
    background-size: 14px;
    font-size: 14px;
}
.search-form-wrapper .condition_detail.for-parts-or-not-working {
    background-size: 14px;
    padding-left: 20px;
}
.search-form-wrapper .condition_detail.used {
    padding-left: 21px;
    background-size: 16px;
    background-position: left 1px;
}
.search-form-wrapper .region-and-condition {
    padding: 2px 0 0;
}
.search-form-wrapper .region:after {
    height: 16px;
    top: 3px;
    right: -2px;
}
.search-form-wrapper .region {
    position: relative;
    padding-right: 8px;
    margin-right: 8px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background-color: #ebebeb;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--primary); 
}
/* End Scrollbar Styling */
header .header-region {
    flex-direction: column;
    background-image: inherit;
}
.header-region-text {
    font-size: 10px;
    text-transform: uppercase;
}
.header-region-wrapper {
    position: relative;
}
.header-region-content {
    position: absolute;
    left: 0;
    background: #ffffff;
    padding: 8px 0;
    top: 60px;
    border-radius: 8px;
    width: 150px;
    text-align: left;
    z-index: 1;
    display: none;
    box-shadow: 0 10px 50px 0 rgba(61, 66, 69, .18);
}
.header-region-content li {
    padding: 8px 16px;
}
.header-region-content.active {
    display: block;
}
header .header-midle .header-region-content ul {
    flex-direction: column;
    align-items: start;
}
header .header-midle .header-region-content ul li {
    width: 100%;
    padding: 3px 10px;
    display: flex;
    align-items: center;
}
header .header-midle .header-region-content ul li input {
    margin: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
header .header-midle .header-region-content ul li label {
    display: block;
    width: calc(100% - 18px);
    line-height: 20px;
    background-image: url(/assets/img/us-flag-icon.svg);
    background-position: 10px 2px;
    padding-left: 32px;
    font-size: 14px;
    background-size: 16px;
    background-repeat: no-repeat;
    padding-top: 1px;
    cursor: pointer;
}
header .header-midle .header-region-content ul li.uk_country_flag label {
    background-image: url(/assets/img/uk-flag-icon.svg);
}
header .header-midle .header-region-content ul li.eu_country_flag label {
    background-image: url(/assets/img/eu-flag-icon.svg);
}
.help-block {
    font-size: 12px;
    padding-top: 3px;
    color: red;
}
.search-data-wrapper p.error {
    text-align: center;
    color: red;
    padding-top: 15px;
}
.overlay-input-text label span.required {
    color: red;
    display: inline-block;
    margin-left: 2px;
    line-height: 10px;
    font-size: 14px;
}
.ajax_cart_btn>span, .pro-card-products-box .pro-card-btn> span, .ajax_cart_btn.cart_loader>div {
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    padding: 0;
    display: inline-block;
    pointer-events: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.ajax_cart_btn.loader>span {
    background-image: url(/assets/img/loading-gif.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
    position: relative;
}
.ajax_cart_btn.cart_loader>span, .ajax_cart_btn.cart_loader>div {
    background-image: url(/assets/img/loading-gif.gif);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 20px;
    position: relative;
    padding-right: 25px;
}
.overlay-input-text label.control-label {
    display: none;
}
*:focus-visible {
    outline: 0;
}
.col.overlay-input-text.select:after {
    position: absolute;
    content: '';
    border-top: 1px solid;
    border-right: 1px solid;
    width: 6px;
    height: 6px;
    transform: rotate(135deg);
    right: 14px;
    top: 14px;
}
.overlay-input-text select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 15px !important;
}
.view_cart_btn, .tost-message-link {
    font-size: 16px;
    color: var(--green);
    font-weight: 700;
}
.view_cart_btn:hover, .tost-message-link:hover {
    text-decoration: underline;
}
.free-shipping-block {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 13px;
    margin-left: 12px;
    position: relative;
}
.free-shipping-block:before {
    position: absolute;
    content: '';
    width: 2px;
    height: 16px;
    background: #ccc;
    left: 0;
}
.free-shipping-block span.block-icon {
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(/assets/img/free-shipping-icon.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.free-shipping-block span {
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #689769;
}
.mobile-navigation .more i.fa.fa-minus {
    display: none;
}
.mobile-navigation .more.active i.fa.fa-minus {
    display: block;
}
.mobile-navigation .more.active i.fa.fa-plus {
    display: none;
}
.currency-with-wrapper {
    display: flex;
    align-items: center;
}
.select.currency-with-wrapper::after {
    width: 24px;
    height: 24px;
    right: 0;
    pointer-events: none;
}
.currency_selector {
    color: #454B54;
    font-size: 16px;
    line-height: 24px;
    border: 0;
    padding: 10px 24px 10px 0;
    font-weight: 500;
    cursor: pointer;
}
.header-region img {
    width: 24px;
    height: auto;
    margin-bottom: 1px;
    opacity: .9;
}
.custom-header_mobile .more i.fa.fa-minus {
    display: none;
}
.custom-header_mobile .more.active i.fa.fa-minus {
    display: block;
}
.custom-header_mobile .more.active i.fa.fa-plus {
    display: none;
}
/*footer*/
footer.footer {
    background-color: #f0f0f0;
}
.footer-bottom-link-item a:after, .footer-bottom-link-item>span:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 15px;
    background-color: var(--black);
    top: 14px;
    right: -11px;
}
.footer-col input, .footer-col button {
    width: 400px;
    height: 52px;
    border-radius: 6px;
    border: 0;
    outline: 0;
    background-color: var(--light-gray);
    padding: 0 52px 0 20px;
    font-size: 17px;
}
.footer-main {
    padding: 60px 0;
}
.footer-col-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--primary);
}
.footer-menu-item a, .footer-col p, .equipment-sales {
    font-size: 16px;
    color: #555;
    display: block;
    padding: 0;
    transition: 0.3s all;
    font-weight: 300;
    cursor: pointer;
}
.footer-menu-item a:hover, .equipment-sales:hover {
    color: #000;
}
.footer-col form {
    margin-top: 14px;
}
.footer-col input, .footer-col button {
    padding: 0 15px;
    height: 48px;
    width: 100%;
    border-radius: 25px;
}
.footer-col input {
    padding: 0 20px;
    font-size: 16px;
    background-color: #fff;
}
.footer-col button:hover {
    background-color: #000;
}
section#shadow-host-companion {
    padding: 0;
}
.footer-main .row {
    justify-content: space-between;
    gap: 10px;
}
.col.footer-col {
    flex: 1 1 18%;
}
.col.footer-col.newsletter {
    flex: 1 1 42%;
}
ul.footer-bottom-link {
    display: flex;
    gap: 20px;
    align-items: center;
}
.footer-bottom-link-item a, .footer-bottom-link-item.copyright, .footer-bottom-link-item span {
    font-size: 15px;
    color: #555;
    position: relative;
    font-weight: 300;
}
.footer-bottom-link-item.copyright a {
    color: #000;
}
.footer-bottom-link-item a:hover {
    color: #000;
    text-decoration: underline;
}
.footer-bottom-link-item.copyright a:hover {
    text-decoration: underline;
}
.footer-col input::-webkit-input-placeholder {
    color: #a7a7a7;
    font-weight: 300;
}
.footer-col input:-ms-input-placeholder {
    color: #a7a7a7;
    font-weight: 300;
}
.footer-col input::placeholder {
    color: #a7a7a7;
    font-weight: 300;
}
.footer-bottom-link-item a:after, .footer-bottom-link-item>span:after {
    background-color: #b1b1b1;
    top: 2px;
}
.footer-bottom-link-item:last-child a:after {
    display: none;
}
.payment-card ul {
    display: flex;
    gap: 40px;
}
.footer-menu-item {
    margin: 10px 0;
}
.footer .newsletter {
    background-image: url(../img/cta-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;  
    padding: 60px 20px;
    text-align: center;   
}
.newsletter h2.title {
    color: #fff;
    font-weight: 500;
    margin-bottom: 10px;
}
.newsletter p {
    color: #fff;
    font-weight: 400;
}
.newsletter p {
    color: #fff;
    font-weight: 400;
    margin-bottom: 20px;
}
.newsletter-main {
    display: flex;
    max-width: 600px;
    width: 100%;
    position: relative;
    margin-inline: auto;
}
.newsletter-main input {
    width: 100%;
    background: #fff;
    border: 0;
    padding: 10px 25px;
    border-radius: 30px;
    min-height: 46px;
    font-size: 16px;
    padding-right: 108px;
}
.newsletter-main .action {
    position: absolute;
    right: -1px;
    top: 0;
}
.newsletter-main .action .btn {
    margin: 0;
}
.footer-main {
    display: flex;
}
.footer-links-wrapper {
    width: 70%;
}
.reuzeit-details {
    width: 30%;
}
/* Footer link columns: size each list to its content and separate them with a
   single uniform gap, so the spacing between every group is identical (equal-
   width columns would left-align short lists like "Connect" and leave a larger
   visual margin before the next group). */
.new-footer .footer-links-main {
    justify-content: flex-start;
    gap: 90px;
    width: 100%;
}
.new-footer .footer-links-main > .col.footer-col {
    flex: 0 0 auto;
    max-width: none;
}
.reuzeit-locations {
    flex-direction: column;
    gap: 0 !important;
    margin-top: 25px;
}
.reuzeit-locations .location {
    color: #2c2c2c;
    font-weight: 500;
}
.reuzeit-locations .address,.footer .phone-number {
    font-size: 16px;
    color: #555;
    display: block;
    padding: 0;
    transition: 0.3s all;
    font-weight: 300;
}
.footer-main .reuzeit-locations .row {
    justify-content: initial;
}
.footer-main .reuzeit-locations .row .col {
    width: 33.33%;
}
.reuzeit-locations .address {
    margin: 10px 0;
    max-width: 185px;
}
.footer .phone-number:hover {
    color: #000;
}
.footer-menu-item {
    margin: 8px 0;
}
.reuzeit-details p {
    margin: 22px 0 20px;
}
.reuzeit-details .btn {
    margin-top: 0;
}
.reuzeit-details .btn-wrapper {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.social-media {
    display: flex;
    margin-top: 24px;
    gap: 8px;
    flex-wrap: wrap;
}
.social-media>a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #B2B2B2;
    border-radius: 30px;
    transition: 0.3s all;
}
.social-media>a:hover {
    border-color: #000;
}
.footer-bottom-link-item a,.footer-bottom-link-item span {
    font-size: 15px;
    color: #555;
    position: relative;
    font-weight: 300;
}

/*page search*/
.page-search {
    margin-bottom: 30px;
}
.page-search .search-form input {
    background: transparent;
    border: 1px solid #d3d3d3;
    border-radius: 30px;
    font-size: 15px;
    height: 46px;
    width: 100%;
}
.page-search .search-form button {
    width: 46px;
    height: 46px;
    margin-left: -46px;
    background-size: 22px;
}
.page-search .search-form .search-form {
    width: 100%;
}

/*aside increases profits*/
.aside-increases-profits {
    background-color: var(--green);
    padding: 25px;
}
.aside-increases-profits .row {
 flex-direction: column;
}
.aside-increases-profits * {
    color: #fff;
}
.aside-increases-profits .img-block {
    max-width: 200px;
    margin-inline: auto;
}
.aside-increases-profits .content {
    margin: 15px 0 30px;
    text-align: center;
}
.aside-increases-profits .content span {
    font-size: 20px;
    color: #A9C38F
}
.aside-increases-profits .content h2 {
    font-size: 28px;
    line-height: 34px;
    margin: 10px 0;
    font-weight: 400;
}
.aside-increases-profits .content p.small-text {
    margin-bottom: 3px
}
.aside-increases-profits .content p.large-text {
    margin: 6px 0 0;
    font-size: 20px;
    line-height: 28px;
}
.aside-increases-profits .form .btn {
    margin-top: 15px
}
.aside-increases-profits .content h2 strong {
    font-weight: 600;
    display: block;
}
.aside-increases-profits .row input {
    height: 46px;
    border-radius: 0;
    padding: 10px 17px;
    font-size: 16px;
    color: #000;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 30px;
}
.aside-increases-profits .row .row {
    row-gap: 10px;
}
.aside-increases-profits .row .form .btn {
    width: 100%;
}
/* testimonials */
.testimonials {
    background-color: var(--green);
    color: #fff;
    text-align: center;
}
.testimonials .title {
    text-align: center;
}
.testimonials-inner {
    display: flex;
    gap: 50px;
    margin-top: 30px;
}
.testimonial-block {
    width: 50%;
}
.testimonials p {
    color: #fff;
}
.testimonials .review {
    margin-bottom: 15px;
}
.testimonials .position {
    margin-top: 20px;
}
.testimonials .position p span {
    display: block;
    font-weight: 100;
}
.testimonials p.last-para {
    margin: 28px 0 0;
    font-size: 14px;
    font-style: italic;
    line-height: 22px;
}
/* trusted partners */
.trusted-partners .title {
    text-align: center;
}
.trusted-partners img {
    width: 65% !important;
    margin-inline: auto;
}
.trusted-partners-slider {
    margin-top: 40px;
}

.header-midle .col {
    width: calc(100% - 250px);
}
.header-midle .col.logo-wrapper {
    width: 250px;
}
.header-midle .col.logo-wrapper a {
    display: block;
}
.header-midle .col ul {
    display: flex;
    align-items: center;
    justify-content: end;
}

.singal-video-block .fluid-width-video-wrapper {
    width: 100%;
    position: relative;
    padding: 0;
}
.singal-video-block {
    flex: 0 0 50%;
    padding: 0 20px;
}
.singal-video-block .img-block {
    padding: 0;
    width: 100%;
    position: relative;
    padding: 0;
    padding-top: 56.25% !important;
    cursor: pointer;
}
.singal-video-block .img-block img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.singal-video-block .img-block:after {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    background-image: url(../img/play-icon-white.svg);
    width: 50px;
    height: 50px;
    margin-inline: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.pro-card-products-box>span.price-hidden, .related-products-item .product-item-inner>span.price-hidden {
    min-height: 38px;
}


/*footer*/
.new-footer .container * {
    font-family: "Red Hat Display", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #54575F;
}
.new-footer .container {
    max-width: 1800px;
}
.new-footer .footer-main {
    display: flex;
    flex-direction: row-reverse;
    gap: 10%;
    padding: 60px;
    margin-top: 100px;
    background: #F3F3F3;
    border-radius: 24px;
}
footer.footer.new-footer {
    background-color: #fff;
}
.new-footer p {
    line-height: 160%;
}
.new-footer .footer-main .footer-col-title {
    font-size: 16px;
    font-weight: 700;
    margin-block: 18px;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #17181A;
    display: inline-block;
    border-bottom: 1px solid var(--primary-border);
}
.new-footer img.logo {
    max-width: 235px;
    height: auto;
}
.new-footer .footer-menu-item {
    margin: 14px 0;
}
.new-footer .footer-menu-item a, .new-footer .footer-col p, .new-footer .equipment-sales {
    font-size: 16px;
    color: #54575F;
    display: block;
    padding: 0;
    transition: 0.3s all;
    font-weight: 500;
    cursor: pointer;
    line-height: 24px;
}
.new-footer .reuzeit-details p,.new-footer .reuzeit-details .pn-with-icon,.new-footer .reuzeit-details .btn-wrapper {
    margin-top: 32px;
}
.new-footer .phone-number {
    font-size: 24px;
    font-weight: 400;
    color: #000;
    display: inline-block;
}
.new-footer .reuzeit-details .btn {
    margin-top: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    height: 50px;
    line-height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--primary);
}
.new-footer .reuzeit-details {
    padding-right: 30px;
}
.new-footer .reuzeit-details .btn.secondary {
    background: transparent;
    color: #17181A;
}
.new-footer .reuzeit-details .btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}
.new-footer .social-media>a {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #CDCFD4;
    border-radius: 17px;
    transition: 0.3s all;
    padding: 5px;
}
.new-footer .footer-info {
    display: flex;
    flex-direction: row-reverse;
    gap: 10%;
    align-items: flex-start;
}
.new-footer .footer-info .reuzeit-locations {
    width: 70%;
    margin: 0;
}
.new-footer .footer-info .social-media {
    width: 30%;
    margin: 0;
}
.new-footer .footer-bottom {
    border-radius: 24px 24px 0 0;
    background: #fff;
    padding: 60px 60px 30px;
    box-shadow: 0 10px 50px 0 rgba(61,66,69,.18);
}
.new-footer .reuzeit-locations-main .col {
    width: calc(33.33% - 14px);
}
.reuzeit-locations-main {
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 32px;
}
.footer-info .footer-col-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #17181A;
    line-height: 32px;
}
.new-footer .reuzeit-locations .location {
    font-weight: 700;
}
.new-footer .reuzeit-locations .address {
    margin: 10px 0;
    max-width: 260px;
    font-weight: 400;
}
.new-footer .address-wrapper .phone-number {
    font-size: 20px;
    color: #1A1A1A;
}
.footer-copyright {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
    align-items: flex-end;
}
.footer-copyright .col {
    font-weight: 500;
    line-height: 20px;
}
.new-footer .social-media>a:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
}
.new-footer .footer-menu-item a:hover, .new-footer .address-wrapper .phone-number:hover, .new-footer .footer-menu-item span:hover {
    color: var(--primary);
}
.btn-secondary {
    transition: 0.3s all;
}
.btn-secondary:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.header-main-wrapper {
    display: flex;
    align-items: center;
    padding: 8px 8px 8px 30px;
    box-shadow: 0 10px 50px 0 rgba(61, 66, 69, .18);
    border-radius: 0 0 24px 24px;
    position: relative;
    background-color: #fff;
}
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 405px;
    gap: 16px;
}
.header-left {
    width: calc(100% - 405px);
    display: flex;
    align-items: center;
}
.header-user {
    display: flex;
    align-items: center;
    background-color: #F3F3F3;
    border-radius: 18px;
}
.navigation {
    width: calc(100% - 693px);
}
.custom-header_mobile {
    display: none;
}
.new-footer .reuzeit-details .btn:hover svg path {
    stroke: var(--primary);
}
.go-cart-arrow polygon {
    fill: #CDCFD4;
}
.pro-card-btn.btn.go-to-cart {
    border: 2px solid var(--primary-light);
    background: transparent;
}
.pro-card-products-box:hover .pro-card-btn.btn.go-to-cart {
    border: 2px solid var(--primary);
}
.pro-card-products-box:hover .go-cart-arrow polygon {
    fill: #fff;
}
.pro-card-btn.btn.go-to-cart .icon {
    width: 21px;
    height: 21px;
}
.disable_btn {
    margin-top: 5px;
    padding: 10px;
    background-color: #F3F3F3;
    color: var(--primary);
    border: 0;
    display: flex;
    justify-content: center;
    transition: 0.3s all;
    outline: 0;
    text-align: center;
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    height: 50px;
    line-height: 50px;
    cursor: not-allowed;
}
.pro-card-btn.disable_btn, .cart-btn.disable_btn {
    cursor: not-allowed;
    color: #CDCFD4 !important;
    background-color: #F3F3F3 !important;
}
.pro-card-btn.disable_btn svg path, .cart-btn.disable_btn svg path {
    stroke: #CDCFD4 !important;
}
.pro-card-btn.disable_btn span, .cart-btn.disable_btn span {
    color: #CDCFD4 !important;
}
.new-footer .reuzeit-details p {
    margin-bottom: 0;
}
.btn.small-btn {
    font-size: 16px;
    height: 44px;
    padding: 0 20px;
}
.page-toast-msg {
    max-width: 1900px;
    margin-inline: auto;
    padding: 0 30px;
    position: sticky;
    top: 88px;
    z-index: 9999;
}
.page-toast-msg .toast-msg {
    border-radius: 14px !important;
    margin: 16px 0 0 !important;
}
.popup-overlay {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #17181a96;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-timing-function: cubic-bezier(.22,.61,.36,1);
    transition-duration: inherit;
    transition-property: opacity;
    z-index: 99994;
}
.popup {
    background-color: #fff;
    padding: 20px;
    width: 90%;
    max-width: 650px;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    position: relative;
    text-align: center;
    border-radius: 24px;
}
.popup-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: left;
    line-height: 28px;
    width: calc(100% - 40px);
}
.popup .close-icon {
    display: block;
    overflow: visible;
    position: absolute;
    top: 15px;
    right: 15px;
    height: 38px;
    width: 38px;
    padding: 0;
    border: 0;
    background-color: #F3F3F3;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s all;
}
.popup .close-icon svg {
    display: block;
    height: 26px;
    overflow: visible;
    position: relative;
    width: 26px;
}
.popup .close-icon svg path {
    fill: #878D99;
}
.popup .close-icon:hover {
    background-color: #e4e4e4;
}
.help-block:empty {
    padding: 0;
}
.popup input,.popup select,.popup textarea {
    border-radius: 12px;
    outline: 0;
    font-size: 16px;
    border: 1px solid #CED5D9;
    padding: 10px 15px;
    height: 44px;
    font-weight: 400;
}
.popup textarea {
    height: 100px;
}
.btn.secondary {
    background-color: var(--primary-light);
    border: 1px solid var(--primary-light);
    color: var(--green);
}
.border-box {
    border: 1px solid #F3F3F3;
    border-radius: 32px;
    padding: 22px;
}
.border-box .title {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}
/**/
.text-icon-badge .icon {
    width: 24px;
    height: 24px;
    background-image: url(/assets/img/verified-icon.svg);
    font-size: 14px;
    background-size: 24px;
    background-repeat: no-repeat;
}
.text-icon-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 6px;
    border-radius: 6px;
    background-color: #4CB759;
}
.text-icon-badge label, .text-icon-badge span {
    font-size: 16px !important;
    font-weight: 400;
    line-height: 24px;
}
.text-icon-badge * {
    color: #fff;
}
/* Condition class colour scale — single source of truth for every condition
   badge in the UI (shop, product, my-equipment, my-equipment-item, filters).
   Green (best) -> Red (worst) heat scale, one colour per exact class, no
   grouping. Both slug forms are covered: the class-derived slug (e.g.
   "p-poor" from "P (Poor)") and the label-derived slug (e.g. "poor" from
   "Poor"). */
.text-icon-badge.n-new, .text-icon-badge.new {            /* New        — Dark Green   */
    background-color: #1B7E34;
}
.text-icon-badge.tk-turnkey, .text-icon-badge.turnkey {   /* Turnkey    — Green        */
    background-color: #34A853;
}
.text-icon-badge.e-excellent, .text-icon-badge.excellent {/* Excellent  — Light Green  */
    background-color: #66BB6A;
}
.text-icon-badge.vg-very-good, .text-icon-badge.very-good {/* Very Good  — Lime Green   */
    background-color: #9CCC3C;
}
.text-icon-badge.g-good, .text-icon-badge.good {          /* Good       — Yellow       */
    background-color: #E0B400;
}
.text-icon-badge.f-fair, .text-icon-badge.fair {          /* Fair       — Gold         */
    background-color: #C8901E;
}
.text-icon-badge.as-is, .text-icon-badge.a-as-is {        /* AS-IS      — Orange       */
    background-color: #F2872E;
}
.text-icon-badge.p-poor, .text-icon-badge.poor {          /* Poor       — Dark Orange  */
    background-color: #E2620E;
}
.text-icon-badge.s-salvage, .text-icon-badge.salvage {    /* Salvage    — Red          */
    background-color: #D63A3A;
}
.text-icon-badge.x-scrap, .text-icon-badge.scrap {        /* Scrap      — Dark Red     */
    background-color: #9E2222;
}
.text-icon-badge.no-class {                               /* No Class   — Gray         */
    background-color: #ADB5BD;
}
/* Small colour dot used in the "Product Condition" help popup — reuses the
   per-class background colour above, just reshaped to a fixed circle. */
.text-icon-badge.condition-popup-dot {
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    border-radius: 50%;
}

.text-icon-badge.n-new .icon, .text-icon-badge.new .icon {
    background-image: url(/assets/img/verified-icon.svg);
}
.text-icon-badge.tk-turnkey .icon, .text-icon-badge.turnkey .icon {
    background-image: url(/assets/img/key-icon.svg);
}
.text-icon-badge.e-excellent .icon, .text-icon-badge.excellent .icon {
    background-image: url(/assets/img/trophy-icon.svg);
}
.text-icon-badge.vg-very-good .icon, .text-icon-badge.very-good .icon {
    background-image: url(/assets/img/verified-icon.svg);
}
.text-icon-badge.g-good .icon, .text-icon-badge.good .icon {
    background-image: url(/assets/img/package-check-box.svg);
}
.text-icon-badge.f-fair .icon, .text-icon-badge.fair .icon {
    background-image: url(/assets/img/smilley-icon.svg);
}
.text-icon-badge.as-is .icon, .text-icon-badge.a-as-is .icon,
.text-icon-badge.p-poor .icon, .text-icon-badge.poor .icon,
.text-icon-badge.s-salvage .icon, .text-icon-badge.salvage .icon,
.text-icon-badge.x-scrap .icon, .text-icon-badge.scrap .icon {
    background-image: url(/assets/img/trash-icon.svg);
}
.icon-with-text {
    display: flex;
    align-items: center;
    gap: 16px;
}
.icon-with-text .icon {
    width: 40px;
    height: 40px;
    background-color: #F3F3F3;
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-with-text .subtext {
    font-size: 12px;
    line-height: 16px;
    color: #454B54;
}
.text-wrapper .text {
    font-size: 16px;
    line-height: 24px;
}
/* Skeleton Loader */
@keyframes shimmer {
    0% {
        background-position: -600px 0;
    }
    100% {
        background-position: 600px 0;
    }
}
@keyframes shimmer-vertical {
    0% {
        background-position: 0 -600px;
    }
    100% {
        background-position: 0 600px;
    }
}

.skeleton-card {
    width: 300px;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.skeleton-img,
.skeleton-title,
.skeleton-subtitle,
.skeleton-price,
.skeleton-old-price,
.skeleton-discount,
.skeleton-button,
.skeleton-badge,
.skeleton-checkbox,
.skeleton-label-text, 
.skeleton-text-badge,
.skeleton-filter-text-badge,
.skeleton-count,
.skeleton-block {
    border-radius: 8px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 6s infinite linear;
}
.skeleton-bar {
    background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 60s infinite linear;
}
.skeleton-badge {
    width: 120px;
    height: 32px;
    border-radius: 20px;
    align-self: flex-start;
    margin-bottom: 8px;
}
.skeleton-img {
    width: 100%;
    margin-bottom: 8px;
    padding-bottom: 82%;
}
.skeleton-title {
    height: 24px;
    width: 90%;
    margin-bottom: 8px;
}
.skeleton-subtitle {
    height: 53px;
    width: 80%;
    margin-bottom: 8px;
}
.skeleton-price-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.skeleton-price {
    width: 33.33%;
    height: 24px;
}
.skeleton-old-price {
    width: 33.33%;
    height: 24px;
}
.skeleton-discount {
    width: 33.33%;
    height: 24px;
    border-radius: 10px;
}
.skeleton-button {
    height: 50px;
    width: 100%;
    border-radius: 12px;
    margin-top: 8px;
}

.skeleton-checkbox,
.skeleton-label-text, .skeleton-text-badge {
    border-radius: 6px;
}
.skeleton-checkbox {
    width: 24px;
    height: 24px;
    animation: shimmer 40s infinite linear;
    margin-right: 8px;
}
.skeleton-label-text {
    width: 160px;
    height: 24px;
}
.product-warranty .skeleton-label-text {
    width: calc(94% - 32px);
}
.skeleton-text-badge {
    width: 100px;
    height: 30px;
    animation: shimmer 12s infinite linear;
}
.skeleton-filter-text-badge {
    width: 115px;
    height: 32px;
    border-radius: 32px;
    animation: shimmer 12s infinite linear;
}
.skeleton-count {
    border-radius: 4px;
    width: 150px;
    height: 24px;
}
/* End Skeleton Loader */
.menu-item a.shop-menu {
    background-color: var(--primary);
    border-radius: 12px;
    color: #fff;
    font-weight: 400;
    padding: 13px 15px;
    display: inline-flex;
    gap: 6px;
    height: 50px;
    font-weight: 600;
    align-items: center;
}
.menu-item a.shop-menu:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}
.menu-item a.shop-menu:hover svg path {
    fill: var(--primary);
}
.header-search-wrapper {
    display: flex;
    gap: 8px;
    margin-left: 24px;
    margin-right: 16px;
    width: 496px;
}
input[type=checkbox] {
    position: relative;
    border: 1px solid var(--primary-border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 8px 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 24px;
    width: 24px;
    -webkit-appearance: none;
    background-color: var(--primary-light);
}
input[type=checkbox]:before {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 4px;
    height: 8px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}
input[type=checkbox]:checked {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    opacity: 1;
}
.text-wrapper {
    width: calc(100% - 56px);
}
.breadcumbs li {
    line-height: 20px;
    display: flex;
}
.breadcumb-icon {
    margin-right: 6px;
}
.breadcumbs li:last-child a {
    color: #878D99; 
}

.switch {
    display: inline-grid;
    position: relative;
    width: 44px;
    height: 30px;
    border-radius: 20px;
    transition: background 0.28s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    font-size: 14px;
    line-height: 28px;
    color: #6d90a9;
    font-weight: 600;
    padding: 0 8px;
    text-align: right;
    align-items: center;
    border: 1px solid #898F99;
    vertical-align: bottom;
}
.switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: #898F99;
    border-radius: 50%;
    transition: left 0.28s cubic-bezier(.4,0,.2,1),background 0.28s cubic-bezier(.4,0,.2,1),box-shadow 0.28s cubic-bezier(.4,0,.2,1);
}
.switch:active::before {
    box-shadow: 0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(128,128,128,.1)
}
input:checked+.switch {
    text-align: left;
    border: 1px solid var(--primary);
}
input:checked+.switch::before {
    left: 16px;
    background: var(--primary);
}
input:checked+.switch:active::before {
    box-shadow: 0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(0,150,136,.2)
}
header.header .container {
    max-width: 1900px;
}
/*whishlist*/
.wishlist-block-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 60px;
    background-color: #F3F3F3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.wishlist-block-wrapper input {
    position: absolute;
    opacity: 0 !important;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    margin: 0;
}
.wishlist-block-wrapper .whishlist-icon {
    display: inline-block;
}
.wishlist-block-wrapper .whishlist-icon svg {
    vertical-align: bottom;
    width: 22px;
    height: 22px;
    transition: 0.3s all ease;
}
.wishlist-block-wrapper input[type="checkbox"]:checked+.whishlist-icon svg {
    fill: #F56262;
}
.wishlist-block-wrapper input[type="checkbox"]:checked+.whishlist-icon svg path {
    stroke: #F56262;
}
.catagory-tags-block {
    background-image: url(/assets/img/microscope-icon.svg);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: left 0;
    font-size: 16px;
    line-height: 18px;
    color: #454B54;
    padding-left: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    margin: 8px 0;
    opacity: 0.6;
}
.new-popup {
    display: none;
}
.new-popup.show {
    display: block;
}
.new-popup {
    position: absolute;
    background-color: #fff;
    padding: 18px;
    width: 340px;
    border-radius: 12px;
    z-index: 999;
    box-shadow: 0 10px 50px 0 rgba(61, 66, 69,.18);
    top: 36px;
    left: -16px;
}
.new-popup-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #454B54;
}
.new-popup-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.new-popup svg {
    vertical-align: bottom;
    width: 24px;
    height: 24px;
}
.new-popup .close {
    cursor: pointer;
    display: inline-flex;
}
.new-popup-content p, .new-popup-content ul li {
    font-size: 16px;
    line-height: 24px;
    color: #454B54;
}
.new-popup-content p {
    margin-top: 0;
    margin-bottom: 10px;
}
.new-popup-content strong {
    font-weight: 700;
}
.new-popup-content ul {
    list-style: disc;
    padding-left: 22px;
    margin: 10px 0;
}
.new-popup-content ol {
    list-style: auto;
    padding-left: 18px;
}
.new-popup-content ol li::marker {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}
.polygon-shape {
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 0 10px 50px 0 rgba(61, 66, 69,.18);
    position: absolute;
    top: -8px;
    left: 18px;
}
.slider-arrows {
    pointer-events: none;
}
.slider-arrows span {
    pointer-events: painted;
}
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    vertical-align: middle;
    margin-bottom: 5px;
    position: relative;
    cursor: pointer;
    outline: 0;
    overflow: hidden;
    border: 2px solid var(--primary);
    background-color: var(--primary-light);
    margin: 0;
}
input[type="radio"]:after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transition: all .1s;
    border: 8px solid var(--primary);
    transform: translate3d(-50%, -50%, 0) scale(0, 0);
}
input[type="radio"]:checked:after {
    transform: translate3d(-50%, -50%, 0) scale(1, 1);
}
.basic-search {
    position: relative;
    display: flex;
}
.basic-search input {
    outline: 0;
}
.basic-search button {
    padding: 0;
    background: transparent;
    border: 0;
    width: 50px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -50px;
    cursor: pointer;
}

.custom-file-upload {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 15px;
    border: 1px dashed var(--primary-border);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s all;
}
/* .custom-file-upload:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
} */
.file-text {
    font-weight: 500;
    color: #17181A;
    display: flex;
    align-items: center;
    width: 184px;
    gap: 15px;
}
/* .custom-file-upload:hover .file-text .cloud-upload {
 background-color: #fff;
} */
.file-text i {
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-image: url(/assets/img/camera-plus.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--primary-light);
}
.file-text p {
    margin: 0;
    line-height: 20px;
    text-align: left;
    width: calc(100% - 72px);
}
.file-selected .file-text {
    width: auto;
    max-width: 100%;
}
.file-selected .file-text p {
    word-wrap: break-word;
}
#file-upload {
    display: none;
}
.overlay-loader-main {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(23, 24, 26, 0.9);
    display: none;
}
.overlay-loader-main.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.overlay-loader-main .overlay-text{
    color: #e0e0e0;
    font-size: 18px;
}
.overlay-loader {
    width: 160px;
    height: 160px;
    background-image: url(../img/reuzeit-spiner-speed-2.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 160px;
    z-index: 9;
    overflow: hidden;
}
.overlay-loader.reseller-loader {
    background-image: none;
    width: 56px;
    height: 56px;
    border: 5px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: reseller-spin 0.8s linear infinite;
}
@keyframes reseller-spin {
    to { transform: rotate(360deg); }
}
.form-group input[disabled], .form-group textarea[disabled], .form-group select[disabled] {
    background-color: #fff;
    color: #878D99;
    cursor: not-allowed;
    outline: 0;
    opacity: 0.8;
}
.form-group input[disabled]+label, .form-group select[disabled]+label {
    color: #878D99;
    opacity: 0.7;
}
.form-group input[disabled] ~ .custom-icon.date {
    cursor: not-allowed;
}
.select:has(select[disabled]):after {
    opacity: 0.4;
}
/*popup start*/
.popup-main {
    display: none;
    opacity: 0;
    visibility: hidden;
}
.popup-main.active {
    display: block;
    opacity: 1;
    visibility: visible;
}
.popup-wrapper {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #17181a96;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-timing-function: cubic-bezier(.22,.61,.36,1);
    transition-duration: inherit;
    transition-property: opacity;
    z-index: 9999;
}
.popup-inner {
    background-color: #fff;
    width: 90%;
    max-width: 710px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    position: relative;
    border-radius: 24px;
    max-height: 90vh;
}
/* Popups with an internal scroll area: pin head/img/footer, scroll only the form */
.popup-inner:has(.popup-scroll) {
    display: flex;
    flex-direction: column;
}
.popup-inner:has(.popup-scroll) > .popup-head,
.popup-inner:has(.popup-scroll) > .popup-img,
.popup-inner:has(.popup-scroll) > .popup-footer,
.popup-inner:has(.popup-scroll) > .action-buttons {
    flex: 0 0 auto;
}
/* Popups without an internal scroll area: whole inner scrolls when content exceeds viewport */
.popup-inner:not(:has(.popup-scroll)) {
    overflow-y: auto;
}
/* Scroll area */
.popup-scroll {
    padding: 0 20px 20px;
    overflow-y: auto;
    max-height: calc(100vh - 90px);
}
/* Inside a flex popup-inner the scroll area takes the remaining space */
.popup-inner:has(.popup-scroll) > .popup-scroll,
.popup-inner:has(.popup-scroll) .popup-content.popup-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* Clean modern scrollbar */
.popup-scroll::-webkit-scrollbar {
    width: 6px;
}

.popup-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.popup-scroll::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 10px;
}

.popup-scroll::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
.close-btn {
    height: 40px;
    width: 40px;
    padding: 0;
    border: 0;
    background-color: #F3F3F3;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s all;
}
.row.fieldset {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.row.fieldset .col.w-50 {
    width: 50%;
}
.row.fieldset input::placeholder {
    color: #454B54;
}
.row.fieldset input::placeholder {
  color: #454B54;
}
.row.fieldset input::-ms-input-placeholder {
  color: #454B54;
}
.popup-main .row.fieldset .col-6 {
    width: calc(50% - 10px);
}
.popup-main .row.fieldset .col {
    width: 100%;
}
.popup-main .popup-title {
    margin-bottom: 0;
    font-weight: 500;
    color: #454B54;
    font-size: 32px;
    line-height: 40px;
}
.popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 16px 24px;
}
.popup-content {
    padding: 0 24px 24px;
}
.close-btn:hover {
    background-color: var(--primary);
}
.close-btn:hover svg path {
    stroke: #fff;
}
/*end popup*/

/*Fancy Input*/
.fancy-input {
    position: relative;
}
.fancy-input input,
.fancy-input select {
    width: 100%;
    padding: 20px 16px 6px 16px;
    font-size: 16px;
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    outline: none;
    height: 56px;
    color: #17181a;
    box-sizing: border-box;
    font-weight: 500;
}
.fancy-input input:disabled+label {
    opacity: .6;
    color: #808080;
}
.fancy-input input:disabled {
    color: #b5b4b4;
}
.fancy-input select {
    appearance: none;
    -webkit-appearance: none;
}
.fancy-input label {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    padding: 0 4px;
    color: #454b54;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s ease all;
    background-color: transparent;
    text-align: left;
    line-height: 1.2;
}
body .fancy-input input:focus + label,
.fancy-input input:not(:placeholder-shown) + label,
.fancy-input input:-webkit-autofill + label,
body .fancy-input input:focus + label,
.fancy-input input:not(:placeholder-shown) + label,
.fancy-input input:-webkit-autofill + label,
.fancy-input select:not([value=""]) + label {
    top: 16px;
    font-size: 12px;
    color: #878d99;
}
.fancy-input input:placeholder-shown + label,
.fancy-input select + label {
    top: 50%;
    font-size: 16px;
    transform: translateY(-50%);
}
.fancy-input textarea {
    width: 100%;
    padding: 22px 16px 10px;
    font-size: 16px;
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    outline: none;
    min-height: 100px;
    color: #17181a;
    box-sizing: border-box;
    font-weight: 500;
    resize: vertical;
    display: block;
    font-family: inherit;
    line-height: 1.4;
}
.fancy-input:has(textarea) label {
    top: 18px;
    transform: none;
}
body .fancy-input textarea:focus + label,
.fancy-input textarea:not(:placeholder-shown) + label {
    top: 8px;
    font-size: 12px;
    color: #878d99;
    transform: none;
}
.custom-icon.date {
    position: absolute;
    content: '';
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(/assets/img/calendar.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
/* Make the WHOLE field open the native picker, with the visible affordance
   supplied by the sibling `.custom-icon.date` graphic instead of the browser's
   own button. SCOPED TO `.fancy-input` ON PURPOSE (2026-09-03): unscoped, this
   hit every `input[type="date"]` on the site — 12 fields that have no
   `.custom-icon.date` beside them and no positioned wrapper, so they lost their
   calendar button entirely and every click anywhere in the box re-opened the
   picker instead of placing a caret. The Expense Log "Ordered at" field on the
   item page's Work Log tab (and its twin on /quality-inspections/<id>) read as
   a frozen field because of it. `.fancy-input` is position:relative, which is
   also what makes the absolute positioning below resolve against the field. */
.fancy-input input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
}
/*End Fancy Input*/

/*login & registration popup*/
.login-popup .popup-title strong, .login-popup .popup-title strong span {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
}
.login-popup .popup-title strong span {
    color: var(--primary);
}
.login-popup .sign-btn, .login-popup .sign-btn-over {
    background-color: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary-light);
    font-size: 16px;
    line-height: 24px;
    width: 100%;
    justify-content: center;
    padding: 6px 10px;
    margin-top: 26px;
    height: 50px;
}
.login-popup .sign-btn:hover, .login-popup .sign-btn-over:hover  {
    background-color: var(--primary);
    color: #fff;
}
.login-popup .sign-btn-over {
    margin-top: 8px;
}
.fancy-input-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
}
svg {
    vertical-align: bottom;
}
.password-input .icon {
    display: none;
    cursor: pointer;
}
.password-input .icon.show {
    display: flex;
}
.login-popup .row.fieldset {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.forgot-password, .create-account-link, .use-password-link {
    cursor: pointer;
    font-size: 14px;
    line-height: 16px;
    display: inline-block;
    position: relative;
    margin-top: 8px;
    transition: 0.3s all;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--primary-border);
}
.use-password-link, .forgot-password, .create-account-link, .create-account-link strong {
    color: #454B54;
    transition: 0.3s all;
}
.use-password-link:hover, .forgot-password:hover, .create-account-link:hover, .create-account-link:hover strong {
    color: var(--primary);
}
.login-popup .action-link {
    text-align: center;
    margin-top: 24px;
}
.login-popup .action-link .create-account-link {
    margin-top: 0;
}
.create-account-link strong {
    font-weight: 700;
}
.login-popup .popup-head {
    padding: 24px;
}
.login-popup .popup-inner {
    max-width: 460px;
}
.popup-main.login-popup {
    all: unset;
}
.email-input input {
    padding-right: 42px;
}
.login-popup.registration-popup .popup-title, .login-popup.registration-popup .popup-title strong, .login-popup.registration-popup .popup-title strong span {
    font-size: 24px;
    line-height: 32px;
}
.registration-popup .terms-and-policy {
    margin-top: 8px;
    margin-bottom: 0;
}
.registration-popup .terms-and-policy, .registration-popup .terms-and-policy a {
    font-size: 12px;
    line-height: 16px;
    color: #454B54;
}
.registration-popup .terms-and-policy a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--primary);
}
.login-popup.registration-popup .sign-btn {
    margin-top: 24px;
}
.registration-popup .terms-and-policy {
    text-align: center;
}
.email-varified-popup.popup-main .popup-title, .email-varified-popup .popup-title strong, .email-varified-popup .popup-title strong span {
    font-size: 24px;
    line-height: 32px;
}
.login-popup .checkbox-wrapper {
    display: flex;
    width: 100%;
    gap: 8px;
    margin-top: 8px;
    text-align: left;
}
.login-popup .checkbox-wrapper input {
    margin: 0;
}
.login-popup .checkbox-wrapper p {
    width: calc(100% - 32px);
    margin: 0;
}
.login-popup.email-varified-popup .popup-inner {
    max-height: 98vh;
    padding-bottom: 24px;
}
.login-popup.email-varified-popup .popup-content {
    max-height: calc(98vh - 112px);
    padding-bottom: 0;
}
.login-popup.email-varified-popup .sign-btn {
    margin-top: 24px;
}
.row.fieldset.billing-address+.checkbox-wrapper {
    margin-top: 16px;
}
.row.fieldset.billing-address, .row.fieldset+.row.fieldset {
    margin-top: 16px;
}
.checkbox-wrapper.terms-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 0;
    text-align: left;
}
.checkbox-wrapper.terms-checkbox input[type="checkbox"] {
    margin: 2px 0 0 0;
    flex-shrink: 0;
}
.checkbox-wrapper.terms-checkbox p,
.checkbox-wrapper.terms-checkbox p a {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: #454B54;
}
.checkbox-wrapper.terms-checkbox p a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--primary);
}
.checkbox-wrapper.terms-checkbox .help-block {
    flex-basis: 100%;
    text-align: center;
}
.checkbox-wrapper.terms-checkbox.is-invalid input[type="checkbox"] {
    outline: 2px solid red;
    outline-offset: 2px;
}
.login-popup.popup-main .row.fieldset .col-6 {
    width: calc(50% - 4px);
}
/* .login-popup.email-varified-popup .popup-inner {
    max-width: 800px;
} */
/*end login & registration popup*/

/*chat box*/
.chat-box {
    position: sticky;
    top: 100px;
}
.chat-box-inner {
    width: 360px;
    border-radius: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-header {
    background: linear-gradient(90deg, var(--primary), var(--primary-gradient));
    color: white;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* "Clear chat" row under the search input — pinned with the input area so it's
   always visible (doesn't scroll away with the conversation). */
.chat-clear-row {
    display: flex;
    justify-content: center;
    padding: 8px 0 2px;
}
.clear-chat-btn {
    background: transparent;
    border: 1px solid #d0d5dd;
    color: #475467;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.clear-chat-btn:hover {
    background: #f2f4f7;
    border-color: #98a2b3;
}
/* Barcode (= item code) shown on each product tile so users can reference it in
   the AI chat ("ship 3375417 to 90210", "where is 3375417"). */
.product-barcode {
    font-size: 11px;
    color: #98a2b3;
    margin: 2px 0 4px;
    letter-spacing: 0.2px;
}
.close-chat-box {
    display: none;
    cursor: pointer;
}
.chat-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
}
.chat-tabs .chat-tab {
    border: none;
    background: #ffffff;
    color: #878D99;
    padding: 8px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: 0.3s all;
    box-shadow: 0 4px 12px 0 rgba(61, 66, 69, 0.1);
    cursor: pointer;
}
.chat-tabs .chat-tab span {
    color: #878D99;
    font-size: 16px;
    line-height: 20px;
    width: calc(100% - 20px);
    font-weight: 400;
}
.chat-tabs .chat-tab.active span, .chat-tabs .chat-tab:hover span {
    color: var(--primary);
}
.chat-tabs .chat-tab.active svg path, .chat-tabs .chat-tab:hover svg path {
    fill: var(--primary);
}
.chat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 12px;
    height: calc(100vh - 356px);
    overflow: auto;
    max-height: 590px;
    scroll-behavior: smooth;
}
.chat-content::-webkit-scrollbar-track {
    background-color: transparent;
    width: 4px;
}
.chat-content::-webkit-scrollbar {
    width: 4px;
}
.chat-content::-webkit-scrollbar-thumb {
    -webkit-border-radius: 24px;
    border-radius: 24px;
    background: #CDCFD4;
}
.chat-input-area {
    padding: 5px 1px;
}
.chat-input-area input {
    padding: 5px 0 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 20px;
    outline: none;
    border: 0;
    width: calc(100% - 64px);
}
.chat-input-area input::placeholder {
    color: #878D99;
}
.chat-input-area input::-ms-input-placeholder { 
    color: #878D99;
}
.chat-input-area .btn {
    background: var(--primary-light);
    border: none;
    width: 56px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border-radius: 12px;
}
.chat-input-area .btn svg path {
    fill: var(--primary);
}
.chat-input-area .btn:hover {
    background-color: var(--primary);
}
.chat-input-area .btn:hover svg path {
    fill: #fff;
}
.tab-content {
    display: none;
    width: 100%;
}
.chat-header h4.title,.chat-header .title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-input {
    background: #fff;
    border-radius: 12px;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.chat-header h4.title {
    font-size: 16px;
    line-height: 26px;
    margin: 0;
    color: #fff;
    font-weight: 700;
}
.chat-body {
    background-color: #F3F3F3;
    padding: 0 4px;
}
.no-chat-img {
    width: 220px;
    height: 220px;
    display: block;
    margin-inline: auto;
    background-image: url(/assets/img/chat-icon.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.no-chat {
    max-width: 220px;
    margin-inline: auto;
    margin-top: 60px;
}
.no-chat.hide {
    display: none;
}
.no-chat p {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    color: #878D99;
    max-width: 150px;
    margin-inline: auto;
    margin-top: 8px;
    text-align: center;
}
.no-chat:has(+.tab-content+.tab-content.active) p {
    max-width: initial;
}
.tab-content.active {
    display: block;
}

.chat-message {
    display: flex;
    gap: 8px;
}
.user .name, .bot .name {
    font-weight: 700;
    color: #17181A;
    font-size: 14px;
    line-height: 16px;
}
.bot {
    background: #fff;
    padding: 8px;
    border-radius: 16px;
}
.timestamp {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: #878D99;
    margin-top: 8px;
}
.chat-card {
    background: white;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
    margin-top: 6px;
    align-items: center;
}
.chat-card img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
}
.chat-card .count {
    background: #9be69b;
    border-radius: 50%;
    padding: 10px;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.feedback-icons {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    justify-content: flex-end;
    padding-right: 20px;
}
.result-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin: 8px 0;
}
.result-item {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background-color: #f2f2f2;
    overflow: hidden;
}
.result-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.result-item-more {
    padding: 6px;
}
.result-item-more .number {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-border);
    border-radius: 40px;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: #17181A;
    cursor: pointer;
}
.chat-box .message-icon {
    width: 32px;
    height: 32px;
    border-radius: 80px;
    background-color: #F27830;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF1E9;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
}
.chat-message-inner {
    width: calc(100% - 40px);
    padding-top: 8px;
}
.chat-message-inner a {
    word-break: break-all;
}
.bubble, .bubble span {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin-top: 4px;
}
.chat-box .bot .message-icon {
    background-color: #F3F3F3;
    color: var(--primary);
}
.chat-box .bot .message-icon svg path:first-child {
    fill: #2AA466 !important;
}
.chat-message.user {
    margin-bottom: 8px;
}
.chat-block {
    margin-bottom: 24px;
}
.chat-block:last-child {
    margin: 0;
}
.chat-box.active {
    display: flex;
}

.chat-box-btn, .chat-box-wrapper > .close-chat-box, .help-box-btn {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--primary), var(--primary-gradient));
    border-radius: 60px;
    cursor: pointer;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99;
}
.help-box-btn {
    right: auto;
    left: 20px;
    text-decoration: none;
}
.chat-box-btn .total-chat {
    background-color: #F27830;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: #fff;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    border: 2px solid #fff;
    position: absolute;
    top: -2px;
    right: -2px;
}
.dot-loading {
    align-items: center;
    display: none;
    height: 100%;
    width: 100%;
    gap: 10px;
}
.chat-loader .dot-loading  {
    display: flex;
}
.loading__dot {
    animation: dot ease-in-out 1s infinite;
    background-color: #F3F3F3;
    display: inline-block;
    height: 6px;
    margin: 10px;
    width: 6px;
    margin: 0;
    border-radius: 10px;
}
.loading__dot:nth-of-type(2) {
  animation-delay: 0.2s;
}
.loading__dot:nth-of-type(3) {
  animation-delay: 0.3s;
}
@keyframes dot {
  0% { background-color: #F3F3F3; transform: scale(1); }
  50% { background-color: var(--primary); transform: scale(1.3); }
  100% { background-color: #F3F3F3; transform: scale(1); }
}

/* .chat-box-btn {
    display: none;
} */

@media only screen and (min-width: 1024px)  {
    .chat-box-wrapper {
        position: fixed;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        padding: 20px;
        z-index: 99;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: end;
        justify-content: end;
    }
    .chat-box-wrapper:has(.chat-box.active) {
        height: 750px;
        width: 400px;
    }
    .chat-box-wrapper .chat-box {
        position: initial;
        top: initial;
        width: max-content;
        height: calc(100% - 100px);
        display: none;
    }
    .chat-box-wrapper .chat-box.active {
        display: block;
    }
    .chat-box-wrapper .chat-box-btn, .chat-box-wrapper > .close-chat-box {
        position: relative;
        right: initial;
        bottom: initial;
        z-index: initial;
    }
    .chat-box-wrapper .chat-content {
        height: calc(100% - 112px);
        min-height: 350px;
    }
    .chat-box-wrapper .chat-box-inner {
        height: 100%;
        box-shadow: 0 10px 50px 0 rgb(75 80 75 / 25%);
    }
    .chat-box-wrapper .chat-body {
        height: calc(100% - 56px);
    }
    .chat-box-wrapper .no-chat-img {
        width: 180px;
        height: 180px;
    }  
    .chat-box-wrapper .chat-box.active ~ .chat-box-btn, .chat-box-wrapper .chat-box ~ .close-chat-box {
        display: none;
    }
    .chat-box-wrapper .chat-box.active ~ .close-chat-box {
        display: flex;
    }
}
/*end chat box*/
.pro-card-filter select {
    color: #1A1A1A;
}

/*iti number*/
.phone-number-with-flag .iti {
    width: 100%;
}
.fancy-input.phone-number-with-flag label {
    left: 104px;
    top: 16px;
    font-size: 12px;
    color: #878d99;
}
.phone-number-with-flag .iti__selected-flag {
    padding: 0 6px 0 16px;
    width: 100px;
    background-color: transparent;
}
.phone-number-with-flag .iti__selected-flag .iti__arrow {
    margin-left: auto;
}
.phone-number-with-flag .iti--allow-dropdown input, 
.phone-number-with-flag .iti--allow-dropdown input[type=tel], 
.phone-number-with-flag .iti--allow-dropdown input[type=text], 
.phone-number-with-flag .iti--separate-dial-code input, 
.phone-number-with-flag .iti--separate-dial-code input[type=tel], 
.phone-number-with-flag .iti--separate-dial-code input[type=text] {
    padding-right: 10px;
    padding-left: 106px !important;
}
.phone-number-with-flag .iti--allow-dropdown input::placeholder {
  color: #878d99;
}
.phone-number-with-flag .iti--allow-dropdown input::-ms-input-placeholder {
  color: #878d99;
}
.phone-number-with-flag .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: transparent;
}
.phone-number-with-flag .iti__country-list {
    border-radius: 12px;
    border-color: #CDCFD4;
    box-shadow: 0 10px 50px 0 rgba(61, 66, 69,.18);
    margin-top: 5px;
    max-width: 448px;
}
.phone-number-with-flag .iti__country-list::-webkit-scrollbar {
    height: 6px;
}
.phone-number-with-flag .iti__country-list::-webkit-scrollbar-track {
    background-color: #ebebeb;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.phone-number-with-flag .iti__country-list::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 12px;
    background: var(--primary);
}

.phone-number-with-flag .iti__country {
    padding: 5px 16px;
}
.phone-number-with-flag .iti__country.iti__highlight {
    background-color: var(--primary-light);
}
.phone-number-with-flag .iti__dial-code {
    color: #878D99;
}
body .iti-mobile .iti--container {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    width: 100%;
    background-color: rgba(0,0,0,0.3);
}
body .iti-mobile .iti__country-list {
    margin: 20px;
    width: calc(100% - 40px);
}
.popup-main .phone-number-with-flag .iti__country-list {
    max-width: 406px;
}
/*end iti number*/
.pn-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}
.select {
    position: relative;
    cursor: pointer;
}
.select:after {
    position: absolute;
    content: '';
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(/assets/img/down-arrow-new.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 20px;
    height: 20px;
}
.popup-main.email-varified-popup .btn-wrapper {
    margin-top: 24px;
}
.menu-close-icon {
    display: none;
}
textarea {
    vertical-align: bottom;
}
/*info popup*/
.info-poppup .popup-head {
    padding: 0;
    border: 0 !important;
}
.info-poppup .popup-content {
    padding: 0;
}
.info-poppup .popup-inner {
    padding: 24px;
    max-width: 460px;
    text-align: center;
}
.info-poppup .close-btn {
    margin-left: auto;
}
.info-poppup .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.info-poppup .action-buttons .btn {
    margin: 0;
    justify-content: center;
    font-size: 16px;
    line-height: 24px;
    padding: 6px 16px;
    height: 50px;
}
.btn.light-green {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}
.btn.light-green:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn.red {
    background-color: #FCE5E2;
    border-color: #FCE5E2;
    color: #F56262;
}
.btn.red:hover {
    background-color: #FCF1EF;
    border-color: #FCF1EF;
}
.btn.yellow {
    background-color: #FDF2C6;
    border-color: #FDF2C6;
    color: #A18612;
}
.btn.yellow:hover {
    background-color: #FDF9E9;
    border-color: #FDF9E9;
    color: #A18612;
}
.btn.outline-btn {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}
.btn.outline-btn:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}
.btn.outline-btn.red {
    border-color: #F56262;
    color: #F56262;
}
.btn.outline-btn.red:hover {
    background-color: #FCF1EF;
    border-color: #FCF1EF;
}
.info-poppup h2.title {
    font-size: 28px;
    line-height: 32px;
    color: #000;
    margin-bottom: 8px;
}
.info-poppup p {
    font-size: 15px;
    line-height: 24px;
    color: #000;
    margin: 0;
}
.info-poppup .popup-text {
    margin: 24px 0;
}
.cancel-warning-list {
    text-align: left;
    margin: 12px auto;
    padding: 0 0 0 20px;
    max-width: 360px;
    list-style: disc;
    font-size: 14px;
    line-height: 22px;
    color: #454B54;
}
.cancel-warning-list li {
    margin-bottom: 6px;
}
/* Popup illustrations. These were Figma "SVG" exports that base64-embedded a
   1024x1024 PNG inside an <svg> wrapper -- ~1.1-1.4 MB each over the wire for a
   160px box, downloaded only when the popup opens (background-image on a hidden
   element), so every modal stalled on first open. Re-encoded at 2x the display
   box: WebP for everything since Safari 14 / Chrome 32, with the PNG on the line
   above as the fallback older engines pick up. The original .svg files are left
   in assets/img/ untouched. */
.info-poppup .popup-img {
    width: 160px;
    height: 160px;
    margin-inline: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.info-poppup .popup-img.confirmation-modals {
    background-image: url(/assets/img/trash-garbage-can-320.png);
    background-image: image-set(url(/assets/img/trash-garbage-can-320.webp) type("image/webp"),
                                url(/assets/img/trash-garbage-can-320.png) type("image/png"));
}
.info-poppup .popup-img.duplicate-modals {
    background-image: url(/assets/img/duplicate-copy.svg);
}
.info-poppup .popup-img.alert-modals {
    background-image: url(/assets/img/exclamation-in-a-circle-320.png);
    background-image: image-set(url(/assets/img/exclamation-in-a-circle-320.webp) type("image/webp"),
                                url(/assets/img/exclamation-in-a-circle-320.png) type("image/png"));
}
.info-poppup.confirm-pickup-request-popup .popup-img.alert-modals {
    background-image: url(/assets/img/step3.png);
}
.info-poppup .popup-img.success-modals {
    background-image: url(/assets/img/confetti-emodji-320.png);
    background-image: image-set(url(/assets/img/confetti-emodji-320.webp) type("image/webp"),
                                url(/assets/img/confetti-emodji-320.png) type("image/png"));
}
.forgot-password-popup .popup-inner {
    max-width: 520px;
}
.forgot-password-popup .row.fieldset {
    text-align: left;
}
.forgot-password-popup .help-block {
    text-align: left;
    color: red;
    font-size: 13px;
}
.popup-img.create-customer-modals {
    width: 160px;
    height: 160px;
    margin: 16px auto;
    background-image: url(/assets/img/new_customer-320.png);
    background-image: image-set(url(/assets/img/new_customer-320.webp) type("image/webp"),
                                url(/assets/img/new_customer-320.png) type("image/png"));
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
/* Wider lead/todo popups with multi-column grid */
#create-lead-popup .popup-inner,
#create-todo-popup .popup-inner {
    max-width: 900px;
}
/* Lead popup contains a Google PlaceAutocompleteElement whose dropdown renders
   inside shadow DOM and gets clipped by ancestor overflow:auto. Match the
   .create-warehouse-popup approach: let the scroll container overflow so the
   dropdown can escape. Form is short enough (5 compact rows) to fit in 90vh. */
#create-lead-popup .popup-inner {
    overflow: visible;
}
#create-lead-popup .popup-content.popup-scroll {
    overflow: visible;
    max-height: none;
}
/* Match the .cust-address-search-group pattern used by new-order and quote-detail.
   Gives the gmp-place-autocomplete a visible 56px-tall box before Google mounts. */
#create-lead-popup #lead-find-address {
    display: block;
    width: 100%;
    min-height: 56px;
    border: 1px solid #CDCFD4;
    border-radius: 16px;
    box-sizing: border-box;
}
#create-lead-popup #lead-find-address gmp-place-autocomplete {
    display: block;
    width: 100%;
    min-height: 54px;
    border: 0;
    box-sizing: border-box;
}
#create-lead-popup .row.fieldset .col.w-50,
#create-todo-popup .row.fieldset .col.w-50 {
    flex: 0 0 calc(50% - 8px);
    min-width: 0;
}
#create-lead-popup .row.fieldset .col.w-33,
#create-todo-popup .row.fieldset .col.w-33 {
    flex: 0 0 calc(33.333% - 11px);
    min-width: 0;
}
#create-lead-popup .row.fieldset .col.w-25,
#create-todo-popup .row.fieldset .col.w-25 {
    flex: 0 0 calc(25% - 12px);
    min-width: 0;
}
@media (max-width: 767px) {
    #create-lead-popup .row.fieldset .col.w-33,
    #create-lead-popup .row.fieldset .col.w-25,
    #create-lead-popup .row.fieldset .col.w-50,
    #create-todo-popup .row.fieldset .col.w-33,
    #create-todo-popup .row.fieldset .col.w-25,
    #create-todo-popup .row.fieldset .col.w-50 {
        flex: 0 0 100%;
    }
}
.create-customer-popup .popup-inner {
    max-width: 520px;
}
.popup-img.create-warehouse-modals {
    width: 160px;
    height: 160px;
    margin: 16px auto;
    background-image: url(/assets/img/exclamation-in-a-circle-320.png);
    background-image: image-set(url(/assets/img/exclamation-in-a-circle-320.webp) type("image/webp"),
                                url(/assets/img/exclamation-in-a-circle-320.png) type("image/png"));
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.create-warehouse-popup .popup-inner {
    max-width: 520px;
    overflow: visible;
}
.create-warehouse-popup .popup-scroll {
    overflow: visible;
}
.create-warehouse-popup .popup-description {
    text-align: center;
    font-size: 15px;
    line-height: 24px;
    color: #454B54;
    margin: 0 0 16px;
}
.orders-item-wrapper {
    background: #fff;
    border: 1px solid #F3F3F3;
    border-radius: 16px;
    overflow: hidden;
}
.orders-item-wrapper .orders-item {
    border: none;
    border-radius: 0;
}
.popup-img.add-to-quote-modals {
    width: 160px;
    height: 160px;
    margin: 16px auto;
    background-image: url("/assets/img/step2.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #878D99;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #E6E6E6;
}
#add-to-quote-popup .atq-section {
    margin-bottom: 0;
}
#add-to-quote-popup .atq-section-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #454B54;
    margin: 0 0 10px;
}
#add-to-quote-popup .atq-selected-customer {
    display: none;
    padding: 10px 14px;
    background: #f0faf4;
    border: 1px solid #2AA466;
    border-radius: 8px;
    margin-top: 8px;
    font-size: 13px;
}
#add-to-quote-popup .atq-clear-customer {
    cursor: pointer;
    float: right;
    color: #F56262;
    font-weight: 600;
}
#add-to-quote-popup .atq-head-text { min-width: 0; }
#add-to-quote-popup .atq-item-subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: #878D99;
}
#add-to-quote-popup .atq-item-subtitle strong { color: #17181A; font-weight: 600; }
#add-to-quote-popup .atq-intro {
    margin: 0 0 18px;
    padding: 10px 14px;
    background: #f0faf4;
    border: 1px solid #d6efe1;
    border-radius: 10px;
    font-size: 13px;
    line-height: 20px;
    color: #454B54;
}
#add-to-quote-popup .atq-intro strong { color: #17181A; font-weight: 600; }
#add-to-quote-popup .atq-intro #atq-intro-sku { color: #2AA466; }

/* ── Customer panel: chooser / create / preview modes ── */
#add-to-quote-popup .atq-cust-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#add-to-quote-popup .atq-cust-back { display: none; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
#add-to-quote-popup .atq-cust-back:hover { text-decoration: underline; }
#add-to-quote-popup .atq-cust-preview { display: none; margin-top: 6px; }
#add-to-quote-popup .atq-inline-create[hidden] { display: none; }

/* create / preview take over the full popup width; draft column + chooser bits hide */
#add-to-quote-popup.atq-mode-create .atq-chooser-only,
#add-to-quote-popup.atq-mode-preview .atq-chooser-only { display: none !important; }
#add-to-quote-popup.atq-mode-create .atq-col-right,
#add-to-quote-popup.atq-mode-preview .atq-col-right { display: none; }
/* collapse the two-col grid/flex to a single full-width column + drop the divider */
#add-to-quote-popup.atq-mode-create .atq-two-col,
#add-to-quote-popup.atq-mode-preview .atq-two-col { display: block; grid-template-columns: 1fr; }
#add-to-quote-popup.atq-mode-create .atq-two-col::before,
#add-to-quote-popup.atq-mode-preview .atq-two-col::before { display: none; }
#add-to-quote-popup.atq-mode-create .atq-col-left,
#add-to-quote-popup.atq-mode-preview .atq-col-left { width: 100%; max-width: 100%; flex: 1 1 100%; opacity: 1 !important; pointer-events: auto !important; }
#add-to-quote-popup.atq-mode-create .atq-cust-back,
#add-to-quote-popup.atq-mode-preview .atq-cust-back { display: inline-block; }
#add-to-quote-popup.atq-mode-preview .atq-cust-preview { display: block; }

/* the main "Create New Quote" footer hides while the inline create form is open */
#add-to-quote-popup.atq-mode-create .atq-btn-wrapper { display: none; }
#add-to-quote-popup .atq-create-footer { display: none; }
#add-to-quote-popup.atq-mode-create .atq-create-footer { display: flex; }

/* profile preview card */
#add-to-quote-popup .atq-prev-card { border: 1px solid #E6E6E6; border-radius: 12px; padding: 16px 18px; background: #fafbfc; }
#add-to-quote-popup .atq-prev-name { font-size: 16px; font-weight: 700; color: #17181A; margin-bottom: 12px; }
#add-to-quote-popup .atq-prev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#add-to-quote-popup .atq-prev-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #878D99; margin-bottom: 4px; }
#add-to-quote-popup .atq-prev-val { font-size: 13px; line-height: 19px; color: #454B54; word-break: break-word; }
#add-to-quote-popup .atq-prev-muted { color: #878D99; }

/* inline create form body — scrolls if it gets tall, keeping the footer in view */
#add-to-quote-popup .atq-create-body { max-height: 52vh; overflow-y: auto; padding: 2px; }

@media (max-width: 640px) {
    #add-to-quote-popup .atq-prev-grid { grid-template-columns: 1fr; }
}
#add-to-quote-popup .atq-quotes-list {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    padding: 4px 0;
}
#add-to-quote-popup .atq-quotes-placeholder {
    padding: 14px 16px;
    color: #878D99;
    font-size: 14px;
    line-height: 22px;
}
#add-to-quote-popup .atq-quote-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #F3F3F3;
    cursor: pointer;
    transition: background 0.15s;
}
#add-to-quote-popup .atq-quote-row:last-child {
    border-bottom: none;
}
#add-to-quote-popup .atq-quote-row:hover {
    background-color: #f0faf4;
}
#add-to-quote-popup .atq-quote-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: #17181A;
}
#add-to-quote-popup .atq-quote-customer,
#add-to-quote-popup .atq-quote-status {
    font-size: 13px;
    line-height: 20px;
    color: #878D99;
}
/* Draft-quote rows mirror the original /quotes list-view sales cards
   (avatar + name/meta + thumbnail strip + total). Reuse the .sales-card-*
   classes and just compact them for the narrower popup column. */
#add-to-quote-popup .atq-quote-row.atq-quote-row--rich {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
#add-to-quote-popup .sales-card-info { flex: 1 1 auto; max-width: none; }
#add-to-quote-popup .sales-card-items { gap: 6px; }
#add-to-quote-popup .sales-card-item { width: 52px; flex: 0 0 52px; }
#add-to-quote-popup .sales-card-item-thumb { width: 46px; height: 46px; margin: 0 auto; }
#add-to-quote-popup .sales-card-item.more .sales-card-item-more { width: 46px; height: 46px; margin: 0 auto; font-size: 12px; }
/* Show the full SKU under each thumbnail — wrap instead of ellipsis-clipping long codes */
#add-to-quote-popup .sales-card-item-code {
    font-size: 9px;
    line-height: 11px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
}
#add-to-quote-popup .sales-card-right .amount-breakdown { min-width: 120px; margin-bottom: 4px; }
/* Target warehouse on its own straight line under the meta (both lists) */
.sales-card-warehouse {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    color: #2AA466;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#add-to-quote-popup .atq-quote-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}
#add-to-quote-popup .atq-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 52px;
}
#add-to-quote-popup .atq-thumb img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border: 1px solid #EDEDED;
    border-radius: 8px;
    background: #FAFAFA;
}
#add-to-quote-popup .atq-thumb-code {
    margin-top: 3px;
    max-width: 52px;
    font-size: 10px;
    line-height: 13px;
    color: #878D99;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#add-to-quote-popup .atq-thumb--more { justify-content: center; }
#add-to-quote-popup .atq-thumb--more .atq-thumb-more {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #CDCFD4;
    border-radius: 8px;
    color: #878D99;
    font-size: 13px;
    font-weight: 600;
    background: #FAFAFA;
}
#add-to-quote-popup .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    text-align: center;
}
#add-to-quote-popup .action-buttons .btn {
    margin: 0;
    justify-content: center;
    font-size: 16px;
    line-height: 24px;
    padding: 6px 16px;
    height: 50px;
}
.customer-dropdown-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    color: #878D99;
    font-size: 14px;
}
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #E6E6E6;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.info-poppup .btn.light-green:hover svg path {
    fill: #fff;
}

/*end info popup*/

/* Sales Card — shared card style for all sales list pages */
/* Row separation. The border was #F3F3F3 on a #fff card — a 3% contrast step,
   invisible in practice — so a list read as one continuous block and the only
   thing dividing rows was the rule INSIDE each card, which is misleading. A
   slightly darker edge plus a 1px lift makes each row a distinct object.
   Shared by every list in the portal (14 views: pickups, projects, quotes,
   orders, invoices, payments, customers, variants, source requests …), which is
   why it is fixed here rather than scoped to one page — the same component had
   the same defect everywhere, and scoping it would have made one list look
   unlike all the others. */
/* One record, one block. The edge was #F3F3F3 on a #fff card — a 3% step,
   invisible in practice — so nothing separated one record from the next, while
   the rule INSIDE each card (see .sales-card-details) was clearly visible and
   read as the boundary. The result was backwards: each request looked like two
   rows. A defined edge and a real gap now carry the separation, and the
   internal rule is gone. Shared by every list in the portal (14 views), so it
   is fixed on the component rather than scoped to one page. */
.sales-card {
    display: block;
    background: #fff;
    border: 1px solid #D7DCE2;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .07);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 14px;
    text-decoration: none;
    color: #17181A;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.sales-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(42, 164, 102, 0.08);
}
.sales-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sales-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}
/* Variant cards show the variant's featured photo instead of the "V" badge —
   a rounded-square product thumbnail (cover-filled). */
.sales-card-icon.has-thumb {
    background: #f2f2f2;
    border-radius: 10px;
    overflow: hidden;
}
.sales-card-icon.has-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sales-card-info { flex: 0 0 340px; max-width: 340px; min-width: 0; }
.sales-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #17181A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sales-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    font-size: 13px;
    color: #878D99;
}
.sales-card-meta .tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.sales-card-meta .meta-sep { color: #D0D0D0; }
.sales-card-right {
    flex-shrink: 0;
    text-align: right;
    margin-left: auto;
}
/* Shipping + Taxes breakdown above the grand total */
.sales-card-right .amount-breakdown {
    min-width: 150px;
    margin-bottom: 5px;
}
.sales-card-right .amount-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-size: 12px;
    line-height: 18px;
}
.sales-card-right .amount-row-label { color: #A8ADB7; }
.sales-card-right .amount-row-val { color: #454B54; font-weight: 500; }
.sales-card-right .amount {
    font-size: 16px;
    font-weight: 700;
    color: #17181A;
}
/* Received (incoming) payments render in brand green with a leading '+'. */
.sales-card-right .amount.amount-received {
    color: #2AA466;
}
.sales-card-right .amount-label {
    font-size: 11px;
    color: #878D99;
}
/* NO border-top. This rule used to split every card into two bands — and
   because the card's own border was invisible, it was the only visible line in
   the list, so the eye read it as the boundary BETWEEN records. Each request
   looked like two rows and its own details looked like the next request's. A
   record is one block: id, status, date and every detail belong to the same
   request and now read as one. Separation between requests is carried by the
   card edge and the gap, which is where it belongs. */
.sales-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin-top: 6px;
}
.sales-card-detail {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #878D99;
}
.sales-card-detail .detail-label {
    font-weight: 600;
    color: #454B54;
}
/* Connected-document chip (orders → invoice, invoices/quotes → order). The
   card is an <a>, so this is a clickable <div role="link"> with green accent. */
.sales-card-connection {
    cursor: pointer;
    color: #2AA466;
    font-weight: 600;
    border: 1px solid #BFE6CF;
    background: #F0FFF5;
    border-radius: 12px;
    padding: 2px 10px;
    line-height: 18px;
    transition: background-color .15s ease, border-color .15s ease;
}
.sales-card-connection:hover {
    background: #E2F7EA;
    border-color: #2AA466;
}
.sales-card-connection .conn-more {
    color: #6B7280;
    font-weight: 500;
    margin-left: 2px;
}
/* CRM submenu record-count badge (filled async by the layout). Empty until the
   count arrives, so hide the empty pill to avoid a flash of blank chips. */
.crm-count,
.service-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: 4px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    text-align: center;
    color: #454B54;
    background: #EEF0F2;
    border-radius: 9px;
    vertical-align: middle;
}
.crm-count:empty,
.service-count:empty { display: none; }
/* Compact thumbnail + barcode strip inside the sales card header row
   (quotes / orders / invoices). Sits between .sales-card-info and
   .sales-card-right; intentionally NOT wrapping so the row stays clean. */
.sales-card-items {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: flex-start;
}
.sales-card-item {
    width: 72px;
    text-align: center;
    flex: 0 0 72px;
}
.sales-card-item-thumb {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #E5E5E5;
    background: #FAFAFA;
    display: block;
}
.sales-card-item-code {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #454B54;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sales-card-item.more .sales-card-item-more {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    background: #F3F3F3;
    border: 1px dashed #C5C9D1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #6B7480;
    font-size: 14px;
}
@media (max-width: 768px) {
    /* On mobile let info expand full-width and the strip wrap below */
    .sales-card-info  { flex: 1 1 100%; max-width: 100%; }
    .sales-card-items { flex-wrap: wrap; margin-top: 8px; flex: 1 1 100%; }
}
/* ── CRM list STATUS palette ─────────────────────────────────────────────────
   ONE palette drives BOTH the sidebar filter pills (.list-filter-block
   .filter-pill.<slug>) AND the list-card row badges (.sales-card-meta
   .tag.<slug>), so the colour a user picks in the filter is the same colour as
   the badge on the row — the same principle as the /variants ipv-status palette.
   Slugs are Inflector::slug() of the real status strings across Quotes, Orders,
   Invoices, Payments, Purchase Receipts, Quality Inspections, Leads and Users.
   (ToDos and Conversations keep their own page-scoped semantics in their inline
   CSS — e.g. ToDo open=attention, closed=done — and only add matching pills.)
   Grouped by semantic colour. */
.sales-card-meta .tag { background: #F3F3F3; color: #878D99; }
/* neutral / not started — orange */
.list-filter-block .filter-pill.draft, .sales-card-meta .tag.draft,
.list-filter-block .filter-pill.lead,  .sales-card-meta .tag.lead { background: #FFF3E0; color: #E65100; }
/* in progress — blue */
.list-filter-block .filter-pill.open, .sales-card-meta .tag.open,
.list-filter-block .filter-pill.submitted, .sales-card-meta .tag.submitted,
.list-filter-block .filter-pill.to-deliver, .sales-card-meta .tag.to-deliver,
.list-filter-block .filter-pill.to-deliver-and-bill, .sales-card-meta .tag.to-deliver-and-bill,
.list-filter-block .filter-pill.contacted, .sales-card-meta .tag.contacted,
.list-filter-block .filter-pill.qualified, .sales-card-meta .tag.qualified { background: #E3F2FD; color: #1565C0; }
/* pending / awaiting next step — amber */
.list-filter-block .filter-pill.ordered, .sales-card-meta .tag.ordered,
.list-filter-block .filter-pill.to-bill, .sales-card-meta .tag.to-bill,
.list-filter-block .filter-pill.quoted, .sales-card-meta .tag.quoted,
.list-filter-block .filter-pill.return, .sales-card-meta .tag.return,
.list-filter-block .filter-pill.return-issued, .sales-card-meta .tag.return-issued,
.list-filter-block .filter-pill.credit-note-issued, .sales-card-meta .tag.credit-note-issued,
.list-filter-block .filter-pill.follow-up, .sales-card-meta .tag.follow-up,
.list-filter-block .filter-pill.follow-up-negotiation, .sales-card-meta .tag.follow-up-negotiation { background: #FDF2C6; color: #A18612; }
/* success / done — green */
.list-filter-block .filter-pill.completed, .sales-card-meta .tag.completed,
.list-filter-block .filter-pill.paid, .sales-card-meta .tag.paid,
.list-filter-block .filter-pill.delivered, .sales-card-meta .tag.delivered,
.list-filter-block .filter-pill.shipped, .sales-card-meta .tag.shipped,
.list-filter-block .filter-pill.converted, .sales-card-meta .tag.converted,
.list-filter-block .filter-pill.closed-won, .sales-card-meta .tag.closed-won,
.list-filter-block .filter-pill.active, .sales-card-meta .tag.active { background: #E8F5E9; color: #2AA466; }
/* failure / negative — red */
.list-filter-block .filter-pill.cancelled, .sales-card-meta .tag.cancelled,
.list-filter-block .filter-pill.canceled, .sales-card-meta .tag.canceled,
.list-filter-block .filter-pill.lost, .sales-card-meta .tag.lost,
.list-filter-block .filter-pill.expired, .sales-card-meta .tag.expired,
.list-filter-block .filter-pill.overdue, .sales-card-meta .tag.overdue,
.list-filter-block .filter-pill.unpaid, .sales-card-meta .tag.unpaid,
.list-filter-block .filter-pill.closed-lost, .sales-card-meta .tag.closed-lost { background: #FCE5E2; color: #F56262; }
/* terminal / inactive — gray */
.list-filter-block .filter-pill.closed, .sales-card-meta .tag.closed,
.list-filter-block .filter-pill.disabled, .sales-card-meta .tag.disabled { background: #F1F5F9; color: #6B7280; }
@media (max-width: 768px) {
    .sales-card-header { flex-wrap: wrap; }
    .sales-card-right { flex: 100%; text-align: left; margin-top: 6px; }
    .sales-card-details { flex-direction: column; gap: 4px; }
}
/* End Sales Card */

/* Show More Button — global */
.show-more-wrapper {
    margin-top: 24px;
    text-align: center;
}
.show-more-wrapper .showing-count {
    font-size: 14px;
    color: #878D99;
    margin-bottom: 12px;
}
.show-more-button {
    padding: 14px 15px;
    border: 2px solid var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    transition: 0.3s all;
    background: transparent;
}
.show-more-button span {
    font-size: 16px;
    font-weight: 500;
    position: relative;
    display: flex;
    padding-right: 26px;
    color: var(--primary);
}
.show-more-button span:after {
    position: absolute;
    content: '';
    border-top: 2px solid;
    border-right: 2px solid;
    width: 6px;
    height: 6px;
    transform: rotate(135deg);
    right: 5px;
    top: 5px;
    border-color: var(--primary);
}
.show-more-button:hover {
    background-color: var(--primary);
}
.show-more-button:hover span {
    color: #fff;
}
.show-more-button:hover span:after {
    border-color: #fff;
}
/* End Show More Button */

/* ========================================
   Collapsible Filter Panel — Global
   ======================================== */
.list-wrapper {
    transition: all 0.4s ease;
}
.list-topbar {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}
.list-filter-toggle {
    width: 320px;
    display: inline;
    background-color: #F3F3F3;
    padding: 8px 8px 8px 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    transition: width 0.4s ease;
}
.list-filter-toggle .toggle-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.list-filter-toggle .toggle-title {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #17181A;
}
.list-filter-btn {
    width: 48px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 12px;
    cursor: pointer;
    margin-left: auto;
    border: none;
}
.list-header {
    background-color: #F3F3F3;
    padding: 8px 8px 8px 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 340px);
    transition: width 0.4s ease;
}
.list-header .title {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #17181A;
}
/* Optional customer-name search box rendered in the list header (quotes/orders/
   invoices). Value is forwarded as filtering.search by the filter-sidebar JS. */
.list-search-box {
    flex: 1 1 auto;
    max-width: 360px;
    margin: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e1e3e8;
    border-radius: 10px;
    padding: 0 12px;
    height: 40px;
}
.list-search-box svg { flex-shrink: 0; }
.list-search-box input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #17181A;
    -webkit-appearance: none;
    appearance: none;
}
.list-search-box input::placeholder { color: #878D99; }
.list-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.list-search-box:focus-within { border-color: var(--primary); }
/* Keep the right-side controls (sort select, Export, action button) on a single
   row. .make-project-btn is a block-level flex, so without this the action button
   wraps below the inline sort/export controls. */
.list-header .pro-card-filter-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
@media (max-width: 1023px) {
    .list-header { flex-wrap: wrap; }
    .list-search-box { order: 3; flex-basis: 100%; max-width: none; margin: 8px 0 0; }
}
.list-main {
    display: flex;
    gap: 20px;
}
.list-sidebar {
    width: 320px;
    transition: width 0.4s ease;
    flex-shrink: 0;
}
.list-content {
    width: calc(100% - 340px);
    transition: width 0.4s ease;
}

/* Collapsed state */
.list-wrapper.collapsed .list-filter-toggle .toggle-title { display: none; }
.list-wrapper.collapsed .list-filter-toggle {
    width: 64px;
    padding: 8px;
    background-color: var(--primary);
}
.list-wrapper.collapsed .list-header { width: calc(100% - 84px); }
.list-wrapper.collapsed .list-sidebar { width: 0; overflow: hidden; }
.list-wrapper.collapsed .list-main { gap: 0; }
.list-wrapper.collapsed .list-content { width: 100%; }
.list-wrapper.collapsed .list-filter-btn { background-color: transparent; }
.list-wrapper.collapsed .list-filter-btn svg path { stroke: #fff; }

/* Filter blocks */
.list-filter-block {
    margin-bottom: 8px;
    border-top: 1px solid #e9e9e9;
}
.list-filter-block-title {
    position: relative;
    cursor: pointer;
    padding: 10px 0;
}
.list-filter-block-title h3 { font-size: 16px; margin: 0; }
.list-filter-block-title::after {
    position: absolute;
    content: '';
    width: 24px;
    height: 24px;
    right: 0;
    top: 8px;
    background-image: url(/assets/img/down-arrow-new.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s;
}
.list-filter-block.open .list-filter-block-title::after { transform: rotate(-180deg); }
.list-filter-block-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}
.list-filter-block.open .list-filter-block-content {
    max-height: 600px;
    margin-bottom: 8px;
}
.list-filter-block-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.list-filter-block-content li {
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.list-filter-block-content li label {
    font-size: 14px;
    cursor: pointer;
    color: #454B54;
}
.list-filter-block-content li .filter-count {
    color: #878D99;
    font-size: 12px;
}

/* Mobile */
.list-filter-overlay {
    position: fixed;
    left: -105%;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    z-index: 9;
    transition: 0.5s ease;
}
.list-filter-overlay.active { left: 0; }
.list-filter-mobile-close { display: none; }

@media (max-width: 1023px) {
    .list-topbar { flex-direction: column; gap: 8px; }
    .list-filter-toggle { display: none; }
    .list-header { width: 100%; }
    .list-main { flex-direction: column; }
    .list-sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        z-index: 10;
        padding: 20px;
        overflow-y: auto;
        transition: left 0.3s ease;
    }
    .list-sidebar.active { left: 0; }
    .list-content { width: 100%; }
    .list-filter-mobile-close {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    .list-filter-mobile-close h2 { font-size: 18px; margin: 0; }
    .list-filter-mobile-close button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
    }
}
.list-header .showing-product-text,
.list-header .sales-count {
    font-size: 14px;
    color: #878D99;
    margin-left: 12px;
}
/* End Collapsible Filter Panel */

.header-search-input input:focus,
.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus, 
.fancy-input input:focus, 
.fancy-input select:focus, 
.fancy-input textarea:focus {
    border-color: var(--primary-border) !important;
}

/* 
.add-to-cart-popup .action-buttons, .add-to-cart-popup-guest .action-buttons {
    display: flex;
    gap: 16px;
    justify-content: space-between;
}
.add-to-cart-popup .popup-head, .add-to-cart-popup-guest .popup-head {
    border-bottom: 1px solid #F3F3F3;
}
.add-to-cart-popup .popup-content .success-text, .add-to-cart-popup-guest .popup-content .success-text {
    min-height: 100px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 15px;
    text-align: center;
}
.add-to-cart-popup .action-buttons .btn, .add-to-cart-popup-guest .action-buttons .btn {
    margin: 0;
    padding: 6px 16px;
    height: auto;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 20px;
    gap: 8px;
    border-radius: 12px;
    height: 40px;
} 
.open-login-popup:hover svg path, .clased-popup-cart:hover svg path {
    fill: var(--primary);
}
*/
.login-popup .show-address {
    color: #878D99;
    text-align: left;
    font-size: 14px;
    width: 100%;
    margin-bottom: 8px;
}
.login-popup .show-address .value {
    color: #17181A;
    display: block;
}
.logo-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.header-left .logo-wrapper {
    width: 150px;
}
.powered-by {
    font-size: 13px;
    line-height: 15px;
    display: flex;
    justify-content: flex-end;
    color: #17181A;
    gap: 3px;
}
.reuzeit-text {
    font-weight: 800;
    letter-spacing: .5px;
}
.reuzeit-text .green {
    color: var(--primary);
    font-weight: inherit;
}
.email-varified-popup .row.fieldset {
    gap: 20px;
}
.email-varified-popup .row.fieldset .checkbox-wrapper {
    margin-top: 12px;
}
.email-varified-popup .row.fieldset.billing-address {
    margin-top: 20px;
}
.email-varified-popup .show-address {
    margin: 8px 0 16px;
}
.email-varified-popup .row.billing-address .show-address,.email-varified-popup .row.cart-billing-address .show-address {
    margin: 8px 0 0;
}
.login-popup.email-varified-popup .popup-inner, .login-popup.email-varified-popup .popup-content {
    max-height: initial;
}
.has-items .ts-control > input {
    width: initial !important;
    max-width: initial !important;
    min-width: initial !important;
    margin: 0 0 0 4px !important;
}
.user-login-popup .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}
.user-login-popup .action-buttons .btn {
    margin: 0;
}
.user-login-popup .checkbox-wrapper {
    margin-top: 20px;
}
gmp-place-autocomplete {
    border: 0;
}
.user-profile .user-name-icon {
    width: 32px;
    height: 32px;
    border-radius: 80px;
    background-color: #F27830;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF1E9;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
}
.verification-note {
    margin: 10px 0 0;
    color: #0b0b0b;
    background-color: #FDF9E9;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #FDF2C6;
}

.t-and-c_popup .popup-inner {
    max-width: 1000px;;
    text-align: left;
    max-height: 90vh;
    height: 100%;
    padding: 24px 4px;
}
.t-and-c_popup .popup-head {
    padding: 0 20px;
}
.t-and-c_popup .popup-title {
    font-weight: 600;
    padding-right: 12px;
    color: #000;
    font-size: 32px;
    line-height: 40px;
}
.t-and-c_popup .popup-content {
    height: calc(100% - 140px);
    padding: 0 20px;
    overflow: auto;
    margin-top: 24px;
}
.t-and-c_popup .popup-text {
    margin: 0;
}
.t-and-c_popup p {
    font-size: 16px;
    line-height: 24px;
}
.t-and-c_popup .h3 {
    font-size: 24px;
    line-height: 30px;
    color: #000;
    margin-bottom: 12px;
    font-weight: 600;
}
.t-and-c_popup ol {
    list-style: auto;
    padding-left: 27px;
}
.t-and-c_popup .popup-text>ol> li::marker {
    font-size: 24px;
    font-weight: 600;
    color: #000;
}
.t-and-c_popup .popup-text>ol> li {
    margin: 16px 0;
}
.t-and-c_popup p, .t-and-c_popup strong, .t-and-c_popup li {
    font-size: 16px;
    line-height: 24px;
    color: #454B54;
}
.t-and-c_popup strong {
    font-weight: 700;
    color: #000;
}
.t-and-c_popup p {
    margin-bottom: 10px;
}
.t-and-c_popup ul {
    list-style: disc;
    padding-left: 36px;
}
.t-and-c_popup ul li {
    line-height: 24px;
}
.t-and-c_popup ol ol {
    padding-left: 17px;
    margin: 10px 0;
}
.t-and-c_popup ol ol li {
    line-height: 24px;
    margin: 4px 0;
}
.t-and-c_popup ol ol ul {
    padding-left: 22px;
    margin: 10px 0;
}
.t-and-c_popup table,.t-and-c_popup  th,.t-and-c_popup  td {
  border: 1px solid black;
  border-collapse: collapse;
}
.t-and-c_popup th, .t-and-c_popup td {
    padding: 4px 8px;
}
.t-and-c_popup table {
    min-width: 40%;
    margin: 16px 0;
}
.t-and-c_popup th {
    font-weight: 600;
    color: #000;
}
.t-and-c_popup .h3 ~ strong {
    margin-bottom: 4px;
    display: inline-block;
}
.t-and-c_popup a {
    text-decoration: underline;
    word-wrap: break-word;
}
.t-and-c_popup .action-buttons {
    margin-top: 24px;
    padding: 0 20px;
}

/* MSA PDF viewer (PDF.js, canvas-based) + agreement section — the inline
   ~550-line MSA text was replaced by a PDF.js viewer pulling
   /supplier-msa-pdf (same-origin proxy of the upstream PDF). The popup-
   content now holds: <viewer with rendered canvases> + <agreement-section>. */
.t-and-c_popup .msa-pdf-viewer {
    width: 100%;
    height: calc(90vh - 280px);
    min-height: 360px;
    border: 1px solid #e1e4ea;
    border-radius: 6px;
    background: #f5f5f5;
    overflow: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.t-and-c_popup .msa-pdf-page {
    display: block;
    max-width: 100%;
    height: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    background: #fff;
}
.t-and-c_popup .msa-pdf-loading,
.t-and-c_popup .msa-pdf-error {
    padding: 24px 16px;
    text-align: center;
    color: #555;
    font-size: 14px;
    line-height: 20px;
}
.t-and-c_popup .msa-pdf-error {
    color: #d93025;
}
.t-and-c_popup .agreement-section {
    margin-top: 20px;
    padding: 16px 18px;
    background: #f8f9fb;
    border: 1px solid #e1e4ea;
    border-radius: 8px;
}
.t-and-c_popup .agreement-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 15px;
    line-height: 22px;
    color: #1f2937;
    margin: 0;
}
.t-and-c_popup .agreement-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #28a745;
}
.t-and-c_popup .agreement-label span {
    flex: 1;
}
.t-and-c_popup .agreement-error {
    display: none;
    color: #d93025;
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
    padding-left: 30px;
}
.t-and-c_popup .agreement-error.active {
    display: block;
}

.items-number-count.skeleton-block {
    border-radius: 100%;
    animation: shimmer 16s infinite linear;
}

/*offer slider*/
.offer-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.offer-slide {
  display: none; 
  flex-direction: column; 
  align-items: center; 
  text-align: center;
  gap: 20px; 
}

.offer-slide.active {
  display: flex; 
}
.offer-slide img {
    width: 100%;
    height: auto;
}

.offer-slide button {
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 25px;
  background: #ff6b6b;
  color: white;
  cursor: pointer;
  transition: background 0.3s;
}

.offer-slide button:hover {
  background: #ff4040;
}

.offer-slider-navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 10px;
}

.offer-slider .nav-btn {
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 50%;
  transition: background 0.3s;
}

.offer-slider .nav-btn:hover {
  background: rgba(0,0,0,0.8);
}
.offer-popup .popup-head {
    border-bottom: 1px solid #ececec;
    margin-bottom: 16px;
}
.offer-popup .popup-title {
    font-size: 24px;
    line-height: 32px;
}
.offer-popup .popup-inner {
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
}
.offer-popup .slider-arrows {
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 48px);
    transform: translateY(-50%);
}
.offer-popup .slider-arrows span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 16px;
    font-size: 16px;
    color: #878D99;
    transition: 0.3s all;
    cursor: pointer;
    border: 1px solid var(--primary);
}
.offer-popup .slider-arrows span.prev {
    margin-left: 8px;
}
.offer-popup .slider-arrows span.next {
    margin-right: 8px;
}
.offer-popup .slider-arrows span:hover {
    background-color: var(--primary);
}
.offer-popup .slider-arrows span:hover svg path {
    stroke: initial;
    fill: #fff;
}
.offer-popup .btn {
    margin: 0;
}
.offer-slide-text {
    font-size: 18px;
    line-height: 28px;
    margin: 0;
}
.donot-show-again, .offer-popup .btn-wrapper {
    position: absolute;
    left: 24px;
    bottom: 0;
    width: calc(100% - 48px);
    top: inherit;
    background: #fff;
}
.offer-popup .popup-inner {
    position: relative;
}
.offer-slider {
    position: inherit;
}
.offer-popup .popup-content {
    max-height: calc(90vh - 88px);
    overflow: auto;
    padding-bottom: 164px;
}

.offer-popup.donation .popup-content {
    padding-bottom: 0px;
}
.offer-popup .btn-wrapper {
    bottom: 68px;
    text-align: center;
    justify-content: center;
    border-top: 1px solid #ececec;
    padding: 20px 0 0;
}
.donot-show-again {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 24px;
}
.donot-show-again .checkbox-label {
    font-size: 18px;
    line-height: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.donot-show-again input {
    margin: 0;
}
.new-footer .privacy-note {
    margin-top: 32px;
}
.new-footer .privacy-note .footer-col-title {
    margin-bottom: 16px;
}
.new-footer .privacy-note a {
    text-decoration: underline;
    font-weight: 600;
}
.new-footer .privacy-note a:hover {
    color: var(--primary);
}
body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
.product-condition .custom-select {
    width: max-content;
    position: relative;
    font-family: sans-serif;
    cursor: pointer;
    margin-left: 0;
}

.custom-select {
    width: max-content;
    position: relative;
    font-family: sans-serif;
    cursor: pointer;
    margin-left: auto;
}
.custom-select .options{
  display:none;
  position:absolute;
  width:max-content;
  background:#fff;
  border:1px solid #ccc;
  border-radius:8px;
  margin-top:6px;
  z-index:10;
  text-align: left;
  left: 0;
  right: 0;
  min-width: 286px;
}
 
.custom-select .option{
  padding:8px 12px;
  border-bottom:1px solid #eee;
}
 
.custom-select .option:last-child{
  border-bottom:none;
}
 
.custom-select .option:hover{
  background:#f2f8f7;
}
.product-condition .disposition-strategy-wrapper {
    display: flex;
    justify-content: start;
    gap: 4px;
    margin-bottom: 12px;
}
.icon-tag {
    background: #F3F3F3;
    color: #878D99;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px 8px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    line-height: 20px;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    text-align: left;
}
.icon-tag .ico {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    background-image: url(/assets/img/recycle.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.custom-select .options .icon-tag {
    display: flex;
    background-color: transparent;
    border-radius: 0;
    padding: 10px 12px;
}
.custom-select .selected.icon-tag {
    width: 100%;
}
.custom-select .icon-tag:not(:has(.ico)) {
    padding: 8px 12px 8px 18px;
    min-width: 140px;
}
.select-with-arrow {
    padding-right: 34px !important;
    position: relative;
}
.select-with-arrow:after {
    position: absolute;
    content: '';
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(/assets/img/down-arrow-new.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 20px;
    height: 20px;
    opacity: .6;
}
.selected.icon-tag, .current-disposition-strategy .icon-tag {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary);
}
.icon-tag .ico.consignment-only{
    background-image: url(/assets/img/consignment.svg);
}
.icon-tag .ico.redeploy-only{
    background-image: url(/assets/img/redeploy.svg);
}
.icon-tag .ico.storage{
    background-image: url(/assets/img/storage.svg);
}
.icon-tag .ico.to-be-donated{
    background-image: url(/assets/img/consignment.svg);
}
.icon-tag .ico.to-be-scrapped{
    background-image: url(/assets/img/consignment.svg);
}
.icon-tag .ico.local-sale{
    background-image: url(/assets/img/globe-marker-pin.svg);
}
.selected.icon-tag .ico.consignment-redeployment, .current-disposition-strategy .icon-tag .ico.consignment-redeployment ,.icon-tag .ico.tbd{
    background-image: url(/assets/img/recycle-green.svg);
}
.selected.icon-tag .ico.consignment-only, .current-disposition-strategy .icon-tag .ico.consignment-only {
    background-image: url(/assets/img/consignment-green.svg);
}
.selected.icon-tag .ico.redeploy-only, .current-disposition-strategy .icon-tag .ico.redeploy-only {
    background-image: url(/assets/img/redeploy-green.svg);
}
.selected.icon-tag .ico.storage, .current-disposition-strategy .icon-tag .ico.storage{
    background-image: url(/assets/img/storage-green.svg);
}
.selected.icon-tag .ico.to-be-donated, .current-disposition-strategy .icon-tag .ico.to-be-donated{
    background-image: url(/assets/img/consignment-green.svg);
}
.selected.icon-tag .ico.to-be-scrapped, .current-disposition-strategy .icon-tag .ico.to-be-scrapped{
    background-image: url(/assets/img/consignment-green.svg);
}
.selected.icon-tag .ico.local-sale, .current-disposition-strategy .icon-tag .ico.local-sale {
    background-image: url(/assets/img/globe-marker-pin_green.svg);
}

.disposition-strategy-wrapper .new-popup {
    width: 500px;
    text-align: left;
    left: inherit;
    right: -18px; 
}
.disposition-strategy-wrapper .new-popup-heading {
    margin-bottom: 8px;
}
.disposition-strategy-wrapper .new-popup-heading .close {
    margin-left: auto;
}
.disposition-strategy-wrapper .new-popup-content li p:last-child {
    margin-bottom: 10px;
}
.disposition-strategy-wrapper .new-popup-content li:last-child p:last-child {
    margin: 0;
}

.btn[disabled] {
    background-color: #F3F3F3 !important;
    border-color: #F3F3F3 !important;
    color: #CDCFD4 !important;
    cursor: not-allowed;
}
.btn[disabled] svg path {
    fill: #CDCFD4 !important;
}
.help-block.global-show-address-error {
    text-align: left;
    font-size: 16px;
    padding: 0 0 10px;
}

/* Edit Address Link & Panel */
.edit-address-link {
    display: inline;
    color: #2AA466;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    margin-left: 8px;
}
.edit-address-link:hover {
    color: #1e8a52;
}
.edit-address-panel {
    background: #F7F8FA;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
    width: 100%;
}
.edit-address-row {
    margin-bottom: 10px;
}
.edit-address-row:last-child {
    margin-bottom: 0;
}
.edit-address-row label {
    display: block;
    font-size: 12px;
    color: #878D99;
    margin-bottom: 4px;
}
.edit-address-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    background: #fff;
    color: #17181A;
    box-sizing: border-box;
}
.edit-address-input.readonly {
    background: #F0F1F3;
    color: #878D99;
    cursor: not-allowed;
}
.edit-address-input.editable {
    border-color: #2AA466;
    background: #fff;
}
.edit-address-input.editable:focus {
    outline: none;
    border-color: #1e8a52;
    box-shadow: 0 0 0 2px rgba(42, 164, 102, 0.15);
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

.header.active-menu {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100vh;
}
/*new d r*/

@media only screen and (min-width: 1024px) {
    li.menu-item>a:hover {
        color: var(--primary);
        background-color: var(--primary-light);
        border-radius: 8px;
    }
    .sub-menu {
    position: absolute;
    background-color: #fff;
    padding: 10px 0;
    width: 260px;
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.3s,opacity 0.3s;
    box-shadow: 0 10px 50px 0 rgba(61, 66, 69, .18);
    border-radius: 8px;
}
.menu-item:hover ul.sub-menu, .user-profile:hover .dropdown-content {
    height: initial;
    padding: 8px 0;
    overflow: visible;
    opacity: 1;
} 
.sub-menu-item a, .dropdown-content a {
    padding: 8px 16px;
    display: block;
    transition: 0.3s all;
    font-size: 16px;
    line-height: 24px;
}
.sub-menu-item a:hover, .dropdown-content a:hover {
    color: var(--primary);
    background-color: var(--primary-light);
}
}

/* 
@media only screen and (max-width: 1700px) {
    .navigation {
        width: calc(100% - 637px);
    }
    .search-form input {
        width: 334px;
    }
}
@media only screen and (max-width: 1650px) {
    .top-links li ul.dropdown-content {
        left: -121px;
    }
    .user-item-block {
        width: 54px;
        height: 54px;
        background-position: center;
        background-size: 26px;
    }
    .items-number-count {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
    .header-right {
        width: 406px;
    }
    .header-left {
        width: calc(100% - 406px);
    }
    .chat-content {
        height: calc(100vh - 334px);
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1550px) {
    .header-main-wrapper {
        padding-bottom: 70px;
    }
    .header-search-wrapper {
        position: absolute;
        bottom: 10px;
        width: calc(100% - 20px);
        /* Cap the search bar so it doesn't stretch the full header width
           (was eating ~1080px at 1440 and crowding the layout). */
        max-width: 680px;
    }
    .search-form-wrapper {
        width: calc(100% - 108px);
        margin-right: 0;
    }
    .menu-item a.shop-menu {
        width: 100px;
    }
    .search-form input {
        width: 100%;
    }
    .search-form {
        width: 100%;
    }
    .logo-wrapper {
        width: 150px;
        margin-right: 15px;
    }
    .navigation {
        width: calc(100% - 165px);
    }
    .chat-content {
        height: calc(100vh - 395px);
    }
}
@media only screen and (max-width: 1580px) {
    .new-footer .footer-main, .new-footer .footer-info {
        gap: 5%;
    }
}
@media only screen and (max-width: 1480px) {
    .header-main-wrapper {
        flex-wrap: wrap;
    }
    .navigation {
        padding-left: 0;
        order: 3;
    }
    .header-right {
        gap: 15px;
        order: 2;
    }
} */

/* @media only screen and (max-width: 1480px) {
   .navigation {
        width: calc(100% - 660px);
    } 
    .header-search-input input {
        width: 370px;
    }
    .header-search-wrapper {
        margin-right: 8px;
    }
} */
@media only screen and (max-width: 1510px) {
    .header-main-wrapper {
        padding-bottom: 50px;
    }
    .navigation {
        position: absolute;
        bottom: 8px;
        left: 18px;
        width: calc(100% - 24px);
    }
    .header-search-wrapper {
        width: calc(100% - 214px);
        margin-left: 32px;
        margin-right: 32px;
    }
    .search-form-wrapper {
        width: calc(100% - 108px);
    }
    .header-search-input input {
        width: 100%;
    }
    .chat-box {
        top: 140px;
    }
    html {
        scroll-padding-top: 150px;
    }
    .page-toast-msg {
        top: 130px;
    }
}
@media only screen and (max-width: 1199px) {
    .col.footer-col.newsletter {
        flex: 1 1 25%;
    }
    li.menu-item>a {
        font-size: 16px;
    }
    li.menu-item.has-children>a:not(.shop-menu)a:after {
        right: 1px;
    }
}
/* @media only screen and (max-width: 1080px) {
    .footer-bottom-link-item a:after, .footer-bottom-link-item>span:after {
        right: -8px;
    }
    .navigation {
        width: calc(100% - 148px);
    }
    img.logo {
        max-width: 140px;
    }
    li.menu-item.has-children>a:not(.shop-menu) {
        padding-right: 20px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1080px) {
    li.menu-item>a {
        font-size: 15px;
    }
    .currency_selector {
        font-size: 15px;
    }
    li.menu-item.has-children>a:not(.shop-menu):after, .currency-with-wrapper:after {
        right: 2px;
    }
} */
@media only screen and (max-width: 1023px) {
    .custom-header_mobile {
        display: block 
   }
    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        background-color: #fff;
        overflow-x: hidden;
        transition: 0.5s;
   }
    .sidenav-inner {
        padding: 0 20px;
        padding-top: 54px;
   }
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s 
   }
    .sidenav .closebtn {
        display: block;
        z-index: 9999;
        position: absolute;
        top: 10px;
        left: 280px;
        width: 30px;
        height: 30px;
        background-color: #fff;
        margin-bottom: 10px;
        -webkit-box-shadow: 1px 1px 6px 0 rgb(0 0 0 / 20%);
        -moz-box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, .2);
        box-shadow: 1px 1px 6px 0 rgb(0 0 0 / 20%);
        -moz-border-radius: 130px;
        -webkit-border-radius: 130px;
        -ms-border-radius: 130px;
        border-radius: 130px;
        background-clip: padding-box;
        text-align: center;
        font-size: 26px;
        line-height: 30px;
        padding: 0;
        text-align: center;
        color: #727272;
        cursor: pointer;
   }
    .mobile-header-inner .left img {
        max-width: 250px;
        vertical-align: bottom 
   }
    .rmp_menu_trigger {
        display: none !important 
   }
    div#overlay {
        width: 0;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 99 
   }
    .mobile-navigation {
        padding: 5px 0;
        margin: 10px 0;
        background-color: #f5f5f5;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        -ms-border-radius: 12px;
        border-radius: 12px;
        background-clip: padding-box 
   }
    .mobile-navigation ul, .mobile-navigation li {
        padding: 0;
        margin: 0;
        list-style: none;
        display: block;
        font-size: 1em 
   }
    .mobile-navigation li {
        text-transform: none;
        display: block;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-bottom: 1px solid #fff 
   }
    .mobile-navigation>ul>li {
        text-transform: uppercase 
   }
    .mobile-navigation a {
        font-size: 14px !important;
        font-weight: 500;
        color: #000;
        padding: 11px 20px;
        display: block 
   }
    nav#nav ul li>a, nav#st-nav ul li>a, #page_header_wrap .tdl-megamenu-wrapper .tdl-megamenu-title, #page_header_wrap .tdl-megamenu-wrapper .tdl-megamenu-title a, .mobile-navigation a, .mob-language-and-currency .select2-chosen {
        text-transform: uppercase;
        line-height: 26px;
        letter-spacing: 0px;
        font-weight: 500;
        font-style: normal;
        font-size: 17px 
   }
    .mobile-navigation .current-menu-item>a, .mobile-navigation .current-menu-ancestor>a, .mobile-navigation .current_page_item>a, .mobile-navigation .current_page_ancestor>a {
        color: rgba(0, 0, 0, .8) !important 
   }
    .mobile-navigation .sub-menu {
        position: relative;
        background: #fff;
        padding: 0;
        margin: 0;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        transition: all .3s ease;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        height: 0;
        overflow: hidden;
        box-shadow: 0 10px 50px 0 rgba(61, 66, 69, .18); 
   }
    .mobile-navigation .more.active+.sub-menu {
        padding: 20px 0 20px 0;
        margin: 5px 0 0 0;
        height: auto 
   }
    .mobile-navigation .sub-menu li {
        border-bottom: none 
   }
    .mobile-navigation .sub-menu a {
        font-size: 13px !important;
        line-height: 20px !important;
        text-transform: none !important;
        font-weight: 400 !important;
        padding: 9px 20px 
   }
    .mobile-navigation  .more, .mobile-navigation .menu-item-language .more {
        display: block;
        position: absolute;
        top: 0;
        right: 15px;
        width: 26px;
        height: 26px;
        margin-top: 12px;
        background-color: #fff;
        color: rgba(0, 0, 0, .6);
        text-align: center;
        font-style: normal;
        font-weight: 400;
        content: "";
        font-size: 10px;
        vertical-align: middle;
        line-height: 27px;
        -moz-border-radius: 26px;
        -webkit-border-radius: 26px;
        -ms-border-radius: 26px;
        border-radius: 26px;
        background-clip: padding-box;
        cursor: pointer;
        overflow: hidden; 
   }
    .mobile-navigation li:last-child {
        border-bottom: none 
   }
    .mobile-navigation .more i {
        font-size: 19px;
        font-style: inherit;
        line-height: 24px 
   }
   .mobile-navigation  .more i.minus {
        display: none;
    }
   .mobile-navigation  .more.active i.plus {
        display: none;
    }
    .mobile-navigation  .more.active i.minus {
        display: block;
        font-size: 24px;
    }
    .mobile-navigation .sub-menu.open {
        display: block;
        -webkit-animation-duration: .3s;
        -moz-animation-duration: .3s;
        -o-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-fill-mode: both;
        -moz-animation-fill-mode: both;
        -o-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: main_nav_anim;
        -moz-animation-name: main_nav_anim;
        -o-animation-name: main_nav_anim;
        animation-name: main_nav_anim;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
   }
    .contact-info {
        width: auto;
        min-width: 270px;
        position: relative;
        text-align: left;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        -ms-border-radius: 6px;
        border-radius: 6px;
        background-clip: padding-box;
        height: 55px;
        height: 3.4375rem;
        line-height: 50px;
        line-height: 3.125rem;
        padding: 0 20px 0 15px;
        padding: 0 1.25rem 0 0.9375rem;
        cursor: pointer;
        display: block;
        background-color: transparent !important;
        border: 1px solid #ededed !important;
        margin-top: 10px;
        padding-left: 55px;
        background-image: url(/assets/img/contact-icon.svg);
        background-repeat: no-repeat;
        background-position: 14px center;
        background-size: 30px;
   }
    span.contact-info-icon {
        height: 3.4375rem;
        line-height: 55px;
        line-height: 3.4375rem;
        width: 1.875rem;
        vertical-align: top;
        display: inline-block;
        margin-right: 7px;
        text-align: center;
   }
    span.contact-info-title {
        color: #000;
        font-size: 17px !important;
        line-height: 1.125rem !important;
        font-weight: 500;
        vertical-align: middle;
        display: inline-block;
   }
    span.contact-info-subtitle {
        margin-top: -2px;
        font-size: 12px !important;
        line-height: 16px !important;
        font-weight: 400;
        display: block;
   }
    span.contact-info-icon img {
        vertical-align: middle;
   }
   .custom-header_mobile li.menu-item>a, .custom-header_mobile li.menu-item .equipment-sales, .sub-menu-item a {
        padding: 20px 0;
        font-weight: 500;
        display: block;
        font-size: 18px;
        line-height: 24px;
        color: #17181A;
    }
    .sub-menu-item a {
        padding-inline: 16px;
        border-radius: 8px;
    }
    .custom-header_mobile li.menu-item {
        border-bottom: 1px solid #F3F3F3;
    }
    .custom-header_mobile li.menu-item.open {
        border: 0;
    }
    .custom-header_mobile .search-form-wrapper {
        display: none;
   }
    .custom-header_mobile .search-form input {
        width: 100%;
   }
    .header-midle .col .custom-header_mobile ul {
        display: block;
        width: 100%;
   }
    .navigation-wrapper, .header-top-wrapper, .desktop .contact-info-main {
        display: none;
   }
   .mobile-menu-toggle {
        position: absolute;
        width: 18px;
        height: 2px;
        background: #2E4454;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .mobile-menu-toggle:after, .mobile-menu-toggle:before {
        content: "";
        position: absolute;
        width: 18px;
        height: 2px;
        background: rgb(0, 0, 0);
   }
    .mobile-menu-toggle::before {
        top: -6px;
   }
    .mobile-menu-toggle::after {
        bottom: -6px;
   }
    span.mobile-menu-text {
        font-size: 15px;
        text-transform: uppercase;
        margin-left: 10px;
   }
    span.menu-icon {
        display: inline-block;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        vertical-align: bottom;
   }
    span.contact-info-title a {
        font-size: 17px;
        padding: 0;
        color: #000;
   }
    .desktop .search-form input {
        position: absolute;
        bottom: -61px;
        right: 0;
        padding-right: 20px;
        display: none;
   }
    .desktop .search-form button {
        margin: 0;
        background-color: var(--light-gray);
        border-radius: 6px;
   }
   /*-- end mobile menu CSS --*/
    .search-data-wrapper {
        margin-top: 120px;
        width: 500px;
   }
    .product-img {
        height: 60px;
        width: 60px;
   }
    .product-img img {
        height: 60px;
        max-width: 60px;
   }
    .product-meta {
        flex: 1 1 calc(100% - 70px);
   }
   .mobile-navigation ul.top-links a, .mobile-navigation ul.top-links span {
        line-height: 21px;
        display: block;
        color: #1A1A1A;
        text-transform: capitalize;
        font-size: 15px!important;
        padding: 12px 20px 12px;
        padding-left: 41px;
        white-space: nowrap;
        font-weight: 400;
        height: 46px;
    }
    .mobile-navigation ul.top-links li {
        position: relative;
    }
    .mobile-navigation ul.top-links img {
        width: 20px;
        position: absolute;
        top: 13px;
        left: 14px;
    }
    .mobile-navigation ul.top-links img.login {
        width: 19px;
        left: 14px;
    }
    .mobile-navigation ul.top-links.user-profile img {
        width: 22px;
        left: 12px;
    }
    .mobile-navigation .top-links li ul.dropdown-content {
        position: initial;
        height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        background: rgba(0, 0, 0, .05);
        box-shadow: none;
        color: #000;
    }
    .mobile-navigation .top-links.active li ul.dropdown-content {
        height: initial !important;
        padding: 10px 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        padding: 0 !important;
    }
    nav#mobile-right-top-bar-navigation {
        padding: 0;
    }
    .mobile-navigation ul.top-links li ul.dropdown-content a {
        color: #000;
        font-weight: 400;
        font-size: 14px !important;
    }
    .mobile-navigation .top-links.active li ul.dropdown-content a {
        padding: 10px 24px;
    }

    .desktop.header-region-wrapper {
        display: none;
    }
    .custom-header_mobile .currency_selector {
        width: 100%;
        border: 1px solid #ededed;
        border-radius: 6px;
        font-size: 14px;
        color: #000;
        padding: 8px 12px;
        height: 40px;
    }
    .custom-header_mobile .currency-with-wrapper {
        margin-top: 12px;
    }
    .custom-header_mobile .header-region-text {
        font-size: 15px;
        text-transform: initial;
    }
    .custom-header_mobile .header-region img {
        width: 22px !important;
        height: 22px !important;
        margin-bottom: 0;
    }
    .custom-header_mobile .header-region-content {
        position: initial;
        width: 100%;
        margin-top: 0;
        background: #eaeaea;
        border-radius: 12px;
        transition: 0.3s ease;
        height: 0;
        opacity: 0;
        padding: 0;
        display: block;
        overflow: hidden;
    }
    .custom-header_mobile .active .header-region-content {
        display: block;
        height: auto;
        padding: 10px 5px;
        opacity: 1;
    }
    .header-region-wrapper-mobile {
        position: relative;
    }
    .currency-with-wrapper {
        position: relative;
        margin-right: 5px;
    }
    .currency-with-wrapper select {
        appearance: none;
        -webkit-appearance: none;
        font-size: 14px;
        background-color: transparent;
    }
    .custom-header_mobile .more {
        display: block;
        position: absolute;
        top: 0;
        right: 10px;
        width: 26px;
        height: 26px;
        margin-top: 9px;
        background-color: #fff;
        color: rgba(0, 0, 0, .6);
        text-align: center;
        font-style: normal;
        font-weight: 400;
        content: "";
        font-size: 10px;
        vertical-align: middle;
        line-height: 27px;
        -moz-border-radius: 26px;
        -webkit-border-radius: 26px;
        -ms-border-radius: 26px;
        border-radius: 26px;
        background-clip: padding-box;
        cursor: pointer;
        overflow: hidden;
   }
   .custom-header_mobile .more i {
        font-size: 19px;
        font-style: inherit;
        line-height: 25px;
    }
    .custom-header_mobile .contact-info {
        height: 46px;
        background-position: 10px center;
        background-size: 26px;
        display: flex;
        align-items: center;
        padding-left: 46px;
    }
    .custom-header_mobile span.contact-info-title a {
        font-size: 16px;
    }
    .custom-header_mobile li.menu-item .equipment-sales {
        font-size: 14px;
        color: #000;
        padding: 11px 20px;
        display: block;
        transition: 0.3s all;
    }
    .custom-header_mobile li.menu-item .equipment-sales:before {
        position: absolute;
        content: '';
        width: 0;
        height: 1px;
        background: var(--white);
        bottom: 15px;
        left: 0;
        right: 0;
    }
    .footer-main>.row {
        flex-wrap: wrap;
        gap: 0;
   }
    .footer-col {
        flex: 1 1 50%;
        padding-right: 15px;
        margin-bottom: 0;
   }
    .footer-col:nth-child(even) {
        padding-right: 0;
   }
    .footer-main {
        padding: 60px 0 30px;
   }
    .col.footer-col {
        flex: 1 1 50%;
   }
    .col.footer-col.newsletter {
        flex: 1 1 50%;
        max-width: 50%;
   }
   .header-midle .col.logo-wrapper {
        width: 220px;
    }
    .header-midle .col {
        width: calc(100% - 220px);
    }
    .payment-card {
        order: 2;
    }
    .new-footer .social-media>a {
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 13px;
    }
    .new-footer .social-media>a svg {
        width: 27px;
    }
    .new-footer .social-media>a.facebook svg {
        width: auto;
        height: 23px;
    }
    .new-footer .container {
        padding: 0;
    }
    .new-footer .footer-main {
        flex-direction: column-reverse;
        gap: 32px;
        padding: 40px;
        margin-top: 80px;
    }
    /* Tablet (768–1023): the link columns are content-sized with a 90px gap and
       don't wrap by default, so 4 columns overflow the padded footer width and
       force a horizontal page scrollbar. Let them wrap with a tighter gap (the
       ≤767 rules take over below this with their own 2-up layout). */
    .new-footer .footer-links-main {
        flex-wrap: wrap;
        gap: 32px 56px;
    }
    .new-footer .footer-main .footer-col-title {
        margin: 0 0 16px;
        line-height: 24px;
    }
    .new-footer .footer-menu-item:first-child {
        margin-top: 0;
    }
    .new-footer .footer-menu-item:last-child {
        margin-bottom: 0;
    }
    .reuzeit-details {
        width: 100%;
    }
    .new-footer .reuzeit-details {
        padding-right: 0;
    }
    .footer-links-wrapper {
        width: 100%;
    }
    .new-footer img.logo {
        max-width: 175px;
    }
    .footer-brand {
        display: flex;
        margin-bottom: 32px;
    }
    .new-footer .reuzeit-details p {
        margin: 0;
        width: calc(100% - 240px);
        text-align: left;
    }
    .footer-logo,.new-footer .reuzeit-details .pn-with-icon {
        width: 240px;
    }
    .footer-contact {
        display: flex;
        align-items: center;
    }
    .new-footer .reuzeit-details .pn-with-icon {
        margin: 0;
    }
    .new-footer .reuzeit-details .btn-wrapper {
        margin: 0;
    }
    .new-footer .phone-number {
        font-size: 18px;
    }
    .new-footer .footer-bottom {
        padding: 40px;
    }
    .new-footer .footer-info {
        flex-direction: column-reverse;
        gap: 32px;
    }
    .new-footer .footer-info .reuzeit-locations {
        width: 100%;
    }
    .reuzeit-locations-main {
        row-gap: 24px;
    }
    .footer-info .footer-col-title {
        margin-bottom: 24px;
    }
    .footer-copyright {
        margin-top: 32px;
        align-items: center;
    }
    .col.legal-information {
        width: 48%;
        display: flex;
        justify-content: space-between;
    }
    .new-footer .footer-info .social-media {
        width: 100%;
    }
    .header-user, .header-main-wrapper nav.navigation {
        display: none;
    }
    .header-main-wrapper {
        display: flex;
        align-items: center;
        padding: 8px 8px 8px 30px;
        box-shadow: 0 10px 50px 0 rgba(61,66,69,.18);
        border-radius: 0 0 24px 24px;
    }
    .custom-header_mobile {
        display: block;
    }
    .sidenav-inner .currency-with-wrapper {
        padding-right: 0;
    }
    .sidenav-inner .currency-with-wrapper:after {
        top: 14px;
        right: 13px;
    }
    header .custom-header_mobile .header-region {
        display: flex;
        align-items: center;
        background: #f5f5f5;
        border-radius: 12px;
        margin: 0;
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0 12px;
        gap: 7px;
        height: 44px;
        margin-bottom: 10px;
    }
    .header-region-content li {
        padding: 3px 8px;
    }
    .header-region-content input[type=checkbox] {
        margin: 0 .4em 0 0;
    }
    .desktop-hide {
        display: block;
   }
   .menu-item a.shop-menu {
        height: 44px;
        padding: 8px 14px;
        align-items: center;
        font-size: 16px;
        width: 98px;
        justify-content: center;
    }
    .search-form input {
        padding: 8px 52px 8px 10px;
        height: 44px;
        width: 100%;
        max-width: 380px;
    }
    .search-form button {
        width: 44px;
        height: 44px;
        margin-left: -44px;
    }
    .notification .user-item-block, span.menu-icon {
        width: 56px;
        height: 44px;
        background-color: #F3F3F3;
        border-radius: 12px;
        background-size: 24px;
    }
    .items-number-count {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
    .header-right {
        gap: 8px;
        width: 198px;
    }
    .header-left {
        width: calc(100% - 198px);
    }
    .header-search-wrapper {
        width: calc(100% - 130px);
        margin: 0;
        padding: 0 16px;
    }
    .search-form-wrapper {
        width: calc(100% - 106px);
        padding-right: 0;
    }
    .search-form {
        width: 100%;
    }
    .sidenav-top .user-item-block {
        width: 100%;
        height: 44px;
        padding: 8px 12px 8px 41px;
        background-color: #F3F3F3;
        border-radius: 12px;
        margin-bottom: 10px;
        background-position: 12px center;
        font-size: 15px;
        line-height: 29px;
        color: #1A1A1A;
        background-size: 21px;
    }
    .sidenav-top .items-number-count {
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .icon-with-text {
        gap: 16px;
    }
    .new-footer .reuzeit-details .btn {
        padding: 6px 32px;
    }
    .new-footer .address-wrapper .phone-number {
        font-size: 18px;
    }
    .footer-copyright .col.mobile-hide {
        display: none;
    }
    .header-search-input input {
        height: 44px;
        padding: 8px 64px 8px 14px;
        max-width: 380px;
    }
    .search-form button, .header-search-input .search_btn {
        height: 44px;
    }
    .select.currency-with-wrapper::after {
        width: 20px;
        height: 20px;
    }
    .currency_selector {
        padding: 8px 20px 8px 0;
    }
    span.menu-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-wrapper {
        position: absolute;
        left: -30px;
        right: 0;
        width: calc(100% + 60px);
        background-color: #fff;
        padding: 34px 30px;
        z-index: 999;
        display: none;
    }
    body .mobile-nav-wrapper {
        padding-bottom: 84px;
        height: calc(100vh - 52px);
    }
    body .mobile-nav-inner {
        height: calc(100% - 30px);
    }
    .header.active-menu .mobile-nav-wrapper {
        display: block;
    }
    .header.active-menu {
        background-color: #fff;
        height: 100vh;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
    }
    .header.active-menu .header-main-wrapper {
        box-shadow: none;
        padding-left: 8px;
    }
    .mobile-nav-inner {
        padding: 0 8px;
        height: 100%;
        overflow: auto;
    }
    .mob-currency-selector {
        display: flex;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 16px;
    }
    .mob-currency-selector .currency-selector {
        width: 33.33%;
        text-align: center;
        padding: 8px 20px;
        background-color: var(--primary-light);
        font-size: 16px;
        line-height: 22px;
        color: #17181A;
        cursor: pointer;
        position: relative;
    }
    .mob-currency-selector .currency-selector.active {
        background-color: var(--primary);
        color: #fff;
    }
    .mob-currency-selector .currency-selector:after {
        content: '';
        width: 1px;
        display: block;
        height: 24px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--primary-border);
    }
    .mob-currency-selector .currency-selector:last-child:after, .mob-currency-selector .currency-selector.active:after {
        display: none;
    }
    .custom-header_mobile li.menu-item>a {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: space-between;
    }
    li.menu-item.open .menu-dropdown svg {
        transform: rotate(180deg);
    }
    .mobile-nav {
        padding: 0 8px;
    }
    .active-menu .menu-close-icon {
        display: block;
    }
    .active-menu .hamburger-icon {
        display: none;
    }
    .new-popup-title {
        font-size: 16px;
        line-height: 20px;
    }
    .new-popup svg {
        width: 20px;
        height: 20px;
    }
    .new-popup-content p, .new-popup-content ul li {
        font-size: 14px;
        line-height: 20px;
    }
    .new-popup-content ol li::marker {
        font-size: 14px;
        line-height: 20px;
    }
    .menu-item .sub-menu {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease;
    }
    .menu-item.open .menu-dropdown {
        color: var(--primary);
    }
    .powered-by {
        font-size: 12px;
        line-height: 12px;
    }

    /*chat box*/
    .chat-box {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #17181a96;
        display: flex;
        justify-content: center;
        align-items: center;
        transition-timing-function: cubic-bezier(.22,.61,.36,1);
        transition-duration: inherit;
        transition-property: opacity;
        z-index: 99994;
        align-items: flex-end;
    }
    .chat-box-inner {
        width: 100%;
        height: 80vh;
        border-radius: 16px 16px 0 0;
    }
    .chat-body {
        height: calc(100% - 56px);
    }
    .chat-content {
        height: calc(100% - 112px);
    }
    .tab-content {
        width: 100%;
    }
    .chat-header {
        border-radius: 0;
        padding: 15px 15px 15px 20px;
    }
    .close-chat-box {
        display: block;
    }
    .chat-box-btn {
        display: flex;
    }
    .chat-box {
        display: none;
    }
    .chat-box-wrapper > .close-chat-box {
        display: none;
    }

    .header.active-menu {
        z-index: 999;
    }
    .tab-bar .header-user {
        display: block;
    }
    .user-item-block {
        background-image: none !important;
    }
    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .tab-bar .header-user {
        display: flex;
        justify-content: space-evenly;
        background-color: #fff;
        box-shadow: 0 -2px 20px 0 rgba(61, 66, 69, .08);
        border-radius: 0;
    }
    .tab-bar .user-item-block {
        width: 64px;
        height: 64px;
    }
    .notification .user-item-block {
        background-image: url(/assets/img/notification-icon.svg) !important;
    }
    .items-number-count {
        right: -3px;
        top: -3px;
    }
    .tab-bar .items-number-count {
        right: 0;
        top: 4px;
    }
    .tab-bar .user-profile .dropdown-content {
        bottom: 64px;
        top: inherit;
        left: 0;
        right: 0;
        width: 100%;
        box-shadow: none;
        background-color: var(--primary-light);
        border-radius: 18px 18px 0 0;
    }
    .tab-bar .dropdown-content a {
        padding: 8px 16px;
        display: block;
        transition: 0.3s all;
        font-size: 16px;
        line-height: 24px;
    }
    .tab-bar .dropdown-content a:hover {
        background-color: #fff;
    }
    .user-profile .dropdown-content.active {
        height: initial;
        padding: 8px 0;
        overflow: visible;
        opacity: 1;
    }
    .header-left .logo-wrapper {
        width: 130px;
    }
    .donot-show-again .checkbox-label {
        font-size: 16px;
        line-height: 24px;
    }
    .offer-popup .btn-wrapper {
        bottom: 64px;
    }
    html {
        scroll-padding-top: 24px;
    }
    .page-toast-msg {
        position: initial;
    }
}
/*end 1023*/

@media only screen and (max-width: 991px) {
    /* page search */
    .page-search {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin-bottom: 0;
    }
    /* aside */
    .aside-increases-profits {
        margin: 0 -20px;
    }
    .new-footer .payment-card img {
        height: 27px;
        width: auto;
    }
    /* Same padding compensation as above, scaled to the 27px mobile row. */
    .new-footer .payment-card img.pm-apple {
        height: 44px;
        margin-block: -9px;
    }
    .new-footer .payment-card img.pm-google {
        height: 46px;
        margin-block: -10px;
    }
    .new-footer .payment-card img.pm-amazon {
        height: 52px;
        margin-block: -13px;
    }
    .new-footer .payment-card img.pm-ach {
        height: 41px;
        margin-block: -7px;
    }
    .payment-card ul {
        gap: 24px;
        /* The row of payment marks is `display: flex` with no wrap, so on a
           phone it ran 715px wide inside a 500px viewport and gave EVERY page
           a 235px horizontal scroll (measured 2026-08-15). Wrapping is enough:
           the icons keep their size and fold onto a second line. */
        flex-wrap: wrap;
        row-gap: 16px;
    }

}
/*end 991*/
@media only screen and (max-width: 849px) {
    .header-main-wrapper {
        padding: 8px;
        padding-bottom: 60px;
    }
    .header-search-wrapper {
        width: calc(100% - 124px);
        padding: 0 8px;
    }
    .header .search-form-wrapper {
        position: absolute;
        left: 8px;
        width: calc(100% - 16px);
        bottom: 8px;
    }
    .header-search-input input {
        padding: 8px 8px 8px 40px;
        max-width: 100%;
    }
    .custom-placeholder {
        left: 40px;
    }
    .custom-placeholder svg path {
        fill: #000;
    }
    .header-search-input .search_btn {
        position: absolute;
        left: 0;
        right: initial;
        top: 0;
        margin: 0;
        background-color: transparent;
        width: 40px;
    }
    .header-search-input .search_btn svg path {
        fill: #878D99;
    }
    .shop-wrapper.menu-item {
        margin-left: auto;
    }
    .menu-item a.shop-menu {
        padding: 8px 16px;
    }
    .notification .user-item-block, span.menu-icon {
        width: 44px;
        height: 44px;
    }
    .header-right {
        width: 170px;
    }
    .header-left {
        width: calc(100% - 170px);
    }
    .header-search-wrapper {
        padding: 0 12px;
    }
}
@media only screen and (max-width: 991px) and (min-width: 768px)  {
    /* aside */
    .aside-increases-profits {
        padding: 60px 20px;
    }
    .aside-increases-profits .img-and-text {
        display: flex;
        margin-bottom: 40px;
        align-items: center;
    }
    .aside-increases-profits .img-and-text .img-block {
        width: 200px;
        max-width: 100%;
    }
    .aside-increases-profits .content {
        width: calc(100% - 200px);
        margin: 0;
        text-align: left;
        padding-left: 30px;
    }
    .aside-increases-profits .content span {
        font-size: 22px;
    }
    .aside-increases-profits .content h2 {
        font-size: 34px;
        line-height: 40px;
    }
    .aside-increases-profits .content p.large-text {
        font-size: 22px;
    }
    .aside-increases-profits .row .row {
        flex-wrap: wrap;
        margin: 0 -6px;
        row-gap: 12px;
        flex-direction: row;
    }
    .aside-increases-profits .row .row .col-6 {
        width: 50%;
        padding: 0 6px;
    }
    .aside-increases-profits .row .form .btn {
        margin-top: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .line-hide a:after {
        display: none;
   }
    .search-data-content-left {
        display: none;
   }
    .search-data-content.right {
        flex: 1 1 100%;
   }
    .search-data-wrapper {
        width: 400px;
   }
   .copyright.desktop-hide {
        text-align: center;
    }
    section {
        padding: 40px 0;
    }
    h1.title, h1 {
        font-size: 24px;
        line-height: 32px;
    }
    h2.title, .h2 {
        font-size: 28px;
        line-height: 36px;
    }
    /* aside */
    .aside-increases-profits {
        padding: 40px 20px;
    }
    /* testimonials */
    .testimonials-inner {
        flex-direction: column;
        gap: 20px;
        margin-top: 22px;
    }
    .testimonial-block {
        width: 100%;
    }
    .testimonials p {
        font-size: 16px;
        line-height: 24px;
    }
    .testimonials .position {
        margin-top: 14px;
    }
    .testimonials p {
        font-size: 16px;
        line-height: 24px;
    }
    .testimonials p.last-para {
        margin: 20px 0 0;
        font-size: 14px;
        line-height: 22px;
    }
    .testimonials .position p span {
        font-size: 15px;
    }
    /* trusted partners */
    .trusted-partners-slider {
        margin-top: 30px;
    }
    .singal-video-block {
        flex: 0 0 100%;
        padding: 0;
    }
    .footer-logo, .new-footer .reuzeit-details .pn-with-icon {
        width: 100%;
    }
    .new-footer .reuzeit-details p {
        width: 100%;
    }
    .footer-brand {
        margin-bottom: 18px;
        flex-direction: column;
        gap: 24px;
    }
    .new-footer img.logo {
        max-width: 160px;
    }
    .footer-contact {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }
    .btn {
        padding: 0 15px;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
    }
    .new-footer .reuzeit-details .btn {
        padding: 0 15px;
        height: 40px;
        line-height: 40px;
    }
    .reuzeit-details .btn-wrapper {
        gap: 14px;
    }
    .new-footer .phone-number {
        font-size: 16px;
    }
    .row.footer-links-main {
        flex-wrap: wrap;
        gap: 0;
        row-gap: 24px;
    }
    .col.footer-col {
        flex: 1 1 50%;
        width: 50%;
        margin-bottom: 0;
    }
    .new-footer .footer-menu-item {
        margin: 2px 0;
    }
    .new-footer .footer-bottom {
        padding: 30px 20px;
    }
    .new-footer .social-media>a {
        width: 62px;
        height: 62px;
        border-radius: 14px;
    }
    .new-footer .social-media>a svg {
        width: 30px;
    }
    .new-footer .social-media>a.facebook svg {
        height: 26px;
    }
    .new-footer .footer-info {
        gap: 40px;
    }
    .footer-info .footer-col-title {
        margin-bottom: 24px;
    }
    .reuzeit-locations-main {
        column-gap: 24px;
        row-gap: 0;
        flex-wrap: nowrap;
        overflow: auto;
    }
    .footer-copyright {
        margin-top: 40px;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 24px;
    }
    .new-footer .reuzeit-locations-main .col {
        width: 260px;
        min-width: 260px;
    }
    .new-footer .reuzeit-locations .address {
        white-space: normal;
    }
    .payment-card {
        order: inherit;
    }
    .payment-card ul {
        gap: 30px;
    }
    .new-footer .footer-main {
        flex-direction: column-reverse;
        gap: 32px;
        padding: 30px 20px;
        margin-top: 60px;
    }
    .popup-main .popup-title {
        font-size: 20px;
        line-height: 26px;
    }
    .popup {
        padding: 15px;
    }
    .pro-card-btn.btn {
        height: 50px;
        line-height: 50px;
    }
    .container {
        padding: 0 20px;
    }
    header.header .container {
        padding: 0;
    }
    .login-popup .popup-title {
        font-size: 32px;
        line-height: 40px;
    }
    .login-popup.popup-main .row.fieldset .col-6 {
        width: 100%;
    }
    .pn-with-icon svg {
        width: 24px;
        height: auto;
    }
    .new-footer .footer-main .footer-col-title {
        margin: 0 0 12px;
    }
    .reuzeit-locations-main::-webkit-scrollbar-track, 
    .reuzeit-locations-main::-webkit-scrollbar, 
    .reuzeit-locations-main::-webkit-scrollbar-thumb,
    .fancybox-thumbs::-webkit-scrollbar-track, 
    .fancybox-thumbs::-webkit-scrollbar, 
    .fancybox-thumbs::-webkit-scrollbar-thumb {
        display: none;
    }
    .col.legal-information {
        width: 100%;
        justify-content: space-between;
    }
    .header .currency-with-wrapper {
        display: none;
    }
    .header-right {
        width: 92px;
        gap: 4px;
    }
    .header-left {
        width: calc(100% - 92px);
    }
    .header-search-wrapper {
        padding: 0 8px;
    }
    .mobile-nav-wrapper {
        padding: 40px 20px 20px;
        width: 100%;
        left: 0;
        right: 0;
    }
    .mobile-nav-inner {
        padding: 0;
    }
    .mob-currency-selector .currency-selector {
        padding: 8px;
        font-size: 14px;
        line-height: 20px;
    }
    .custom-header_mobile li.menu-item>a, .sub-menu-item a {
        padding: 10px 0;
        font-size: 16px;
        line-height: 24px;
    }
    .sub-menu-item a {
        padding: 8px 16px;
        border-radius: 8px;
    }
    .add-to-cart-popup .action-buttons, .add-to-cart-popup-guest .action-buttons {
        justify-content: space-between;
        flex-direction: column;
        gap: 10px;
    }
    .add-to-cart-popup .action-buttons .btn, .add-to-cart-popup-guest .action-buttons .btn {
        justify-content: center;
    }
    .add-to-cart-popup-guest .action-buttons {
        flex-direction: column-reverse;
    }
    .login-popup.email-varified-popup .popup-wrapper {
        align-items: center;
    }
    .login-popup.email-varified-popup .popup-content {
        max-height: 100%;
    }
    .login-popup.email-varified-popup .popup-inner {
        max-height: 100%;
        padding-bottom: 24px;
        width: calc(100% - 40px);
        border-radius: 24px;
    }
    .login-popup.email-varified-popup .row.fieldset {
        overflow: initial;
    }
    .t-and-c_popup .popup-title {
        font-size: 28px;
        line-height: 34px;
    }
    .offer-popup .btn {
        margin: 0;
        padding: 0 25px;
        height: 50px;
        font-size: 18px;
    }
    .disposition-strategy-wrapper .new-popup {
        width: calc(100% + 32px);
        left: -16px;
        right: 0;
        top: initial;
        bottom: initial;
        margin-top: 28px;
    }
    .disposition-strategy-wrapper .new-popup .polygon-shape {
        display: none;
    }
    .page-toast-msg {
        position: initial;
        padding: 0 20px;
    }
}
/*end 767*/
@media only screen and (max-width: 639px) {
    .pro-card-products-box .price-wrapper {
        gap: 5px;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 8px;
    }
    .t-and-c_popup .popup-content {
        height: calc(100% - 164px);
    }
}
@media only screen and (min-width: 540px) and (max-width:680px ) {
    .cart-item .region-and-condition {
        display: flex;
        flex-direction: column;
    }
    .free-shipping-block {
        padding: 0 0 0 1px;
        margin: 0;
        gap: 5px;
        line-height: 22px;
    }
    .free-shipping-block span.block-icon {
        width: 16px;
        height: 16px;
    }
    .cart-wrapper .region:after, .checkout-page .region:after {
        display: none;
    }
    .cart-wrapper .region, .checkout-page .region  {
        margin: 0;
        padding: 0;
    }
    .free-shipping-block:before {
        display: none;
    }
}

@media only screen and (max-width: 540px) {
    .header-midle {
        align-items: center;
        gap: 18px;
   }
    span.mobile-menu-text {
        display: none;
   }
    .search-data-wrapper {
        margin-top: 110px;
   }
    .data-title-wrapper .close-btn-wrapper .closebtn {
        font-size: 23px;
   }
}
/*end 540*/
@media only screen and (max-width: 479px) {
    .desktop .search-form input {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        bottom: -52px;
        border-radius: 0;
   }
    .search-data-wrapper {
        margin-top: 109px;
        width: 100%;
        left: 0;
        right: 0;
   }
   .free-shipping-block:before {
        display: none;
   }
   .free-shipping-block {
        padding: 0 0 0 1px;
        margin: 0;
        gap: 5px;
        line-height: 22px;
    }
    .free-shipping-block span.block-icon {
        width: 16px;
        height: 16px;
    }
    .col.footer-col {
        flex: 1 1 1000%;
   }
   .footer .newsletter {
        padding: 30px 14px;
    }
    .footer-main {
        padding: 30px 0 22px;
    }
    footer img.logo {
        max-width: 128px;
    }
    h1.title, h1 {
        font-size: 24px;
        line-height: 32px;
    }
    h2.title, .h2 {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 12px;
    }
    /* aside */
    .aside-increases-profits {
        margin: 0 -14px;
        padding: 40px 14px;
    }

    .header-midle .col.logo-wrapper {
        width: 175px;
    }
    .header-midle .col {
        width: calc(100% - 175px);
    }
    .page-title {
        padding: 20px 14px;
    }
    .singal-video-block .img-block:after {
        width: 34px;
        height: 34px;
    }
    .new-footer .reuzeit-locations-main .col {
        width: 100%;
    }
    .header-main-wrapper {
        padding-bottom: 60px;
    }
    .mobile-menu-toggle, .mobile-menu-toggle:after, .mobile-menu-toggle:before {
        width: 16px;
    }
    header .container {
        padding: 0;
    }
    .login-popup .popup-inner {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
    }
    .login-popup .popup-wrapper {
        align-items: end;
    }
    .login-popup .popup-content {
        padding: 0 24px 35px;
    }
    .login-popup .sign-btn {
        margin-top: 60px;
    }
    .login-popup .action-link {
        margin-top: 16px;
    }
    .login-popup .popup-title, .login-popup .popup-title strong, .login-popup .popup-title strong span {
        font-size: 24px;
        line-height: 32px;
    }
    .reuzeit-details .btn-wrapper {
        gap: 8px;
        width: 100%;
    }
    .new-footer .reuzeit-details .btn {
        width: calc(50% - 4px);
        justify-content: center;
    }
    .col.legal-information {
        flex-direction: column-reverse;
        gap: 24px;
    }
    .row.footer-links-main {
        row-gap: 20px;
    }
    .info-poppup .popup-wrapper {
        align-items: flex-end;
    }
    .info-poppup .popup-inner {
        max-width: 100%;
        width: 100%;
        border-radius: 24px 24px 0 0;
        padding: 24px 24px 40px;
    }
    .info-poppup .action-buttons {
        gap: 8px;
    }
    .mobile-nav-wrapper {
        padding: 30px 20px 20px;
    }
    .t-and-c_popup .popup-inner {
        padding: 24px 4px;
    }
    .t-and-c_popup p, .t-and-c_popup strong, .t-and-c_popup li {
        font-size: 14px;
        line-height: 20px;
    }
    .t-and-c_popup .h3 {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 10px;
    }
    .t-and-c_popup .popup-text>ol> li::marker {
        font-size: 20px;
    }
    .t-and-c_popup ol {
        padding-left: 22px;
    }
    .t-and-c_popup ul li {
        line-height: 20px;
    }
    .t-and-c_popup ul {
        padding-left: 28px;
    }
    .t-and-c_popup ol ol li {
        line-height: 20px;
    }
    .t-and-c_popup ol ol ul {
        padding-left: 12px;
    }
    .t-and-c_popup table {
        width: 100%;
    }
    .t-and-c_popup .popup-title {
        font-size: 24px;
        line-height: 30px;
    }
    .t-and-c_popup .popup-content {
        height: calc(100% - 156px);
    }
}
/*end 479*/

@media only screen and (max-width: 389px) {
    .new-footer .reuzeit-details .btn {
        width: 100%;
        height: 50px;
    }
    .new-footer .social-media>a {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }
    .new-footer .social-media>a svg {
        width: 24px;
        height: auto;
    }
    .new-footer .social-media>a.facebook svg {
        height: 22px;
    }
    .email-varified-popup.popup-main .popup-title, 
    .email-varified-popup .popup-title strong, 
    .email-varified-popup .popup-title strong span {
        font-size: 20px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 374px) {
    .payment-card ul {
        gap: 18px;
    }
    .user-item-block {
        background-size: 20px;
    }
    .mobile-menu-toggle, .mobile-menu-toggle:after, .mobile-menu-toggle:before {
        width: 14px;
    }
    .registration-popup .terms-and-policy {
        max-width: 200px;
        margin-inline: auto;
    }
    .login-popup.registration-popup .popup-title, .login-popup.registration-popup .popup-title strong, .login-popup.registration-popup .popup-title strong span {
        font-size: 20px;
        line-height: 32px;
    }
    .menu-item a.shop-menu {
        padding: 6px 12px;
        width: auto;
        height: 40px;
    }
    .menu-item a.shop-menu svg {
        width: 20px;
        height: 20px;
    }
    .notification .user-item-block, span.menu-icon {
        width: 40px;
        height: 40px;
    }
    .header-right {
        width: 84px;
    }
    .header-left {
        width: calc(100% - 84px);
    }
    .header-search-wrapper {
        width: calc(100% - 112px);
    }
    .custom-placeholder span {
        display: none;
    }
    .powered-by {
        font-size: 10px;
        line-height: 10px;
    }
    .header-left .logo-wrapper {
        width: 108px;
    }

    .icon-tag {
        font-size: 14px;
    }
    .icon-tag .ico {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
    }
    .select-with-arrow:after {
        width: 16px;
        height: 16px;
        right: 6px;
    }
    .select-with-arrow {
        padding-right: 26px !important;
    }
    .custom-select .options {
        min-width: 250px;
    }
}
/*end 374*/

@media only screen and (min-width: 1024px) {
    html {
      zoom: 0.8;
    }
    /* html:has(.calendar-page) {
      zoom: 1;
    } */
    .radio {
        min-width: 23px;
        min-height: 23px;
    }
    input[type="radio"]:checked+label .radio::after {
        width: 16px;
        height: 16px;
    }
    .tag, .badge-status {
        line-height: 19px;
    }
    header.header {
        position: sticky;
        /* Must stay above the .page-toast-msg banner (z-index:9999) so nav
           dropdowns/search autocomplete (trapped in this stacking context)
           render and stay clickable above the toast; modals are 99994. */
        z-index: 10000;
        top: 0;
    }
}

/* ===============================================================
 * Shared address-form styles. Used by every page that renders the
 * views/generic/_address-panel.php partial (cart, registration popup,
 * layout Add-Address popup, source-request, pickup-request x2,
 * disposition-request) plus the site-wide #address-verify-popup
 * modal living in views/layouts/main.php.
 *
 * Lives here (global.css, loaded on every page) rather than cart.css
 * so the verify modal + panel styles apply everywhere the partial
 * renders, not just on the cart page.
 * =============================================================== */

/* Small muted hint alongside a label, e.g.
   "Address Line 2 (Apt, Suite, PO Box, etc.)". */
.edit-address-row label .edit-address-hint {
    font-weight: 400;
    color: #878D99;
    font-size: 11px;
    margin-left: 4px;
}

/* Inline field error shown beneath the ZIP input when US format check
   fails. Stays empty (invisible) until JS writes text into it. */
.edit-address-row .edit-address-error {
    color: #D14343;
    font-size: 12px;
    margin-top: 4px;
    min-height: 14px;
}
.edit-address-input.is-invalid {
    border-color: #D14343;
}

/* "Verify your address" popup. Opens after the form's submit button
   when Google's geocoded suggestion differs from the user's entry (or
   when Google returns no match — in that case only the user's entry
   shows). User picks one option and the chosen values are written
   into the form's fields before the actual submit. */
#address-verify-popup .address-verify-intro {
    font-size: 14px;
    color: #51575E;
    margin: 0 0 16px;
}
#address-verify-popup .address-verify-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
#address-verify-popup .address-verify-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s, background .15s;
    text-align: left;
}
#address-verify-popup .address-verify-option:hover {
    border-color: var(--primary);
}
#address-verify-popup .address-verify-option input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    accent-color: var(--primary);
    flex-shrink: 0;
}
#address-verify-popup .address-verify-option-body {
    flex: 1 1 auto;
    min-width: 0;
}
#address-verify-popup .address-verify-option-title {
    font-size: 12px;
    font-weight: 600;
    color: #878D99;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
    text-transform: uppercase;
}
#address-verify-popup .address-verify-option-address {
    font-size: 14px;
    line-height: 20px;
    color: #17181A;
    word-break: break-word;
}
#address-verify-popup .address-verify-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
#address-verify-popup .btn.btn-small.btn-light {
    background: #fff;
    color: #17181A;
    border: 1px solid #E5E7EB;
}
#address-verify-popup .btn.btn-small.btn-light:hover {
    border-color: var(--primary);
    color: var(--primary);
}
/* ---------------------------------------------------------------------------
 * Out-of-stock lead popup — SHARED, so its styling has to live in global.css.
 *
 * The popup renders on the product page, the shop/home grid and the related
 * carousel. Everything it needs was in product-details.css, which only the
 * product page loads — so on /shop the same popup came up without its icon and
 * with a different field layout. A shared component cannot depend on a
 * page-specific stylesheet.
 *
 * Scoped by id so the existing .product-enquiry-popup rules are untouched.
 * ------------------------------------------------------------------------ */
#out_of_stock_lead_popup .popup-img {
    width: 160px;
    height: 160px;
    margin: 0 auto 8px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#out_of_stock_lead_popup .popup-img.enquiry-modals {
    background-image: url(/assets/img/store-shop.png);
}
#out_of_stock_lead_popup .popup-intro-text {
    font-size: 14px;
    line-height: 20px;
    color: #555;
    text-align: center;
    margin: 0 0 16px;
}
/* Dialog box: the shared 710px .popup-inner is far too wide for six short
   fields, and without an inner scroll a long form runs off a short viewport. */
#out_of_stock_lead_popup .popup-inner {
    max-width: 460px;
    max-height: 90vh;
    overflow: hidden;
}
#out_of_stock_lead_popup .popup-content {
    max-height: calc(90vh - 112px);
    overflow: auto;
}
/* Field layout: global .row is a bare display:flex, so on pages that don't
   load product-details.css all six fields were squeezing onto ONE line. */
#out_of_stock_lead_popup .row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
#out_of_stock_lead_popup .row .col {
    width: 100%;
}
#out_of_stock_lead_popup .fancy-input textarea {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    outline: none;
    height: 56px;
    color: #17181a;
    box-sizing: border-box;
    font-weight: 500;
    min-height: 120px;
    vertical-align: bottom;
}
#out_of_stock_lead_popup .btn.submit-btn {
    border-color: var(--primary-light);
    font-size: 16px;
    line-height: 24px;
    width: 100%;
    justify-content: center;
    padding: 6px 10px;
    margin-top: 26px;
    height: 50px;
}
#out_of_stock_lead_popup .btn.submit-btn:hover svg path {
    fill: var(--primary);
}
@media only screen and (max-width: 767px) {
    /* Bottom sheet on phones, same as every other dialog on the product page. */
    #out_of_stock_lead_popup .popup-title {
        font-size: 24px;
        line-height: 32px;
    }
    #out_of_stock_lead_popup .popup-wrapper {
        align-items: end;
    }
    #out_of_stock_lead_popup .popup-inner {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
    }
}

/* An ROI whose expense base is too small to support it (see
   Common::ROI_MIN_EXPENSE). Shown in place of the percentage, deliberately
   unstyled by the red-to-green ROI scale so it cannot read as performance. */
.roi-not-meaningful {
    color: #878D99;
    font-weight: 500;
    cursor: help;
    border-bottom: 1px dotted #C3C7CE;
}

/* ── Shared on-cycle pickup: the choice popup (views/generic/_shared-pur-popup.php)
   Root is `info-poppup` because its width/shell rules live HERE, in the
   always-loaded global.css — `create-customer-popup` is styled in
   new-customer.css, which My Equipment does not load. The internals still
   follow the Create New Customer gold standard. */
/* Served through the /cdn resizer, not the raw file: the original is a 1.4 MB
   PNG and the same artwork at 320px WebP is ~20 KB. CSS cannot call cfImg(), so
   the transformed URL is written out by hand — 320 is one of the widths the
   resizer accepts (anything else 400s and the icon would silently vanish). */
.info-poppup .popup-img.shared-pickup-modals {
    background-image: url(https://image.reuzeit.com/cdn/files/oncycle_track_2.png?width=320&format=webp&quality=82);
}
/* Beats `.info-poppup .popup-inner`, which is narrower — two collection
   addresses need the room to stay on one line each. */
.popup-main.shared-pur-popup .popup-inner {
    max-width: 560px;
}
.shared-pur-popup .popup-title {
    text-align: left;
}
.shared-pur-intro {
    font-size: 14px;
    line-height: 20px;
    color: #454B54;
    text-align: center;
    margin: 8px 0 16px;
}
.shared-pur-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Each option is a whole clickable row, not a 14px radio target — the address
   underneath is the part the user actually has to read to choose correctly. */
.shared-pur-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #cdcfd4;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    background: #fff;
}
.shared-pur-option.selected {
    border-color: #2AA466;
    background: #f0fff5;
}
.shared-pur-option .shared-pur-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cdcfd4;
    flex: 0 0 18px;
    margin-top: 2px;
    position: relative;
}
.shared-pur-option.selected .shared-pur-radio {
    border-color: #2AA466;
}
.shared-pur-option.selected .shared-pur-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #2AA466;
}
.shared-pur-option-body {
    flex: 1;
    min-width: 0;
}
/* These are <span>s inside a <span> body, so they need to be told to stack.
   Left inline, the site name, the address and the countdown ran together into
   one unreadable paragraph ("…Gilead-SciencesCollected from 371 Foster City…"). */
.shared-pur-option-site,
.shared-pur-option-address,
.shared-pur-option-meta {
    display: block;
}
.shared-pur-option-site {
    font-size: 14px;
    font-weight: 700;
    color: #17181A;
}
.shared-pur-option-address {
    font-size: 13px;
    line-height: 18px;
    color: #878D99;
    margin-top: 2px;
}
.shared-pur-option-meta {
    font-size: 13px;
    line-height: 18px;
    color: #454B54;
    margin-top: 6px;
}
.shared-pur-option-meta .shared-pur-countdown {
    color: #2AA466;
    font-weight: 700;
}
.shared-pur-option-mine {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #2AA466;
    background: #e7f7ee;
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 6px;
    vertical-align: middle;
}