/* ATS — Raed 2 design system: Premium Automotive Commerce (single file, replaces every earlier layer) — 2026-10-02 Presentation layer over Salla Raed 1.377. Cart, checkout, add-to-cart and payment logic are untouched. */ /* ========================================================= 1. Tokens ========================================================= */ :root { --ats-amber: #ffab01; --ats-amber-hover: #f09d00; --ats-amber-soft: #fff3d6; --ats-amber-ink: #8a5800; --ats-black: #0f1113; /* deepest surface */ --ats-graphite: #1b1e22; /* dark panels */ --ats-graphite-2: #262a30; /* raised dark */ --ats-steel: #8b939e; /* metal accents on dark */ --ats-ink: #16191d; --ats-text: #3b424c; --ats-muted: #5d6673; --ats-on-dark: #f3f1ec; --ats-on-dark-muted: #b8bec7; --ats-line: #e2e4e8; --ats-line-strong: #cdd2d8; --ats-line-dark: rgba(255, 255, 255, .1); --ats-warm: #faf8f5; /* warm white page */ --ats-logo-dark: url("data:image/webp;base64,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"); --ats-metal: linear-gradient(180deg, #f7f8fa 0%, #eceef2 100%); --ats-card: #ffffff; --ats-wa: #128c4a; --ats-wa-dot: #25d366; --ats-sale: #b42318; --ats-r-sm: 8px; --ats-r-md: 12px; --ats-r-lg: 16px; --ats-r-xl: 20px; --ats-r-pill: 999px; --ats-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --ats-shadow-md: 0 12px 28px rgba(16, 24, 40, .10); --ats-s2: 8px; --ats-s3: 12px; --ats-s4: 16px; --ats-s5: 24px; --ats-s6: 32px; --ats-s7: 48px; --ats-s8: 64px; --ats-t-xs: 12px; --ats-t-sm: 14px; --ats-t-md: 16px; --ats-t-lg: 18px; --ats-t-xl: 22px; --ats-t-2xl: 28px; --ats-ease: cubic-bezier(.2, .7, .2, 1); --ats-fast: .18s; --ats-rule: linear-gradient(var(--ats-amber), var(--ats-amber)) 0 50% / calc(100% - 10px) 2px no-repeat, linear-gradient(var(--ats-amber), var(--ats-amber)) 100% 50% / 8px 8px no-repeat; /* blueprint grid used lightly on dark surfaces */ --ats-blueprint: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 32px 32px; } /* ========================================================= 2. Base & accessibility ========================================================= */ body { background: var(--ats-warm) !important; color: var(--ats-text); -webkit-font-smoothing: antialiased; } :where(a, button, [role="button"], summary, label[for]) { cursor: pointer; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ats-amber) !important; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(22, 25, 29, .85) !important; } .ats-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .product__description, .product__description *, footer salla-contacts a { -webkit-user-select: text !important; user-select: text !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .ats-btn, .ats-card-wa, .s-product-card-entry, .s-block--logos-slider .brand-item, salla-add-product-button .s-button-element { transition: background-color var(--ats-fast) var(--ats-ease), border-color var(--ats-fast) var(--ats-ease), color var(--ats-fast) var(--ats-ease), box-shadow var(--ats-fast) var(--ats-ease); } /* shared ATS buttons */ .ats-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--ats-r-md); font-size: var(--ats-t-md); font-weight: 800; white-space: nowrap; border: 1.5px solid transparent; } .ats-btn--amber { background: var(--ats-amber); color: var(--ats-ink) !important; } .ats-btn--amber:hover { background: var(--ats-amber-hover); } .ats-btn--ghost { border-color: rgba(255, 255, 255, .35); color: var(--ats-on-dark) !important; } .ats-btn--ghost:hover { border-color: var(--ats-amber); color: #fff !important; } .ats-btn .ats-wa-ico { width: 18px; height: 18px; color: var(--ats-wa-dot); flex-shrink: 0; } /* ========================================================= 3. Salla buttons (skin only) ========================================================= */ .s-button-primary, .s-button-solid.s-button-primary { background: var(--ats-amber) !important; border-color: var(--ats-amber) !important; color: var(--ats-ink) !important; font-weight: 700; } .s-button-primary:hover, .s-button-solid.s-button-primary:hover { background: var(--ats-amber-hover) !important; border-color: var(--ats-amber-hover) !important; } .s-button-primary-outline { border-color: var(--ats-ink) !important; color: var(--ats-ink) !important; background: #fff !important; font-weight: 700; } .s-button-primary-outline:hover { background: var(--ats-ink) !important; color: #fff !important; } .s-button-element { border-radius: var(--ats-r-sm) !important; } .s-button-element.s-button-btn { min-height: 44px; } .btn--outline-primary { border-color: var(--ats-ink) !important; color: var(--ats-ink) !important; background: #fff !important; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; } .btn--outline-primary:hover { background: var(--ats-ink) !important; color: #fff !important; } .btn--primary { background: var(--ats-amber) !important; border-color: var(--ats-amber) !important; color: var(--ats-ink) !important; font-weight: 700; } /* ========================================================= 4. Header (single search lives here) ========================================================= */ /* One dark composition: top bar + main nav share the hero's black surface (top bar dark from Raed 2 settings). Home: the header flows straight into the hero; the amber rule closes the hero. Inner pages: the amber rule closes the header. */ .store-header .top-navbar { background: var(--ats-black) !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important; padding-block: 8px !important; } .store-header .top-navbar, .store-header .top-navbar a, .store-header .top-navbar .s-menu-topnav-item { color: var(--ats-on-dark-muted) !important; font-size: var(--ats-t-xs); } .store-header .top-navbar a:hover { color: #fff !important; } .store-header .top-navbar input { background: var(--ats-graphite) !important; border: 1px solid rgba(255, 255, 255, .12) !important; color: #fff !important; border-radius: var(--ats-r-pill) !important; min-height: 42px; } .store-header .top-navbar input::placeholder { color: var(--ats-on-dark-muted) !important; } .store-header .top-navbar input:focus { border-color: var(--ats-amber) !important; box-shadow: 0 0 0 3px rgba(255, 171, 1, .22) !important; } .store-header .top-navbar .s-search-icon, .store-header .top-navbar .s-search-icon svg { color: var(--ats-amber) !important; fill: var(--ats-amber) !important; } #mainnav { position: relative; border-bottom: 0 !important; box-shadow: none !important; } #mainnav, #mainnav .inner { background: rgba(15, 17, 19, .97) !important; -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); } #mainnav::after { content: "" !important; position: absolute; inset-inline: 0; bottom: -1px; height: 2px !important; opacity: 1 !important; background: var(--ats-amber) !important; z-index: 2; } body.index #mainnav::after { opacity: 0 !important; } /* transparent ATS mark for dark surfaces (white lettering, brand colours kept) - header and footer share it */ .store-header .navbar-brand img { content: var(--ats-logo-dark) !important; filter: none !important; height: 52px !important; max-height: none !important; width: auto !important; transform: none !important; padding: 0; background: none; } @media (min-width: 1024px) { .store-header .navbar-brand img { height: 62px !important; } } @media (max-width: 1023px) { .mburger { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: #fff !important; } } #mainnav .mburger i, #mainnav .sicon-menu, #mainnav .sicon-user, #mainnav .sicon-shopping-bag, #mainnav .header-btn i { color: #fff !important; } #mainnav salla-user-menu button, #mainnav .s-user-menu-trigger, #mainnav .s-cart-summary-wrapper { background: transparent !important; border: 1px solid rgba(255, 255, 255, .16) !important; color: #fff !important; min-height: 44px; } #mainnav salla-user-menu button:hover, #mainnav .s-cart-summary-wrapper:hover { border-color: var(--ats-amber) !important; } #mainnav .s-cart-summary-count { background: var(--ats-amber) !important; color: var(--ats-ink) !important; font-weight: 800; } #mainnav .s-cart-summary-total { color: #fff !important; font-weight: 700; } #mainnav custom-main-menu .main-menu > li > a { color: var(--ats-on-dark) !important; font-weight: 700; } #mainnav custom-main-menu .main-menu > li > a > i, #mainnav custom-main-menu .main-menu > li > a::after { color: var(--ats-on-dark-muted) !important; } #mainnav custom-main-menu .main-menu > li > a:hover { color: var(--ats-amber) !important; } /* home: no seam between header and hero */ body.index .ats-hero { border-top: 0; } @media (min-width: 1024px) { body.index .ats-hero__in { padding-block: 40px 56px; } } /* ========================================================= 5. Section headings ========================================================= */ .s-block { margin-top: var(--ats-s7); } /* empty Salla wrappers/hooks keep no section gap (avoids dead space before the footer) */ main#main-content > .s-blocks-wrapper:not(:has(.s-block)), main#main-content > salla-hook:empty, main#main-content > .container.mb-5:not(:has(.s-product-card-entry)) { margin-top: 0 !important; margin-bottom: 0 !important; } @media (min-width: 768px) { .s-block { margin-top: var(--ats-s8); } } .s-block__title h2, .s-slider-block__title h2, .ats-head h2, .s-reviews-header { font-family: inherit !important; font-size: var(--ats-t-xl) !important; font-weight: 800 !important; line-height: 1.35 !important; color: var(--ats-ink) !important; margin: 0; } @media (min-width: 768px) { .s-block__title h2, .s-slider-block__title h2, .ats-head h2, .s-reviews-header { font-size: 28px !important; } } .s-block__title .right-side h2, .s-slider-block__title-right h2, .ats-head h2, .s-reviews-header { display: inline-flex !important; flex-direction: column; align-items: flex-start; gap: 10px; } .s-block__title .right-side h2::before, .s-slider-block__title-right h2::before { display: none !important; } .s-block__title .right-side h2::after, .s-slider-block__title-right h2::after, .ats-head h2::after, .s-reviews-header::after { content: ""; width: 64px; height: 8px; background: var(--ats-rule); } .ats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--ats-s5); } .ats-head p { margin: 6px 0 0; color: var(--ats-muted); font-size: var(--ats-t-sm); } .s-block__display-all, .s-slider-block__display-all, .s-reviews-display-all, .ats-head a { display: inline-flex !important; align-items: center; gap: 4px; min-height: 44px; padding-inline: 8px; color: var(--ats-ink) !important; font-weight: 700 !important; white-space: nowrap; } .s-block__display-all:hover, .s-slider-block__display-all:hover, .ats-head a:hover { color: var(--ats-amber-ink) !important; } .s-slider-nav-arrow { width: 44px !important; height: 44px !important; border-radius: var(--ats-r-pill) !important; border: 1px solid var(--ats-line-strong) !important; background: #fff !important; color: var(--ats-ink) !important; box-shadow: none !important; } .s-slider-nav-arrow:not(.swiper-button-disabled):hover { border-color: var(--ats-ink) !important; } .s-slider-nav-arrow.swiper-button-disabled { opacity: .35 !important; } /* ========================================================= 6. ATS hero (replaces the stock slider, which is hidden in Raed 2 settings) ========================================================= */ .ats-hero { position: relative; background: var(--ats-blueprint), radial-gradient(120% 90% at 15% 30%, #2a2418 0%, var(--ats-black) 55%); color: var(--ats-on-dark); overflow: hidden; } .ats-hero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--ats-amber), transparent); } .ats-hero__in { display: grid; gap: var(--ats-s5); align-items: center; padding-block: 28px 32px; } .ats-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .ats-hero h2 { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 800; color: #fff; max-width: 15ch; } .ats-hero p { margin: 0; color: var(--ats-on-dark-muted); font-size: var(--ats-t-md); line-height: 1.75; max-width: 46ch; } .ats-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .ats-hero__media { position: relative; } .ats-hero__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; border-radius: var(--ats-r-xl); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); } .ats-hero__media::before { content: ""; position: absolute; inset-block-start: -10px; inset-inline-end: -10px; width: 72px; height: 72px; border-top: 2px solid var(--ats-amber); border-inline-end: 2px solid var(--ats-amber); border-start-end-radius: 26px; } .ats-hero__spec { position: absolute; inset-inline-start: 14px; bottom: 14px; display: flex; gap: 8px; } .ats-hero__spec span { padding: 6px 10px; border-radius: var(--ats-r-sm); background: rgba(15, 17, 19, .82); border: 1px solid var(--ats-line-dark); color: var(--ats-on-dark); font-size: var(--ats-t-xs); font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @media (max-width: 479px) { .ats-hero__ctas .ats-btn { flex: 1 1 100%; } .ats-hero h2 { font-size: 26px; } } @media (min-width: 1024px) { .ats-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--ats-s7); padding-block: 56px; } .ats-hero h2 { font-size: 44px; } .ats-hero p { font-size: var(--ats-t-lg); } } /* ========================================================= 7. All categories: small ATS image tiles (quick-links slider hidden in Raed 2 settings) ========================================================= */ .ats-cats { margin-top: var(--ats-s7); } .ats-cats .ats-head { align-items: center; margin-bottom: var(--ats-s4); } .ats-cats__nav { display: none; gap: 8px; } .ats-cats__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ats-r-pill); border: 1px solid var(--ats-line-strong); background: #fff; color: var(--ats-ink); } .ats-cats__btn:hover { border-color: var(--ats-ink); } .ats-cats__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ats-cats__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; } .ats-cats__track::-webkit-scrollbar { display: none; } .ats-cat { flex: 0 0 92px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .ats-cat__img { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--ats-r-lg); background: var(--ats-graphite); border: 2px solid transparent; transition: border-color var(--ats-fast) var(--ats-ease); } /* the full ATS artwork, uncropped. A product photo (no ATS artwork yet) sits on the metal surface */ .ats-cat__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .ats-cat__img--photo { background: var(--ats-metal); } .ats-cat__img--photo img { left: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; } .ats-cat__name { color: var(--ats-ink); font-size: 13px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ats-cat:hover .ats-cat__img, .ats-cat:focus-visible .ats-cat__img { border-color: var(--ats-amber); } .ats-cat:hover .ats-cat__name { color: var(--ats-amber-ink); } .ats-cat.is-deal .ats-cat__img { border-color: var(--ats-amber); } @media (min-width: 768px) { .ats-cat { flex-basis: 124px; } .ats-cats__track { gap: 18px; } .ats-cat__name { font-size: var(--ats-t-sm); } } @media (min-width: 1024px) { .ats-cats__nav { display: inline-flex; } } /* ========================================================= 8. Trust strip (Salla store features) ========================================================= */ .s-block--features > .grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; background: var(--ats-card); border: 1px solid var(--ats-line); border-radius: var(--ats-r-lg); padding: 6px; } .s-block--features__item { grid-column: auto !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; text-align: start; min-height: 0 !important; margin: 0 !important; padding: 14px 12px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: inherit !important; text-decoration: none !important; } .s-block--features__item + .s-block--features__item { border-top: 1px solid var(--ats-line) !important; } .s-block--features__item .feature-icon { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; margin: 0 !important; background: var(--ats-graphite) !important; border: 0 !important; border-radius: var(--ats-r-md) !important; color: var(--ats-amber) !important; } .s-block--features__item .feature-icon i { font-size: 20px; color: var(--ats-amber) !important; } .s-block--features__item .feature-icon:has(.ats-ico) i { display: none !important; } .ats-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ats-ico .a { stroke: #fff; } .s-block--features__item h2 { align-self: end; margin: 0 !important; font-family: inherit !important; font-size: var(--ats-t-md) !important; font-weight: 800 !important; line-height: 1.4; color: var(--ats-ink) !important; } .s-block--features__item p { align-self: start; margin: 0 !important; font-size: var(--ats-t-sm) !important; line-height: 1.55; color: var(--ats-muted) !important; } a.s-block--features__item:hover h2 { color: var(--ats-amber-ink) !important; } @media (min-width: 1024px) { .s-block--features > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; padding: 8px; } .s-block--features__item { padding: 16px 20px !important; } .s-block--features__item + .s-block--features__item { border-top: 0 !important; border-inline-start: 1px solid var(--ats-line) !important; } } /* ========================================================= 9. ATS product cards (home, category, search, related) ========================================================= */ .s-product-card-entry { position: relative; background: var(--ats-card) !important; border: 1px solid var(--ats-line) !important; border-radius: var(--ats-r-lg) !important; box-shadow: none !important; transform: none !important; overflow: hidden; } .s-product-card-entry:hover { border-color: var(--ats-ink) !important; box-shadow: var(--ats-shadow-md) !important; } .s-product-card-entry::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 0; height: 3px; background: var(--ats-amber); z-index: 4; transition: width .25s var(--ats-ease); } .s-product-card-entry:hover::before { width: 100%; } .s-product-card-image { position: relative; background: var(--ats-metal) !important; border-bottom: 1px solid var(--ats-line); } .s-product-card-image img { mix-blend-mode: multiply; } .s-product-card-content { padding: 14px 14px 16px !important; gap: 6px; } .s-product-card-content-title, .s-product-card-content-title a { color: var(--ats-ink) !important; font-size: var(--ats-t-sm) !important; font-weight: 700 !important; line-height: 1.55 !important; } .s-product-card-content-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.1em; } .s-product-card-content-title a:hover { color: var(--ats-amber-ink) !important; } .s-product-card-price { font-family: inherit !important; color: var(--ats-ink) !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.01em; } .s-product-card-sale-price h4, .s-product-card-sale-price .s-product-card-price { color: var(--ats-sale) !important; } .s-product-card-sale-price span, .s-product-card-content-sub .line-through { color: var(--ats-muted) !important; font-size: var(--ats-t-sm) !important; } .s-product-card-rating { color: var(--ats-muted) !important; font-size: var(--ats-t-xs) !important; } .s-product-card-promotion-title, .s-product-card-entry .promotion-title { background: var(--ats-graphite) !important; color: var(--ats-amber) !important; font-size: var(--ats-t-xs) !important; font-weight: 800 !important; line-height: 1.5 !important; padding: 4px 10px !important; border-radius: var(--ats-r-sm) !important; } /* add to cart: one purchase style site-wide (amber); tinted in grids, solid on the product page */ .s-product-card-entry salla-add-product-button .s-button-element { width: 100%; min-height: 42px; padding-inline: 10px !important; border-radius: var(--ats-r-md) !important; font-size: var(--ats-t-sm) !important; font-weight: 800; } .s-product-card-entry salla-add-product-button .s-button-text { gap: 6px; } .s-product-card-entry salla-add-product-button .s-button-outline, .s-product-card-entry salla-add-product-button .s-button-solid { background: var(--ats-amber-soft) !important; border-color: rgba(255, 171, 1, .6) !important; color: var(--ats-ink) !important; } .s-product-card-entry salla-add-product-button .s-button-outline:hover, .s-product-card-entry salla-add-product-button .s-button-solid:hover { background: var(--ats-amber) !important; border-color: var(--ats-amber) !important; color: var(--ats-ink) !important; } .s-product-card-entry salla-add-product-button .s-button-disabled, .s-product-card-entry salla-add-product-button [disabled] { background: var(--ats-warm) !important; border-color: var(--ats-line) !important; color: var(--ats-muted) !important; } /* secondary actions on the image's bottom edge (top corners belong to the badge and the photo's ATS mark) */ .s-product-card-entry salla-button.s-product-card-wishlist-btn { position: absolute !important; top: auto !important; bottom: 10px !important; inset-inline-end: 10px !important; inset-inline-start: auto !important; left: auto; right: auto; z-index: 3; } .s-product-card-entry .s-product-card-wishlist-btn { opacity: 1 !important; } .s-product-card-entry button.s-product-card-wishlist-btn { position: static !important; width: 36px !important; height: 36px !important; border-radius: var(--ats-r-pill) !important; background: #fff !important; border: 1px solid var(--ats-line-strong) !important; box-shadow: none !important; color: var(--ats-ink) !important; } .s-product-card-entry button.s-product-card-wishlist-btn:hover { border-color: var(--ats-sale) !important; color: var(--ats-sale) !important; } .s-product-card-entry .s-product-card-wishlist-btn.favorited i, .s-product-card-entry .s-product-card-wishlist-btn.added i { color: var(--ats-sale) !important; } .ats-card-wa { position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 3; width: 36px; height: 36px; border-radius: var(--ats-r-pill); display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--ats-line-strong); color: var(--ats-ink) !important; } .ats-card-wa svg { width: 18px; height: 18px; } .ats-card-wa::after { content: ""; position: absolute; top: 5px; inset-inline-end: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ats-wa-dot); border: 1.5px solid #fff; } .ats-card-wa:hover, .ats-card-wa:focus-visible { border-color: var(--ats-ink); } .s-product-card-horizontal .ats-card-wa { display: none; } /* ========================================================= 10. ATS band: offers + compatibility (one dark section, one system) ========================================================= */ .ats-band { margin-top: var(--ats-s7); } .ats-band__in { display: grid; gap: 12px; } .ats-promo, .ats-fitcta { position: relative; overflow: hidden; border-radius: var(--ats-r-xl); background: var(--ats-blueprint), var(--ats-graphite); color: var(--ats-on-dark) !important; isolation: isolate; } .ats-promo { display: grid; min-height: 280px; } .ats-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -2; } .ats-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 17, 19, .2) 0%, rgba(15, 17, 19, .92) 62%); z-index: -1; } [dir="rtl"] .ats-promo::after, .rtl .ats-promo::after { background: linear-gradient(270deg, rgba(15, 17, 19, .96) 0%, rgba(15, 17, 19, .75) 45%, rgba(15, 17, 19, .1) 100%); } .ats-promo__copy, .ats-fitcta__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 28px 24px; max-width: 420px; } .ats-promo h3, .ats-fitcta h3 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.3; color: #fff; } .ats-promo p, .ats-fitcta p { margin: 0; color: var(--ats-on-dark-muted); font-size: var(--ats-t-sm); line-height: 1.7; } .ats-promo .ats-btn, .ats-fitcta .ats-btn { margin-top: 6px; } .ats-fitcta { display: grid; align-content: center; } .ats-fitcta__steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; } .ats-fitcta__steps li { padding: 4px 10px; border-radius: var(--ats-r-pill); border: 1px solid var(--ats-line-dark); color: var(--ats-on-dark); font-size: var(--ats-t-xs); font-weight: 700; } @media (min-width: 1024px) { .ats-band__in { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; } .ats-promo { min-height: 340px; } .ats-promo h3 { font-size: 32px; } .ats-promo__copy, .ats-fitcta__copy { padding: 40px; } } /* ========================================================= 11. Delivery banner ========================================================= */ .s-block--fixed-banner .banner, .s-block--fixed-banner img { border-radius: var(--ats-r-xl) !important; overflow: hidden; } .s-block--fixed-banner .banner { display: block; max-width: 920px; margin-inline: auto; } /* ========================================================= 12. Brands rail (compact) ========================================================= */ .s-block--logos-slider { background: transparent !important; border-block: 0 !important; padding-block: 0 !important; } .s-block--logos-slider .s-block__title { margin-bottom: 14px !important; } .s-block--logos-slider .s-block__title h2 { font-size: var(--ats-t-lg) !important; } .s-block--logos-slider .s-block__title .right-side h2::after { width: 40px; } .s-block--logos-slider .grid { display: flex !important; gap: 0 !important; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 0; background: transparent; border-block: 1px solid var(--ats-line); } .s-block--logos-slider .grid::-webkit-scrollbar { display: none; } .s-block--logos-slider .brand-item { flex: 0 0 104px; height: 56px !important; grid-row: auto !important; padding: 10px 16px !important; display: flex !important; align-items: center; justify-content: center; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; scroll-snap-align: start; } .s-block--logos-slider .brand-item + .brand-item { box-shadow: inset -1px 0 0 var(--ats-line) !important; } .s-block--logos-slider .brand-item img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.15); opacity: .9; transition: filter var(--ats-fast) var(--ats-ease), opacity var(--ats-fast) var(--ats-ease); } .s-block--logos-slider .brand-item:hover img, .s-block--logos-slider .brand-item:focus-visible img { filter: none; opacity: 1; } @media (min-width: 1024px) { .s-block--logos-slider .grid { overflow: visible; } .s-block--logos-slider .brand-item { flex: 1 1 0; min-width: 0; } } /* ========================================================= 13. Reviews (compact: stars, text, name; no oversized empty cards) ========================================================= */ .s-reviews-header-wrapper { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--ats-s4); } @media (max-width: 767px) { .s-reviews-header-wrapper { padding-inline: 16px; } } .s-block--testimonials .s-slider-block__title-nav, .s-reviews-testimonials-slider .s-slider-nav-arrow { display: none !important; } .s-block--testimonials .swiper-slide { height: auto; } .s-block--testimonials .s-reviews-testimonial { max-width: 560px; margin-inline: auto; background: #fff !important; border: 1px solid var(--ats-line) !important; border-inline-start: 3px solid var(--ats-amber) !important; border-radius: var(--ats-r-lg) !important; box-shadow: none !important; min-height: 0 !important; padding: 18px 20px !important; } .s-block--testimonials .s-reviews-testimonial__inner { display: block !important; padding: 0 !important; border: 0 !important; background: transparent !important; min-height: 0 !important; box-shadow: none !important; } .s-reviews-testimonial__avatar, .s-reviews-testimonial__icon { display: none !important; } .s-reviews-testimonial__text p:empty, .s-reviews-testimonial__info h2:empty { display: none !important; } .s-block--testimonials p { color: var(--ats-ink) !important; font-size: var(--ats-t-md) !important; line-height: 1.7; margin: 0 !important; } /* written reviews: a fixed grid (3 desktop, 2 phone) instead of a slider that can land on star-only reviews */ .ats-rev-grid .swiper-wrapper { transform: none !important; width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 12px; } .ats-rev-grid .swiper { margin-inline: 0 !important; } .ats-rev-grid .swiper-slide { width: auto !important; margin: 0 !important; } .ats-rev-grid .swiper-slide.ats-rev-off { display: none !important; } .ats-rev-grid .s-reviews-testimonial { max-width: none; height: 100%; margin: 0; } .ats-rev-grid .s-reviews-testimonial__text p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--ats-t-sm) !important; } @media (max-width: 767px) { .ats-rev-grid .swiper-slide.ats-rev-3 { display: none !important; } } @media (min-width: 768px) { .ats-rev-grid .swiper-wrapper { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } } /* no written review in this load: hide the section instead of showing a half-empty row */ .s-block--testimonials.ats-rev-slim { display: none !important; } .s-block--testimonials .sicon-star2, .s-block--testimonials [class*="star"] { color: var(--ats-amber) !important; } /* ========================================================= 14. Category / search listing ========================================================= */ .container--breadcrumbs .s-breadcrumb-item, .container--breadcrumbs .s-breadcrumb-item a { color: var(--ats-muted) !important; font-size: var(--ats-t-sm); } .container--breadcrumbs .s-breadcrumb-item a:hover { color: var(--ats-ink) !important; } .container--breadcrumbs .s-breadcrumb-item:last-child { color: var(--ats-ink) !important; font-weight: 700; } #page-main-title { color: var(--ats-ink) !important; font-weight: 800 !important; } /* listing toolbar: one bar for title/count and sort */ .container--products-list .main-content > div:first-child { min-height: 60px; margin-bottom: 20px !important; padding: 8px 20px 8px 8px; background: #fff; border: 1px solid var(--ats-line); border-radius: var(--ats-r-lg); } .container--products-list #page-main-title { font-size: var(--ats-t-lg) !important; display: inline-flex; align-items: center; gap: 10px; } .container--products-list #page-main-title::before { content: ""; width: 4px; height: 22px; border-radius: 2px; background: var(--ats-amber); } .container--products-list .main-content > div:first-child label, .container--products-list .main-content > div:first-child .form-label { color: var(--ats-muted) !important; font-size: var(--ats-t-sm); white-space: nowrap; } .container--products-list #product-filter { min-width: 170px; background-color: var(--ats-warm) !important; border-color: var(--ats-line) !important; border-radius: var(--ats-r-md) !important; } @media (min-width: 1024px) { .container--products-list salla-products-list .s-products-list-wrapper { gap: 20px !important; } } /* end of the grid: no "nothing more" line, tighter gap before reviews/footer */ .container--products-list .s-infinite-scroll-last { display: none; } .container--products-list ~ .s-block--testimonials { margin-top: 40px !important; } #product-filter, select.s-form-control { min-height: 44px; border: 1px solid var(--ats-line-strong) !important; border-radius: var(--ats-r-md) !important; background-color: #fff !important; color: var(--ats-ink) !important; font-weight: 600; } salla-filters .s-filters-widget-title, .s-filters-widget-title { color: var(--ats-ink) !important; font-weight: 800 !important; } .s-products-list-wrapper, salla-products-list .s-products-list-wrapper { gap: var(--ats-s4) !important; } @media (max-width: 479px) { salla-products-list .s-products-list-wrapper, .s-products-list-wrapper { gap: 10px !important; } .s-products-list-wrapper .s-product-card-content { padding: 10px 10px 12px !important; } .s-products-list-wrapper .s-product-card-price { font-size: 17px !important; } } /* ========================================================= 15. Product page (Salla form untouched; description moved under the block as a full-width details card) ========================================================= */ /* one premium block: gallery + information panel */ .container--product-details > [id^="product-"] { background: #fff; border: 1px solid var(--ats-line); border-radius: 24px; padding: 14px; box-shadow: 0 1px 0 rgba(16, 24, 40, .03); } @media (min-width: 768px) { .container--product-details > [id^="product-"] { padding: 24px; gap: 8px; } .container--product-details .sidebar { margin-inline-end: 24px !important; margin-left: 0; } } @media (min-width: 1280px) { .container--product-details > [id^="product-"] { padding: 32px; } } /* info column: tags and share/wishlist share one row */ .container--product-details .main-content { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-content: start; } .container--product-details .main-content > * { grid-column: 1 / -1; } .container--product-details .main-content > .mb-3 { grid-column: 1; align-self: center; margin-bottom: 14px !important; } .container--product-details .main-content > .mb-3 + div.flex { grid-column: 2; align-self: center; margin-bottom: 14px; } .container--product-details .main-content > .mb-3 + div.flex salla-social-share { margin-bottom: 0 !important; } /* balance: wider gallery with a taller fixed image stage, so it ends close to the buy box */ @media (min-width: 1024px) { .container--product-details .sidebar { width: 55% !important; flex: none; } .container--product-details .main-content { width: auto !important; flex: 1 1 0; min-width: 0; } .container--product-details .details-slider .swiper-slide.homeslider__slide { height: 600px !important; } } @media (min-width: 1280px) { .container--product-details .details-slider .swiper-slide.homeslider__slide { height: 760px !important; } } .container--product-details .main-content > * { order: 5; } .container--product-details .main-content > salla-bought-together, .container--product-details .main-content > salla-verified-review, .container--product-details .main-content > salla-quick-order { order: 6; } /* info hierarchy: name / price + sold count / tags + share, then payment, purchase, fit-check */ .container--product-details .main-content > [data-testid="store-product-title"] { order: 0; } .container--product-details .main-content > [data-testid="store-product-price"] { order: 1; grid-column: 1; align-self: center; margin: 0 0 12px; } .container--product-details .main-content > div.inline-flex.bg-white { order: 2; grid-column: 2; align-self: center; justify-self: end; margin: 0 0 12px !important; } .container--product-details .main-content > .mb-3 { order: 3; } .container--product-details .main-content > .mb-3 + div.flex { order: 4; } .container--product-details .sidebar .details-slider, .container--product-details .image-slider { background: var(--ats-metal); border: 0; border-radius: var(--ats-r-xl) !important; overflow: hidden; } .container--product-details [data-testid="store-product-thumbnails"] img { border-radius: var(--ats-r-md); } .container--product-details .swiper-slide img { object-fit: contain; mix-blend-mode: multiply; } /* hierarchy: name, rating, price */ [data-testid="store-product-title"] { color: var(--ats-ink) !important; font-size: 24px !important; line-height: 1.45 !important; font-weight: 800 !important; margin-bottom: 8px !important; letter-spacing: -.01em; } @media (min-width: 768px) { [data-testid="store-product-title"] { font-size: 30px !important; } } [data-testid="store-product-price"] { margin-block: 14px 6px; padding-top: 16px; border-top: 1px solid var(--ats-line); } [data-testid="store-product-price"] p { font-size: 34px !important; line-height: 1.2; font-weight: 800 !important; color: var(--ats-ink); letter-spacing: -.02em; } [data-testid="store-product-price"] .text-red-800 { color: var(--ats-sale) !important; } [data-testid="store-product-price"] .line-through { font-size: var(--ats-t-md); color: var(--ats-muted) !important; } .container--product-details .main-content > .mb-3 { display: flex; flex-wrap: wrap; gap: 6px; } .container--product-details .main-content > .mb-3 > a { margin: 0 !important; padding: 3px 10px; border-radius: var(--ats-r-pill); background: var(--ats-warm); border: 1px solid var(--ats-line); color: var(--ats-muted) !important; font-size: var(--ats-t-xs); text-decoration: none !important; } .container--product-details .main-content > .mb-3 > a:hover { border-color: var(--ats-ink); color: var(--ats-ink) !important; } .container--product-details .main-content > div.inline-flex.bg-white { justify-self: start; margin-bottom: 14px !important; padding: 6px 4px !important; background: var(--ats-amber-soft) !important; border-radius: var(--ats-r-pill) !important; font-weight: 700; } .container--product-details .main-content > div.inline-flex.bg-white > div { color: var(--ats-amber-ink) !important; } /* installments: Tamara / Tabby / Emkan grouped in one panel */ salla-installment { display: block; margin-block: 4px 16px; background: var(--ats-warm); border: 1px solid var(--ats-line); border-radius: var(--ats-r-lg); } salla-installment:not(:has(> *)) { display: none; } salla-installment::before { content: "قسّط مشترياتك"; display: block; padding: 10px 14px 0; color: var(--ats-ink); font-size: var(--ats-t-sm); font-weight: 800; } salla-installment > * { margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 14px !important; } salla-installment > * + * { border-top: 1px solid var(--ats-line) !important; } salla-installment .s-installment-emkan-content, salla-installment .tamara-product-widget { background: transparent !important; border: 0 !important; padding: 0 !important; } /* buy box: options, price, quantity, add to cart, Apple Pay and the ATS fit-check as one unit */ .product-form { margin-top: 0; background: #fff; border: 1px solid var(--ats-line-strong); border-top: 3px solid var(--ats-graphite); border-radius: var(--ats-r-lg); } .product-form:has(+ .ats-fit) { border-bottom: 0; border-radius: var(--ats-r-lg) var(--ats-r-lg) 0 0; } .product-form > section { border: 0 !important; border-radius: 0 !important; background: transparent !important; } .product-form > section.sticky-product-bar { background: #fff !important; padding-top: 14px !important; } .product-form > section.sticky-product-bar salla-add-product-button { margin-top: 0 !important; } .product-form > section:first-of-type:not(.sticky-product-bar) { padding-block: 12px !important; border-bottom: 1px solid var(--ats-line) !important; } .product-form salla-product-options { display: block; padding: 16px 20px 0; } .product-form .s-quantity-input-button { min-width: 40px; min-height: 40px; } .product-form salla-add-product-button .s-button-element { min-height: 52px !important; border-radius: var(--ats-r-md) !important; font-size: var(--ats-t-md) !important; font-weight: 800 !important; } .product-form .s-product-options-option-label { color: var(--ats-ink) !important; font-weight: 700 !important; } .ats-fit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 16px 20px; border-radius: 0 0 var(--ats-r-lg) var(--ats-r-lg); background: var(--ats-blueprint), var(--ats-graphite); color: var(--ats-on-dark) !important; } .ats-fit strong { display: block; color: #fff; font-size: var(--ats-t-md); font-weight: 800; line-height: 1.4; } .ats-fit small { display: block; margin-top: 2px; color: var(--ats-on-dark-muted); font-size: var(--ats-t-xs); } .ats-fit .ats-btn { min-height: 44px; padding: 0 16px; font-size: var(--ats-t-sm); } .ats-fit:hover .ats-btn { background: var(--ats-amber-hover); } @media (max-width: 379px) { .ats-fit { grid-template-columns: 1fr; } } /* product details: full width under the block, readable measure */ .ats-details { margin-top: 24px; background: #fff; border: 1px solid var(--ats-line); border-radius: 24px; padding: 20px; } @media (min-width: 768px) { .ats-details { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 32px; } } .ats-details > h2 { margin: 0 0 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: var(--ats-t-xl); font-weight: 800; color: var(--ats-ink); } .ats-details > h2::after { content: ""; width: 56px; height: 8px; background: var(--ats-rule); } .ats-details .product__description { margin: 0 !important; padding: 0 !important; border: 0; background: transparent; color: var(--ats-text); font-size: var(--ats-t-md); line-height: 1.9 !important; max-width: 78ch; } .product__description ul { padding-inline-start: 20px; list-style: disc; margin-block: 4px 12px; } .product__description p:empty, .product__description p:has(> br:only-child) { display: none; } .product__description [style*="background"] { display: inline-block; background: var(--ats-amber-soft) !important; color: var(--ats-ink) !important; padding: 2px 10px; border-radius: 6px; font-weight: 800; margin-block: 8px 4px; } .product__description [style*="color"]:not([style*="background"]) { color: var(--ats-ink) !important; font-weight: 700; } .s-bought-together-entry { border: 1px solid var(--ats-line) !important; border-radius: var(--ats-r-lg) !important; box-shadow: none !important; background: #fff !important; } .s-comments-title { color: var(--ats-ink) !important; font-weight: 800 !important; } .s-comments-item-wrapper { border-color: var(--ats-line) !important; border-radius: var(--ats-r-md) !important; } /* product page: this product's own ratings and comments, as a card under the details */ .s-comments-product { background: transparent !important; padding-block: 0 !important; } .s-comments-product .s-comments-container { width: min(1260px, calc(100% - 32px)); max-width: none; margin-inline: auto; background: #fff; border: 1px solid var(--ats-line); border-radius: 24px; padding: 18px 20px; } @media (min-width: 768px) { .s-comments-product .s-comments-container { padding: 24px 28px; } } .s-comments-product .s-comments-header { margin-block: 6px 0 !important; } .s-comments-product .s-comments-title { font-size: 0 !important; line-height: 0 !important; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 4px !important; } .s-comments-product .s-comments-title::before { content: "تقييمات وتعليقات المنتج"; font-size: var(--ats-t-xl); line-height: 1.35; font-weight: 800; color: var(--ats-ink); } .s-comments-product .s-comments-title::after { content: ""; width: 56px; height: 8px; background: var(--ats-rule); } .s-comments-product .s-comments-count-label { color: var(--ats-muted) !important; font-size: var(--ats-t-sm) !important; font-weight: 700; } @media (max-width: 767px) { .sticky-product-bar.is-sticky, .sticky-product-bar.fixed { box-shadow: 0 -8px 24px rgba(16, 24, 40, .12) !important; } } /* ========================================================= 16. Cart ========================================================= */ .cart-item, form.cart-item { border: 1px solid var(--ats-line) !important; border-radius: var(--ats-r-lg) !important; box-shadow: none !important; background: #fff !important; } .no-content-placeholder { color: var(--ats-muted); } .no-content-placeholder i { color: var(--ats-amber) !important; } /* ========================================================= 17. Footer (ATS closing: graphite; copyright text from Salla settings) ========================================================= */ .store-footer { margin-top: var(--ats-s8) !important; background: var(--ats-blueprint), var(--ats-black) !important; color: var(--ats-on-dark-muted) !important; border-top: 3px solid var(--ats-amber); } .store-footer__inner { background: transparent !important; padding-block: 48px 32px !important; } .store-footer h3 { color: #fff !important; font-family: inherit !important; font-weight: 800 !important; font-size: var(--ats-t-lg) !important; } .store-footer h3::before { display: none !important; } .store-footer a, .store-footer .max-w-sm, .store-footer p, .store-footer li, .store-footer span { color: var(--ats-on-dark-muted) !important; } .store-footer a:hover, .store-footer a:focus-visible { color: var(--ats-amber) !important; } .store-footer salla-contacts a i, .store-footer salla-contacts .s-contacts-icon, .store-footer salla-social a { border-color: rgba(255, 255, 255, .16) !important; color: #fff !important; background: transparent !important; } .store-footer salla-social a:hover { border-color: var(--ats-amber) !important; color: var(--ats-amber) !important; } .store-footer > div:last-child { background: transparent !important; border-top: 1px solid var(--ats-line-dark) !important; } .store-footer .copyright-text, .store-footer .copyright-text p, .store-footer .copyright-text a { color: var(--ats-on-dark-muted) !important; font-size: var(--ats-t-sm); } .store-footer salla-payments img, .store-footer salla-payments li, .store-footer .s-payments-list-item { background: #fff; border-radius: 6px; } .store-footer salla-payments img { padding: 3px 5px; height: 26px !important; width: auto !important; } @media (max-width: 767px) { footer salla-menu a, footer salla-contacts a, footer salla-social a { display: inline-flex; align-items: center; min-height: 44px; } footer salla-social a { min-width: 44px; justify-content: center; } } /* ========================================================= 18. Empty recommendation bundles ========================================================= */ .s-block.ats-empty { display: none !important; } /* ========================================================= 20. Design completion pass (2026-10-03): one rhythm, one product-card language, compact mobile. Target media: ATS 1:1 product images (black/graphite studio, metal, amber light). Overrides earlier rules on purpose. ========================================================= */ :root { --ats-gap-section: 40px; --ats-stage: #15171a; } @media (min-width: 768px) { :root { --ats-gap-section: 56px; } } /* --- rhythm: one section gap, one heading system (rule only on primary sections) --- */ .s-block, .ats-cats, .ats-band { margin-top: var(--ats-gap-section) !important; } .s-block--features { margin-top: 24px !important; } .s-block--logos-slider .s-block__title .right-side h2::after, .s-reviews-header::after { display: none !important; } .s-block--logos-slider .s-block__title h2, .s-block--testimonials .s-reviews-header { font-size: var(--ats-t-lg) !important; } .s-block--logos-slider .s-block__title, .s-block--testimonials .s-reviews-header-wrapper { margin-bottom: 12px !important; } /* --- product card: the image is the hero; dark 1:1 stage inside a clean commerce card --- */ .s-product-card-entry { border-color: var(--ats-line) !important; border-radius: var(--ats-r-lg) !important; padding: 8px !important; } .s-product-card-entry::before { display: none !important; } .s-product-card-entry:hover { border-color: var(--ats-line-strong) !important; box-shadow: 0 10px 24px rgba(16, 24, 40, .08) !important; } .s-product-card-entry .s-product-card-image, .s-product-card-entry.s-product-card-fit-height .s-product-card-image { aspect-ratio: 1 / 1; height: auto !important; min-height: 0 !important; max-height: none !important; flex: none !important; background: var(--ats-stage) !important; border: 0 !important; border-radius: var(--ats-r-md) !important; overflow: hidden; } .s-product-card-image > a:not(.ats-card-wa), .s-product-card-image picture { display: block; width: 100%; height: 100%; } .s-product-card-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; mix-blend-mode: normal !important; padding: 0 !important; transition: transform .35s var(--ats-ease); } .s-product-card-entry:hover .s-product-card-image img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .s-product-card-entry:hover .s-product-card-image img { transform: none; } } .s-product-card-content { padding: 12px 6px 4px !important; } .s-product-card-promotion-title, .s-product-card-entry .promotion-title { background: var(--ats-amber) !important; color: var(--ats-ink) !important; } /* secondary actions sit on the dark stage */ .s-product-card-entry button.s-product-card-wishlist-btn, .ats-card-wa { background: rgba(15, 17, 19, .72) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: #fff !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .s-product-card-entry button.s-product-card-wishlist-btn i { color: #fff !important; } .ats-card-wa::after { border-color: var(--ats-graphite); } .s-product-card-entry salla-button.s-product-card-wishlist-btn { bottom: 18px !important; inset-inline-end: 18px !important; } .ats-card-wa { bottom: 10px; inset-inline-start: 10px; } /* --- categories: one tile size; the ATS artwork carries its own name, so the caption below is for screen readers; tiles without ATS artwork get the same caption style on the image --- */ .ats-cat { position: relative; flex-basis: 104px; gap: 0; } @media (min-width: 768px) { .ats-cat { flex-basis: 136px; } } .ats-cat.is-art .ats-cat__name { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ats-cat:not(.is-art) .ats-cat__img::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(0deg, rgba(10, 11, 13, .92), transparent); } .ats-cat:not(.is-art) .ats-cat__name { position: absolute; inset-inline: 6px; bottom: 8px; z-index: 1; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.3; text-align: center; -webkit-line-clamp: 2; } .ats-cat__img--photo { background: #fff; } /* --- trust: three benefits, one quiet row --- */ .s-block--features > .grid { padding: 4px !important; } .s-block--features__item .feature-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; } @media (max-width: 1023px) { .s-block--features > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .s-block--features__item { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 8px; padding: 12px 6px !important; } .s-block--features__item .feature-icon { grid-row: auto; } .s-block--features__item + .s-block--features__item { border-top: 0 !important; border-inline-start: 1px solid var(--ats-line) !important; } .s-block--features__item h2 { font-size: 13px !important; line-height: 1.35; } .s-block--features__item p { display: none; } } /* --- brands + reviews: supporting content, lighter --- */ .s-block--logos-slider .brand-item { height: 52px !important; } .ats-rev-grid .s-reviews-testimonial { padding: 14px 16px !important; border-inline-start-width: 2px !important; } /* --- product page: premium split stage --- */ .container--product-details > [id^="product-"] { border-color: var(--ats-line); } .container--product-details .sidebar .details-slider, .container--product-details .image-slider { background: var(--ats-stage) !important; border-radius: var(--ats-r-xl) !important; } .container--product-details .swiper-slide img { mix-blend-mode: normal !important; object-fit: contain !important; } .container--product-details [data-testid="store-product-thumbnails"] img { background: var(--ats-stage); border-radius: 10px; } @media (max-width: 1023px) { .container--product-details .details-slider .swiper-slide.homeslider__slide { height: auto !important; aspect-ratio: 1 / 1; } } /* information: fewer lines, clear hierarchy */ [data-testid="store-product-price"] { border-top: 0; padding-top: 0; margin-top: 4px; } salla-installment { background: var(--ats-warm); border: 0; } salla-installment::before { content: "خيارات الدفع"; color: var(--ats-muted); font-size: var(--ats-t-xs); } salla-installment > * + * { border-top-color: rgba(22, 25, 29, .06) !important; } .product-form { border: 0 !important; border-radius: var(--ats-r-lg) !important; background: var(--ats-warm) !important; } .product-form:has(+ .ats-fit) { border-radius: var(--ats-r-lg) !important; } .product-form > section:first-of-type:not(.sticky-product-bar) { border-bottom: 0 !important; } .product-form > section.sticky-product-bar { background: transparent !important; } .ats-fit { margin-top: 12px; border-radius: var(--ats-r-lg); padding: 14px 16px; } .ats-fit .ats-btn { background: transparent; color: var(--ats-amber) !important; border: 1.5px solid rgba(255, 171, 1, .55); min-height: 40px; } .ats-fit:hover .ats-btn { background: var(--ats-amber); color: var(--ats-ink) !important; } @media (max-width: 767px) { .product-form > section.sticky-product-bar { background: #fff !important; } } /* --- mobile composition: compact header, shorter hero, earlier products --- */ @media (max-width: 1023px) { .store-header .top-navbar { padding-block: 6px !important; } .store-header .top-navbar input { min-height: 44px; font-size: 16px; } #mainnav .inner, #mainnav > .container { min-height: 0 !important; padding-block: 6px !important; } .store-header .navbar-brand img { height: 40px !important; } #mainnav salla-user-menu button, #mainnav .s-user-menu-trigger, #mainnav .s-cart-summary-wrapper { min-height: 40px; } .ats-hero__in { padding-block: 18px 22px; gap: 16px; } .ats-hero p, .ats-hero__media::before { display: none; } .ats-hero h2 { font-size: 24px; max-width: none; } .ats-hero__ctas { flex-wrap: nowrap; width: 100%; gap: 8px; margin-top: 2px; } .ats-hero__ctas .ats-btn { flex: 1 1 0; min-height: 44px; padding: 0 10px; font-size: 14px; } .ats-hero__media img { aspect-ratio: 16 / 10; border-radius: var(--ats-r-lg); } .ats-hero__spec { display: none; } } /* --- mobile footer: short --- */ @media (max-width: 1023px) { .store-footer { margin-top: 40px !important; } .store-footer__inner { padding-block: 28px 8px !important; } .store-footer__inner > .container { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: max-content; align-content: start; gap: 20px !important; } .store-footer__inner > .container > :first-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } .store-footer__inner > .container > :first-child .max-w-sm { margin: 0 !important; font-size: 13px; line-height: 1.6; } .store-footer__inner > .container > salla-apps-icons:empty { display: none; } .store-footer h3 { font-size: var(--ats-t-md) !important; margin-bottom: 6px !important; } .store-footer salla-menu a, .store-footer salla-contacts a { min-height: 44px !important; font-size: 13px; } .store-footer > div:last-child { padding-block: 12px !important; } } .product-form salla-product-options, .product-form .s-product-options-wrapper, .product-form .s-product-options-option-container, .product-form .s-product-options-option { background: transparent !important; } @media (max-width: 1023px) { .store-footer__inner > .container > :nth-child(2), .store-footer__inner > .container > :nth-child(3) { grid-column: 1 / -1; min-width: 0; } .store-footer salla-menu ul, .store-footer salla-menu .s-menu-footer-list { display: flex !important; flex-wrap: wrap; gap: 0 18px; } .store-footer salla-contacts a { word-break: break-all; } } @media (max-width: 767px) { .container--product-details .main-content > .mb-3, .container--product-details .main-content > .mb-3 + div.flex { grid-column: 1 / -1; } .container--product-details .main-content > .mb-3 + div.flex { justify-self: start; } } /* Let shoppers choose the correct variant before reading installment details. */ @media (max-width: 767px) { .container--product-details .main-content > .product-form { order: 5; } .container--product-details .main-content > .ats-fit { order: 6; } .container--product-details .main-content > salla-installment { order: 7; } } /* Keep all three native checkout actions readable in the mobile sticky bar. */ @media (max-width: 479px) { .product-form > section.sticky-product-bar { gap: 6px !important; padding: 8px !important; } .product-form > section.sticky-product-bar salla-add-product-button { min-width: 0 !important; } .product-form > section.sticky-product-bar salla-add-product-button .s-button-element, .product-form > section.sticky-product-bar salla-add-product-button button { min-width: 0 !important; min-height: 52px !important; padding-inline: 4px !important; gap: 4px !important; font-size: 14px !important; line-height: 1.25 !important; white-space: normal !important; text-overflow: clip !important; } .product-form > section.sticky-product-bar salla-add-product-button .s-button-element > * { min-width: 0; white-space: normal !important; } } /* ========================================================= 21. Creative director pass (2026-10-04): ATS Premium Automotive Commerce. One heading mark; amber kept for the one primary action per view (hero, product buy box), graphite purchase actions in grids; tighter header/hero; quieter supporting blocks; product-page hierarchy. Native blocks, CSS only. ========================================================= */ /* --- one heading system: a short amber index mark at the start of the title, no rule underneath --- */ .s-block__title .right-side h2, .s-slider-block__title-right h2, .ats-head h2, .s-reviews-header, .ats-details > h2, .s-comments-product .s-comments-title { flex-direction: row !important; align-items: center !important; gap: 0 !important; padding-inline-start: 14px; background: linear-gradient(var(--ats-amber), var(--ats-amber)) no-repeat right center / 4px 20px; } .s-block__title .right-side h2::after, .s-slider-block__title-right h2::after, .ats-head h2::after, .s-reviews-header::after, .ats-details > h2::after, .s-comments-product .s-comments-title::after { display: none !important; } /* --- header: one dark bar system, a little shorter on desktop --- */ @media (min-width: 1024px) { .store-header .top-navbar { padding-block: 6px !important; } .store-header .top-navbar input { min-height: 40px; } .store-header .navbar-brand img { height: 56px !important; } } /* --- hero: shorter, the ATS image carries it --- */ @media (min-width: 1024px) { body.index .ats-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; padding-block: 36px 44px; } .ats-hero h2 { font-size: 42px; line-height: 1.25; } .ats-hero__media img { aspect-ratio: 16 / 10; max-height: 400px; } } @media (max-width: 1023px) { .ats-hero__media img { aspect-ratio: 2 / 1; } } /* --- categories: tiles without ATS artwork carry their name under the image like a caption --- */ .ats-cats { margin-top: 32px !important; } .ats-cat:not(.is-art) .ats-cat__img::after { display: none; } .ats-cat:not(.is-art) .ats-cat__name { position: static; margin-top: 8px; color: var(--ats-ink); font-size: 13px; font-weight: 700; } /* --- store features: a technical spec strip between hairlines, not another card --- */ .s-block--features > .grid { background: transparent !important; border: 0 !important; border-block: 1px solid var(--ats-line-strong) !important; border-radius: 0 !important; padding: 0 !important; } /* --- product card: dark 1:1 stage, clean commerce surface, graphite purchase action --- */ .s-product-card-entry { padding: 6px !important; border-radius: 14px !important; } .s-product-card-entry .s-product-card-image, .s-product-card-entry.s-product-card-fit-height .s-product-card-image { border-radius: 10px !important; } .s-product-card-content { padding: 12px 8px 6px !important; } .s-product-card-price { font-size: 18px !important; } .s-product-card-entry salla-add-product-button .s-button-element { min-height: 44px; } .s-product-card-entry salla-add-product-button .s-button-outline, .s-product-card-entry salla-add-product-button .s-button-solid { background: var(--ats-graphite) !important; border-color: var(--ats-graphite) !important; color: #fff !important; } .s-product-card-entry salla-add-product-button .s-button-outline:hover, .s-product-card-entry salla-add-product-button .s-button-solid:hover { background: var(--ats-amber) !important; border-color: var(--ats-amber) !important; color: var(--ats-ink) !important; } .s-product-card-entry salla-add-product-button .s-button-element i, .s-product-card-entry salla-add-product-button .s-button-element svg { color: inherit !important; fill: currentColor; } .s-product-card-entry:hover { border-color: var(--ats-ink) !important; } /* --- product page: name + share, price + sold count, buy box; keyword tags hidden (no buying value) --- */ .container--product-details .main-content > .mb-3 { display: none !important; } .container--product-details .main-content > [data-testid="store-product-title"] { grid-column: 1; } .container--product-details .main-content > .mb-3 + div.flex { order: 0; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; margin: 6px 0 0 !important; } /* the buy box keeps Salla's live total (it follows the chosen option) as a quiet line */ .product-form > section:first-of-type:not(.sticky-product-bar) { padding: 12px 20px 0 !important; } .product-form > section:first-of-type:not(.sticky-product-bar) .form-label b { color: var(--ats-muted); font-size: var(--ats-t-sm); font-weight: 700; } .product-form > section:first-of-type:not(.sticky-product-bar) .price-wrapper h2, .product-form > section:first-of-type:not(.sticky-product-bar) .price-wrapper .total-price { font-size: var(--ats-t-lg) !important; } /* --- footer: Salla's own footer with the ATS mark on the store name; no empty columns --- */ .store-footer__inner > .container > :first-child > a { flex-direction: column; align-items: flex-start; gap: 12px; } .store-footer__inner > .container > :first-child > a::before { content: ""; display: block; width: 84px; height: 78px; background: var(--ats-logo-dark) no-repeat center / contain; } .store-footer__inner > .container > salla-apps-icons:not(:has(*)) { display: none !important; } @media (min-width: 1024px) { .store-footer__inner > .container { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 56px !important; } .store-footer__inner > .container > * { grid-column: auto !important; padding-inline: 0 !important; } } @media (max-width: 1023px) { .store-footer__inner > .container > :first-child { display: block !important; } .store-footer__inner > .container > :first-child > a { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 8px !important; } .store-footer__inner > .container > :first-child > a::before { width: 52px; height: 48px; } } /* reviews: a single written review keeps a card width instead of stretching across the page */ @media (min-width: 768px) { .ats-rev-grid .swiper-wrapper { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; } } @media (max-width: 1023px) { .store-footer .s-menu-footer-list { align-items: center; } .store-footer .s-menu-footer-item { margin: 0 !important; } } /* ========================================================= 22. Footer compaction (2026-10-04): mark beside the store name, tight columns, no dead gaps. ========================================================= */ .store-footer { margin-top: 48px !important; } .store-footer__inner { padding-block: 36px 24px !important; } .store-footer__inner > .container > :first-child > a { flex-direction: row !important; align-items: center !important; gap: 12px !important; margin-bottom: 10px !important; } .store-footer__inner > .container > :first-child > a::before { width: 56px !important; height: 52px !important; } .store-footer__inner > .container > :first-child .max-w-sm { margin-bottom: 14px !important; max-width: 44ch; line-height: 1.7; } .store-footer h3, .store-footer .s-contacts-title { margin-bottom: 10px !important; } .store-footer .s-contacts-list { gap: 0 !important; } .store-footer .s-contacts-item { min-height: 40px !important; } .store-footer .s-contacts-icon { width: 30px !important; height: 30px !important; } .store-footer .s-menu-footer-item { min-height: 36px !important; margin: 0 !important; display: inline-flex; align-items: center; } .store-footer .contact-social { margin-top: 8px !important; padding-top: 12px !important; } .store-footer > div:last-child { padding-block: 14px !important; gap: 10px; } .store-footer salla-payments ul, .store-footer .s-payments-list { gap: 6px !important; } .store-footer salla-payments img { height: 24px !important; } @media (min-width: 1024px) { .store-footer__inner > .container { grid-template-columns: minmax(0, 1fr) max-content max-content !important; column-gap: 88px !important; align-items: start; } .store-footer .s-menu-footer-list { display: flex !important; flex-direction: column; } } @media (max-width: 1023px) { .store-footer { margin-top: 32px !important; } .store-footer__inner { padding-block: 24px 4px !important; } .store-footer__inner > .container { gap: 18px !important; } .store-footer__inner > .container > :first-child .max-w-sm { margin-bottom: 0 !important; font-size: 13px; } .store-footer .s-menu-footer-list { flex-direction: row !important; gap: 0 20px !important; } .store-footer > div:last-child { padding-block: 12px !important; text-align: center; } } /* ========================================================= 23. Header presence + product stage (2026-10-04). Header: larger ATS mark, menu with an amber underline on hover. Product page: the gallery becomes the ATS studio stage (blueprint grid, warm light, amber viewfinder corners, same language as the home hero); the rest stays quiet. ========================================================= */ .store-header .navbar-brand img { height: 50px !important; } @media (min-width: 1024px) { .store-header .navbar-brand img { height: 76px !important; } #mainnav custom-main-menu .main-menu > li > a { position: relative; font-size: 15px; } #mainnav custom-main-menu .main-menu > li > a::before { content: ""; position: absolute; inset-inline: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--ats-amber); transform: scaleX(0); transition: transform .2s var(--ats-ease); } #mainnav custom-main-menu .main-menu > li > a:hover::before, #mainnav custom-main-menu .main-menu > li > a:focus-visible::before { transform: scaleX(1); } } /* product stage */ .container--product-details .sidebar .details-slider, .container--product-details .image-slider { background: var(--ats-blueprint), radial-gradient(70% 60% at 50% 42%, #2c2619 0%, var(--ats-stage) 72%) !important; } .container--product-details .sidebar .details-slider::before, .container--product-details .sidebar .details-slider::after { content: ""; position: absolute; z-index: 3; width: 48px; height: 48px; pointer-events: none; } .container--product-details .sidebar .details-slider::before { top: 16px; inset-inline-start: 16px; border-top: 2px solid var(--ats-amber); border-inline-start: 2px solid var(--ats-amber); border-start-start-radius: 14px; } .container--product-details .sidebar .details-slider::after { bottom: 16px; inset-inline-end: 16px; border-bottom: 2px solid var(--ats-amber); border-inline-end: 2px solid var(--ats-amber); border-end-end-radius: 14px; } .container--product-details [data-testid="store-product-thumbnails"] { background: transparent !important; } .container--product-details [data-testid="store-product-thumbnails"] img { border: 1px solid rgba(255, 255, 255, .08); } /* information panel: quiet, with one graphite "sold" plate */ .container--product-details .main-content > div.inline-flex.bg-white { background: var(--ats-graphite) !important; padding: 6px 12px !important; } .container--product-details .main-content > div.inline-flex.bg-white, .container--product-details .main-content > div.inline-flex.bg-white * { color: var(--ats-amber) !important; } [data-testid="store-product-price"] p { font-size: 36px !important; } @media (max-width: 767px) { [data-testid="store-product-price"] p { font-size: 30px !important; } }