/* ==========================================================================
   SOUQ WHOLESALE — storefront foundation (tokens, base, primitives, overlays)
   One neutral surface system with restrained purple accents. IBM Plex Sans (Latin) and
   IBM Plex Sans Arabic are drawn as one family, so mixed Arabic/English lines keep the same
   rhythm. No serif or monospace: codes, prices and dates use tabular figures instead.
   Storefront components (header, sections, product card/row, suppliers, categories, brands,
   footer) live in workspace.css, loaded right after this file. Dark tokens: dark.css.
   ========================================================================== */
:root{
  /* palette — white page, cool neutral structure, purple only for actions and identity */
  --bg:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:#FFFFFF;
  --tint:#F7F6FA;          /* quiet fill: hovers, thumbnails, inline panels */
  --line:#E4E3EA;          /* hairline */
  --line-2:#EEEDF2;        /* inner hairline */
  --ink:#18161D;           /* text */
  --muted:#5D5968;         /* secondary text, AA on white */
  --muted-2:#86828F;       /* meta / disabled */
  --brand:#6D28D9;         /* Souq purple */
  --brand-press:#5B21B6;
  --brand-subtle:#FAF7FF;
  --brand-ink:#4C1D95;
  --brand-soft:#F1EAFE;
  --coral:#C2382C;         /* destructive, low stock, errors */
  --coral-soft:#F8E1DC;
  --green:#1F7A43;         /* availability */
  --green-soft:#E3F2E8;
  --gold:#92600A;          /* ratings, warnings */
  --accent:#EDE7FE;        /* offers and discount tags */
  --accent-ink:#4C1D95;
  --rail:#2E1065;

  /* type — one sans system; --serif/--mono kept as aliases so older page styles inherit it */
  --sans:"IBM Plex Sans","IBM Plex Sans Arabic",ui-sans-serif,system-ui,sans-serif;
  --arabic:"IBM Plex Sans Arabic","IBM Plex Sans",Tahoma,sans-serif;
  --serif:var(--sans);
  --mono:var(--sans);
  --fs-xs:12px; --fs-sm:13px; --fs-md:14.5px; --fs-lg:16px;
  --fs-title:15.5px;       /* product names */
  --fs-h3:18px; --fs-h2:24px; --fs-h1:32px;

  /* space, shape, depth */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --wrap:1440px; --gutter:32px;
  --ctl:40px; --ctl-sm:34px;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --sh-sm:0 1px 2px rgba(24,22,29,.05);
  --sh:0 1px 2px rgba(24,22,29,.05),0 16px 40px -16px rgba(24,22,29,.22);
  --ring:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);
  --ease:cubic-bezier(.3,.7,.2,1);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
/* eShop bundles force body{display:flex}; the storefront uses normal block flow. */
body{margin:0;background:#FFFFFF!important;color:var(--ink);font-family:var(--sans);font-size:var(--fs-md);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;display:block}
[dir="rtl"],[dir="rtl"] body,[dir="rtl"] input,[dir="rtl"] button,[dir="rtl"] select,[dir="rtl"] textarea{font-family:var(--arabic)}
[dir="rtl"] body{line-height:1.65}
/* Arabic letters must join: tracking is never applied in RTL, whatever an older page style says */
html[dir="rtl"] body *{letter-spacing:0!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:1200px){:root{--gutter:24px}}
@media (max-width:640px){:root{--gutter:16px}}
a{color:inherit;text-decoration:none} a:visited,a:hover,a:active{color:inherit}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance;font-family:inherit}
h1,h2{font-weight:600;letter-spacing:-.01em;line-height:1.25}
h3,h4{font-weight:600;line-height:1.35}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}
::selection{background:var(--brand);color:#fff}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.num{font-variant-numeric:tabular-nums}
.mono{font-variant-numeric:tabular-nums;letter-spacing:0}
.ui-ic{width:1.15em;height:1.15em;flex-shrink:0;vertical-align:-.18em}
[dir="rtl"] .ui-ic.flip{transform:scaleX(-1)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- wordmark ---------- */
.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);line-height:1;white-space:nowrap}
.wordmark__mono{width:32px;height:32px;border-radius:var(--r-sm);background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex-shrink:0}
.wordmark__name{font-weight:700;font-size:20px;letter-spacing:-.01em}
.wordmark--inverse{color:var(--bg)} .wordmark--inverse .wordmark__mono{background:var(--accent);color:var(--accent-ink)}
.wordmark--compact .wordmark__mono{width:28px;height:28px;font-size:12px} .wordmark--compact .wordmark__name{font-size:18px}

/* ---------- mobile drawer (CSS-only) ---------- */
.oc-toggle{position:fixed;width:0;height:0;opacity:0;pointer-events:none}
.burger{display:none;width:42px;height:42px;flex-shrink:0;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);cursor:pointer}
.burger .ui-ic{width:21px;height:21px}
.oc-backdrop{position:fixed;inset:0;background:rgba(46,16,101,.42);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s}
.oc{position:fixed;top:0;bottom:0;inset-inline-start:0;width:300px;max-width:84vw;background:var(--bg);z-index:61;box-shadow:var(--sh);transform:translateX(-100%);transition:transform .28s var(--ease);display:flex;flex-direction:column;padding:18px;overflow-y:auto}
[dir="rtl"] .oc{transform:translateX(100%)}
.oc-top{display:flex;align-items:center;justify-content:space-between;padding:0 2px 16px;border-bottom:1px solid var(--line)}
.oc-x{cursor:pointer;width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r);color:var(--muted)}
.oc-x:hover{background:var(--panel-2);color:var(--ink)}
.oc-x .ui-ic{width:20px;height:20px}
.oc-links{display:flex;flex-direction:column;padding:8px 0}
.oc-links a{padding:12px 6px;font-size:15.5px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between}
.oc-links a:hover{color:var(--brand)}
.oc-links.sub a{font-size:14px;color:var(--muted);border-bottom:0;padding:9px 6px}
.oc-div{height:1px;background:var(--line);margin:8px 0}
.oc-lang{display:flex;gap:8px;padding:6px 6px 12px}
.oc-lang a{border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 14px;font-family:var(--mono);font-size:12px;color:var(--ink)}
.oc-lang a.on{background:var(--brand-fill,var(--brand));color:#fff;border-color:var(--brand-fill,var(--brand))}
.oc-toggle:checked ~ .oc{transform:translateX(0)}
.oc-toggle:checked ~ .oc-backdrop{opacity:1;pointer-events:auto}
body:has(.oc-toggle:checked){overflow:hidden}

/* ---------- spotlight results (header.php keeps the markup) ---------- */
#spotlight-backdrop{display:none;position:fixed;inset:0;z-index:9999;background:rgba(46,16,101,.45)}
#spotlight-box{position:absolute;top:10%;left:50%;transform:translateX(-50%);width:min(660px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
#spotlight-input-row{display:flex;align-items:center;padding:0 18px;height:60px;border-bottom:1px solid var(--line);gap:12px}
#spotlight-input-row .ui-ic{width:20px;height:20px;color:var(--muted)}
#search-product{flex:1;border:none;outline:none;font-size:16px;color:var(--ink);background:transparent;font-family:inherit}
#search-product::placeholder{color:var(--muted-2)}
.sp-esc-hint{border:1px solid var(--line);border-radius:4px;padding:2px 8px;font-size:11px;color:var(--muted);cursor:pointer;font-family:var(--mono);background:var(--bg)}
#spotlight-results{max-height:440px;overflow-y:auto;padding:6px 0 10px}
#search_items{list-style:none;margin:0;padding:0 8px}
#search_items .item{border-radius:var(--r-sm)}
#search_items .item:hover{background:var(--panel-2)}
#search_items .item a{text-decoration:none;color:inherit}
#search_items .mini-list-item{padding:9px 10px}
#search_items .mini-image img{border-radius:var(--r-sm);object-fit:contain;background:#fff;border:1px solid var(--line-2)}
#search_items .item-title{font-weight:500;font-size:14px;color:var(--ink)}

/* ---------- cart drawer ---------- */
#offcanvas-cart,#offcanvas-notifications{width:min(420px,92vw);max-width:92vw;background:#FFFFFF!important;border:none;border-inline-start:1px solid var(--line)!important;box-shadow:var(--sh)}
#offcanvas-cart .offcanvas-header,#offcanvas-notifications .offcanvas-header{padding:20px 22px 16px;border-bottom:1px solid var(--line);align-items:center}
#offcanvas-cart .offcanvas-header h3,#offcanvas-notifications .offcanvas-header h3{font-family:var(--serif);font-size:22px;font-weight:600;margin:0}
[dir="rtl"] #offcanvas-cart .offcanvas-header h3{font-family:var(--arabic)}
#offcanvas-cart .offcanvas-body{padding:18px 22px}
#offcanvas-cart #cart-item-sidebar>h1,#offcanvas-cart #cart-item-sidebar>h4{font-family:var(--sans);font-size:15px!important;font-weight:500;color:var(--muted);margin:8px 0 0;text-align:center}
#offcanvas-cart #cart-item-sidebar>.cart-empty-ic{width:84px;height:84px;border-radius:50%;border:1px dashed var(--line);display:grid;place-items:center;margin:34px auto 10px;color:var(--muted-2)}
#offcanvas-cart #cart-item-sidebar>.cart-empty-ic svg{width:36px;height:36px}
#offcanvas-cart .shopping-cart-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px!important}
#offcanvas-cart .cart-img{width:64px;height:64px;min-width:64px;border-radius:var(--r-sm);overflow:hidden;background:#fff;border:1px solid var(--line-2);margin:0;padding:5px;display:flex;align-items:center;justify-content:center}
#offcanvas-cart .cart-img a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
#offcanvas-cart .cart-img img{max-width:100%;max-height:100%;object-fit:contain}
#offcanvas-cart .post-title{font-size:13.5px!important;font-weight:600;line-height:1.35;margin-bottom:2px!important;color:var(--ink)}
#offcanvas-cart .price{margin:2px 0 0}
#offcanvas-cart .price .amount{color:var(--muted);font-weight:500;font-size:13px}
#offcanvas-cart .product-line-price{font-weight:600;color:var(--ink);font-size:14px}
#offcanvas-cart .badge-danger{background:var(--coral-soft);color:var(--coral);border-radius:3px;font-weight:500;padding:2px 6px}
#offcanvas-cart .header_qty{width:92px!important;min-width:92px;padding-inline:6px!important;height:36px;border:1px solid var(--line)!important;border-radius:var(--r-sm);text-align:center;font-weight:600;background:var(--panel)}
#offcanvas-cart .remove-product{background:transparent!important;color:var(--muted)!important;border:1px solid var(--line)!important;border-radius:var(--r-sm);width:32px;height:32px;display:grid;place-items:center;padding:0!important}
#offcanvas-cart .remove-product:hover{color:var(--coral)!important;border-color:var(--coral)!important}
#offcanvas-cart .offcanvas-footer{padding:16px 22px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column-reverse;gap:10px;margin:0}
#offcanvas-cart .offcanvas-footer .btn{width:100%;margin:0!important;border-radius:var(--r-sm)!important;height:46px;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
#offcanvas-cart .btn-red{background:transparent!important;border:1px solid var(--line)!important;color:var(--ink)!important}
#offcanvas-cart .btn-red:hover{border-color:var(--ink)!important}
#offcanvas-notifications .user-notification-item{display:block;padding:12px 6px;border-bottom:1px solid var(--line-2)}
#offcanvas-notifications .user-notification-footer,#user_notification_nav .user-notification-footer{display:block;padding:11px 14px;text-align:center;color:var(--brand);font-weight:600}
#offcanvas-notifications.offcanvas:not(.show){visibility:hidden!important}
#user_notification_nav{position:relative}
#user_notification_nav .user-notification-panel{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:300px;max-width:360px;max-height:420px;overflow-y:auto;z-index:1050;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:8px;display:none;text-align:start}
#user_notification_nav .user-notification-item{display:block;padding:11px 8px;border-bottom:1px solid var(--line-2);border-radius:var(--r-sm)}
#user_notification_nav .user-notification-item:hover{background:var(--panel-2)}
@media (max-width:991.98px){#user_notification_nav .user-notification-panel{display:none!important}}

/* ---------- bootstrap primitives, re-skinned ---------- */
.btn{border-radius:var(--r-sm)!important;font-weight:600;letter-spacing:0;box-shadow:none!important;transition:background .15s,border-color .15s,color .15s}
.btn-primary,.btn-yellow,.btn-c{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.btn-primary:is(:hover,:focus,:active),.btn-primary.active,.btn-c:is(:hover,:focus){background:var(--brand-press)!important;border-color:var(--brand-press)!important;color:#fff!important}
.btn-primary:disabled,.btn-primary.disabled{background:var(--panel-2)!important;border-color:var(--line)!important;color:var(--muted-2)!important;opacity:1}
.btn-primary :is(span,i,svg){color:inherit!important}
.btn-outline-primary{color:var(--brand)!important;border-color:var(--brand)!important;background:transparent!important}
.btn-outline-primary:hover{background:var(--brand)!important;color:#fff!important}
.btn-danger,.btn-red{background:var(--coral)!important;border-color:var(--coral)!important;color:#fff!important}
.btn-light,.btn-white,.btn-outline-secondary{background:var(--panel)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
.btn-light:hover,.btn-white:hover,.btn-outline-secondary:hover{border-color:var(--ink)!important}
.btn-c{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--r-sm);font-weight:600;font-size:14px;border:1px solid var(--brand)}
.form-control,.form-select,.select2-container .select2-selection{background-color:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--r-sm)!important;color:var(--ink);font-family:inherit;box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
.form-control::placeholder{color:var(--muted-2)}
.form-control:focus,.form-select:focus,.select2-container--focus .select2-selection,.select2-container--open .select2-selection{border-color:var(--brand)!important;box-shadow:var(--ring)!important}
.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--coral)!important}
.invalid-feedback,.text-danger{color:var(--coral)!important}
.text-success{color:var(--green)!important}
.form-label,label{color:var(--ink)}
.form-check-input{border-color:var(--line)}
.form-check-input:checked{background-color:var(--brand)!important;border-color:var(--brand)!important}
.form-check-input:focus{box-shadow:var(--ring)}
.card{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:none!important}
.card-header,.card-footer{background:transparent!important;border-color:var(--line-2)!important}
.shadow-lg,.shadow,.shadow-sm{box-shadow:none!important}
.bg-white{background:var(--panel)!important}
.bg-light,.bg-soft-grape,.bg-soft-primary{background:#FFFFFF!important}
.table{--bs-table-bg:transparent;color:var(--ink);border-color:var(--line-2)}
.table>thead th{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)!important;background:transparent}
[dir="rtl"] .table>thead th{font-family:var(--arabic);letter-spacing:0;font-size:12px}
.badge{border-radius:3px;font-weight:500;letter-spacing:.01em}
.badge.bg-primary,.badge-success,.bg-primary{background:var(--brand)!important;color:#fff!important}
.alert{border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.alert-success{border-color:color-mix(in srgb,var(--green) 40%,var(--line));background:var(--green-soft);color:var(--green)}
.alert-danger{border-color:color-mix(in srgb,var(--coral) 40%,var(--line));background:var(--coral-soft);color:var(--coral)}
.modal-content,.dropdown-menu,.offcanvas{background:var(--panel);border:1px solid var(--line)!important;border-radius:var(--r-lg)}
.offcanvas{border-radius:0}
.modal-backdrop.show{opacity:.42}
.modal-backdrop{background:var(--rail)}
.dropdown-item:active,.dropdown-item.active{background:var(--brand);color:#fff}
.text-primary,.link-color,.hover,.text-blue{color:var(--brand)!important}
.text-muted{color:var(--muted)!important}
.text-dark{color:var(--ink)!important}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{background:var(--brand)}
.page-item.active .page-link,.pagination .page-item.active .page-link{background:var(--brand-fill,var(--brand))!important;border-color:var(--brand-fill,var(--brand))!important;color:#fff!important;pointer-events:none}
.page-link{color:var(--ink)!important;border-color:var(--line)!important;background:var(--panel)}
.page-link:hover{border-color:var(--brand)!important;color:var(--brand)!important}
.page-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
[dir="rtl"] .pagination :is(.fa-arrow-left,.fa-arrow-right,.uil-arrow-left,.uil-arrow-right){display:inline-block;transform:scaleX(-1)}
.progress-wrap:after{color:var(--brand)} .progress-wrap svg.progress-circle path{stroke:var(--brand)}
.rating-container .filled-stars{color:var(--gold)!important} .rating-container .empty-stars{color:var(--line)!important}
.daterangepicker td.active,.daterangepicker td.active:hover{background:var(--brand)!important}

/* ---------- shared page patterns (page views keep their own layout CSS) ---------- */
body :is(.crumb,.lc-crumb){display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);padding:22px 0 4px;flex-wrap:wrap}
body :is(.crumb,.lc-crumb) a{color:var(--muted)}
body :is(.crumb,.lc-crumb) a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
body :is(.crumb,.lc-crumb) .sep{color:var(--line)}
body :is(.crumb,.lc-crumb)>span:last-child{color:var(--ink)}
body .ph1{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.015em;margin:10px 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
[dir="rtl"] body .ph1{font-family:var(--arabic)}
body .ph1 span{font-family:var(--sans);color:var(--muted);font-weight:400;font-size:15px}
body :is(.empty,.favempty,.lc-empty){background:transparent;border:1px dashed var(--line);border-radius:var(--r);padding:56px 24px;text-align:center;color:var(--muted);font-size:14.5px}
body :is(.empty,.favempty,.lc-empty) a{color:var(--brand);font-weight:600}
body .lc-pager{display:flex;justify-content:center;padding:20px 0 0;max-width:100%}
body .lc-pager .pagination{display:flex;gap:4px;list-style:none;padding:0;flex-wrap:wrap;justify-content:center;margin:0}
body .lc-pager .pagination .page-item{margin:0}
body .lc-pager :is(a,.pagination strong,.pagination span),body .lc-pager .pagination .page-link{display:inline-grid;place-items:center;min-width:36px;height:36px;margin:0;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);background:var(--panel);font-weight:500;font-family:var(--mono);font-size:13px;line-height:1;text-decoration:none;box-shadow:none}
body .lc-pager a:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}
body .lc-pager a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
body .lc-pager .pagination strong,body .lc-pager .page-item.active .page-link,body .lc-pager .page-item.active .page-link:hover{background:var(--brand-fill,var(--brand))!important;color:#fff!important;border-color:var(--brand-fill,var(--brand))!important;font-weight:600}
body .lc-pager .page-item.disabled .page-link{opacity:.5;pointer-events:none}
html[dir="rtl"] body .lc-pager :is(.fa-arrow-left,.fa-arrow-right,.uil-arrow-left,.uil-arrow-right),html[dir="rtl"] .lc-pager :is(.fa-arrow-left,.fa-arrow-right,.uil-arrow-left,.uil-arrow-right){display:inline-block;transform:scaleX(-1)}

/* ---------- SweetAlert2 confirm dialogs (scoped by .app-swal) ---------- */
.app-swal.swal2-popup{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--sh);background:var(--panel);font-family:inherit;padding:30px 28px 24px}
.app-swal .swal2-title{font-family:var(--serif);color:var(--ink);font-size:22px;font-weight:600;padding:0;margin:6px 0}
.app-swal .swal2-html-container{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.app-swal .swal2-icon.swal2-warning{border-color:var(--gold);color:var(--gold)}
.app-swal .swal2-icon.swal2-question,.app-swal .swal2-icon.swal2-info{border-color:var(--brand);color:var(--brand)}
.app-swal .swal2-icon.swal2-error{border-color:var(--coral);color:var(--coral)}
.app-swal .swal2-icon.swal2-error [class^=swal2-x-mark-line]{background-color:var(--coral)}
.app-swal .swal2-icon.swal2-success{border-color:var(--brand);color:var(--brand)}
.app-swal .swal2-icon.swal2-success [class^=swal2-success-line]{background-color:var(--brand)}
.app-swal .swal2-icon.swal2-success .swal2-success-ring{border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success{border-color:var(--brand)!important;color:var(--brand)!important}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success [class^=swal2-success-line]{background-color:var(--brand)!important}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-ring{border-color:color-mix(in srgb,var(--brand) 30%,transparent)!important}
.swal2-popup .swal2-loader{border-color:var(--brand) transparent var(--brand) transparent!important}
.app-swal .swal2-actions{gap:10px;margin-top:24px;width:100%}
.app-swal .app-swal-btn{border-radius:var(--r-sm);font-weight:600;font-size:14px;padding:12px 22px;margin:0;box-shadow:none!important;flex:1;cursor:pointer}
.app-swal .app-swal-confirm{background:var(--brand);color:#fff;border:1px solid var(--brand)}
.app-swal .app-swal-confirm:hover{background:var(--brand-press)}
.app-swal .app-swal-confirm.app-swal-danger{background:var(--coral);border-color:var(--coral)}
.app-swal .app-swal-cancel{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.app-swal .app-swal-cancel:hover{border-color:var(--ink)}
.swal2-toast{border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--sh)!important;background:var(--panel)!important}

/* ---------- directory pages (suppliers / categories / brands): ruled ledger rows ---------- */
body .slhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:10px 0 0;padding-bottom:18px;border-bottom:1px solid var(--line)}
body .slhead h1{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);font-weight:600}
[dir="rtl"] body .slhead h1{font-family:var(--arabic)}
body .slhead h1 span{font-family:var(--mono);color:var(--muted);font-weight:400;font-size:15px}
body .slsearch{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm)}
body .sup-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:0;padding-bottom:8px}
body a.sc{display:grid;grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"lg nm v" "lg rt v" "lg ct v";column-gap:16px;align-items:center;text-align:start;padding:16px 4px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;transform:none!important;transition:background .15s}
body a.sc:hover{background:var(--panel);box-shadow:none;border-color:var(--line)}
body .sc .lg{grid-area:lg;width:56px;height:56px;margin:0;border-radius:var(--r-sm);background:var(--panel)!important;border:1px solid var(--line);color:var(--brand);font-family:var(--serif);font-weight:600;font-size:19px;display:grid;place-items:center;overflow:hidden}
body .sc .lg img{width:100%;height:100%;object-fit:contain;padding:6px}
body .sc .lg.logo{background:#fff!important;width:84px;border-radius:var(--r-sm,10px)}
body a.sc:has(.lg.logo){grid-template-columns:84px minmax(0,1fr) auto}
body .sc .lg .ui-ic{width:28px;height:28px}
body .sc b{grid-area:nm;min-height:0;font-size:15.5px;font-weight:600}
body a.sc:hover b{color:var(--brand)}
body .sc .srate{grid-area:rt;justify-content:flex-start;margin:2px 0 0}
body .sc .cnt{grid-area:ct;margin-top:2px!important;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
body .sc .v{grid-area:v;margin:0;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--brand);white-space:nowrap}
@media (max-width:760px){body .sup-g{grid-template-columns:1fr}body a.sc{grid-template-columns:48px minmax(0,1fr)}body .sc .lg{width:48px;height:48px}body .sc .v{display:none}}

/* role label next to the account name (admin / supplier / buyer) */
.acct .role-chip{font-size:11px;font-weight:600;opacity:.75;margin-inline-start:2px}
@media(max-width:640px){.acct .role-chip{display:none}}

/* Cart drawer quantity stepper: large − / + buttons instead of the tiny native spinner */
#offcanvas-cart .cart-stepper{gap:0;direction:ltr}
#offcanvas-cart .cart-stepper .cs-btn{width:38px;height:38px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:20px;line-height:1;font-weight:600;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .15s,color .15s,border-color .15s}
#offcanvas-cart .cart-stepper .cs-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
#offcanvas-cart .cart-stepper .cs-minus{border-radius:var(--r-sm) 0 0 var(--r-sm)}
#offcanvas-cart .cart-stepper .cs-plus{border-radius:0 var(--r-sm) var(--r-sm) 0}
#offcanvas-cart .cart-stepper .header_qty{border-radius:0;width:84px!important;height:38px;margin:0 -1px;-moz-appearance:textfield;appearance:textfield}
#offcanvas-cart .cart-stepper .header_qty::-webkit-inner-spin-button,#offcanvas-cart .cart-stepper .header_qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* no index numbering on homepage sections or department rows */
.sh2 .idx,.psec .idx,section .tt .idx{display:none!important}
.tl-index .n{display:none!important}

/* ---------- cart drawer: floating rounded panel instead of a full-height side sheet ---------- */
#offcanvas-cart{top:14px!important;bottom:14px!important;inset-inline-end:14px!important;height:auto!important;width:min(400px,calc(100vw - 28px));max-width:none;border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:0 30px 70px -20px rgba(11,18,32,.35)!important;overflow:hidden;background:#fff!important}
#offcanvas-cart.offcanvas-end{transform:translateX(calc(100% + 28px))}
[dir="rtl"] #offcanvas-cart.offcanvas-end{transform:translateX(calc(-100% - 28px))}
#offcanvas-cart.offcanvas-end.show,#offcanvas-cart.offcanvas-end.showing{transform:none}
#offcanvas-cart .offcanvas-header{border-bottom:0!important;padding:20px 22px 6px}
#offcanvas-cart .offcanvas-header h3{font-size:20px}
#offcanvas-cart .offcanvas-body{padding:6px 14px 10px}
#offcanvas-cart .shopping-cart-item{border:1px solid var(--line-2)!important;border-radius:16px!important;padding:12px!important;margin-bottom:10px!important}
#offcanvas-cart .cart-img{border-radius:12px!important}
#offcanvas-cart .header_qty,#offcanvas-cart .remove-product{border-radius:10px!important}
#offcanvas-cart .offcanvas-footer{border-top:0!important;padding:10px 14px 16px;gap:8px}
#offcanvas-cart .offcanvas-footer .btn{border-radius:14px!important;height:46px}

/* ---------- cart: centered popup (fades/scales in, no side slide) ---------- */
#offcanvas-cart,#offcanvas-cart.offcanvas-end{top:50%!important;bottom:auto!important;left:50%!important;right:auto!important;inset-inline-end:auto!important;height:auto!important;max-height:min(86vh,720px);display:flex;flex-direction:column;width:min(480px,calc(100vw - 28px));transform:translate(-50%,-50%) scale(.4)!important;opacity:0;transition:transform .22s var(--ease),opacity .22s,visibility .22s!important}
[dir="rtl"] #offcanvas-cart.offcanvas-end{transform:translate(-50%,-50%) scale(.4)!important}
#offcanvas-cart.show:not(.hiding),#offcanvas-cart.showing,#offcanvas-cart.offcanvas-end.show:not(.hiding),#offcanvas-cart.offcanvas-end.showing{transform:translate(-50%,-50%) scale(1)!important;opacity:1}
#offcanvas-cart .offcanvas-body{overflow-y:auto;flex:1 1 auto}
#offcanvas-cart,#offcanvas-cart.offcanvas-end{transform-origin:50% 50%!important}

/* cart popup: true centre via auto margins (direction-independent; no translate offsets) */
#offcanvas-cart,#offcanvas-cart.offcanvas-end,[dir="rtl"] #offcanvas-cart.offcanvas-end{top:0!important;bottom:0!important;left:0!important;right:0!important;inset-inline:0!important;margin:auto!important;height:fit-content!important;transform:scale(.4)!important;transform-origin:50% 50%!important}
#offcanvas-cart.show:not(.hiding),#offcanvas-cart.showing,#offcanvas-cart.offcanvas-end.show:not(.hiding),#offcanvas-cart.offcanvas-end.showing,[dir="rtl"] #offcanvas-cart.offcanvas-end.show:not(.hiding){transform:scale(1)!important;opacity:1}

/* cart drawer: no + stepper button (quantity is typed in the field) */
#offcanvas-cart .cart-stepper .cs-plus{display:none!important}
#offcanvas-cart .cs-plus,#offcanvas-cart button[aria-label="+"]{display:none!important}

/* ---------- confirm dialog (SweetAlert2): compact rounded card ---------- */
.swal2-popup{width:min(380px,calc(100vw - 28px))!important;padding:26px 22px 20px!important;border-radius:22px!important;border:1px solid var(--line)!important;box-shadow:0 30px 70px -20px rgba(11,18,32,.35)!important}
/* SweetAlert2 v9 lays the success check / error cross out in em for a 5em icon, so shrink the icon by scaling its
   font-size (5em = 58px). Forcing width/height instead left the strokes sized for 100px and drew them off the circle. */
.swal2-popup:not(.swal2-toast) .swal2-icon{font-size:11.6px!important;width:5em!important;height:5em!important;margin:0 auto 14px!important;border-width:.25em!important;border-radius:50%!important}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-fix,.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success [class^=swal2-success-circular-line]{background:var(--panel)!important}
.swal2-popup .swal2-icon .swal2-icon-content{font-size:2.2rem!important}
.swal2-popup .swal2-title{font-size:19px!important;padding:0!important;margin:0 0 4px!important}
.swal2-popup .swal2-html-container{font-size:14px!important;margin:4px 0 0!important;padding:0!important}
.swal2-popup .swal2-actions{display:flex!important;flex-direction:row-reverse;gap:10px!important;width:100%!important;margin:20px 0 0!important}
.swal2-popup .swal2-actions button{flex:1 1 0!important;margin:0!important;height:44px;border-radius:14px!important;font-size:14px!important;font-weight:600}

/* ---------- notifications: centered rounded popup (same shape as the cart) ---------- */
#offcanvas-notifications,#offcanvas-notifications.offcanvas-end{top:0!important;bottom:0!important;left:0!important;right:0!important;inset-inline:0!important;margin:auto!important;height:fit-content!important;max-height:min(80vh,620px);width:min(440px,calc(100vw - 28px))!important;border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:0 30px 70px -20px rgba(11,18,32,.35)!important;overflow:hidden;background:#fff!important;transform:scale(.4)!important;transform-origin:50% 50%!important;opacity:0;transition:transform .22s var(--ease),opacity .22s,visibility .22s!important}
#offcanvas-notifications.show:not(.hiding),#offcanvas-notifications.showing,#offcanvas-notifications.offcanvas-end.show:not(.hiding),#offcanvas-notifications.offcanvas-end.showing{transform:scale(1)!important;opacity:1}
#offcanvas-notifications .offcanvas-header{border-bottom:0!important;padding:20px 22px 6px}
#offcanvas-notifications .offcanvas-body{overflow-y:auto}
#offcanvas-notifications .user-notification-item{border:1px solid var(--line-2);border-radius:14px;margin-bottom:8px;padding:12px 14px}
/* desktop bell dropdown panel */
#user_notification_nav .user-notification-panel{border-radius:18px!important;border:1px solid var(--line)!important;box-shadow:0 24px 60px -20px rgba(11,18,32,.35)!important;padding:10px!important}
#user_notification_nav .user-notification-item{border:1px solid var(--line-2);border-radius:12px;margin-bottom:6px}

/* back-to-top: green rounded square with a double chevron (no progress ring) */
.progress-wrap{width:48px;height:48px;border-radius:14px;background:var(--brand);box-shadow:0 12px 26px -10px rgba(11,18,32,.45);right:1.25rem;bottom:1.25rem;transition:transform .2s,background .2s,opacity .2s,visibility .2s}
[dir="rtl"] .progress-wrap{right:auto;left:1.25rem}
.progress-wrap svg{display:none}
.progress-wrap:after{content:"";width:48px;height:48px;line-height:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l6-6 6 6'/%3E%3Cpath d='M6 19l6-6 6 6'/%3E%3C/svg%3E") center/24px no-repeat}
.progress-wrap:hover{background:var(--brand-press);transform:translateY(-3px)}
footer.storefront-footer{padding-bottom:0}

/* sticky header needs a normal-height page: the body must not be its own fixed-height scroller */
html{height:auto!important;overflow-y:auto}
html body,body#body{height:auto!important;min-height:100%;overflow-x:clip!important;overflow-y:visible!important}

/* ---------- product listing filters: horizontal pill bar with pop-over menus (replaces the side column) ---------- */
@media (min-width:901px){
  .lc-wrap{grid-template-columns:1fr!important;gap:18px!important}
  .lc-wrap .lc-side{position:static!important;background:none!important;border:0!important;padding:0!important;display:block!important}
  .lc-side .filter-panel{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .lc-side .fgrp{position:relative;padding:0!important;border:0!important}
  .lc-side .fgrp h5{margin:0;display:inline-flex;align-items:center;gap:8px;height:var(--ctl);padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font-family:inherit;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;transition:border-color .15s,background .15s}
  .lc-side .fgrp h5::after{content:"";width:7px;height:7px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .lc-side .fgrp:hover h5,.lc-side .fgrp:focus-within h5{border-color:var(--brand);background:var(--tint)}
  .lc-side .fpop{display:none;position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:35;min-width:260px;max-height:340px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:12px 16px}
  .lc-side .fgrp::after{content:"";position:absolute;top:100%;left:0;right:0;height:8px}
  .lc-side .fgrp:hover .fpop,.lc-side .fgrp:focus-within .fpop{display:block}
  .lc-side .fapply{padding:0!important;margin-inline-start:auto;display:flex;gap:8px}
  .lc-side .fapply .f-apply-btn,.lc-side .fapply .fclear{flex:none;height:var(--ctl);padding:0 20px;border-radius:var(--r-sm)}
}

/* ---------- toast notifications (e.g. "added to order") ----------
   One dark glass card: accent-tinted icon tile, readable text that wraps on whole lines (width:max-content
   capped by max-width — width:auto collapsed it to one word per line), accent timer bar along the bottom.
   --ta is the accent per type; the icon glyph is a mask so SweetAlert's own animated tick is hidden. */
.swal2-container.swal2-top-end,.swal2-container.swal2-top-right{padding-top:84px!important}
.swal2-popup.swal2-toast{--ta:#34D399;--tg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  position:relative;flex-direction:row!important;align-items:center!important;gap:0;
  width:max-content!important;min-width:min(260px,calc(100vw - 24px));max-width:min(380px,calc(100vw - 24px))!important;min-height:0;
  padding:12px 16px 14px 12px!important;overflow:hidden;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:16px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,0) 55%),rgba(11,18,32,.94)!important;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 48px -16px rgba(11,18,32,.55),0 8px 16px -8px rgba(11,18,32,.35)!important}
.swal2-popup.swal2-toast.swal2-icon-error{--ta:#F87171;--tg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")}
.swal2-popup.swal2-toast.swal2-icon-warning{--ta:#FBBF24;--tg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 6v8'/%3E%3Ccircle cx='12' cy='18.5' r='.6' fill='%23000'/%3E%3C/svg%3E")}
.swal2-popup.swal2-toast.swal2-icon-info,.swal2-popup.swal2-toast.swal2-icon-question{--ta:#60A5FA;--tg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 11v7'/%3E%3Ccircle cx='12' cy='6' r='.6' fill='%23000'/%3E%3C/svg%3E")}
.swal2-popup.swal2-toast .swal2-header{flex:1 1 auto;min-width:0;flex-direction:row!important;align-items:center!important;gap:12px;padding:0!important}
.swal2-popup.swal2-toast .swal2-content,.swal2-popup.swal2-toast .swal2-actions{flex:0 0 auto;width:auto!important;margin:0!important;padding:0!important}
.swal2-popup.swal2-toast .swal2-actions:not(:has(> button:not([style*="none"]))){display:none!important}
.swal2-popup.swal2-toast .swal2-title{flex:1 1 auto;min-width:0;margin:0!important;padding:0!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:600!important;line-height:1.45!important;letter-spacing:0;color:#F8FAFC!important;text-align:start;justify-content:flex-start;white-space:normal;overflow-wrap:anywhere;unicode-bidi:plaintext}
.swal2-popup.swal2-toast .swal2-html-container{color:#CBD5E1!important;font-size:13px!important;text-align:start}
.swal2-popup.swal2-toast .swal2-icon{position:relative;flex:0 0 36px;width:36px!important;height:36px!important;min-width:36px!important;margin:0!important;border:0!important;border-radius:11px!important;
  background:color-mix(in srgb,var(--ta) 16%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ta) 32%,transparent)}
.swal2-popup.swal2-toast .swal2-icon>*{display:none!important}
.swal2-popup.swal2-toast .swal2-icon::before{content:""!important;display:block!important;position:absolute;inset:0;margin:auto;width:18px;height:18px;font-size:0;background:var(--ta);
  -webkit-mask:var(--tg) center/contain no-repeat;mask:var(--tg) center/contain no-repeat}
.swal2-popup.swal2-toast .swal2-icon::after{content:""!important;display:block!important;position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--ta);opacity:0;pointer-events:none}
.swal2-popup.swal2-toast .swal2-timer-progress-bar-container{position:absolute;inset-inline:0;bottom:0;height:3px;border-radius:0;background:rgba(255,255,255,.06)}
.swal2-popup.swal2-toast .swal2-timer-progress-bar{height:3px!important;background:linear-gradient(90deg,color-mix(in srgb,var(--ta) 55%,transparent),var(--ta))!important;box-shadow:0 0 10px var(--ta)}
.swal2-popup.swal2-toast .swal2-close{color:#94A3B8;font-size:20px}
.swal2-popup.swal2-toast .swal2-close:hover{color:#fff}
/* motion: spring in from the edge, icon pops with a one-shot ring, quick slide out (motion.css flattens these for reduced motion) */
@keyframes ugToastIn{0%{opacity:0;transform:translate3d(36px,-4px,0) scale(.94);filter:blur(4px)}55%{opacity:1;filter:blur(0);transform:translate3d(-4px,0,0) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes ugToastOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translate3d(28px,0,0) scale(.96)}}
@keyframes ugToastIcon{0%{opacity:0;transform:scale(.4) rotate(-14deg)}65%{opacity:1;transform:scale(1.12) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes ugToastRing{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.55)}}
.swal2-popup.swal2-toast.swal2-show{animation:ugToastIn .55s cubic-bezier(.2,.9,.25,1.05) both}
.swal2-popup.swal2-toast.swal2-hide{animation:ugToastOut .22s cubic-bezier(.4,0,1,1) forwards}
.swal2-popup.swal2-toast.swal2-show .swal2-icon{animation:ugToastIcon .5s .12s cubic-bezier(.3,1.4,.4,1) both}
.swal2-popup.swal2-toast.swal2-show .swal2-icon::after{animation:ugToastRing .7s .3s ease-out both}
@media (prefers-reduced-motion:reduce){.swal2-popup.swal2-toast.swal2-show .swal2-icon,.swal2-popup.swal2-toast.swal2-show .swal2-icon::after{animation:none}}
@media (max-width:575.98px){.swal2-container.swal2-top-end,.swal2-container.swal2-top-right{padding:72px 12px 0!important}.swal2-popup.swal2-toast{max-width:calc(100vw - 24px)!important}}

/* ---------- account area (orders, favourites, addresses, returns, notifications, details): banner + pill tabs ---------- */
body .acc-grid{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
body .acc-grid .aside{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:26px 28px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
body .acc-grid .aside .u{flex:1 0 100%;border:0;margin:0 0 10px;padding:0 0 18px;gap:18px;border-bottom:1px solid var(--line-2)}
body .acc-grid .aside .u .av{width:84px;height:84px;font-size:30px;border-radius:var(--r-lg)}
body .acc-grid .aside .u b{font-size:22px}
body .acc-grid .aside .u span{font-size:13.5px}
body .acc-grid .aside a{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 16px;font-size:13.5px}
body .acc-grid .aside a:hover{background:var(--tint)}
body .acc-grid .aside a.on{background:var(--brand);border-color:var(--brand);color:#fff}
body .acc-grid .aside a.on svg{color:#fff}
body .acc-grid .amain{min-width:0}
body .acc-grid .amain [class*="card"],body .acc-grid .amain :is(.empty,.favempty,.noti-card,.ordc,.pc,.aitem){border-radius:var(--r-lg)}
body .acc-grid .amain :is(.empty,.favempty){border-radius:var(--r-lg)}
@media(max-width:900px){body .acc-grid .aside{padding:18px}}

/* account banner: compact single row so content starts right under the header */
body .acc-grid{gap:14px!important;padding-bottom:20px}
body .acc-grid .aside{padding:12px 16px;gap:6px;border-radius:var(--r-lg);flex-wrap:wrap}
body .acc-grid .aside .u{flex:0 0 auto;margin:0;padding:0;border:0;gap:12px;margin-inline-end:10px}
body .acc-grid .aside .u .av{width:46px;height:46px;font-size:17px;border-radius:14px}
body .acc-grid .aside .u b{font-size:15px}
body .acc-grid .aside .u span{font-size:12px}
body .acc-grid .aside a{padding:7px 13px;font-size:13px;gap:7px}
body .acc-grid .aside a svg{width:16px;height:16px}
.ph1{margin:4px 0 12px!important;padding-bottom:10px!important}
.pf-new .aside .u .av{width:46px;height:46px;font-size:17px;border-radius:14px}
.pf-new .aside .u b{font-size:15px}
.pf-new .aside{padding:12px 16px}
.pf-new .aside .u{flex:0 0 auto;margin:0 10px 0 0;padding:0;border:0}

/* account pages: trim the chrome above the content so it starts near the top of the screen */
body:has(.acc-grid) .hd-quickbar{display:none}
body:has(.acc-grid) .hd-row{height:58px}
body:has(.acc-grid) .crumb,body:has(.acc-grid) .lc-crumb{display:none}
body:has(.acc-grid) .ph1{font-size:clamp(20px,2.2vw,24px)!important;margin:14px 0 10px!important;padding-bottom:8px!important}
body:has(.acc-grid) .ph-row{margin:12px 0 10px!important}
body:has(.acc-grid) .ph-row .ph1{margin:0!important}
body:has(.acc-grid) section{padding-top:0}
body:has(.acc-grid) footer.storefront-footer{margin-top:40px}

/* confirm dialog: use the brand green (icon, Yes, No) instead of olive/red */
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-warning,.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-question{border-color:var(--brand)!important;color:var(--brand)!important}
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm:hover{background:var(--brand-press)!important;border-color:var(--brand-press)!important}
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel{background:#fff!important;border:1px solid var(--brand)!important;color:var(--brand)!important}
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel:hover{background:#f3f4f6!important}
.swal2-popup:not(.swal2-toast) .swal2-styled:focus{box-shadow:0 0 0 3px rgba(109,40,217,.25)!important}

/* ---------- sign in / sign up: full-page screen instead of a popup ---------- */
#modal-signin_v2.modal,#modal-signup_v2.modal{background:#fff;overflow-y:auto}
#modal-signin_v2.modal.fade .modal-dialog,#modal-signup_v2.modal.fade .modal-dialog{transform:translateY(14px);transition:transform .3s var(--ease),opacity .3s}
#modal-signin_v2.modal.show .modal-dialog,#modal-signup_v2.modal.show .modal-dialog{transform:none}
#modal-signin_v2 .modal-dialog,#modal-signup_v2 .modal-dialog{max-width:none!important;width:100%;margin:0!important;min-height:100%;display:flex;align-items:stretch}
#modal-signin_v2 .modal-content,#modal-signup_v2 .modal-content{width:100%;min-height:100vh;border:0!important;border-radius:0!important;box-shadow:none!important;display:flex;align-items:center;justify-content:center;background:#fff}
#modal-signin_v2 .modal-body,#modal-signup_v2 .modal-body{width:min(460px,92vw);padding:48px 0!important;text-align:start}
#modal-signin_v2 .auth-brand,#modal-signup_v2 .auth-brand{display:inline-flex;margin-bottom:34px}
#modal-signin_v2 h2,#modal-signup_v2 h2{font-size:clamp(28px,4vw,38px)!important;margin-bottom:8px!important}
#modal-signin_v2 .form-control,#modal-signup_v2 .form-control{height:56px}
#modal-signin_v2 .btn-primary,#modal-signup_v2 .btn-primary{height:54px;font-size:15px}
/* big close button, pinned to the screen corner */
#modal-signin_v2 .btn-close,#modal-signup_v2 .btn-close{position:fixed!important;top:22px!important;inset-inline-end:26px!important;inset-inline-start:auto!important;width:44px;height:44px;z-index:5}
.modal-backdrop.show{opacity:0}
#modal-signin_v2~.modal-backdrop,#modal-signup_v2~.modal-backdrop{display:none}
#modal-signin_v2 .modal-content,#modal-signup_v2 .modal-content{display:flex!important;flex-direction:column;justify-content:center;align-items:center}
#modal-signin_v2 .modal-body,#modal-signup_v2 .modal-body{margin:auto;flex:0 0 auto}

/* cart quantity sync: an edited line shows a subtle unsaved dot until the server confirms; failures are explained inline */
#offcanvas-cart .shopping-cart.cq-pending .product-line-price{position:relative;opacity:.7}
#offcanvas-cart .shopping-cart.cq-pending .product-line-price::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand);margin-inline-start:6px;vertical-align:middle}
#offcanvas-cart .cq-msg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--coral)}
#offcanvas-cart .cq-retry{border:1px solid var(--line);background:var(--panel);color:var(--brand);border-radius:var(--r-sm);padding:2px 10px;font-weight:700;font-size:12px}
.oc-line.oc-pending .oc-total b{opacity:.5}
.oc-line .oc-retry{border:1px solid var(--line);background:var(--panel);color:var(--brand);border-radius:var(--r-sm);padding:2px 10px;font-weight:700;font-size:12px;margin-inline-start:8px}

.sv-note{margin:10px 0 0;padding:8px 12px;border-inline-start:3px solid #6d28d9;background:rgba(109,40,217,.08);font-size:13.5px;line-height:1.6}

/* Mega-menu "All products" link: text only, no arrow (theme .more:after adds one) */
.more.no-arrow:after{content:none!important;display:none!important}

/* sidebar cart: Clear all shows only while the sidebar holds items (it is re-rendered by JS) */
#offcanvas-cart .clear-cart-btn{white-space:nowrap}
#offcanvas-cart:not(:has(.shopping-cart)) .clear-cart-btn{display:none}