/* =====================================================================
   ECLIPSE on Salla's free theme RAED -- custom CSS (Salla Pro > Store design > Custom CSS)
   Targets the CURRENT live Raed (site-header, site-nav-drawer, mobile-bottom-bar, bottom-sheet; verified on raed.salla.design 2026-10-14).
   Values (colours, sizes, spacing) taken from the finished Eclipse theme (branch eclipse-release), measured on eclipsera.fit.
   Every selector starts with body:not(#ec):not(#ec): the fake id lifts specificity above Salla's two-class rules so no !important is needed.
   Direction is NOT forced: Arabic stays RTL, Latin-only styling (uppercase, letter-spacing) is scoped to html[lang="en"].
   ===================================================================== */

/* ---------- 0. Fonts (Eclipse theme loads exactly these two) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Jost:wght@400;500;600;700&display=swap");

/* ---------- 1. Tokens ---------- */
html:root {
  --ec-bg: #0a0a0a;
  --ec-panel: #111;
  --ec-line: #1c1c1c;
  --ec-line-2: #2a2a2a;
  --ec-text: #ededea;
  --ec-red: #cc1111;
  --ec-red-d: #a80d0d;
  --ec-heading: 'Archivo Black', sans-serif;
  --ec-body: 'Jost', sans-serif;
  /* Raed reads these three */
  --font-main: 'Jost', sans-serif;
  --color-primary: #cc1111;
  --color-primary-dark: #a80d0d;
  --color-primary-light: #e03a3a;
  --color-primary-reverse: #ededea;
  background: #0a0a0a; /* no white flash between pages */
}

/* ---------- 2. Page base ---------- */
body:not(#ec) {
  background: var(--ec-bg);
  color: var(--ec-text);
  font-family: var(--ec-body);
  font-size: 16px;
  line-height: 1.5;
}
body:not(#ec) main, body:not(#ec) .app-inner { background: var(--ec-bg); }

/* Raed's light utility surfaces -> Eclipse dark (no !important, so Raed's "!bg-white" round buttons stay white like Minimog's) */
body:not(#ec) .bg-white, body:not(#ec) .bg-gray-50, body:not(#ec) .bg-gray-100,
body:not(#ec) .bg-light { background-color: var(--ec-panel); }
body:not(#ec) .text-gray-800, body:not(#ec) .text-gray-900, body:not(#ec) .text-gray-700,
body:not(#ec) .text-dark, body:not(#ec) .text-black { color: var(--ec-text); }
body:not(#ec) .text-gray-500, body:not(#ec) .text-gray-600, body:not(#ec) .text-gray-400,
body:not(#ec) .text-text-grey, body:not(#ec) .color-grey { color: rgba(237, 237, 234, .55); }
body:not(#ec) .border-gray-100, body:not(#ec) .border-gray-200, body:not(#ec) .border-gray-300 { border-color: var(--ec-line-2); }
body:not(#ec) .text-red-800, body:not(#ec) .text-red-700 { color: #e03a3a; }   /* Raed's sale-price red (#991b1b) is 2.4:1 on black */
body:not(#ec) .shadow-default, body:not(#ec) .shadow-sm, body:not(#ec) .shadow { box-shadow: none; }
body:not(#ec) a, body:not(#ec) button { transition: opacity .2s ease, background-color .25s ease, color .25s ease, border-color .25s ease; }

/* loading skeletons (grey blocks stay grey on black otherwise) */
body:not(#ec) .s-skeleton-pulse, body:not(#ec) .s-skeleton-button, body:not(#ec) .animate-pulse, body:not(#ec) .s-skeleton-wrapper { background-color: #1a1a1a; }
body:not(#ec) .s-skeleton-card { background-color: var(--ec-panel); }   /* cart loading placeholder was a white card */

/* ---------- 3. Forms and buttons ---------- */
body:not(#ec) input:not([type=checkbox]):not([type=radio]), body:not(#ec) select, body:not(#ec) textarea,
body:not(#ec) .s-form-control, body:not(#ec) .form-input {
  background: #000; color: #fff; border: 1px solid var(--ec-line-2); border-radius: 5px; font-family: var(--ec-body);
}
body:not(#ec) ::placeholder { color: #fff; opacity: .75; }
body:not(#ec) select option { background: var(--ec-bg); color: var(--ec-text); }
body:not(#ec) .s-button-primary, body:not(#ec) .s-button-solid.s-button-primary, body:not(#ec) .btn--primary,
body:not(#ec) .s-button-btn.s-button-primary {
  background: var(--ec-red); border-color: var(--ec-red); color: var(--ec-text); border-radius: 5px; font: 500 16px/23px var(--ec-body);
}
body:not(#ec) .s-button-primary:hover, body:not(#ec) .btn--primary:hover { background: #fff; border-color: #fff; color: #000; opacity: 1; }
body:not(#ec) .btn--outline-primary { border-color: var(--ec-text); color: var(--ec-text); border-radius: 5px; }
body:not(#ec) .btn--outline-primary:hover { background: var(--ec-text); color: var(--ec-bg); opacity: 1; }
body:not(#ec) .btn--rounded-full { border-radius: 5px; }
body:not(#ec) .link--primary { color: var(--ec-text); text-decoration: underline; }

/* ---------- 4. Dark page-change screen (needs custom.js to create the .ec-pt element; harmless without it) ---------- */
.ec-pt {
  position: fixed; inset: 0; z-index: 999999; background: #0a0a0a; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.ec-pt.is-on { opacity: 1; visibility: visible; }
.ec-pt::after { content: ''; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 2px 0 0 #bbb; animation: ecPtSpin 1.5s linear infinite; }
@keyframes ecPtSpin { to { transform: rotate(360deg); } }

/* ---------- 5. Header (current Raed: header.site-header; bar = burger | logo | icons) ---------- */
body:not(#ec) .site-header__bar-outer { background: var(--ec-bg); }
body:not(#ec) .site-header__bar, body:not(#ec) .site-header__bar.is-scrolled {
  background: var(--ec-bg); border-color: var(--ec-line); box-shadow: none; color: var(--ec-text);
}
body:not(#ec) .site-header__bar-inner { min-height: 100px; }
body:not(#ec) .site-header__bar.is-scrolled .site-header__bar-inner { min-height: 64px; }
body:not(#ec) .site-header__brand img { width: 75px; height: 75px; max-width: none; max-height: none; object-fit: contain; }
body:not(#ec) .site-header__bar.is-scrolled .site-header__brand img { width: 48px; height: 48px; }
@media (max-width: 1023px) { body:not(#ec) .site-header__bar-inner { min-height: 84px; } body:not(#ec) .site-header__brand img { width: 64px; height: 64px; } }
/* icons: light on black */
body:not(#ec) .header-action, body:not(#ec) .site-header__actions .s-user-menu-trigger, body:not(#ec) .site-header__actions .s-user-menu-login-btn,
body:not(#ec) .site-header__actions salla-cart-summary, body:not(#ec) .site-header__search, body:not(#ec) .site-header__burger { color: var(--ec-text); }
body:not(#ec) .site-header__actions .s-user-menu-login-btn:hover { background: #1a1a1a; }
body:not(#ec) .site-header__burger span { background-color: var(--ec-text); }
body:not(#ec) .s-cart-summary-wrapper, body:not(#ec) .s-cart-summary-wrapper i { color: var(--ec-text); }
body:not(#ec) .s-cart-summary-total, body:not(#ec) .s-cart-summary-content { display: none; }   /* bag + count only, like Minimog */
body:not(#ec) .s-cart-summary-count { background: #da3f3f; color: #fff; font: 500 12px/18px var(--ec-body); min-width: 22px; height: 22px; border-radius: 9999px; }
body:not(#ec) .site-header__actions .s-user-menu-login-btn svg, body:not(#ec) .site-header__actions .s-user-menu-login-btn path { fill: currentColor; }
/* home intro block under the bar = Eclipse announcement strip */
body:not(#ec) .site-header__intro { background: var(--ec-bg); border-bottom: 1px solid var(--ec-line); }
body:not(#ec) .site-header__intro-title { color: var(--ec-text); font: 400 18px/28px var(--ec-heading); }
body:not(#ec) .site-header__intro-text, body:not(#ec) .site-header__intro-text * { color: rgba(237, 237, 234, .65); }
body:not(#ec) .site-header__intro-inner { padding-block: 14px; gap: 8px; }
body:not(#ec) .site-header__contacts-slot, body:not(#ec) .site-header__contacts-slot a { color: var(--ec-text); font: 600 12px/1.5 var(--ec-body); }
body:not(#ec) .site-header__social .s-social-link a, body:not(#ec) .site-header__social a { background: #1a1a1a; color: var(--ec-text); border: 1px solid var(--ec-line-2); }
body:not(#ec) .site-header__social a i, body:not(#ec) .site-header__social a svg { color: var(--ec-text); fill: currentColor; }
/* variant headers (default / topnav): same dark treatment */
body:not(#ec) .site-header__topnav { background: var(--ec-bg); border-color: var(--ec-line); color: var(--ec-text); }
body:not(#ec) .site-header__topnav a, body:not(#ec) .site-header__topnav-action, body:not(#ec) .site-header__topnav-menu a { color: var(--ec-text); }
body:not(#ec) .site-header__bullet { background: var(--ec-bg); color: var(--ec-text); }

/* ---------- 6. Menus (drawer + mega + default-variant row) ---------- */
body:not(#ec) .site-header--default .site-header__mainmenu .s-menu-root-level > a { color: var(--ec-text); font: 600 16px/24px var(--ec-body); }
body:not(#ec) .site-header--default .site-header__mainmenu .s-menu-root-level > a:hover { color: var(--ec-text); opacity: .7; }
body:not(#ec) .site-header--default .site-header__mainmenu .s-menu-sub-menu { background: var(--ec-panel); border-color: var(--ec-line-2); }
body:not(#ec) .site-header--default .site-header__mainmenu .s-menu-sub-menu a { color: var(--ec-text); }
body:not(#ec) .site-header--default .site-header__mainmenu .s-menu-sub-menu a:hover { background: #1a1a1a; color: var(--ec-text); }
html[lang="en"] body:not(#ec) .site-header--default .site-header__mainmenu .s-menu-root-level > a { text-transform: uppercase; letter-spacing: 1.5px; }
body:not(#ec) .mobile-menu, body:not(#ec) .mm-ocd__content, body:not(#ec) .mm-spn, body:not(#ec) .mm-spn ul, body:not(#ec) .mm-spn li { background: var(--ec-panel) !important; color: var(--ec-text) !important; }
body:not(#ec) .mm-spn a, body:not(#ec) .mm-spn span { color: var(--ec-text) !important; font-family: var(--ec-body); }
body:not(#ec) .menu-item { color: var(--ec-text); }
body:not(#ec) .menu-item:hover, body:not(#ec) .menu-item.is-active { background: #1a1a1a; color: var(--ec-text); }
/* nav drawer / sheet (new Raed: .site-nav-drawer, bottom sheet on phones, side panel on desktop) */
body:not(#ec) .site-nav-drawer { background: var(--ec-panel); color: var(--ec-text); }
body:not(#ec) .site-nav-drawer:before { background-color: #3a3a3a; }
body:not(#ec) .site-nav-drawer__link, body:not(#ec) .site-nav-drawer__loc, body:not(#ec) .site-nav-drawer__close, body:not(#ec) .site-nav-drawer__back, body:not(#ec) .site-nav-drawer__brand { color: var(--ec-text); font-family: var(--ec-body); }
body:not(#ec) .site-nav-drawer__link:hover, body:not(#ec) .site-nav-drawer__close:hover, body:not(#ec) .site-nav-drawer__back:hover { background-color: #1a1a1a; color: var(--ec-text); }
body:not(#ec) .site-nav-drawer__link.is-active, body:not(#ec) .site-nav-drawer__browse-all { color: var(--ec-text); }
body:not(#ec) .site-nav-drawer__link-img-placeholder { background-color: #1a1a1a; }
body:not(#ec) .site-nav-drawer__chevron, body:not(#ec) .site-nav-drawer__loc-icon, body:not(#ec) .site-nav-drawer__loc-caret { color: rgba(237, 237, 234, .5); }
body:not(#ec) .site-nav-drawer__panel + .site-nav-drawer__panel, body:not(#ec) .site-nav-drawer__foot { border-color: var(--ec-line-2); }
body:not(#ec) .site-nav-drawer__foot-sep { background-color: var(--ec-line-2); }
/* phone bottom sheets (account / more) */
body:not(#ec) .bottom-sheet { background-color: var(--ec-panel); color: var(--ec-text); }
body:not(#ec) .bottom-sheet__handle { background-color: #3a3a3a; }
body:not(#ec) .bottom-sheet__title, body:not(#ec) .account-sheet__contact-label { color: var(--ec-text); }
body:not(#ec) .account-sheet__list-item, body:not(#ec) .account-sheet__contact-item { background-color: var(--ec-bg); border-color: var(--ec-line-2); color: var(--ec-text); }
body:not(#ec) .account-sheet__list-item:hover, body:not(#ec) .account-sheet__contact-item:hover { background-color: #1a1a1a; }
body:not(#ec) .account-sheet__list-icon, body:not(#ec) .account-sheet__contact-item i { color: rgba(237, 237, 234, .65); }
body:not(#ec) .account-sheet__list-value, body:not(#ec) .account-sheet__contact-value, body:not(#ec) .account-sheet__list-chevron { color: rgba(237, 237, 234, .5); }
body:not(#ec) .store-footer--sheet .store-footer__brand, body:not(#ec) .store-footer--sheet .store-footer__centered, body:not(#ec) .store-footer--sheet .store-footer__apps, body:not(#ec) .store-footer--sheet .store-footer__bottom { background-color: var(--ec-bg); border-color: var(--ec-line-2); }
/* search results */
body:not(#ec) .s-search-product-card-content-title, body:not(#ec) .s-search-product-card-price-value, body:not(#ec) .s-search-product-card-content, body:not(#ec) .s-search-product-card-content p, body:not(#ec) .s-search-product-card-content h3 { color: var(--ec-text); font-family: var(--ec-body); }
/* phone bottom bar (new Raed) */
body:not(#ec) .mobile-bottom-bar__inner { background: var(--ec-panel); border: 1px solid var(--ec-line-2); box-shadow: 0 6px 24px rgba(0, 0, 0, .6); }
body:not(#ec) .mobile-bottom-bar__item { color: rgba(237, 237, 234, .7); }
body:not(#ec) .mobile-bottom-bar__item.is-active, body:not(#ec) .mobile-bottom-bar__item.active { background: var(--ec-red); color: #fff; }
body:not(#ec) .mobile-bottom-bar-scrim { background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.9)); }

/* ---------- 8. Home blocks (current Raed block names) ---------- */
body:not(#ec) .s-block__title h2, body:not(#ec) .s-testimonials__title, body:not(#ec) .s-block--featured-products .tab-trigger.is-active { color: var(--ec-text); }
body:not(#ec) .s-block__title h2, body:not(#ec) .s-testimonials__title { font: 400 clamp(26px, 3.2vw, 36px)/1.278 var(--ec-heading); }
body:not(#ec) .s-block__title { justify-content: center; text-align: center; margin-bottom: 40px; }
body:not(#ec) .s-block__title p { opacity: .55; }
body:not(#ec) .s-block__display-all, body:not(#ec) .s-slider-block__display-all { color: var(--ec-text); }
html[lang="en"] body:not(#ec) .s-block__title h2 { text-transform: uppercase; letter-spacing: .01em; }
/* hero (enhanced-slider): copy bottom-start, fade to black like the Eclipse hero */
body:not(#ec) .s-block--enhanced-slider .swiper-slide { background: var(--ec-bg); }
body:not(#ec) .s-block--enhanced-slider .swiper-slide::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, .85) 80%, #0a0a0a);
}
body:not(#ec) .home-slider__content { position: relative; z-index: 1; align-items: flex-end; justify-content: flex-start; padding-bottom: 70px; }
body:not(#ec) .home-slider__content > div { width: 100%; max-width: 760px; text-align: start; }
body:not(#ec) .home-slider__content h2 { font: 400 clamp(32px, 4.6vw, 68px)/1.08 var(--ec-heading); color: var(--ec-text); }
body:not(#ec) .home-slider__content .description { color: rgba(237, 237, 234, .75); }
html[lang="en"] body:not(#ec) .home-slider__content h2 { text-transform: uppercase; letter-spacing: .01em; }
/* category icons row */
body:not(#ec) .s-block--main-links .slide--cat-entry h2 { color: var(--ec-text); }
body:not(#ec) .s-block--main-links .slide--cat-entry__media { background: var(--ec-panel); border: 1px solid var(--ec-line-2); }
/* store features */
body:not(#ec) .s-block--features__item { background: var(--ec-panel); border: 1px solid var(--ec-line-2); border-radius: 0; color: var(--ec-text); }
body:not(#ec) .s-block--features__item h2, body:not(#ec) .s-block--features__item p { color: var(--ec-text); }
body:not(#ec) .s-block--features__item .feature-icon { color: var(--ec-red); background: transparent; }
/* products slider with background image, brands, testimonials, tabs, banners */
body:not(#ec) .s-block--slider-products-with-header, body:not(#ec) .s-block--slider-with-bg { background-color: var(--ec-panel); }
body:not(#ec) .s-block--slider-products-with-header h3, body:not(#ec) .s-block--slider-products-with-header p, body:not(#ec) .s-slider-block__display-all { color: #fff; }
body:not(#ec) .s-block--brands { background-color: var(--ec-panel); }
body:not(#ec) .brand-item { background: #fff; border-radius: 0; }   /* logos are dark artwork, keep them on white tiles */
body:not(#ec) .s-block--custom-testimonials { background-color: var(--ec-panel); }
body:not(#ec) .testimonial-card { background: var(--ec-bg); border: 1px solid var(--ec-line-2); border-radius: 0; box-shadow: none; }
body:not(#ec) .testimonial-card__text, body:not(#ec) .testimonial-card__name { color: var(--ec-text); }
body:not(#ec) .testimonial-card__avatar, body:not(#ec) .testimonial-card__rating { background: #1a1a1a; color: var(--ec-text); }
body:not(#ec) .s-testimonials__progress { background: var(--ec-line-2); }
body:not(#ec) .s-testimonials__nav button { background: transparent; border: 1px solid var(--ec-line-2); color: var(--ec-text); }
body:not(#ec) .s-block--featured-products .tab-trigger { color: rgba(237, 237, 234, .6); }
body:not(#ec) .s-block--featured-products .tab-trigger.is-active, body:not(#ec) .s-block--featured-products .tab-trigger:hover { background: var(--ec-red); color: var(--ec-text); }
body:not(#ec) .enhanced-square-banner { border-radius: 0; }
body:not(#ec) .enhanced-square-banner__title, body:not(#ec) .enhanced-square-banner__description { color: #fff; }
body:not(#ec) .banner--fixed, body:not(#ec) .banner--fixed img { border-radius: 0; }

/* ---------- 9. Product cards (4 across >=1024, 3 tablet, 2 phone) ---------- */
body:not(#ec) main .s-products-list-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 16px !important; margin-bottom: 0; }
@media (min-width: 768px) { body:not(#ec) main .s-products-list-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1024px) { body:not(#ec) main .s-products-list-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1280px) { body:not(#ec) main .s-products-list-wrapper { column-gap: 24px !important; } }
body:not(#ec) main .s-products-list-wrapper > * { min-width: 0; }
body:not(#ec) .s-product-card-entry {
  background: transparent; border: 0; box-shadow: none; border-radius: 0; display: block;
}
body:not(#ec) .s-product-card-vertical .s-product-card-image { flex: none; }
body:not(#ec) .s-product-card-image {
  background: #1a1a1a; border-radius: 0; overflow: hidden; aspect-ratio: 3 / 4; height: auto; width: 100%;
}
body:not(#ec) .s-product-card-image:hover { opacity: 1; }
body:not(#ec) .s-product-card-image > a { display: block; width: 100%; height: 100%; }
body:not(#ec) .s-product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: opacity .8s ease, transform 1.1s cubic-bezier(.15, .75, .5, 1); }
@media (min-width: 1024px) { body:not(#ec) .s-product-card-entry:hover .s-product-card-image img { transform: scale(1.1); } }
body:not(#ec) .s-product-card-content { padding: 12px 0 10px 10px; background: transparent; }
@media (min-width: 1024px) { body:not(#ec) .s-product-card-content { margin-top: 8px; } }
body:not(#ec) .s-product-card-content-title { margin: 0 0 5px; }
body:not(#ec) .s-product-card-content-title a {
  font: 400 16px/1.36 var(--ec-heading); color: var(--ec-text); text-transform: none; letter-spacing: normal;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
body:not(#ec) .s-product-card-content-title a:hover { color: var(--ec-text); opacity: .75; }
body:not(#ec) .s-product-card-price, body:not(#ec) .s-product-card-starting-price h4 { font: 400 16px/24px var(--ec-body); color: var(--ec-text); }
body:not(#ec) .s-product-card .s-product-card-sale-price h4 { font: 400 16px/24px var(--ec-body); color: var(--ec-red) !important; }  /* Raed sets this one !important */
body:not(#ec) .s-product-card-sale-price span { font: 400 16px/24px var(--ec-body); color: rgba(237, 237, 234, .6); }
/* Minimog tag pill / stock badges */
body:not(#ec) .s-product-card-promotion-title {
  top: 13px; inset-inline-start: 13px; border-radius: 40px; background: #43afe2; color: #fff; padding: 4px 10px; font: 500 12px/16px var(--ec-body);
}
body:not(#ec) .s-product-card-quantity { background: var(--ec-red); border-radius: 40px; }
body:not(#ec) .s-product-card-out-badge { background: #1a1a1a; color: rgba(237, 237, 234, .6); border-radius: 40px; }
/* Eclipse cards show image, name, price only. Delete these 2 lines to bring back the rating / quick add-to-cart row. */
body:not(#ec) .s-product-card-content-subtitle, body:not(#ec) .s-product-card-rating { display: none; }
body:not(#ec) .s-product-card-content-footer { display: none; }
body:not(#ec) .s-product-card-wishlist-btn button { border: 1px solid var(--ec-line-2); color: #000; }

/* ---------- 10. Collection / search / brand lists ---------- */
body:not(#ec) .container--products-list { max-width: 1550px; }
body:not(#ec) .breadcrumbs { background: transparent; border-bottom: 1px solid var(--ec-line); }   /* Raed tints it 5% primary = muddy red on black */
body:not(#ec) .s-breadcrumb-item span, body:not(#ec) .s-breadcrumb-item a span, body:not(#ec) .s-breadcrumb-item a { color: var(--ec-text); }
body:not(#ec) .mobile-page-title, body:not(#ec) .mobile-page-title * { background-color: var(--ec-bg); color: var(--ec-text); border-color: var(--ec-line); }   /* phone page bar */
body:not(#ec) .breadcrumbs ol { justify-content: center; }
body:not(#ec) .s-catalog-toolbar { background: var(--ec-panel); border: 1px solid var(--ec-line-2); border-radius: 5px; color: var(--ec-text); }
body:not(#ec) .s-catalog-toolbar button, body:not(#ec) .s-catalog-toolbar select, body:not(#ec) .s-catalog-toolbar label, body:not(#ec) .s-catalog-toolbar span { background-color: transparent; color: var(--ec-text); }
body:not(#ec) .s-catalog-toolbar__views button.is-active, body:not(#ec) .s-catalog-toolbar__views button[aria-pressed="true"] { background-color: #1a1a1a; }
body:not(#ec) #page-main-title { font: 400 36px/1.278 var(--ec-heading); color: var(--ec-text); }
@media (max-width: 767px) { body:not(#ec) #page-main-title { font-size: 26px; } }
body:not(#ec) .breadcrumbs, body:not(#ec) .s-breadcrumb-wrapper, body:not(#ec) .s-breadcrumb-wrapper a { color: var(--ec-text); font: 400 15px/22.5px var(--ec-body); }
body:not(#ec) .container--breadcrumbs .s-breadcrumb-wrapper, body:not(#ec) .container--breadcrumbs ol { justify-content: center; }
body:not(#ec) salla-filters, body:not(#ec) .s-filters-widget-title, body:not(#ec) .s-filters-label, body:not(#ec) .s-filters-option-name { color: var(--ec-text); }
body:not(#ec) .s-infinite-scroll-last { display: none; }
body:not(#ec) .s-infinite-scroll-btn { background: transparent; color: var(--ec-text); border: 1px solid var(--ec-text); border-radius: 5px; }

/* ---------- 11. Product page ---------- */
body:not(#ec) .container--product-details { max-width: 1220px; }
body:not(#ec) .container--product-details .sidebar img, body:not(#ec) .details-slider, body:not(#ec) .details-slider img { border-radius: 0; }
body:not(#ec) .container--product-details .main-content h1[data-testid="store-product-title"] {
  font: 400 30px/42px var(--ec-heading); color: var(--ec-text); margin: 5px 0 12px;
}
@media (max-width: 767px) { body:not(#ec) .container--product-details .main-content h1[data-testid="store-product-title"] { font-size: 24px; line-height: 31.92px; } }
body:not(#ec) .product-entry__sub-title { color: rgba(237, 237, 234, .55); font-size: 14px; }
body:not(#ec) [data-testid="store-product-price"] p, body:not(#ec) [data-testid="store-product-price"] span, body:not(#ec) .price-wrapper h2, body:not(#ec) .price-wrapper span {
  font: 400 24px/32px var(--ec-body); color: var(--ec-text);
}
body:not(#ec) [data-testid="store-product-price"] .line-through, body:not(#ec) .price-wrapper .before-price { font-size: 18px; color: rgba(237, 237, 234, .4); }
@media (max-width: 767px) { body:not(#ec) [data-testid="store-product-price"] p, body:not(#ec) .price-wrapper h2 { font-size: 20px; line-height: 28px; } }
body:not(#ec) .product__description { font: 400 16px/28px var(--ec-body); color: var(--ec-text); padding-inline: 0; }
body:not(#ec) .product__description a { color: var(--ec-text); text-decoration: underline; }
body:not(#ec) .out-of-stock { color: var(--ec-red); }
/* the white boxes around options / price / quantity */
body:not(#ec) .product-form section, body:not(#ec) .product-form .s-product-options-wrapper, body:not(#ec) .product-sku-wrapper > div, body:not(#ec) .product-barcode-wrapper > div {
  background: transparent; padding-inline: 0; border: 0; border-radius: 0;
}
body:not(#ec) .product-form .s-product-options-option-label, body:not(#ec) .product-form .form-label { font: 500 16px/23px var(--ec-body); color: var(--ec-text); }
body:not(#ec) .product-form .s-product-options-option-label span.text-red-500 { display: none; }
body:not(#ec) .product-form select, body:not(#ec) .product-form .s-form-control { min-height: 46px; }
body:not(#ec) .s-quantity-input-container, body:not(#ec) .s-quantity-input-input, body:not(#ec) .s-quantity-input-button {
  background: transparent; color: var(--ec-text); border-color: var(--ec-line-2); border-radius: 5px;
}
/* add to cart: outlined like Eclipse's, fills on hover. For a solid red button instead, replace the 3 colour lines with: background: var(--ec-red); border-color: var(--ec-red); color: var(--ec-text); */
body:not(#ec) .product-form salla-add-product-button .s-button-element {
  height: 45px; width: 100%; border: 1px solid var(--ec-text); border-radius: 5px; background: transparent; color: var(--ec-text); font: 500 16px/1 var(--ec-body);
}
body:not(#ec) .product-form salla-add-product-button .s-button-element:hover { background: var(--ec-text); color: var(--ec-bg); }
body:not(#ec) .product-form salla-add-product-button .s-button-element:hover .s-button-text { color: var(--ec-bg); }  /* the 'section span' colour rule below would keep the label light on the light hover fill */
body:not(#ec) salla-add-product-button .s-button-text { line-height: 24px; } /* Raed clips Arabic hamza at 16px line-height */
body:not(#ec) .product-form section.sticky-product-bar, body:not(#ec) .sticky-product-bar { background: var(--ec-bg); }  /* fixed bar on phones: must be opaque */
body:not(#ec) .product-form section.sticky-product-bar { border-top: 1px solid var(--ec-line); }
body:not(#ec) .s-comments-product { background: var(--ec-bg); }
body:not(#ec) .s-comments-product *, body:not(#ec) .s-comments-page * { border-color: var(--ec-line-2); }
body:not(#ec) .promotion-title { background: #43afe2; color: #fff; border-radius: 40px; }

/* product page extras (current Raed) */
body:not(#ec) .s-product-options-option-content p, body:not(#ec) .s-product-options-option-content div, body:not(#ec) .s-product-options-option-content label, body:not(#ec) .s-product-options-option-content span,
body:not(#ec) .s-product-options-option-label small { color: var(--ec-text); }
body:not(#ec) .s-list-tile-item, body:not(#ec) .s-gifting-widget { background: var(--ec-panel); border: 1px solid var(--ec-line-2); color: var(--ec-text); }
body:not(#ec) .s-list-tile-item-title, body:not(#ec) .s-list-tile-item-subtitle, body:not(#ec) .s-list-tile-item * { color: var(--ec-text); }
body:not(#ec) .s-product-card-price-value, body:not(#ec) .s-product-card-price p { color: var(--ec-text); }
body:not(#ec) .product-gallery .s-slider-nav-arrow { background: #fff; color: #000; }
body:not(#ec) .product-sku-wrapper, body:not(#ec) .product-sku-wrapper *, body:not(#ec) .product-barcode-wrapper, body:not(#ec) .product-barcode-wrapper *, body:not(#ec) .product-form section b, body:not(#ec) .product-form section span { color: var(--ec-text); }
body:not(#ec) .s-comments h3, body:not(#ec) .s-comments strong { color: var(--ec-text); }
body:not(#ec) .s-products-carousel__title { color: var(--ec-text); font: 400 clamp(22px, 2.6vw, 30px)/1.278 var(--ec-heading); }
body:not(#ec) .s-offer-wrapper, body:not(#ec) .s-offer-card, body:not(#ec) .s-offer-card-icon { background: var(--ec-panel); border-color: var(--ec-line-2); box-shadow: none; }
body:not(#ec) .s-offer-wrapper h2, body:not(#ec) .s-offer-card, body:not(#ec) .s-offer-card *, body:not(#ec) .s-offer-min-items { color: var(--ec-text); }
body:not(#ec) .s-comments, body:not(#ec) .s-comments h2, body:not(#ec) .s-comments p, body:not(#ec) .s-comments span, body:not(#ec) .s-comments div, body:not(#ec) .s-comments label { color: var(--ec-text); }
body:not(#ec) .s-comments-item-avatar-img { background: #1a1a1a; }
body:not(#ec) .product-brand img { background: #fff; padding: 2px; }   /* brand logos are dark artwork */

/* ---------- 12. Cart ---------- */
body:not(#ec) .cart-item { background: var(--ec-panel); border: 1px solid var(--ec-line-2); border-radius: 5px; }
body:not(#ec) .cart-item img { border-radius: 0; border-color: var(--ec-line-2); }
body:not(#ec) .cart-item h1 a, body:not(#ec) .cart-item .item-total, body:not(#ec) .cart-item p { color: var(--ec-text); font-family: var(--ec-body); }
body:not(#ec) .s-cart-summary-card, body:not(#ec) salla-cart-summary-card .s-cart-summary-card-sheet, body:not(#ec) salla-cart-summary-card .s-cart-summary-card-bar {
  background: var(--ec-panel); color: var(--ec-text); border-color: var(--ec-line-2); box-shadow: none;
}
body:not(#ec) .s-cart-summary-card-line span, body:not(#ec) .s-cart-summary-card-line b,
body:not(#ec) .s-cart-summary-card-bar-label-text, body:not(#ec) .s-cart-summary-card-bar-total { color: var(--ec-text); font-family: var(--ec-body); }
body:not(#ec) .s-cart-summary-card-bar-count { color: rgba(237, 237, 234, .55); }
body:not(#ec) .no-content-placeholder, body:not(#ec) .no-content-placeholder .icon { color: var(--ec-text); }
/* cart extras found on a live cart with items (2026-10-14) */
body:not(#ec) .cart-item .item-price.text-red-800 { color: #e03a3a; }                       /* discounted price: Raed's red-800 is unreadable on #111 */
body:not(#ec) .cart-item .item-regular-price, body:not(#ec) .cart-item .item-original-price { color: rgba(237, 237, 234, .55); }
body:not(#ec) .cart-options, body:not(#ec) .cart-item .s-product-options-wrapper, body:not(#ec) .cart-options .s-product-options-wrapper { background: var(--ec-panel); border-color: var(--ec-line-2); }
body:not(#ec) .cart-options *, body:not(#ec) .cart-item .s-product-options-wrapper * { color: var(--ec-text); border-color: var(--ec-line-2); }
body:not(#ec) .s-gifting-widget h3, body:not(#ec) #cart-gifting h3, body:not(#ec) salla-gifting h3, body:not(#ec) salla-gifting p { color: var(--ec-text); }
body:not(#ec) salla-cart-coupons, body:not(#ec) salla-cart-coupons * { color: var(--ec-text); }

body:not(#ec) .no-content-placeholder .icon { background: var(--ec-panel); border-radius: 9999px; }

/* add-to-cart toast (mini cart card that slides in after "Add to cart") */
body:not(#ec) .s-add-product-toast { background: var(--ec-panel); border: 1px solid var(--ec-line-2); border-radius: 5px; box-shadow: 0 8px 30px rgba(0, 0, 0, .6); }
body:not(#ec) .s-add-product-toast__progress { background: var(--ec-line-2); }
body:not(#ec) .s-add-product-toast__divider { background: var(--ec-line-2); }
body:not(#ec) .s-add-product-toast__image { background: #1a1a1a; border-radius: 0; }
body:not(#ec) .s-add-product-toast__title, body:not(#ec) .s-add-product-toast__name, body:not(#ec) .s-add-product-toast__price { color: var(--ec-text); font-family: var(--ec-body); }
body:not(#ec) .s-add-product-toast__price-sale, body:not(#ec) .s-add-product-toast__price-sale i { color: #e03a3a; }
body:not(#ec) .s-add-product-toast__price-original, body:not(#ec) .s-add-product-toast__price-original i { color: rgba(237, 237, 234, .55); }
body:not(#ec) .s-add-product-toast__close i { color: rgba(237, 237, 234, .6); }
body:not(#ec) .s-add-product-toast__button { border-radius: 5px; font-family: var(--ec-body); }
body:not(#ec) .s-add-product-toast__button--primary { background: var(--ec-red); color: var(--ec-text); }
body:not(#ec) .s-add-product-toast__button--outline, body:not(#ec) .s-add-product-toast__button--outline * { color: var(--ec-text); border-color: var(--ec-text); }

/* ---------- 13. Salla popups, dropdowns, login, account pages ---------- */
body:not(#ec) .s-modal-overlay { background: rgba(0, 0, 0, .6); }
body:not(#ec) .s-modal-body, body:not(#ec) .s-modal-wrapper .s-modal-body, body:not(#ec) .s-modal-container,
body:not(#ec) .s-login-modal, body:not(#ec) .s-search-modal, body:not(#ec) .s-localization-modal-inner,
body:not(#ec) .s-user-menu-dropdown, body:not(#ec) .s-search-results {
  background: var(--ec-bg) !important; color: var(--ec-text) !important; border: 1px solid var(--ec-line-2); border-radius: 5px;
}
body:not(#ec) .s-modal-title, body:not(#ec) .s-modal-sub-title, body:not(#ec) .s-login-modal label, body:not(#ec) .s-modal-close, body:not(#ec) .s-modal-close i { color: var(--ec-text) !important; }
body:not(#ec) .s-modal-close { background: transparent !important; }
body:not(#ec) .s-tel-input-control, body:not(#ec) .iti input, body:not(#ec) .s-verify-input, body:not(#ec) .s-search-input { background: #000 !important; color: #fff !important; border: 1px solid var(--ec-line-2) !important; border-radius: 5px !important; }
body:not(#ec) .iti__country-list { background: var(--ec-bg) !important; color: var(--ec-text); border-color: var(--ec-line-2) !important; }
body:not(#ec) .s-user-menu-dropdown-item-link, body:not(#ec) .s-user-menu-dropdown-item-title, body:not(#ec) .s-user-menu-dropdown-header-content p { color: var(--ec-text) !important; }
body:not(#ec) .s-user-menu-dropdown-item:hover { background: #1a1a1a !important; }
body:not(#ec) .profile-header { background: none; }
body:not(#ec) nav.sidebar { background: var(--ec-bg); border: 1px solid var(--ec-line-2); }
body:not(#ec) table, body:not(#ec) .s-table { color: var(--ec-text); }
body:not(#ec) th, body:not(#ec) td { border-color: var(--ec-line-2); }

/* ---------- 14. Footer ---------- */
body:not(#ec) .store-footer, body:not(#ec) .store-footer__inner { background: var(--ec-bg); color: #fff; }
body:not(#ec) .store-footer__inner { border-bottom: 1px solid #1a1a1a; padding-block: 50px; }
@media (min-width: 1280px) { body:not(#ec) .store-footer__inner { padding-block: 80px; } }
body:not(#ec) .store-footer h3 { font: 700 16px/20.448px var(--ec-heading); color: #fff; margin-bottom: 12px; }
body:not(#ec) .store-footer a, body:not(#ec) .store-footer p, body:not(#ec) .store-footer li, body:not(#ec) .store-footer b, body:not(#ec) .store-footer span, body:not(#ec) .store-footer small, body:not(#ec) .store-footer h3 { color: #fff; font-family: var(--ec-body); }
body:not(#ec) .store-footer salla-menu a, body:not(#ec) .store-footer .s-menu-footer-item { font: 400 16px/34px var(--ec-body); color: #fff; padding: 0; border: 0; }
body:not(#ec) .store-footer .social-link { border-color: rgba(237, 237, 234, .3); }
body:not(#ec) .store-footer .contact-social { border-color: #1a1a1a; }
body:not(#ec) .copyright-text, body:not(#ec) .copyright-text p { color: rgba(237, 237, 234, .4); font: 400 12px/1.5 var(--ec-body); letter-spacing: 0; }
/* payment icons on light chips so they stay readable on black; trust badges and the Salla logo are left untouched */
body:not(#ec) .store-footer salla-payments img, body:not(#ec) .store-footer .s-payments-list-item { background: var(--ec-text); border-radius: 4px; padding: 4px 8px; box-sizing: content-box; height: 26px; width: auto; opacity: .88; }
body:not(#ec) .store-footer .s-trust-badges-wrapper { color: var(--ec-text); }
body:not(#ec) .store-footer .s-trust-badges-label { color: rgba(237, 237, 234, .6); }

/* ---------- 15. Hidden "Tax included" lines (store is not VAT registered) ---------- */
body:not(#ec) .container--product-details small.color-grey,   /* product page "tax included" */
body:not(#ec) .s-cart-summary-card-bar-label-sub { display: none; }  /* cart "prices include tax" caption */

/* ---------- 16. Motion ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body:not(#ec) .s-product-card-image img, .ec-pt { transition: none; }
}

/* ---------- 17. Final-pass fixes (live test 2026-10-14) ---------- */
body:not(#ec) .s-skeleton-form { background-color: var(--ec-panel); }   /* product-form loading placeholder was a white block */
/* merchant-pasted description colours (inline style="color:#131313") are unreadable on black */
body:not(#ec) .product__description [style*="color"]:not([style*="background"]) { color: var(--ec-text) !important; }
/* collection filters panel (desktop sidebar + phone sheet) was a white card with light text */
body:not(#ec) .s-filters-widget-container { background: var(--ec-panel); border: 1px solid var(--ec-line-2); border-radius: 5px; box-shadow: none; color: var(--ec-text); }
body:not(#ec) .s-filters-widget-container * { color: var(--ec-text); }
/* the sky-blue tag pill: white text was 2.5:1, dark text is 8:1 */
body:not(#ec) .s-product-card-promotion-title, body:not(#ec) .promotion-title { color: #0a0a0a; }
/* search panel (idle state: history, trending chips, most searched) */
body:not(#ec) .s-search-idle-section-title { color: rgba(237, 237, 234, .65); }
body:not(#ec) .s-search-most-searched-item, body:not(#ec) .s-search-most-searched-icon, body:not(#ec) .s-search-back-btn { color: var(--ec-text); }
body:not(#ec) .s-search-history-chip, body:not(#ec) .s-search-idle-category-chip { background: #1a1a1a; border: 1px solid var(--ec-line-2); color: var(--ec-text); }
body:not(#ec) .s-search-history-chip-term, body:not(#ec) .s-search-history-chip-remove, body:not(#ec) .s-search-history-chip-icon { color: var(--ec-text); }
/* home: banner copy sits on merchant photos (the demo one is pale grey), so give it a soft shadow; tab strip lost Raed's 10% red tint */
body:not(#ec) .enhanced-square-banner__title, body:not(#ec) .enhanced-square-banner__description { text-shadow: 0 1px 14px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .5); }
body:not(#ec) .s-block--featured-products .tabs { background: var(--ec-panel); }
/* Salla notification toast ("item removed" etc.): .bg-white turned it dark but its text stayed #171717 */
body:not(#ec) li.group.bg-white { color: var(--ec-text); border-color: var(--ec-line-2); }
/* search results: card variant without the .s-product-card class kept Raed's #991b1b sale price; reviews slider cards were white */
body:not(#ec) .s-product-card-sale-price h4 { color: var(--ec-red) !important; }
body:not(#ec) .s-reviews-testimonial { background: var(--ec-panel); border: 1px solid var(--ec-line-2); border-radius: 0; box-shadow: none; }
/* classic server-rendered header (search / blog / page routes use .store-header, not .site-header): icons stayed grey, "offers" link was Raed's #991b1b */
body:not(#ec) .store-header .s-user-menu-login-btn svg, body:not(#ec) .store-header .s-user-menu-login-btn path, body:not(#ec) .store-header .s-cart-summary-wrapper svg, body:not(#ec) .store-header .s-cart-summary-wrapper path { fill: currentColor; }
body:not(#ec) .offers-link, body:not(#ec) .offers-link span { color: #e03a3a; }

/* =====================================================================
   V2 (2026-10-16): home rebuild + gap patches, written for the LIVE old-Raed markup (header.store-header, #mainnav, mm-spn, store-footer).
   Plain "body" here, build.js turns it into body:not(#ec):not(#ec).
   ===================================================================== */

/* ---- bidi: layout is LTR like the reference (JS flips dir), but every text block keeps its own direction so Arabic punctuation stays on the correct side ---- */
html[lang="ar"] body:not(#ec) :is(h1,h2,h3,h4,p,li,td,th,label) { unicode-bidi: plaintext; }

/* ---- H1 Header: menu LEFT | crest CENTRE | icons RIGHT, black, slim ---- */
body:not(#ec) #mainnav { background: var(--ec-bg); box-shadow: none; border-bottom: 1px solid var(--ec-line); }
body:not(#ec) #mainnav .container > .flex { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; direction: ltr; }
body:not(#ec) #mainnav .container > .flex > .flex.items-center:first-child { display: contents; }
body:not(#ec) #mainnav .navbar-brand { grid-column: 2; grid-row: 1; justify-self: center; margin: 8px 0; }
body:not(#ec) #mainnav .navbar-brand img { width: auto; height: 44px; max-width: 120px; object-fit: contain; }
body:not(#ec) #mainnav custom-main-menu { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; align-self: stretch; }
body:not(#ec) #mainnav custom-main-menu nav.mobile-menu { height: auto; display: flex; align-items: center; }
body:not(#ec) #mainnav .mburger { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
body:not(#ec) #mainnav .container > .flex > .flex.justify-end { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; direction: ltr; gap: 6px; }
body:not(#ec) #mainnav .main-menu > li.root-level > a { font: 500 15px/1 var(--ec-body); letter-spacing: 0; padding: 0 14px; }
body:not(#ec) #mainnav .main-menu { padding-top: 0 !important; padding-bottom: 0 !important; align-items: center; }
body:not(#ec) #mainnav { min-height: 64px !important; height: 64px; }
body:not(#ec) #mainnav .container > .flex { min-height: 0; height: 64px; }
body:not(#ec) #mainnav custom-main-menu { height: 64px !important; }
body:not(#ec) #mainnav .navbar-brand, body:not(#ec) #mainnav .container > .flex > .flex.justify-end { margin-top: 0 !important; margin-bottom: 0 !important; }
body:not(#ec) #mainnav salla-cart-summary { margin: 0 !important; width: auto; }
body:not(#ec) #mainnav salla-user-menu { margin: 0; }
@media (max-width: 1023px) { body:not(#ec) #mainnav .navbar-brand img { height: 40px; } }
@media (min-width: 1024px) { body:not(#ec) #mainnav nav.mobile-menu, body:not(#ec) #mainnav nav.mobile-menu ul { background: transparent !important; box-shadow: none; border: 0; } }

/* top bar (grey search + currency pills) is not in the reference: inert black strip, search moves to an icon (JS), language switch moves next to the icons */
body:not(#ec) .top-navbar { background: var(--ec-bg); padding: 0; min-height: 0; border: 0; }
body:not(#ec) .top-navbar .header-search { display: none; }
body:not(#ec) .s-localization-modal-trigger-btn { background: transparent; color: var(--ec-text); border: 0; font: 500 14px/1 var(--ec-body); box-shadow: none; padding: 0 8px; }
body:not(#ec) .s-localization-modal-trigger-btn i, body:not(#ec) .s-localization-modal-trigger-separator { display: none; }
body:not(#ec) .top-navbar:not(:has(*:not(:empty))) { display: none; }
body:not(#ec) .ec-hdr-search { background: none; border: 0; color: var(--ec-text); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
body:not(#ec) .ec-hdr-search svg { width: 20px; height: 20px; }
body:not(#ec) #mainnav .s-user-menu-login-btn, body:not(#ec) #mainnav .s-cart-summary-wrapper, body:not(#ec) #mainnav .header-btn__icon { border: 0; background: none; box-shadow: none; }
body:not(#ec) #mainnav .s-cart-summary-count { background: var(--ec-red); color: #fff; font: 500 10px/1 var(--ec-body); }
body:not(#ec) #mainnav .s-cart-summary-content { display: none; }
body:not(#ec) salla-add-product-toast:empty { display: none; }
body:not(#ec) #mainnav .s-localization-modal-trigger-btn { display: none; }
@media (min-width: 1024px) { body:not(#ec) #mainnav .s-localization-modal-trigger-btn { display: inline-flex; } }
body:not(#ec) salla-bullet-delivery-tag { display: none; }

/* ---- H2 announcement bar under the header (markup from custom.js) ---- */
body:not(#ec) .ec-ship { background: var(--ec-bg); color: var(--ec-text); text-align: center; padding: 12px 16px; font: 600 11px/1.5 'Helvetica Neue', Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; direction: ltr; border-bottom: 1px solid var(--ec-line); }
body:not(#ec) .ec-ship__dot { display: inline-block; width: 4px; height: 4px; background: var(--ec-red); border-radius: 50%; vertical-align: middle; margin: 0 13px 2px; }
@media (max-width: 600px) { body:not(#ec) .ec-ship { font-size: 9.5px; letter-spacing: .14em; padding: 10px 12px; } body:not(#ec) .ec-ship__dot { margin: 0 8px 2px; } }
html[lang="ar"] body:not(#ec) .ec-ship { letter-spacing: 0; text-transform: none; font-size: 13px; }

/* ---- H3 WhatsApp float + back to top + phone bottom bar ---- */
body:not(#ec) .ec-wa { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 9998; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.32); transition: transform .18s ease; }
body:not(#ec) .ec-wa:hover { transform: scale(1.06); }
body:not(#ec) .ec-top { position: fixed; right: 16px; bottom: 86px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; background: var(--ec-red); color: var(--ec-text); border: 1px solid var(--ec-red); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s; }
body:not(#ec) .ec-top.is-shown { opacity: 1; pointer-events: auto; transform: none; }
body:not(#ec) .ec-top svg { width: 20px; height: 20px; }
body:not(#ec) .ec-mbar { display: none; }
@media (max-width: 767px) {
  body:not(#ec) .ec-mbar { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 25; display: flex; background: var(--ec-bg); box-shadow: 0 0 10px rgba(237,237,234,.12); direction: ltr; }
  body:not(#ec) .ec-mbar a, body:not(#ec) .ec-mbar button { flex: 1; display: flex; justify-content: center; align-items: center; padding: 18px 20px; color: var(--ec-text); background: none; border: 0; border-right: 1px solid var(--ec-line-2); position: relative; cursor: pointer; }
  body:not(#ec) .ec-mbar > :last-child { border-right: 0; }
  body:not(#ec) .ec-mbar svg { width: 20px; height: 20px; }
  body:not(#ec) .ec-mbar b { position: absolute; top: 8px; margin-left: 22px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--ec-red); color: #fff; font: 500 10px/16px var(--ec-body); text-align: center; }
  body:not(#ec) .ec-wa { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; }
  body:not(#ec) .ec-top { width: 40px; height: 40px; bottom: 140px; }
  body:not(#ec) { padding-bottom: 60px; }
}

/* ---- H4 Hero (Raed enhanced slider): tall, SHROUD bar-hang photo, red kicker, huge Archivo Black title, red button ---- */
body:not(#ec) .s-block--hero-slider { position: relative; padding: 0; }
body:not(#ec) .s-block--hero-slider .swiper-slide { min-height: 795px; }
@media (max-width: 1023px) { body:not(#ec) .s-block--hero-slider .swiper-slide { min-height: 560px; } }
@media (max-width: 600px) { body:not(#ec) .s-block--hero-slider .swiper-slide { min-height: 78vh; } }
body:not(#ec) .s-block--hero-slider .swiper-slide::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,.85) 85%, #0a0a0a 100%); pointer-events: none; }
body:not(#ec) .s-block--hero-slider .home-slider__content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 40px 70px; max-width: 1400px; margin: 0 auto; width: 100%; direction: ltr; }
body:not(#ec) .s-block--hero-slider .home-slider__content > div { width: auto; max-width: 100%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; color: var(--ec-text); }
body:not(#ec) .s-block--hero-slider .home-slider__content h2 { order: 2; font: 400 clamp(48px, 8.2vw, 120px)/.92 var(--ec-heading); letter-spacing: .01em; text-transform: uppercase; margin: 0 0 24px; text-shadow: none; }
body:not(#ec) .s-block--hero-slider .home-slider__content .description { order: 1; display: block; -webkit-line-clamp: unset; color: var(--ec-red); font: 600 12px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .28em; text-transform: uppercase; margin: 0 0 18px; text-shadow: none; }
html[lang="ar"] body:not(#ec) .s-block--hero-slider .home-slider__content .description { letter-spacing: .06em; font-size: 14px; text-transform: none; }
body:not(#ec) .ec-hero__btn { order: 3; display: inline-block; padding: 16px 34px; font: 600 13px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; background: var(--ec-red); border: 1px solid var(--ec-red); color: var(--ec-text) !important; transition: background .25s ease; }
html[lang="ar"] body:not(#ec) .ec-hero__btn { letter-spacing: .04em; font-size: 15px; text-transform: none; }
body:not(#ec) .ec-hero__btn:hover { background: var(--ec-red-d); border-color: var(--ec-red-d); }
@media (max-width: 600px) { body:not(#ec) .s-block--hero-slider .home-slider__content { padding: 0 20px 48px; } }
body:not(#ec) .s-block--hero-slider .s-slider-prev { display: none; }
body:not(#ec) .s-block--hero-slider .s-slider-next { background: transparent; border: 1px solid rgba(237,237,234,.35); color: var(--ec-text); box-shadow: none; }

/* ---- H5 New arrivals: centred title, red kicker, no "view all", 4 cards ---- */
body:not(#ec) [data-testid="store-home-fixed-products"] .s-block__title { flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 90px 0 56px; gap: 14px; }
body:not(#ec) [data-testid="store-home-fixed-products"] .s-block__title::before { content: 'كمية محدودة'; color: var(--ec-red); font: 600 12px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .28em; }
html[lang="en"] body:not(#ec) [data-testid="store-home-fixed-products"] .s-block__title::before { content: 'LIMITED RUN'; }
body:not(#ec) [data-testid="store-home-fixed-products"] .s-block__title h2 { font: 400 clamp(32px, 4vw, 54px)/1.2 var(--ec-heading); text-transform: uppercase; letter-spacing: .01em; margin: 0; }
body:not(#ec) [data-testid="store-home-fixed-products"] .s-block__display-all { display: none; }
body:not(#ec).index .s-product-card-wishlist-btn { display: none; }
body:not(#ec).index .s-product-card-price { color: var(--ec-red); font: 400 13px/1 var(--ec-body); letter-spacing: .04em; }
body:not(#ec) .sicon-sar { font-size: 0 !important; line-height: 1; }
body:not(#ec) .sicon-sar::before { content: none !important; }
body:not(#ec) .sicon-sar::after { content: 'SR'; font: 500 .85rem var(--ec-body); margin-inline-start: 4px; letter-spacing: .04em; }

/* ---- H6 Editorial pair: two photos side by side, edge to edge ---- */
body:not(#ec) .s-block--banners { max-width: none; width: 100%; padding: 0; margin: 90px 0 0; }
body:not(#ec) .s-block--banners .square-photos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px !important; direction: ltr; height: clamp(420px, 46vw, 660px); }
body:not(#ec) .s-block--banners .square-photos { position: relative; display: block; height: 100%; aspect-ratio: auto; border-radius: 0; overflow: hidden; }
body:not(#ec) .s-block--banners .square-photos .lazy__bg, body:not(#ec) .s-block--banners .square-photos > div { background-size: cover !important; background-position: center !important; filter: grayscale(20%) contrast(1.05); height: 100%; width: 100%; }
body:not(#ec) .s-block--banners .text-with-border { position: absolute; left: 24px; bottom: 24px; right: auto; top: auto; margin: 0; padding: 0; border: 0; background: none; z-index: 2; }
body:not(#ec) .s-block--banners .text-with-border span { color: var(--ec-text); font: 600 11px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .22em; text-transform: uppercase; background: none; padding: 0; }
body:not(#ec) .s-block--banners .text-with-border span::before { content: '— '; color: var(--ec-red); }
@media (max-width: 767px) { body:not(#ec) .s-block--banners .square-photos-grid { grid-template-columns: 1fr; height: auto; } body:not(#ec) .s-block--banners .square-photos { aspect-ratio: 4 / 5; height: auto; } }

/* ---- H7 Statement (markup from custom.js) ---- */
body:not(#ec) .ec-statement { background: var(--ec-bg); padding: 110px 40px; text-align: center; }
body:not(#ec) .ec-statement__line { width: 56px; height: 2px; background: var(--ec-red); margin: 0 auto 32px; }
body:not(#ec) .ec-statement__text { max-width: 760px; margin: 0 auto; color: var(--ec-text); font: 400 clamp(24px, 3.4vw, 40px)/1.25 var(--ec-heading); text-transform: uppercase; letter-spacing: .01em; }
html[lang="ar"] body:not(#ec) .ec-statement__text { line-height: 1.6; text-transform: none; }
body:not(#ec) .ec-statement__text span { color: var(--ec-red); }
body:not(#ec) .ec-statement__sub { margin: 22px auto 0; max-width: 480px; color: rgba(237,237,234,.55); font: 400 14px/1.6 'Helvetica Neue', Arial, sans-serif; letter-spacing: .02em; }
@media (max-width: 640px) { body:not(#ec) .ec-statement { padding: 70px 20px; } }

/* ---- H8 The make: Raed "store features" restyled as the 3 numbered specs, head injected by custom.js ---- */
body:not(#ec) .s-block--features { max-width: none; width: 100%; padding: 100px 40px; margin: 0; background: var(--ec-bg); border-top: 1px solid #1e1e1e; direction: ltr; }
body:not(#ec) .s-block--features > .ec-make__head, body:not(#ec) .s-block--features > .grid { max-width: 1400px; margin-left: auto; margin-right: auto; }
body:not(#ec) .ec-make__head { max-width: 640px; margin: 0 auto 60px 0; text-align: left; }
body:not(#ec) .ec-make__eyebrow { color: var(--ec-red); font: 600 12px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .28em; text-transform: uppercase; margin: 0 0 16px; }
body:not(#ec) .ec-make__title { font: 400 clamp(28px, 3.8vw, 46px)/1.1 var(--ec-heading); color: var(--ec-text); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 18px; }
html[lang="ar"] body:not(#ec) .ec-make__title { line-height: 1.5; text-transform: none; }
body:not(#ec) .ec-make__lede { color: rgba(237,237,234,.6); font: 400 15px/1.7 'Helvetica Neue', Arial, sans-serif; margin: 0; }
body:not(#ec) .s-block--features > .grid { display: grid; grid-template-columns: repeat(3, 1fr) !important; gap: 32px; counter-reset: ecspec; }
body:not(#ec) .s-block--features__item { grid-column: auto !important; background: none !important; border: 0 !important; box-shadow: none; padding: 0 !important; text-align: left; counter-increment: ecspec; }
body:not(#ec) .s-block--features .feature-icon { display: none; }
body:not(#ec) .s-block--features__item::before { content: counter(ecspec, decimal-leading-zero); display: block; color: var(--ec-red); font: 600 11px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .2em; margin: 0 0 12px; }
body:not(#ec) .s-block--features__item h2 { font: 400 16px/1.3 var(--ec-heading); color: var(--ec-text); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 10px; }
body:not(#ec) .s-block--features__item p { color: rgba(237,237,234,.55); font: 400 13.5px/1.65 'Helvetica Neue', Arial, sans-serif; margin: 0; }
@media (max-width: 900px) { body:not(#ec) .s-block--features > .grid { grid-template-columns: 1fr !important; gap: 44px; } }
@media (max-width: 560px) { body:not(#ec) .s-block--features { padding: 70px 20px; } body:not(#ec) .ec-make__head { margin-bottom: 44px; } }

/* ---- H9 Join (markup from custom.js, same as the Eclipse theme: the form opens Salla's sign-up) ---- */
body:not(#ec) .ec-cta { position: relative; background: var(--ec-bg); padding: 110px 40px 80px; text-align: center; overflow: hidden; }
body:not(#ec) .ec-cta__crest { position: absolute; top: 50%; left: 50%; width: 420px; max-width: none; transform: translate(-50%, -50%); opacity: .12; pointer-events: none; z-index: 0; }
body:not(#ec) .ec-cta__inner { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; }
body:not(#ec) .ec-cta__eyebrow { color: var(--ec-red); font: 600 12px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .28em; text-transform: uppercase; margin: 0 0 16px; }
body:not(#ec) .ec-cta__title { font: 400 clamp(30px, 4vw, 48px)/1.2 var(--ec-heading); color: var(--ec-text); text-transform: uppercase; margin: 0 0 14px; letter-spacing: .01em; }
html[lang="ar"] body:not(#ec) .ec-cta__title { text-transform: none; line-height: 1.5; }
body:not(#ec) .ec-cta__sub { color: rgba(237,237,234,.55); font: 400 14px/1.6 'Helvetica Neue', Arial, sans-serif; margin: 0 0 36px; }
body:not(#ec) .ec-cta__form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 420px; margin: 0 auto; cursor: pointer; }
body:not(#ec) .ec-cta__input { flex: 1 1 100%; height: 48px; background: transparent; border: 1px solid rgba(237,237,234,.3); color: var(--ec-text); padding: 15px 18px; font: 400 14px/1 'Helvetica Neue', Arial, sans-serif; font-size: 14px !important; letter-spacing: .02em; border-radius: 0; cursor: pointer; }
body:not(#ec) .ec-cta__input::placeholder { color: rgba(237,237,234,.4); opacity: 1; }
body:not(#ec) .ec-cta__submit { background: var(--ec-red); border: 1px solid var(--ec-red); color: var(--ec-text); padding: 15px 26px; font: 600 12px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .25s ease; }
body:not(#ec) .ec-cta__submit:hover { background: var(--ec-red-d); }
@media (max-width: 560px) { body:not(#ec) .ec-cta { padding: 80px 20px; } body:not(#ec) .ec-cta__form { flex-direction: column; } }

/* ---- H10 Crest + wordmark banner (Raed wide banner) ---- */
body:not(#ec) .s-block--fixed-banner { max-width: none; width: 100%; margin: 0; padding: 0; background: var(--ec-bg); border-top: 1px solid var(--ec-line-2); }
body:not(#ec) .s-block--fixed-banner img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; background: var(--ec-bg); }

/* ---- H11 Footer: crest + brand line left, two link columns (markup from custom.js), original Raed columns hidden ---- */
body:not(#ec) .ec-foot { background: var(--ec-bg); padding: 70px 40px 40px; direction: ltr; border-top: 1px solid var(--ec-line-2); }
body:not(#ec) .ec-foot__in { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; }
body:not(#ec) .ec-foot__crest { width: 130px; height: auto; margin: 0 0 24px; display: block; }
body:not(#ec) .ec-foot__brand { color: rgba(237,237,234,.7); font: 400 14px/1.7 'Helvetica Neue', Arial, sans-serif; max-width: 360px; margin: 0; }
body:not(#ec) .ec-foot__brand b { color: var(--ec-text); }
body:not(#ec) .ec-foot h4 { font: 400 14px/1.4 var(--ec-heading); letter-spacing: .02em; margin: 0 0 16px; color: var(--ec-text); text-transform: uppercase; }
body:not(#ec) .ec-foot ul { list-style: none; margin: 0; padding: 0; }
body:not(#ec) .ec-foot li { margin: 0 0 10px; text-align: left; }
body:not(#ec) .ec-foot h4, body:not(#ec) .ec-foot p { text-align: left; }
body:not(#ec) .ec-foot a { color: var(--ec-text); opacity: .85; font: 400 14px/1.5 'Helvetica Neue', Arial, sans-serif; }
body:not(#ec) .ec-foot a:hover { opacity: 1; }
body:not(#ec) .ec-foot__copy { max-width: 1400px; margin: 40px auto 0; color: rgba(237,237,234,.5); font: 400 12px/1.5 'Helvetica Neue', Arial, sans-serif; }
body:not(#ec) .store-footer.ec-footed .store-footer__inner { display: none; }
body:not(#ec) .store-footer .s-payments-list-item { background: transparent; box-shadow: none; border: 0; filter: grayscale(1) brightness(1.5); opacity: .7; }
@media (max-width: 767px) { body:not(#ec) .ec-foot { padding: 50px 20px 30px; } body:not(#ec) .ec-foot__in { grid-template-columns: 1fr 1fr; } body:not(#ec) .ec-foot__in > div:first-child { grid-column: 1 / -1; } }

/* ---- H12 mobile drawer close + links ---- */
body:not(#ec) .mobile-menu .btn--close, body:not(#ec) .close-mobile-menu.btn--close { background: var(--ec-red); color: #fff; }
body:not(#ec) .mm-spn li a, body:not(#ec) .mobile-menu a { font: 500 16px/1.5 var(--ec-body); }

/* ---- H13 Size buttons + sticky add to cart + one price + tabs (markup from custom.js) ---- */
body:not(#ec) salla-product-options .ec-sizes { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; direction: ltr; }
body:not(#ec) salla-product-options select.ec-hide { display: none; }
body:not(#ec) .ec-size { min-width: 46px; height: 44px; padding: 0 14px; border: 1px solid var(--ec-line-2); border-radius: 4px; background: transparent; color: var(--ec-text); font: 500 15px/1 var(--ec-body); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
body:not(#ec) .ec-size:hover { border-color: var(--ec-text); }
body:not(#ec) .ec-size.is-on { background: var(--ec-text); color: var(--ec-bg); border-color: var(--ec-text); }
body:not(#ec) .ec-size[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
body:not(#ec) .ec-satc { position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; background: var(--ec-bg); color: var(--ec-text); transform: translate3d(0,100%,0); transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 10px rgba(0,0,0,.4); direction: ltr; }
body:not(#ec) .ec-satc.is-shown { transform: none; }
body:not(#ec) .ec-satc__in { max-width: 1200px; margin: 0 auto; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body:not(#ec) .ec-satc img { width: 60px; height: 60px; object-fit: cover; }
body:not(#ec) .ec-satc__left { display: flex; align-items: center; gap: 16px; min-width: 0; }
body:not(#ec) .ec-satc__title { font: 400 16px/1.3 var(--ec-heading); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:not(#ec) .ec-satc__btn { min-height: 46px; padding: 10px 30px; border: 1px solid var(--ec-red); border-radius: 5px; background: var(--ec-red); color: var(--ec-text); font: 500 16px/24px var(--ec-body); cursor: pointer; }
@media (max-width: 767px) { body:not(#ec) .ec-satc__left img, body:not(#ec) .ec-satc__title { display: none; } body:not(#ec) .ec-satc__btn { width: 100%; } }
body:not(#ec) .main-content h1 { font: 400 30px/42px var(--ec-heading); margin: 5px 0 12px; }
body:not(#ec) .main-content .total-price { font: 400 24px/32px var(--ec-body); color: var(--ec-text); }
body:not(#ec) .main-content .price_is_on_sale .total-price { color: var(--ec-red); }
@media (max-width: 767px) { body:not(#ec) .main-content h1 { font-size: 24px; line-height: 32px; } body:not(#ec) .main-content .total-price { font-size: 20px; } }
body:not(#ec) form.product-form > section.flex { display: none; }
body:not(#ec) .ec-tabs { max-width: 1220px; margin: 40px auto 0; padding: 0 15px; }
body:not(#ec) .ec-tabs__head { display: flex; gap: 40px; border-bottom: 1px solid var(--ec-line-2); }
body:not(#ec) .ec-tabs__tab { background: none; border: 0; padding: 0 0 14px; color: rgba(237,237,234,.55); font: 500 18px/1.3 var(--ec-body); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
body:not(#ec) .ec-tabs__tab.is-on { color: var(--ec-text); border-bottom-color: var(--ec-text); }
body:not(#ec) .ec-tabs__pane { display: none; padding: 28px 0; line-height: 1.8; }
body:not(#ec) .ec-tabs__pane.is-on { display: block; }
body:not(#ec) .product__description.ec-moved { display: none; }

/* ---- H14 Collection page: centred title above the sort row, like the reference ---- */
body:not(#ec).product-index :has(> h1.font-bold) { flex-direction: column; align-items: center; gap: 18px; text-align: center; }
body:not(#ec).product-index h1.font-bold { font: 400 clamp(28px, 3.4vw, 44px)/1.2 var(--ec-heading); text-transform: uppercase; }

/* ---- H15 Empty cart / empty states: centred (the LTR flip left them on the left) ---- */
body:not(#ec) .main-content:has(.no-content-placeholder) { width: 100% !important; }
body:not(#ec) .no-content-placeholder { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 70px auto; }


/* ---- H16 hero controls: dashes + thin arrow bottom-right (reference ec-hero__nav), Raed's round arrows hidden ---- */
body:not(#ec) .s-block--hero-slider .s-slider-nav-arrow, body:not(#ec) .s-block--hero-slider .s-slider-block__title { display: none !important; }
body:not(#ec) .ec-hero__nav { position: absolute; right: 40px; bottom: 76px; z-index: 5; display: flex; align-items: center; gap: 20px; direction: ltr; }
body:not(#ec) .ec-hero__dots { display: flex; gap: 9px; }
body:not(#ec) .ec-hero__dot { width: 30px; height: 2px; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: rgba(237,237,234,.22); transition: background .4s ease; }
body:not(#ec) .ec-hero__dot:hover { background: rgba(237,237,234,.4); }
body:not(#ec) .ec-hero__dot.is-on { background: var(--ec-red); }
body:not(#ec) .ec-hero__rule { width: 1px; height: 14px; background: rgba(237,237,234,.18); }
body:not(#ec) .ec-hero__next { padding: 8px 0 8px 2px; margin: 0; cursor: pointer; display: flex; align-items: center; background: none; border: 0; color: rgba(237,237,234,.42); transition: color .4s ease; }
body:not(#ec) .ec-hero__next:hover { color: var(--ec-text); }
body:not(#ec) .ec-hero__next svg { width: 22px; height: 10px; display: block; overflow: visible; }
@media (max-width: 600px) { body:not(#ec) .ec-hero__nav { right: 76px; bottom: 56px; gap: 10px; } body:not(#ec) .ec-hero__dots { gap: 6px; } body:not(#ec) .ec-hero__dot { width: 16px; } body:not(#ec) .ec-hero__next svg { width: 19px; height: 9px; } }

/* ---- H17 home cards in reference order: GLARE, HALO, RELIC, SHROUD (source order is GLARE, RELIC, SHROUD, HALO) ---- */
body:not(#ec) [data-testid="store-home-fixed-products"] .s-products-list-wrapper > :nth-child(2) { order: 3; }
body:not(#ec) [data-testid="store-home-fixed-products"] .s-products-list-wrapper > :nth-child(3) { order: 4; }
body:not(#ec) [data-testid="store-home-fixed-products"] .s-products-list-wrapper > :nth-child(4) { order: 2; }

/* ---- H18 policy strip = last thing on every page ---- */
body:not(#ec) .ec-legal { background: var(--ec-bg); border-top: 1px solid var(--ec-line-2); padding: 18px 20px; text-align: center; direction: ltr; }
body:not(#ec) .ec-legal a { color: rgba(237,237,234,.7); font: 400 13px/1.5 'Helvetica Neue', Arial, sans-serif; }
body:not(#ec) .ec-legal a:hover { color: var(--ec-text); }
body:not(#ec) .ec-legal__sep { margin: 0 14px; color: rgba(237,237,234,.3); }

@media (max-width: 600px) { body:not(#ec) .ec-legal { padding: 16px 76px 16px 16px; } }

/* ---- H19 product page: empty related-products slider hidden (reference shows none) ---- */
body:not(#ec):has(form.product-form) .s-products-slider-slider { display: none !important; }

/* ==== pixel-patches round 1 (from pixel-patches.css, P3 hero 88vh dropped: measured negative) ==== */
/* =====================================================================
   pixel-patches.css  -  Eclipse on LIVE old-Raed markup (eclipsera.fit)
   Purpose: close measured pixel gaps vs the Eclipse (Twilight) reference.
   Every selector carries `:not(#px):not(#py)` (two fake ids = 2 id-level points) so it beats the live `body X` rules
   (custom.css / v2) by specificity, without touching those files.
   Load order: paste AFTER custom.css (or append to the end of it).
   Rules from the reference we deliberately do NOT copy:
     - Arabic letter-spacing / uppercase (house rule: none on Arabic)
   Numbers = reference theme values (salla-theme/src/assets/styles/eclipse.scss + ec/*.scss)
   ===================================================================== */

/* ---------- P0  heading font stack: ref = "Archivo Black","Helvetica Neue",Arial -> Arabic falls back to Arial (narrower, ref look);
   live stack ends in bare sans-serif -> wider system Arabic font (e.g. h2 'وصل حديثاً' 243px live vs 200px ref) ---------- */
html body:not(#ec):not(#px):not(#py) { --ec-heading: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif; }
html body:not(#ec):not(#px):not(#py) .ec-cta__crest { width: 140px; }

/* ---------- P1  announcement strip: home only, 11px (ref .ec-ship 42px tall) ---------- */
/* top bar (code EC10) shows on every page */
html body:not(#ec):not(#px):not(#py) .ec-ship { font-size: 13px; line-height: 19.5px; padding: 14px 16px; }
html[lang="ar"] body:not(#ec):not(#px):not(#py) .ec-ship { font-size: 13px; }
@media (max-width: 600px) { html body:not(#ec):not(#px):not(#py) .ec-ship { font-size: 11.5px; line-height: 17px; padding: 11px 12px; letter-spacing: .1em; } html[lang="ar"] body:not(#ec):not(#px):not(#py) .ec-ship { font-size: 12.5px; } }

/* ---------- P2  header (>=1024): 98px row, 75px crest, 16/600 links ---------- */
@media (min-width: 1024px) {
  html body:not(#ec):not(#px):not(#py) #mainnav { height: 98px !important; min-height: 98px !important; border-bottom: 0; }
  html body:not(#ec):not(#px):not(#py) #mainnav .container { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  html body:not(#ec):not(#px):not(#py) #mainnav .container > .flex { height: 98px !important; padding: 0 20px 0 10px; align-items: start; }
  html body:not(#ec):not(#px):not(#py) #mainnav custom-main-menu { height: 98px !important; }
  html body:not(#ec):not(#px):not(#py) #mainnav .navbar-brand { align-self: start; margin-top: 10px !important; }
  html body:not(#ec):not(#px):not(#py) #mainnav .navbar-brand img { width: 75px; height: 75px; max-width: none; }
  html body:not(#ec):not(#px):not(#py) #mainnav .main-menu > li.root-level > a { font: 600 16px/24px Jost, sans-serif; padding: 20px 12px; }
  html body:not(#ec):not(#px):not(#py) #mainnav .container > .flex > .flex.justify-end { align-self: center; }
}
/* ---------- P2m header (<1024): 100px row, 80px crest, white burger, no account icon ---------- */
@media (max-width: 1023px) {
  html body:not(#ec):not(#px):not(#py) #mainnav { height: 100px !important; min-height: 100px !important; }
  html body:not(#ec):not(#px):not(#py) #mainnav .container > .flex { height: 100px !important; }
  html body:not(#ec):not(#px):not(#py) #mainnav .navbar-brand img { width: 80px; height: 80px; max-width: none; }
  html body:not(#ec):not(#px):not(#py) #mainnav .mburger i, html body:not(#ec):not(#px):not(#py) #mainnav .mburger .sicon-menu { color: #ededea; }
  html body:not(#ec):not(#px):not(#py) #mainnav salla-user-menu { display: none; }
}

/* ---------- P4  home product cards: 1360 wide, 22px gap, 4:5 image, 12/600 Helvetica name ---------- */
@media (min-width: 1024px) {
  html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products { display: block; margin-left: -50px; margin-right: -50px; width: calc(100% + 100px); max-width: none; }
  html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products .s-products-list-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; direction: ltr; }
}
@media (max-width: 900px) { html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products .s-products-list-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products .s-products-list-wrapper { gap: 14px; } html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products { margin-left: 10px; margin-right: 10px; } }
/* home cards (ref .ec-card): 4:5 media, 16px gap, 12/600 Helvetica name, 13px red price */
html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products .s-product-card-image { aspect-ratio: 4 / 5; }
html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products .s-product-card-content { padding: 0; margin-top: 16px; }
html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products .s-product-card-content-title { margin: 0 0 6px; }
html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products .s-product-card-content-title a { font: 600 12px/16.8px 'Helvetica Neue', Arial, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products .s-product-card-price { font: 400 13px/13px 'Helvetica Neue', Arial, sans-serif; letter-spacing: .52px; color: #cc1111; }
html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products .s-product-card-content-sub { margin: 0; height: 13px; }
html body:not(#ec):not(#px):not(#py) salla-products-list.horizontal-products .s-product-card-price i { font-size: 13px; line-height: 13px; }

/* ---------- P4b  collection cards (ref .ec-pc): 3:4 media, 20px gap (>=1024), Archivo 16px name, 16/24 Jost price in #ededea (NOT red) ---------- */
html body:not(#ec).product-index:not(#px):not(#py) .s-product-card-content { padding: 0 0 10px 10px; margin-top: 12px; }
@media (min-width: 1024px) { html body:not(#ec).product-index:not(#px):not(#py) .s-product-card-content { margin-top: 20px; } }
html body:not(#ec).product-index:not(#px):not(#py) .s-product-card-content-title { margin: 0 0 5px; }
html body:not(#ec).product-index:not(#px):not(#py) .s-product-card-content-title a { font: 400 16px/20.4px 'Archivo Black', 'Helvetica Neue', Arial, sans-serif; letter-spacing: normal; text-transform: none; }
html body:not(#ec).product-index:not(#px):not(#py) .s-product-card-price { font: 400 16px/24px Jost, sans-serif; letter-spacing: normal; color: #ededea; }

/* ---------- P5  statement / make / cta ---------- */
html[lang="ar"] body:not(#ec):not(#px):not(#py) .ec-statement__text { line-height: 1.25; }          /* ref 50px line; 64px live (Arabic has no harakat here) */
html body:not(#ec):not(#px):not(#py) .s-block--features > .ec-make__head { max-width: 640px; margin-left: 0; margin-right: auto; }
html[lang="ar"] body:not(#ec):not(#px):not(#py) .ec-make__title { line-height: 1.1; }              /* ref 50.6px; live 69px */
html body:not(#ec):not(#px):not(#py) .s-block--features__item { text-align: left; }
html body:not(#ec):not(#px):not(#py) .ec-cta { padding-bottom: 120px; }
html body:not(#ec):not(#px):not(#py) .ec-cta__input { background: transparent; border-radius: 0; border-color: rgba(237, 237, 234, .3); }
html[lang="ar"] body:not(#ec):not(#px):not(#py) .ec-cta__title { line-height: 1.22; }

/* ---------- P6  fixed banner = empty 217px block; ref has crest + ECLIPSE word there ---------- */
html body:not(#ec):not(#px):not(#py) .s-block--fixed-banner { display: none; }
html body:not(#ec):not(#px):not(#py) footer.store-footer { margin-top: 0; }
html body:not(#ec).index:not(#px):not(#py) main#main-content > * { margin-top: 0; }   /* kills space-y-16 (64px) stacking; section titles keep their own 90px */
html body:not(#ec).index:not(#px):not(#py) main#main-content > .s-block--banners { margin-top: 92px; }   /* ref .ec-arrivals bottom padding 90px (60px <641) */
@media (max-width: 640px) { html body:not(#ec).index:not(#px):not(#py) main#main-content > .s-block--banners { margin-top: 60px; } html body:not(#ec).index:not(#px):not(#py) [data-testid="store-home-fixed-products"] .s-block__title { margin-top: 60px; } }
html body:not(#ec).index:not(#px):not(#py) .ec-foot::before {
  content: "ECLIPSE"; display: block; text-align: center; font: 400 22px/33px 'Archivo Black', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 1.76px; color: #ededea;
  padding: 138px 0 40px; margin: 0 -65px;
  background: url("https://cdn.files.salla.network/theme/1041740216/5121e238-d2b0-435f-9235-7e5114592ba8-original.webp") no-repeat center 73px / 30px 30px;
}

/* ---------- P7  footer: 4 x 298px grid, 298px crest, Archivo 16px titles, 34px link rows ---------- */
@media (min-width: 1024px) {
  html body:not(#ec):not(#px):not(#py) .ec-foot { padding: 80px 65px; border-top: 0; }
  html body:not(#ec).index:not(#px):not(#py) .ec-foot { padding-top: 0; }
  html body:not(#ec).index:not(#px):not(#py) .ec-foot__in { margin-top: 80px; }
  html body:not(#ec):not(#px):not(#py) .ec-foot__in { max-width: none; grid-template-columns: repeat(4, 298px); gap: 40px; }
  html body:not(#ec):not(#px):not(#py) .ec-foot__crest { width: 133px; height: 133px; object-fit: contain; margin: 82px; } /* ref crest asset has transparent padding: 298px box, ~133px visible */
}
html body:not(#ec):not(#px):not(#py) .ec-foot__brand { font: 400 16px/24px Jost, sans-serif; color: #fff; margin-top: 20px; }
html body:not(#ec):not(#px):not(#py) .ec-foot__in h4 { font: 700 16px/20.4px 'Archivo Black', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0; margin: 0 0 12px; color: #fff; }
html body:not(#ec):not(#px):not(#py) .ec-foot__in a { font: 400 16px/34px Jost, sans-serif; color: #fff; }

/* ---------- P8  policy/info pages (body.page-single; ref .ec-policy): 740px column, centred 36px (30px <1024) title, NO breadcrumb, 16/24 body:not(#ec) ---------- */
html body:not(#ec).page-single:not(#px):not(#py) main#main-content > .container { display: flex; flex-direction: column; max-width: 740px; width: 100%; margin: 0 auto 64px; padding: 0 20px; }
html body:not(#ec).page-single:not(#px):not(#py) nav.breadcrumbs { display: none; }
html body:not(#ec).page-single:not(#px):not(#py) .container > .flex.justify-center, html body:not(#ec).page-single:not(#px):not(#py) .content--single-page { display: contents; }
html body:not(#ec).page-single:not(#px):not(#py) .content--single-page > h1 { order: -2; text-align: center; font: 400 30px/36px 'Archivo Black', 'Helvetica Neue', Arial, sans-serif; padding: 32px 16px; margin: 0; }
html body:not(#ec).page-single:not(#px):not(#py) .content--single-page > .content-entry { max-width: none; margin: 0; width: 100%; font: 400 16px/24px Jost, sans-serif; }
html body:not(#ec).page-single:not(#px):not(#py) .content--single-page > .content-entry p { margin: 0 0 12px; }
html body:not(#ec).page-single:not(#px):not(#py) .content--single-page > salla-comments { display: none; }
@media (min-width: 1024px) { html body:not(#ec).page-single:not(#px):not(#py) .content--single-page > h1 { font-size: 36px; line-height: 40px; padding: 64px 16px; } }
/* breadcrumb row on product / collection / cart: 53px (15px item padding) instead of 64px */
html body:not(#ec):not(#px):not(#py) .container > nav.breadcrumbs { border-bottom: 0; padding: 0; }
html body:not(#ec):not(#px):not(#py) .container > nav.breadcrumbs ol { padding: 15px 0; }
html body:not(#ec).cart:not(#px):not(#py) main#main-content > .container { display: flex; flex-direction: column; }
html body:not(#ec).cart:not(#px):not(#py) .container > nav.breadcrumbs { order: -1; }

/* ---------- P9  collection: title "المنتجات"/"Products" 42px centred, sort left ---------- */
html[lang="ar"] body:not(#ec):not(#px):not(#py) #page-main-title { font-size: 0; }
html[lang="ar"] body:not(#ec):not(#px):not(#py) #page-main-title::after { content: "المنتجات"; font: 400 42px/52px 'Archivo Black', 'Helvetica Neue', Arial, sans-serif; }
html[lang="en"] body:not(#ec):not(#px):not(#py) #page-main-title { font-size: 0; }
html[lang="en"] body:not(#ec):not(#px):not(#py) #page-main-title::after { content: "Products"; font: 400 42px/52px 'Archivo Black', 'Helvetica Neue', Arial, sans-serif; text-transform: capitalize; }

/* ---------- P7b  legal strip (policy links) was stacking 1 link per row (227px tall); make it one inline row (61px) ---------- */
html body:not(#ec):not(#px):not(#py) footer.store-footer .ec-legal a { display: inline; font: 400 13px/1.5 'Helvetica Neue', Arial, sans-serif; }
html body:not(#ec):not(#px):not(#py) .ec-legal { padding: 18px 20px; }

/* ---------- P10  cart page head: ref = centred 36px title (60px from header), crumbs under it ---------- */
html[lang="ar"] body:not(#ec).cart:not(#px):not(#py) main#main-content > .container::before { content: "عربة التسوق"; }
html[lang="en"] body:not(#ec).cart:not(#px):not(#py) main#main-content > .container::before { content: "Shopping Cart"; }
html body:not(#ec).cart:not(#px):not(#py) main#main-content > .container::before { order: -2; text-align: center; font: 400 36px/48px 'Archivo Black', 'Helvetica Neue', Arial, sans-serif; color: #ededea; margin: 60px 0 8px; }
html body:not(#ec).cart:not(#px):not(#py) .no-content-placeholder .icon { display: none; }
html body:not(#ec).cart:not(#px):not(#py) .container > nav.breadcrumbs { margin-bottom: 60px; }
html body:not(#ec).cart:not(#px):not(#py) .no-content-placeholder { margin: 80px auto -32px; padding: 0; }   /* parent .pt-5 adds 20px top / 80px bottom: net 100px above, ~48px below (ref .ec-cart__empty margin 100 + .ec-cart mb 100) */

/* ---------- P11  product page (>=1024): 1220 grid, 560px gallery + 560px info, 104x135 thumbs, tabs 1170 wide ---------- */
@media (min-width: 1024px) {
  html body:not(#ec).product-single:not(#px):not(#py) .container--product-details > div { margin: 0 -10px; width: calc(100% + 20px); }
  html body:not(#ec).product-single:not(#px):not(#py) .container--product-details .sidebar { width: 610px !important; padding: 0 25px; margin: 0; flex: none; }
  html body:not(#ec).product-single:not(#px):not(#py) .container--product-details .main-content { width: 610px !important; padding: 0 25px; flex: none; }
  html body:not(#ec).product-single:not(#px):not(#py) .s-slider-thumbs .swiper-slide { width: 104px !important; height: 135px; margin: 0 10px 0 0 !important; padding: 5px; border: 1px solid transparent; border-radius: 0; background: transparent; }
  html body:not(#ec).product-single:not(#px):not(#py) .s-slider-thumbs .swiper-slide-thumb-active { border-color: #ededea; }
  html body:not(#ec).product-single:not(#px):not(#py) .s-slider-thumbs { margin-top: 15px; }
  html body:not(#ec).product-single:not(#px):not(#py) .s-slider-thumbs img { object-fit: cover; border-radius: 0; }
  html body:not(#ec).product-single:not(#px):not(#py) .sidebar .swiper-slide { background: transparent; border-radius: 0; }
  html body:not(#ec).product-single:not(#px):not(#py) .ec-tabs { width: calc(100% - 30px); max-width: 1170px; margin-left: auto; margin-right: auto; }
  html body:not(#ec).product-single:not(#px):not(#py) .ec-tabs__head { gap: 60px; }
}
html body:not(#ec).product-single:not(#px):not(#py) [data-testid="store-product-price"] p { font-weight: 400; }

/* ---------- P12  collection: 1310 wide grid (65px side padding) ---------- */
@media (min-width: 1280px) { html body:not(#ec).product-index:not(#px):not(#py) .container--products-list .main-content { padding: 0 55px; } }

/* ---------- P12b collection head: title centred, sort bare on the start side (ref .ec-colhead + .ec-coll__toolbar) ---------- */
html body:not(#ec).product-index:not(#px):not(#py) .container--products-list .main-content > div.flex:first-child { flex-direction: column; align-items: stretch; margin-bottom: 24px; }
html body:not(#ec).product-index:not(#px):not(#py) #page-main-title { text-align: center; margin: 0 0 60px; padding: 0; }
html body:not(#ec).product-index:not(#px):not(#py) .container--products-list .main-content > div.flex:first-child > div { align-self: flex-start; }
html body:not(#ec).product-index:not(#px):not(#py) #product-filter { background: transparent; border: 0; padding: 0; font: 500 16px/24px Jost, sans-serif; color: #ededea; width: auto; }
html body:not(#ec).product-index:not(#px):not(#py) label[for="product-filter"] { display: none; }

/* ---------- P13  the sticky add-to-cart bar (.ec-satc) leaks onto collection/cart/pages: product page only ---------- */
html body:not(#ec):not(.product-single):not(#px):not(#py) .ec-satc { display: none !important; }

/* ---------- P14  tablet/phone footer: <=1023 two 370px columns (crest box 370, visible ~165px), <=767 one column (crest box 360, visible ~160px); home accent 192px on phones ---------- */
@media (max-width: 1023px) {
  html body:not(#ec):not(#px):not(#py) .ec-foot { padding: 30px 15px 0; }
  html body:not(#ec).index:not(#px):not(#py) .ec-foot { padding-top: 0; }
  html body:not(#ec):not(#px):not(#py) .ec-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; margin-top: 0; }
  html body:not(#ec).index:not(#px):not(#py) .ec-foot__in { margin-top: 30px; }
  html body:not(#ec):not(#px):not(#py) .ec-foot__crest { width: 165px; height: 165px; margin: 102px; }
  html body:not(#ec):not(#px):not(#py) .ec-foot__in > div { padding-bottom: 30px; }
}
@media (max-width: 767px) {
  html body:not(#ec).index:not(#px):not(#py) .ec-foot::before { padding: 127px 0 32px; margin: 0 -15px; background-position: center 62px; }
  html body:not(#ec):not(#px):not(#py) .ec-foot__in { grid-template-columns: 1fr; }
  html body:not(#ec):not(#px):not(#py) .ec-foot__crest { width: 160px; height: 160px; margin: 100px; }
  html body:not(#ec):not(#px):not(#py) .ec-foot__in h4 { margin-bottom: 0; line-height: 42px; }
}

/* ---------- P15  responsive title sizes (ref: pagehead 26px <1024 / 36px; collection title 42 / 33 <1280 / 29 <768) ---------- */
@media (max-width: 1023px) {
  html body:not(#ec).cart:not(#px):not(#py) main#main-content > .container::before { font-size: 26px; line-height: 34.6px; margin-top: 30px; }
}
@media (max-width: 1279px) { html[lang="ar"] body:not(#ec):not(#px):not(#py) #page-main-title::after, html[lang="en"] body:not(#ec):not(#px):not(#py) #page-main-title::after { font-size: 33px; line-height: 41px; } }
@media (max-width: 767px)  { html[lang="ar"] body:not(#ec):not(#px):not(#py) #page-main-title::after, html[lang="en"] body:not(#ec):not(#px):not(#py) #page-main-title::after { font-size: 29px; line-height: 36px; } }

/* ---------- P11b product gallery: no frame/arrows/red thumb ring (ref: bare image, white 1px ring on active thumb) ---------- */
html body:not(#ec).product-single:not(#px):not(#py) .sidebar .s-slider-container { border: 0; background: transparent; border-radius: 0; }
html body:not(#ec).product-single:not(#px):not(#py) .sidebar .swiper-slide, html body:not(#ec).product-single:not(#px):not(#py) .s-slider-thumbs .swiper-slide { box-shadow: none; }
html body:not(#ec).product-single:not(#px):not(#py) .sidebar .s-slider-block__title { display: none; }
html body:not(#ec).product-single:not(#px):not(#py) .s-slider-thumbs .swiper-slide::after { display: none; }

/* ---------- P12c  collection: space under the grid (ref .ec-coll__wrap margin 60px + 30px grid padding; 30px on tablets/phones) ---------- */
html body:not(#ec).product-index:not(#px):not(#py) .container--products-list { margin-bottom: 30px; }
@media (min-width: 1024px) { html body:not(#ec).product-index:not(#px):not(#py) .container--products-list { margin-bottom: 90px; } }


/* ---- H20 contact page form (ref .ec-contact) ---- */
html body:not(#ec):not(#px):not(#py) .ec-contact__heading { margin: 0 0 10px; font: 600 24px/32px 'Archivo Black', 'Helvetica Neue', Arial, sans-serif; color: #ededea; text-align: start; }
html body:not(#ec).page-single:not(#px):not(#py) .ec-contact__form { width: 100%; margin: 40px 0 0; direction: ltr; }
html body:not(#ec):not(#px):not(#py) .ec-contact__fields { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; }
html body:not(#ec):not(#px):not(#py) .ec-contact__fields .ec-field { flex: 1 1 260px; width: auto; }
html body:not(#ec):not(#px):not(#py) .ec-field { width: 100%; min-height: 46px; padding: 6px 12px; background: #000; color: #fff; border: 1px solid rgba(237,237,234,.22); border-radius: 5px; font: 400 16px/32px Jost, sans-serif; outline: 0; display: block; }
html body:not(#ec):not(#px):not(#py) .ec-field::placeholder { color: #fff; opacity: .75; }
html body:not(#ec):not(#px):not(#py) .ec-field:focus { border-color: #ededea; }
html body:not(#ec):not(#px):not(#py) .ec-contact__msg { min-height: 206px; margin-bottom: 27px; resize: vertical; }
html body:not(#ec):not(#px):not(#py) .ec-check { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 30px; cursor: pointer; font: 400 16px/24px Jost, sans-serif; }
html body:not(#ec):not(#px):not(#py) .ec-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
html body:not(#ec):not(#px):not(#py) .ec-check__icon { flex: none; width: 20px; height: 20px; border: 1px solid rgba(237,237,234,.75); border-radius: 3px; display: flex; align-items: center; justify-content: center; }
html body:not(#ec):not(#px):not(#py) .ec-check input:checked + .ec-check__icon { background: #ededea; }
html body:not(#ec):not(#px):not(#py) .ec-btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 10px 30px; border-radius: 5px; border: 1px solid #cc1111; background: #cc1111; color: #ededea; font: 500 16px/23px Jost, sans-serif; cursor: pointer; }
html body:not(#ec):not(#px):not(#py) .ec-btn-primary:hover { background: #fff; color: #000; border-color: #fff; }

/* ---- H21 phone: keep the policy strip clear of the WhatsApp float (beats P7b padding) ---- */
@media (max-width: 600px) { html body:not(#ec):not(#px):not(#py) .ec-legal { padding: 16px 76px 16px 16px; } }

/* ==== pixel-patches-r2 (top 5) ==== */
/* =====================================================================
   pixel-patches-r2.css  -  ROUND 2 = TOP 5 only, on top of custom.css + round 1 (live 2026-10-16)
   Values probed on the real live DOM (public eclipsera.fit) vs the current Eclipse theme render.
   Same specificity trick as round 1: :not(#ec):not(#px):not(#py). Paste AFTER the round-1 block. NOT pasted into Salla.
   Dropped as under 1 point / cosmetic: header crest size (live 47px vs ref 33px visible), footer link rows 34px, ship strip 9.5px on phones,
   hero button 13px, CTA padding, price size. Hero 88vh stays dropped (your call).
   ===================================================================== */

/* ---------- R2-1  PHONE PRODUCT (+5.9 aligned pts): Raed's `section.sticky-product-bar` (qty + wishlist + notify + Apple Pay + red add-to-cart, 120px)
   is position:fixed at the bottom of the screen and sits on top of the title/price in the page flow. Ref = inline buy box under the sizes.
   Make it a normal block on phones; the ref-style sticky bar `.ec-satc` still appears while scrolling, so add-to-cart is never lost. ---------- */
@media (max-width: 767px) {
  html body:not(#ec):not(#ec).product-single:not(#px):not(#py) section.sticky-product-bar { position: static; padding: 0 0 20px; background: transparent; box-shadow: none; border-radius: 0; }
}

/* ---------- R2-2  PHONE HOME cards (+2.6 aligned pts): 168px cards (ref) instead of 177px; list inset 10px each side inside the 10px container = 20px ---------- */
@media (max-width: 1023px) {
  html body:not(#ec):not(#ec):not(#px):not(#py) salla-products-list.horizontal-products { display: block; width: auto; max-width: none; margin-left: 10px; margin-right: 10px; }
}

/* ---------- R2-3  PRODUCT desktop (>=1024): crumb gap 16px, tabs block 1200 wide / 48px above / 60px below, tab buttons 52px tall, pane starts 40px under the tabs,
   and the 64px space-y-16 stack of EMPTY widgets (reviews 160px, before-related, related) that pushes the footer 212px lower than the ref ---------- */
@media (min-width: 1024px) {
  html body:not(#ec):not(#ec).product-single:not(#px):not(#py) .container--breadcrumbs { margin-bottom: 16px; }
  html body:not(#ec):not(#ec).product-single:not(#px):not(#py) main#main-content > * { margin-top: 0; }
  html body:not(#ec):not(#ec).product-single:not(#px):not(#py) .ec-tabs { width: calc(100% - 30px); max-width: 1200px; margin: 48px auto 60px; padding: 0 15px 40px; }
  html body:not(#ec):not(#ec).product-single:not(#px):not(#py) .ec-tabs__head button { padding: 12px 0; line-height: 27px; margin: 0; }
  html body:not(#ec):not(#ec).product-single:not(#px):not(#py) .ec-tabs__pane { padding: 40px 0 0; line-height: 28px; }
  html body:not(#ec):not(#ec).product-single:not(#px):not(#py) [data-testid="store-product-price"] { font-size: 24px; line-height: 32px; margin-bottom: 25px; }
  /* OPTIONAL: the empty reviews widget (160px). Delete this one rule when the store has real reviews. */
  html body:not(#ec):not(#ec).product-single:not(#px):not(#py) salla-comments { display: none; }
}

/* ---------- R2-4  COLLECTION head (>=1024) (+3.7 strict on collection 1440): crumbs 28.8px under the header, title block spacing, sort row 24px bare ---------- */
@media (min-width: 1024px) {
  html body:not(#ec):not(#ec).product-index:not(#px):not(#py) .container--breadcrumbs { padding-top: 28.8px; }
  html body:not(#ec):not(#ec).product-index:not(#px):not(#py) .container--breadcrumbs nav.breadcrumbs { margin-bottom: 20px; }
}
html body:not(#ec):not(#ec).product-index:not(#px):not(#py) .container--products-list .main-content > div.flex:first-child > div { width: 100%; height: 24px; }
html body:not(#ec):not(#ec).product-index:not(#px):not(#py) .container--products-list .main-content > div.flex:first-child > div > div { height: 24px; }
html body:not(#ec):not(#ec).product-index:not(#px):not(#py) #product-filter { height: 24px; min-height: 0; padding: 0 18px 0 0; border: 0; border-radius: 0; font-weight: 500; }

/* ---------- R2-5  CONTACT page desktop (+3.0 aligned, +7.4 strict): ref layout = centred 36px title, crumbs under it, 1048px form column.
   Uses :has() (Chrome/Safari ok; UNVERIFIED that Salla's CSS box keeps :has) - without it nothing breaks, the page just stays as round 1. ---------- */
@media (min-width: 1024px) {
  html body:not(#ec):not(#ec).page-single:not(#px):not(#py) main#main-content > .container:has(.ec-contact__form) { max-width: 1048px; padding: 0 15px; }
  html body:not(#ec):not(#ec).page-single:not(#px):not(#py) .container:has(.ec-contact__form) nav.breadcrumbs { display: block; order: -1; margin: 8px 0 60px; }
  html body:not(#ec):not(#ec).page-single:not(#px):not(#py) .container:has(.ec-contact__form) .content--single-page > h1 { padding: 60px 0 0; font-size: 36px; line-height: 48px; }
  html body:not(#ec):not(#ec):not(#px):not(#py) .ec-contact__fields { margin-left: -15px; margin-right: -15px; gap: 0; }
  html body:not(#ec):not(#ec):not(#px):not(#py) .ec-contact__fields .ec-field { margin: 0 15px 30px; flex: 1 1 calc(50% - 30px); }
}


/* ---- H22 phone cart: the fixed checkout summary sat under the fixed bottom nav (7px of the red button showed): lift it above the 56px nav and keep content clear ---- */
@media (max-width: 1023px) {
  html body:not(#ec):not(#px):not(#py) salla-cart-summary-card.s-cart-summary-card--mobile { bottom: 56px; z-index: 5; }
  html body:not(#ec).cart:not(#px):not(#py) { padding-bottom: 230px; }
}

/* ---- H23 cart: Salla's own discount-code box (dashboard setting "allow coupon in cart" = ON) in the Eclipse dark look + readable summary title ---- */
html body:not(#ec):not(#px):not(#py) .s-cart-summary-card-sheet-title, html body:not(#ec):not(#px):not(#py) .s-cart-summary-card-sheet-header h3 { color: #ededea !important; }
html body:not(#ec):not(#px):not(#py) .s-cart-summary-card-line, html body:not(#ec):not(#px):not(#py) .s-cart-summary-card-line span, html body:not(#ec):not(#px):not(#py) .s-cart-summary-card-line b { color: #ededea; }
html body:not(#ec):not(#px):not(#py) .s-cart-coupons-wrapper { background: transparent !important; border: 0 !important; padding: 14px 16px 16px !important; }
html body:not(#ec):not(#px):not(#py) .s-cart-coupons-coupon-label { display: block; margin: 0 0 10px; font: 600 14px/20px Jost, sans-serif; color: #ededea !important; }
html body:not(#ec):not(#px):not(#py) .s-cart-coupons-coupon-input-container { display: flex; gap: 8px; align-items: stretch; direction: ltr; }
html body:not(#ec):not(#px):not(#py) .s-cart-coupons-wrapper input.form-input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; background: #000 !important; color: #ededea !important; border: 1px solid rgba(237,237,234,.22) !important; border-radius: 0 !important; font: 400 15px/1 Jost, sans-serif; text-transform: uppercase; box-shadow: none; }
html body:not(#ec):not(#px):not(#py) .s-cart-coupons-wrapper input.form-input::placeholder { color: rgba(237,237,234,.55); text-transform: none; }
html body:not(#ec):not(#px):not(#py) .s-cart-coupons-wrapper input.form-input:focus { border-color: #ededea !important; outline: 0; }
html body:not(#ec):not(#px):not(#py) .s-cart-coupons-wrapper button.s-button-element { height: 44px; min-width: 88px; padding: 0 18px; background: #cc1111 !important; color: #ededea !important; border: 1px solid #cc1111 !important; border-radius: 0 !important; font: 600 14px/1 Jost, sans-serif; box-shadow: none; }
html body:not(#ec):not(#px):not(#py) .s-cart-coupons-wrapper button.s-button-element:hover { background: #ededea !important; color: #0a0a0a !important; border-color: #ededea !important; }
html body:not(#ec):not(#px):not(#py) .s-cart-coupons-wrapper button.s-cart-coupons-coupon-button-remove { background: transparent !important; border-color: rgba(237,237,234,.4) !important; }
html body:not(#ec):not(#px):not(#py) .s-cart-coupons-wrapper .s-cart-coupons-coupon-button-remove i { color: #ededea; }

/* ---- H24 login popup: hide the social block (divider + Google/Facebook/Apple) by clipping the cross-origin iframe, phone-number step only ---- */
html body:not(#ec):not(#px):not(#py) .s-login-modal .s-modal-body.ec-nosocial iframe { height: 202px !important; }
@media (min-width: 481px) { html body:not(#ec):not(#px):not(#py) .s-login-modal .s-modal-body.ec-nosocial iframe { height: 282px !important; } }

/* ---- H25 skeleton loaders: dark everywhere (no white blocks) + empty basket-gap widget hidden ---- */
html body:not(#ec):not(#px):not(#py) salla-basket-gap { display: none !important; }
html body:not(#ec):not(#px):not(#py) .s-skeleton-wrapper, html body:not(#ec):not(#px):not(#py) .s-offer-modal-skeleton, html body:not(#ec):not(#px):not(#py) [class*="skeleton"]:not(.s-skeleton-item) { background-color: #111 !important; }
html body:not(#ec):not(#px):not(#py) .s-skeleton-item, html body:not(#ec):not(#px):not(#py) [class*="skeleton-item"] { background: linear-gradient(90deg, #1c1c1c 25%, #262626 50%, #1c1c1c 75%) !important; background-size: 200% 100% !important; animation: ec-shimmer 1.4s linear infinite; }
@keyframes ec-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- H26 header: language toggle label + plain outline account icon (no avatar box) ---- */
html body:not(#ec):not(#px):not(#py) .s-localization-modal-trigger-btn.ec-lang { font: 400 15px/1 'Archivo Black', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .04em; color: #ededea; background: transparent; border: 0; padding: 0 6px; }
html[lang="ar"] body:not(#ec):not(#px):not(#py) .s-localization-modal-trigger-btn.ec-lang { letter-spacing: 0; }
html body:not(#ec):not(#px):not(#py) salla-user-menu { display: inline-flex; align-items: center; }
html body:not(#ec):not(#px):not(#py) .ec-ub { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; border-radius: 0 !important; overflow: visible !important; }
html body:not(#ec):not(#px):not(#py) .ec-ub-hide { display: none !important; }
html body:not(#ec):not(#px):not(#py) .ec-uicon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #ededea; }
html body:not(#ec):not(#px):not(#py) .ec-ub-photo { width: 28px !important; height: 28px !important; border-radius: 50% !important; object-fit: cover; }
html body:not(#ec):not(#px):not(#py) #mainnav salla-user-menu { margin-inline-end: 6px; }

html body:not(#ec):not(#px):not(#py) .s-cart-coupons-wrapper salla-button.s-cart-coupons-coupon-button { display: block; flex: none; background: transparent !important; border: 0 !important; padding: 0 !important; height: auto; min-width: 0; box-shadow: none; }

/* ---- H27 home hero + arrivals (photo audit) ---- */
/* Raed's own 60% black overlay on the slide image (the "remove dark overlay" setting): off here, so the photo matches the reference; our bottom scrim (same gradient as the reference .ec-hero__scrim) stays */
html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .overlay-bg::after { background: transparent !important; }
/* reference .ec-hero min-height: 88vh at every width (phones were 78vh = 658px at 844) */
@media (max-width: 1023px) { html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .swiper-slide { min-height: 88vh; } }
/* arrivals never collapses to the 64px title while the cards hydrate on phones */
@media (max-width: 767px) { html body:not(#ec):not(#px):not(#py) [data-testid="store-home-fixed-products"] salla-products-list { min-height: 560px; } }
/* cart "You saved" pill: dark, no mint-white block */
html body:not(#ec):not(#px):not(#py) .s-cart-summary-card-bar-savings-badge { background: #0f2a1c !important; color: #7fd08a !important; }

/* ---- H28 archive block: five real bag photos (portrait 4:5), whole photo visible, one row on desktop ---- */
html body:not(#ec):not(#px):not(#py) .s-block--banners .square-photos-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-template-rows: none !important; gap: 2px !important; height: auto !important; }
html body:not(#ec):not(#px):not(#py) .s-block--banners .square-photos { grid-area: auto !important; grid-column: auto !important; grid-row: auto !important; width: auto !important; height: auto !important; aspect-ratio: 4 / 5 !important; }
html body:not(#ec):not(#px):not(#py) .s-block--banners { margin-bottom: 90px !important; }
@media (max-width: 767px) {
  html body:not(#ec):not(#px):not(#py) .s-block--banners .square-photos-grid { grid-template-columns: 1fr 1fr !important; }
  html body:not(#ec):not(#px):not(#py) .s-block--banners .square-photos:first-child { grid-column: 1 / -1 !important; aspect-ratio: 4 / 5 !important; }
}
/* phone hero = whole 4:5 portrait photo on top (no crop), text on a black strip under it (slides swapped to 1080x1350 by v2-cart-login.js) */
@media (max-width: 768px) {
  html body:not(#ec):not(#px):not(#py) .s-block--hero-slider, html body:not(#ec):not(#px):not(#py) .s-block--hero-slider salla-slider, html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .swiper { min-height: 0 !important; }
  html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .swiper-slide { min-height: 0 !important; height: calc(125vw + 170px) !important; background: #0a0a0a; }
  html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .overlay-bg { background-size: 100% auto !important; background-position: 50% 0 !important; background-repeat: no-repeat !important; }
  html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .swiper-slide::after { top: auto !important; bottom: 0 !important; height: 230px !important; background: linear-gradient(180deg, rgba(10,10,10,0) 0, #0a0a0a 26%) !important; }
  html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .home-slider__content { padding: 0 20px 30px !important; }
  html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .home-slider__content h2 { margin-bottom: 16px !important; }
}
/* desktop hero: composite keeps the subject on the right; keep the right side when the viewport is narrower than the image */
@media (min-width: 769px) {
  html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .overlay-bg { background-size: cover !important; background-position: 85% 50% !important; }
}
/* hero title: always fully inside the viewport (desktop); no transform/animation can push it off the left edge */
@media (min-width: 769px) {
  html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .home-slider__content { left: 0 !important; right: auto !important; width: 100% !important; box-sizing: border-box !important; padding-left: max(40px, env(safe-area-inset-left)) !important; transform: none !important; translate: none !important; }
  html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .home-slider__content * { transform: none !important; translate: none !important; animation: none !important; }
  html body:not(#ec):not(#px):not(#py) .s-block--hero-slider .home-slider__content h2 { max-width: calc(100vw - 80px) !important; overflow-wrap: normal; }
}
/* sale price on every card: red sale price + struck #a3a3a3 regular price, one line */
html body:not(#ec):not(#px):not(#py) .s-product-card-sale-price, html body:not(#ec):not(#px):not(#py) .s-product-card-content-sub.ec-has-before { display: flex !important; align-items: baseline; flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
html body:not(#ec):not(#px):not(#py) .s-product-card-sale-price h4, html body:not(#ec):not(#px):not(#py) .ec-has-before .s-product-card-price { color: #cc1111 !important; margin: 0; }
html body:not(#ec):not(#px):not(#py) .s-product-card-sale-price > span, html body:not(#ec):not(#px):not(#py) .ec-before { color: #a3a3a3 !important; font-size: 12px !important; line-height: 1 !important; text-decoration: line-through; font-family: Jost, sans-serif; }
html body:not(#ec):not(#px):not(#py) .s-product-card-sale-price > span i, html body:not(#ec):not(#px):not(#py) .ec-before i { font-size: 11px; }
/* size exchange note */
html body:not(#ec):not(#px):not(#py) .ec-exch { margin: 8px 0 0; color: #a3a3a3; font: 400 13px/1.5 Jost, sans-serif; text-align: start; }
html[lang="ar"] body:not(#ec):not(#px):not(#py) .ec-exch { direction: rtl; text-align: right; }
/* ===== phone add-to-cart fix (iPhone Safari): no fixed bar under the Safari pill; native in-flow button, full width, with a visible label ===== */
html body:not(#ec):not(#px):not(#py) .product-sku-wrapper { display: none !important; }
@media (max-width: 768px) {
  html body:not(#ec):not(#px):not(#py) .ec-satc, html body:not(#ec).product-single:not(#px):not(#py) .ec-top, html body:not(#ec).product-single:not(#px):not(#py) .ec-wa { display: none !important; }
  html body:not(#ec).product-single:not(#px):not(#py) { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  html body:not(#ec).product-single:not(#px):not(#py) section.sticky-product-bar salla-add-product-button { display: flex !important; flex-wrap: wrap; gap: 8px; }
  html body:not(#ec).product-single:not(#px):not(#py) section.sticky-product-bar .s-add-product-button-main { display: contents !important; }
  html body:not(#ec).product-single:not(#px):not(#py) section.sticky-product-bar .s-add-product-button-main > salla-button { flex: 1 1 100% !important; width: 100% !important; }
  html body:not(#ec).product-single:not(#px):not(#py) section.sticky-product-bar .s-add-product-button-main > salla-button .s-button-element { width: 100% !important; background: #cc1111 !important; border-color: #cc1111 !important; color: #fff !important; min-height: 48px; justify-content: center; }
  html body:not(#ec).product-single:not(#px):not(#py) section.sticky-product-bar .s-add-product-button-sr-only { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; margin: 0 8px !important; white-space: nowrap !important; color: #fff !important; font: 500 16px/1 Jost, sans-serif !important; }
  html body:not(#ec).product-single:not(#px):not(#py) section.sticky-product-bar .s-add-product-button-mini-checkout { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 0; }
  html body:not(#ec).product-single:not(#px):not(#py) section.sticky-product-bar salla-quick-buy { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 0; }
}
@media (max-width: 768px) {
  html body:not(#ec).product-single:not(#px):not(#py) section.sticky-product-bar .s-add-product-button-main > salla-button .s-button-text { display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 8px; }
}
/* size required message */
html body:not(#ec):not(#px):not(#py) .ec-sizeerr { margin: 8px 0 0; color: #cc1111; font: 500 13px/1.4 Jost, sans-serif; text-align: start; }
html[lang="ar"] body:not(#ec):not(#px):not(#py) .ec-sizeerr { direction: rtl; text-align: right; }
html body:not(#ec):not(#px):not(#py) .ec-sizes.ec-bad .ec-size { border-color: #cc1111; }
html body:not(#ec):not(#px):not(#py) .ec-sizes.ec-shake { animation: ecShake .45s ease; }
@keyframes ecShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
/* ===== trust strip ===== */
html body:not(#ec):not(#px):not(#py) .ec-trust { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 12px 14px; border-top: 1px solid rgba(237,237,234,.12); border-bottom: 1px solid rgba(237,237,234,.12); background: #0a0a0a; color: #edede9; font-family: Jost, 'PingARLT', sans-serif; margin: 0; width: 100%; box-sizing: border-box; }
html body:not(#ec):not(#px):not(#py) .ec-trust--pdp { margin-top: 16px; border-bottom: 0; flex: 1 1 100%; }
html body:not(#ec):not(#px):not(#py) .ec-trust__it { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; text-align: center; }
html body:not(#ec):not(#px):not(#py) .ec-trust__it svg { width: 20px; height: 20px; stroke: #edede9; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; flex: none; }
html body:not(#ec):not(#px):not(#py) .ec-trust__tx { display: flex; flex-direction: column; gap: 2px; align-items: center; min-width: 0; }
html body:not(#ec):not(#px):not(#py) .ec-trust__t { font-size: 11.5px; line-height: 1.25; color: #edede9; }
html body:not(#ec):not(#px):not(#py) .ec-trust__s { font-size: 10.5px; line-height: 1.25; color: rgba(237,237,234,.62); }
@media (max-width: 400px) { html body:not(#ec):not(#px):not(#py) .ec-trust { padding: 11px 8px; gap: 4px; } html body:not(#ec):not(#px):not(#py) .ec-trust__t { font-size: 11px; } html body:not(#ec):not(#px):not(#py) .ec-trust__s { font-size: 10px; } }
@media (min-width: 769px) {
  html body:not(#ec):not(#px):not(#py) .ec-trust { padding: 14px 40px; gap: 24px; justify-content: center; }
  html body:not(#ec):not(#px):not(#py) .ec-trust__it { flex: 0 0 auto; flex-direction: row; gap: 10px; }
  html body:not(#ec):not(#px):not(#py) .ec-trust__tx { flex-direction: row; gap: 5px; white-space: nowrap; }
  html body:not(#ec):not(#px):not(#py) .ec-trust__t, html body:not(#ec):not(#px):not(#py) .ec-trust__s { font-size: 12.5px; }
  html body:not(#ec):not(#px):not(#py) .ec-trust__it svg { width: 22px; height: 22px; }
  html body:not(#ec):not(#px):not(#py) .ec-trust--pdp { flex-wrap: wrap; gap: 12px 18px; padding: 14px 0; justify-content: flex-start; }
}
html body:not(#ec):not(#px):not(#py) .ec-trust__t, html body:not(#ec):not(#px):not(#py) .ec-trust__s { white-space: nowrap; }
@media (max-width: 768px) { html body:not(#ec):not(#px):not(#py) .ec-trust__lg { display: none; } }
/* AR top bar reads right-to-left (colon stays after EC10); EN stays LTR */
html[lang="ar"] body:not(#ec):not(#px):not(#py) .ec-ship { direction: rtl !important; unicode-bidi: normal !important; }

html body:not(#ec):not(#px):not(#py) .ec-trust__it .ec-emb { display: block; flex: none; width: 18px; height: 20px; background: #edede9; opacity: .85; -webkit-mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAABeCAYAAABfLCjeAAAIj0lEQVR42u2de4wX1RXHP0tbm5iKPHcJwbWkFejWYs1aEZGY+Czd0ha29dGQKmgIoYCkRSUVqY+KYkhDXxhKW43WKN1SaxOgG3wGkW4LVtfWElofLaiwINDFVtMYTv/4nYmX670z9zf7e8zszkkmM3Mf585859x7z7333DMNIkIOaD1wedYfclAOgLwbuCwPX7whB5IZPeA3gTUFmOlpH9Bk3J8M9BbV3F1924Dperioybr/uCfdKoPngJTM9Y62cCHwY0cVj+gMoDsmHqBhIErm5cB1VtiPgEUBzzsM6LLiDtQTyCy1mT3ASOP+LGCnQ/JmAo84wqP0Jk20pLjfSGaHAhAdPdrOfVbjG630aw1pM2krMMIK+4oB5AblKcALRlk10jtEqnl0iMg+iadWTdtqhW8QkSVW2AxHmqisnoRyukRkYjXft9pgJr2gST0i0m6FjbLuzfgdItJo5A2h1mq+74erLPiN2lmcD8zSsKlW+xjRSGCsVu2Rhp4Z0Vua12wne4y8Nu0E/qlNw1ZHm5q7au47HhGRgx7paTauxxjXNxh5xojIc468B/VorMd71Us1mqEdyRWOODNsKXCjXu8Bhuv1qcCZDtVohB499GM9czUw2riOevVTVTc8z0i7Evi6MR7/tcXrBau6/055nAU8avCO6FtaZq71zMU6/DsPaE1IO0sV9qFG+/h94A4F6nmVzO3ANuApI+8ngJcDnufbQDPwtOqquQEzDdNZWlOuAL4AHNYR0naNv0yvn9D7m4AVwCHjI4TS2cCf8lDN036dXwI/UMAuAs5Vqf6HHl36vOP1mKJlDU1R1h+1+me6N39OKkfLHfwvFpGNFSwj0735mUnNCvBT4GaVvjlW/Bzg83peDHQCs4HNwBCVpjeAS4BPA5uMvC+qxN6s4RdoWXH0taxKZjlfvlvjD4nIbBG5VM8m3SIi04z7uZr3iBG2zsi7zuA5zlPuUsczLsnacHK18XDPi8j5jjTlVM95IvKSiHQaYffq/XQL0DjqFpETA0DNxdg8Oq4qA8j5CmSviIw2wrcYkyFf1vi6tI31HAFdCNwXmHalTg5/CmhxaBvR+Pq3wGDgaCDfZf1hBNQNPBYTfxQ4B7hTJ35btRM5CuyF4yZidhr6ZqSCrdGljoWa30e390Fly8xER0j1E0eVjdq5E42wuw2+ux28FojIXQnlrcvrfGaL54V6jTSLrLgHLR5TY+KI4TvDU/ahvILpozEav8sRN8HIP8QRvzqgjOYY/qKqVK46oNMdYTNVad+r9+Ot+G8Au4z7Iw4ef3YMAv5jhd2p5wk6K/U3K/73eWszJ1rSsMKK/2Sg+iKOZQw7zQ1Wmt0BfHJVzed52jLfy/3Qw+eVQBBsutKKn5xnMOMefJwV3xHDZ20gCKMCpPMBI74tj2A2B4Dte7F2h8StDfyASz1pIhWsMy8dUDSr/hHgXwHpH/eEX+0ImxvD5w/GdZsnzWDgfuCUvIyAdmov+15Mmp/o+R3gXU+aJx1hr8fwfCBwau0qHar2G8OtbmMO0ke/coT9NSb9Gsuuc8BYwe3X86SYNHsDAbaXIxiIVnDjgN0Jad4DPmTcD/Uo8yZNVQuOAWWfmQTkPAtIgHsC+G4tbNrDVzkvAbZQbBAoi17SSeLMmFnneR/QLxxhb1Fsqkqtr9rUVYCZjlzmK50FmOnobUrGqrWZi+znYLbp5K5JX6LY7kelNl2huuexQjIp2yqOhGWLAsxA2u4B+FgBZvl0kA9aBG8rJLNy0lnomX0gUxL/TuEJITUNoWTXbtL1vL+3vJDMMug0R9jkoppXbjj5ZAFmerLXiB4rwExPT1j3uwow09NDhC3zZoJMy9xhlBajxlLaFjfWUE/2qI73Wo2fryvAWKHa+EyitIHrmJ4BXqVkYPEUpa2IRFZwC9TeZ0cZBveH1FTlYxUwK5lcgc1R2yu4kaG7TIcDHYrh6XGM29VtQwhtFpFhVTTXTqK5fSj7ljLKWSwiIyphuLUksMDbagzoNSnKGqXbY5LoURGZUk0ruEFaSBJ9rw+ALrd4/de4fkVEtun17BRlhOwfmloPk8LvJDxUr2HDHnps1fMyBS0Kv8Ywip2WAsgtCc+6UUROyIJ95rIAUOvlD6Q9AMRMGrsmgdpeYyB7E/ZV5sJyeHmdpXRRwkedUI1yqzkFN1iVfJ+ngplV8pXRC5zkiZsD3Jvn+czlwK34904OrlA5kzjeFNukwzrCy/3Y/DZKHlkPO+JOUmu3MX0s4/EYIK+tBZC1nOjo1RfySegeYEEfeF8Q48bi5/152aIFv236v3W5IoSmU3IQ5aJN+Hdc9Ms1IJ8/ohBAOykZvZIlY9h6zmcOA77rCD9Z29FpnnxHPEAe1mq9ZSCvTl4YsxxxrdXmSczyxsRipr3UEzd4evufUdozdHEMkFdnAcgsrpuX69ftNEquzYo1IE87ek+oIGQJyKwuqM3nff+ZeDYJNBTmMZRlATc8Jn5sHRb3cimZSUBCaXVwSgFm34GM6BkyZns0KAdAnqNt5AFH3LPA5wYymELJGzbWvy2Ge3rsLsPn+wHPtuhWRxkb+juY0R9VfhPzk5C4PZKNuHeu7TAAXWRMPtdYTGq/wNWhSwerYn6jkMRjsSdfxLNLPXbV9N0q6fdtfhnpV8WYm1RinSeUR5s648sMmPOsF2lJab3RU8GFs1UBefdV2nFUJZR2FwPfn/g6gK/GDA+pwI+ZMPyAjCrjmT8K/K/eIyAJcGzSFMDngOMnSwQ48HtRe/SzSXayEvcc40l2dVH13vzhmLimhBfYrxL5RZWucr7sAsNMexLwmYT0TX30GVITMK8E3kyRb6VRDTemyN/M8e55/qIfZn8KXuOzphqtCDQBXF8DNaUl4HdjEZ2QZfOYuSLyhsOy99I6GW6tcDzPQzGO8VMf/wcUkxVAvfiMOwAAAABJRU5ErkJggg==) center/contain no-repeat; mask: url(data:image/png;base64,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) center/contain no-repeat; }
@media (min-width: 769px) { html body:not(#ec):not(#px):not(#py) .ec-trust__it .ec-emb { width: 19px; height: 22px; } }
/* footer payment marks + CR line. Pairs with footer.js. Written with the same "body ..." prefix build.js rewrites. */
body:not(#ec) .store-footer salla-payments { display: none; }
body:not(#ec) .store-footer .ec-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; color: #ededea; }
body:not(#ec) .store-footer .ec-pay li { margin: 0; padding: 0; line-height: 0; }
body:not(#ec) .store-footer .ec-pay svg { display: block; width: 44px; height: 28px; }
@media (max-width: 767px) { body:not(#ec) .store-footer .ec-pay { justify-content: center; margin-top: 12px; } }
/* AR copy line: keep Arabic reading order inside the ltr footer grid, still left-aligned */
html[lang="ar"] body:not(#ec) .ec-foot__copy { direction: rtl; text-align: left; }
@media (min-width: 1024px) { html body:not(#ec) .ec-foot__copy { max-width: none; margin: 40px 0 0; } } /* line up with the 4-col grid (grid is left-anchored, copy was centred) */
/* CR badge (Salla's own emblem + number), sits next to the payment marks */
body:not(#ec) .store-footer .ec-payrow { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }
body:not(#ec) .store-footer .ec-cr { display: flex; align-items: center; gap: 12px; padding: 7px 14px 7px 7px; border: 1px solid #262626; background: transparent; direction: ltr; }
html[lang="ar"] body:not(#ec) .store-footer .ec-cr { direction: rtl; padding: 7px 7px 7px 14px; }
body:not(#ec) .store-footer .ec-cr__img { display: block; width: 44px; height: 44px; object-fit: contain; border-radius: 0; flex: none; }
body:not(#ec) .store-footer .ec-cr__txt { text-align: start; }
body:not(#ec) .store-footer .ec-cr__txt p { margin: 0; font: 400 12px/1.3 Jost, sans-serif; color: #a3a3a3; }
body:not(#ec) .store-footer .ec-cr__txt b { display: block; font: 700 15px/1.3 Jost, sans-serif; color: #ededea; letter-spacing: .04em; }
@media (max-width: 767px) { body:not(#ec) .store-footer .ec-payrow { justify-content: center; flex-direction: column; gap: 14px; margin-top: 12px; } body:not(#ec) .store-footer .ec-payrow .ec-pay { margin-top: 0; } }
body:not(#ec) .store-footer a.ec-cr { text-decoration: none; cursor: pointer; transition: opacity .2s; opacity: 1; }
body:not(#ec) .store-footer a.ec-cr:hover, body:not(#ec) .store-footer a.ec-cr:focus-visible { opacity: .75; }
/* social icons strip, very bottom */
body:not(#ec) .store-footer .ec-social { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 14px 0 0; background: transparent; border: 0; }
body:not(#ec) .store-footer .ec-social a { color: #ededea; opacity: .85; line-height: 0; transition: opacity .2s; }
body:not(#ec) .store-footer .ec-social a:hover { opacity: 1; }
body:not(#ec) .store-footer .ec-social svg { width: 20px; height: 20px; display: block; }
/* BNPL chips (Tabby / Tamara): official glyph from Salla's own badge, mono via mask, same 44x28 outlined chip */
body:not(#ec) .store-footer .ec-pay .ec-bn { display: block; box-sizing: border-box; width: 44px; height: 28px; border: .9px solid currentColor; border-radius: 3.5px; position: relative; }
body:not(#ec) .store-footer .ec-pay .ec-bn::after { content: ''; position: absolute; inset: 6px 7px; background: currentColor; -webkit-mask-image: var(--bn); mask-image: var(--bn); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
/* BNPL chips (Tabby / Tamara): official glyph from Salla's own badge, mono via mask, same 44x28 outlined chip */
body:not(#ec) .store-footer .ec-pay .ec-bn { display: block; box-sizing: border-box; width: 44px; height: 28px; border: .9px solid currentColor; border-radius: 3.5px; position: relative; }
body:not(#ec) .store-footer .ec-pay .ec-bn::after { content: ''; position: absolute; inset: 6px 7px; background: currentColor; -webkit-mask-image: var(--bn); mask-image: var(--bn); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
/* =====================================================================
   ECLIPSE on Salla Raed -- CUSTOMER LOGIN + ACCOUNT PAGES (merge into custom.src.css, then node build.js)
   Written 2026-10-16. Tokens (--ec-*) come from custom.src.css section 1.
   Selectors start with `body` so build.js lifts them to body:not(#ec):not(#ec); !important only where Salla's own rule is !important.

   MERGE NOTE: DELETE these two lines from custom.src.css section 13 (they force the login card white and now fight this file):
     body:not(#ec) .s-modal-wrapper .s-modal-body:has(iframe), body:not(#ec) .s-modal-body:has(iframe) { background: #fff !important; ... }
     (the comment line above it too)

   FACT (live eclipsera.fit, 2026-10-16): the login box is salla-login-modal (light DOM, no shadowRoot) whose body:not(#ec) holds a CROSS-ORIGIN
   <iframe src="https://accounts.salla.com/...">. Text inside the iframe cannot be styled. We restyle the frame and invert the iframe pixels
   (CSS filter works on cross-origin iframes). Phone field, +966, OTP step and sign-up form all live inside that iframe.
   KNOWN LIMIT: the red "دخول" button reads from the store primary colour; after inversion it renders as a light coral red, not #cc1111.
   ===================================================================== */

/* ---------- A. Login popup (iframe card) ---------- */
body:not(#ec) .s-login-modal .s-modal-overlay { background: rgba(0, 0, 0, .82) !important; backdrop-filter: blur(3px); }
/* html + extra classes + :has() so it outranks the old section-13 white-card rule even before that rule is deleted */
html body:not(#ec) .s-login-modal .s-modal-wrapper .s-modal-body:has(iframe), html body:not(#ec) .s-login-modal .s-modal-body {
  background: var(--ec-panel) !important;
  border: 1px solid var(--ec-line-2) !important;
  border-radius: 0 !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7) !important;
  padding: 14px !important; /* iframe form has no inner padding of its own; without this the label/button touch the edge */
  overflow: hidden;
  position: relative;
  max-width: 380px;
}
/* the page is LTR even in Arabic (dir=ltr) but the iframe is RTL in Arabic: its avatar sits at the right on phones, so the X goes left in AR, right in EN */
body:not(#ec) .s-login-modal .s-modal-header { position: absolute; top: 6px; right: 6px; left: auto; z-index: 3; margin: 0; padding: 0; width: 34px; height: 34px; }
body:not(#ec) .s-login-modal .s-modal-close { position: static !important; inset: auto !important; }
html[lang="ar"] body:not(#ec) .s-login-modal .s-modal-header { left: 6px; right: auto; }
/* the floating WhatsApp button (z 9998) sat on top of the open login sheet on phones: hide it while the login box is open */
body:not(#ec):has(.s-login-modal:not(.s-hidden) iframe) .ec-wa { visibility: hidden; }
body:not(#ec) .s-login-modal .s-modal-close {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 0 !important;
  background: transparent !important; color: var(--ec-text) !important; opacity: .8;
}
body:not(#ec) .s-login-modal .s-modal-close:hover { opacity: 1; color: #fff !important; background: var(--ec-red) !important; }
body:not(#ec) .s-login-modal .s-modal-close svg { width: 16px; height: 16px; fill: currentColor; }
/* white card -> near-black, hues kept (blue Facebook / Google colours stay recognisable). .935 => white becomes #111 = --ec-panel */
body:not(#ec) .s-login-modal iframe { display: block; border: 0; background: #fff; filter: invert(.935) hue-rotate(180deg); }
@media (max-width: 480px) {
  body:not(#ec) .s-login-modal .s-modal-body { max-width: calc(100vw - 32px); }
  /* phones: iPhone zoom-on-focus is decided inside the iframe, nothing to do here */
}

/* any other Salla modal / sheet that still shows a light card (verify, address, cancel-order) */
body:not(#ec) .s-modal-body:not(:has(iframe)) { background: var(--ec-panel) !important; color: var(--ec-text) !important; border: 1px solid var(--ec-line-2); border-radius: 0 !important; }
body:not(#ec) .s-modal-title, body:not(#ec) .s-modal-sub-title { font-family: var(--ec-heading); font-weight: 400; color: var(--ec-text) !important; }

/* ---------- B. Account layout (profile / orders / wishlist / wallet / notifications). .main-content is scoped as nav.sidebar ~ .main-content so cart/product pages that reuse the class are untouched ---------- */
body:not(#ec) .profile-header, body:not(#ec) .profile-header.gradient-bg { background: var(--ec-bg) !important; min-height: 0; }
body:not(#ec) .profile-header .breadcrumbs, body:not(#ec) .profile-header .s-breadcrumb-wrapper, body:not(#ec) .profile-header a { color: rgba(237, 237, 234, .6); }
body:not(#ec) nav.sidebar, body:not(#ec) nav.sidebar.lg\:bg-white { background: var(--ec-panel) !important; border: 1px solid var(--ec-line-2); border-radius: 0 !important; box-shadow: none !important; }
body:not(#ec) nav.sidebar .avatar-wrap { background: #1a1a1a !important; border: 1px solid var(--ec-line-2); border-radius: 0 !important; }
body:not(#ec) nav.sidebar .avatar-placeholder, body:not(#ec) nav.sidebar .avatar-placeholder .text { color: rgba(237, 237, 234, .6); }

/* sidebar menu (salla-user-menu inline): list links */
body:not(#ec) nav.sidebar salla-user-menu, body:not(#ec) nav.sidebar salla-user-menu * { color: var(--ec-text); }
body:not(#ec) nav.sidebar salla-user-menu a, body:not(#ec) nav.sidebar salla-user-menu li, body:not(#ec) nav.sidebar salla-user-menu button { background: transparent; border-radius: 0 !important; border-color: var(--ec-line-2); font-family: var(--ec-body); }
body:not(#ec) nav.sidebar salla-user-menu a:hover, body:not(#ec) nav.sidebar salla-user-menu li:hover { background: #1a1a1a !important; }
body:not(#ec) nav.sidebar salla-user-menu [class*="active"], body:not(#ec) nav.sidebar salla-user-menu a[aria-current] { border-inline-start: 2px solid var(--ec-red); color: #fff; }
body:not(#ec) nav.sidebar salla-user-menu i, body:not(#ec) nav.sidebar salla-user-menu svg { color: rgba(237, 237, 234, .65); fill: currentColor; }
/* logout row */
body:not(#ec) nav.sidebar salla-user-menu a[href*="logout"], body:not(#ec) nav.sidebar salla-user-menu [class*="logout"] { color: #e03a3a; }

/* page title */
body:not(#ec) nav.sidebar ~ .main-content h1 { font-family: var(--ec-heading); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ec-text); margin-bottom: 20px; }
html[lang="en"] body:not(#ec) nav.sidebar ~ .main-content h1 { text-transform: uppercase; letter-spacing: .02em; }
@media (min-width: 1024px) { body:not(#ec) nav.sidebar ~ .main-content h1 { font-size: 30px; } }

/* ---------- C. Profile form ---------- */
body:not(#ec) .form--user-profile label { color: rgba(237, 237, 234, .75) !important; font-family: var(--ec-body); font-weight: 600; }
body:not(#ec) .form--user-profile .form-input, body:not(#ec) .form--user-profile select.form-input,
body:not(#ec) .form--user-profile .s-tel-input-control, body:not(#ec) .form--user-profile .iti input,
body:not(#ec) .form--user-profile .s-datetime-picker-input, body:not(#ec) .form--user-profile .flatpickr-input {
  background: #000 !important; color: var(--ec-text) !important; border: 1px solid var(--ec-line-2) !important; border-radius: 0 !important; box-shadow: none !important;
}
body:not(#ec) .form--user-profile .form-input:focus, body:not(#ec) .form--user-profile .s-tel-input-control:focus, body:not(#ec) .form--user-profile .s-datetime-picker-input:focus { border-color: var(--ec-red) !important; outline: 0; }
body:not(#ec) .form--user-profile .iti__selected-flag { background: #000 !important; border-radius: 0 !important; }
body:not(#ec) .form--user-profile .iti__selected-dial-code { color: var(--ec-text); }
body:not(#ec) .form--user-profile button[type="submit"], body:not(#ec) .form--user-profile .s-button-primary {
  background: var(--ec-red) !important; color: #fff !important; border: 1px solid var(--ec-red) !important; border-radius: 0 !important; font-family: var(--ec-body); font-weight: 600;
}
body:not(#ec) .form--user-profile button[type="submit"]:hover, body:not(#ec) .form--user-profile .s-button-primary:hover { background: #fff !important; color: var(--ec-bg) !important; border-color: #fff !important; }
/* flatpickr calendar (appended to body) */
body:not(#ec) .flatpickr-calendar { background: var(--ec-panel); color: var(--ec-text); border: 1px solid var(--ec-line-2); border-radius: 0; box-shadow: none; }
body:not(#ec) .flatpickr-day, body:not(#ec) .flatpickr-weekday, body:not(#ec) .flatpickr-current-month, body:not(#ec) .flatpickr-monthDropdown-months, body:not(#ec) .numInputWrapper input { color: var(--ec-text) !important; background: transparent; }
body:not(#ec) .flatpickr-day.selected { background: var(--ec-red) !important; border-color: var(--ec-red) !important; }
body:not(#ec) .flatpickr-months .flatpickr-prev-month svg, body:not(#ec) .flatpickr-months .flatpickr-next-month svg { fill: var(--ec-text); }

/* ---------- D. Orders (salla-orders table) ---------- */
body:not(#ec) .s-orders-wrapper, body:not(#ec) .s-orders-container, body:not(#ec) .s-orders-table { background: transparent; color: var(--ec-text); }
body:not(#ec) .s-orders-table-head-tr-th { background: var(--ec-panel) !important; color: rgba(237, 237, 234, .6) !important; border-color: var(--ec-line-2) !important; font-family: var(--ec-body); }
body:not(#ec) .s-orders-table-tbody-tr { background: transparent !important; border-color: var(--ec-line-2) !important; }
body:not(#ec) .s-orders-table-tbody-tr:hover { background: #141414 !important; }
body:not(#ec) .s-orders-table-tbody-tr-td, body:not(#ec) .s-orders-table-tbody-tr-td-content, body:not(#ec) .s-orders-reference-id, body:not(#ec) .s-orders-mobile-title { color: var(--ec-text) !important; border-color: var(--ec-line-2) !important; }
body:not(#ec) .s-orders-status-container { border-radius: 0 !important; }
body:not(#ec) .s-orders-banner { background: var(--ec-panel) !important; border: 1px solid var(--ec-line-2); border-radius: 0 !important; color: var(--ec-text); }
body:not(#ec) .s-orders-no-content, body:not(#ec) .no-content-placeholder { color: var(--ec-text); }
body:not(#ec) .s-orders-copy-to-clipboard-button, body:not(#ec) .s-orders-leave-review-btn { border-radius: 0 !important; }
body:not(#ec) .s-orders-wrapper .s-button-primary, body:not(#ec) .s-orders-wrapper .s-button-btn { border-radius: 0 !important; }

/* ---------- E. Wishlist ---------- */
body:not(#ec) #wishlist .s-products-list-wrapper, body:not(#ec) #wishlist salla-products-list { background: transparent; }
body:not(#ec) #wishlist .custom-wishlist-card, body:not(#ec) #wishlist .product-entry { background: var(--ec-panel); border: 1px solid var(--ec-line-2); border-radius: 0 !important; color: var(--ec-text); }

/* ---------- F. Wallet / notifications (same layout, text tokens only) ---------- */
body:not(#ec) nav.sidebar ~ .main-content .bg-white, body:not(#ec) nav.sidebar ~ .main-content .bg-gray-50, body:not(#ec) nav.sidebar ~ .main-content .bg-gray-100 { background: var(--ec-panel) !important; }
body:not(#ec) nav.sidebar ~ .main-content .text-gray-500, body:not(#ec) nav.sidebar ~ .main-content .text-gray-600, body:not(#ec) nav.sidebar ~ .main-content .text-gray-700, body:not(#ec) nav.sidebar ~ .main-content .text-gray-800 { color: rgba(237, 237, 234, .75) !important; }
body:not(#ec) nav.sidebar ~ .main-content .border, body:not(#ec) nav.sidebar ~ .main-content .border-b, body:not(#ec) nav.sidebar ~ .main-content .border-gray-200 { border-color: var(--ec-line-2) !important; }
body:not(#ec) nav.sidebar ~ .main-content .rounded, body:not(#ec) nav.sidebar ~ .main-content .rounded-md, body:not(#ec) nav.sidebar ~ .main-content .rounded-lg { border-radius: 0 !important; }

/* phone: sidebar becomes a stacked block above the content */
@media (max-width: 1023px) {
  body:not(#ec) nav.sidebar { border-inline: 0; border-top: 0; }
  body:not(#ec) nav.sidebar ~ .main-content { padding-inline: 4px; }
}
/* Product description tables (spec table + size chart). Eclipse dark: thin #262626 borders, #ededea text, sharp corners, Jost.
   Salla strips width/margin from inline styles, so those live here. Builder: merge into the theme custom CSS. */
body:not(#ec) .ec-tabs__pane[data-p="d"] table, body:not(#ec) .product__description table { width: 100%; max-width: 640px; border-collapse: collapse; margin: 0 0 28px; border-radius: 0; font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.5; table-layout: auto; }
body:not(#ec) .ec-tabs__pane[data-p="d"] td, body:not(#ec) .ec-tabs__pane[data-p="d"] th, body:not(#ec) .product__description td, body:not(#ec) .product__description th { border: 1px solid #262626; padding: 10px 14px; color: #ededea; text-align: start; background: transparent; border-radius: 0; }
body:not(#ec) .ec-tabs__pane[data-p="d"] td strong, body:not(#ec) .product__description td strong { font-weight: 500; letter-spacing: .04em; }
body:not(#ec) .ec-tabs__pane[data-p="d"] p, body:not(#ec) .product__description p { margin: 0 0 18px; }
body:not(#ec) .ec-tabs__pane[data-p="d"] p > strong:only-child, body:not(#ec) .product__description p > strong:only-child { display: block; margin: 8px 0 -4px; font-weight: 500; letter-spacing: .04em; }
html[lang="ar"] body:not(#ec) .ec-tabs__pane[data-p="d"] table, html[lang="ar"] body:not(#ec) .product__description table { direction: rtl; }
@media (max-width: 767px) {
  body:not(#ec) .ec-tabs__pane[data-p="d"] table, body:not(#ec) .product__description table { max-width: 100%; font-size: 14px; }
  body:not(#ec) .ec-tabs__pane[data-p="d"] td, body:not(#ec) .product__description td { padding: 9px 10px; overflow-wrap: break-word; }
}
/* designer fix: no mid-word breaks in the label column; AR table full width */
body:not(#ec) .ec-tabs__pane[data-p="d"] td:first-child, body:not(#ec) .product__description td:first-child { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
body:not(#ec) .ec-tabs__pane[data-p="d"] table, body:not(#ec) .product__description table { width: 100% !important; }