/* ============================================================
   SUN TOOLS V3 — HOMEPAGE
   ============================================================
   Section-specific composition only — every section is built from
   components.css primitives (.st3-btn, .st3-section-header, .st3-badge)
   plus these homepage-only rules. Density target: no section taller
   than it needs to be for its real content; no empty panels.
   ============================================================ */

.st3-section { padding-block: var(--st3-space-9); }
.st3-section--tight { padding-block: var(--st3-space-7); }
.st3-section--surface { background: var(--st3-surface); }
.st3-section-header--center { justify-content: center; text-align: center; }
.st3-section-header__link-icon { width: 14px; height: 14px; transform: scaleX(-1); }

/* ============================================================
   HERO
   ============================================================
   Master Build pass: each slide is one of the 5 approved full-bleed
   campaign photographs (real branded tools already composed into a
   real environment) — text is overlaid on a scrim, there is no
   separate product-cutout layer to position/scale/ground. */
.st3-hero {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  background: var(--st3-dark);
  color: var(--st3-white);
}
.st3-hero__slide {
  position: absolute;
  inset: 0;
  display: none;
}
.st3-hero__slide.is-active { display: block; }
.st3-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.st3-hero__scrim {
  position: absolute;
  inset: 0;
  /* Default: darkest over the right side (where copy sits unless a
     slide is art-directed otherwise — see --text-left below). No
     logical-direction keyword exists for linear-gradient, so this is
     hardcoded to a real physical side per slide, not a value that
     would silently fail. */
  background: linear-gradient(
    to left,
    rgba(10,10,11,.85) 0%,
    rgba(10,10,11,.68) 32%,
    rgba(10,10,11,.32) 58%,
    rgba(10,10,11,.15) 100%
  );
}
/* Per-slide art direction: the image's own negative space decides
   which side the copy sits on and which side the scrim darkens —
   see the `text_side` value per slide in inc/homepage-data.php. */
.st3-hero__slide--text-left .st3-hero__scrim {
  background: linear-gradient(
    to right,
    rgba(10,10,11,.85) 0%,
    rgba(10,10,11,.68) 32%,
    rgba(10,10,11,.32) 58%,
    rgba(10,10,11,.15) 100%
  );
}
.st3-hero__row {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 560px;
}
.st3-hero__slide--text-left .st3-hero__row { justify-content: flex-end; }
.st3-hero__copy { max-width: 480px; }
.st3-hero__eyebrow {
  display: block;
  font-weight: 700;
  font-size: var(--st3-text-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st3-red);
  margin-bottom: var(--st3-space-3);
}
.st3-hero__title {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.18;
  margin: 0 0 var(--st3-space-3);
  color: var(--st3-white);
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.st3-hero__body {
  font-size: var(--st3-text-md);
  color: rgba(255,255,255,.88);
  line-height: var(--st3-leading-loose);
  margin: 0 0 var(--st3-space-6);
  max-width: 42ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.4);
}
.st3-hero__actions { display: flex; align-items: center; gap: var(--st3-space-3); }
.st3-hero__cta-icon { width: 16px; height: 16px; transform: scaleX(-1); }
.st3-hero__actions .st3-btn--secondary {
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color: var(--st3-white);
}
.st3-hero__actions .st3-btn--secondary:hover { background: var(--st3-white); color: var(--st3-ink); }

.st3-hero__controls {
  position: absolute;
  inset-inline-start: var(--st3-space-6);
  bottom: var(--st3-space-5);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--st3-space-4);
}
.st3-hero__counter {
  font-size: var(--st3-text-sm);
  font-weight: 700;
  color: rgba(255,255,255,.6);
  letter-spacing: .04em;
}
.st3-hero__counter [data-st3-hero-current] { color: var(--st3-white); }
.st3-hero__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: none;
  color: var(--st3-white);
  cursor: pointer;
  transition: background-color var(--st3-fast) var(--st3-ease), border-color var(--st3-fast) var(--st3-ease);
}
.st3-hero__arrow:hover { background: var(--st3-red); border-color: var(--st3-red); }
.st3-hero__arrow-icon { width: 16px; height: 16px; }
.st3-hero__arrow-icon--prev { transform: rotate(90deg); }
.st3-hero__arrow-icon--next { transform: rotate(-90deg); }

@media (max-width: 782px) {
  /* Mobile hero controls fix: the arrows/counter used to sit
     absolutely bottom-pinned OVER the same image area as the CTA
     buttons, so on longer copy/slides they visually collided. Fix is
     structural, not cosmetic: reserve a real strip below the photo
     for the controls and stop the photo/slide short of it.
     `.st3-hero__slide` normally uses `inset:0`, which fills the
     containing block's full padding box INCLUDING any padding on
     `.st3-hero` itself — so a padding-bottom reservation alone does
     NOT hold the photo back (verified: it still rendered edge-to-edge
     over the reserved space). Giving the slide an explicit `bottom`
     offset instead of `inset:0` is what actually stops it short. */
  .st3-hero { --st3-hero-controls-h: 64px; min-height: calc(460px + var(--st3-hero-controls-h)); }
  .st3-hero__slide {
    top: 0;
    right: 0;
    left: 0;
    bottom: var(--st3-hero-controls-h);
  }
  .st3-hero__row { min-height: 460px; text-align: center; align-items: flex-end; padding-bottom: var(--st3-space-7); }
  .st3-hero__copy { max-width: 100%; margin-inline: auto; }
  .st3-hero__body { margin-inline: auto; }
  .st3-hero__actions { justify-content: center; flex-wrap: wrap; }
  .st3-hero__scrim {
    background: linear-gradient(to top, rgba(10,10,11,.92) 0%, rgba(10,10,11,.55) 45%, rgba(10,10,11,.25) 100%);
  }
  /* Separate control area below the CTA buttons, not an overlay on
     the photo — its own full-width strip below the (now shorter)
     photo, with a top divider so it reads as an intentional band
     rather than a stray leftover row. */
  .st3-hero__controls {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: var(--st3-hero-controls-h);
    justify-content: center;
    gap: var(--st3-space-4);
    border-top: 1px solid rgba(255,255,255,.12);
  }
}

/* ============================================================
   BENEFITS / PROOF STRIP
   ============================================================
   Its own section directly under the hero — 5 real proof points in a
   light row, matching the reference's rhythm (not an overlay on the
   hero photo). */
.st3-benefits {
  background: var(--st3-surface);
  border-bottom: 1px solid var(--st3-border);
}
.st3-benefits__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--st3-space-5);
  padding-block: var(--st3-space-6);
}
.st3-benefits__item {
  display: flex;
  align-items: center;
  gap: var(--st3-space-3);
  min-width: 0; /* grid items default to min-width:auto — without this,
    unwrapped icon+label content forces the grid (and the page) wider
    than the viewport at narrow widths instead of truncating. */
}
.st3-benefits__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--st3-white);
  color: var(--st3-red);
  box-shadow: var(--st3-shadow-sm);
}
.st3-benefits__icon svg { width: 24px; height: 24px; }
.st3-benefits__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.st3-benefits__text strong {
  font-size: var(--st3-text-base);
  font-weight: 700;
  color: var(--st3-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st3-benefits__text span {
  font-size: var(--st3-text-xs);
  color: var(--st3-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1024px) {
  .st3-benefits__row { grid-template-columns: repeat(3, 1fr); row-gap: var(--st3-space-5); }
}
@media (max-width: 600px) {
  /* Required mobile rhythm: 2 items per row, with the 5th (odd one
     out) centered alone on its own row rather than left dangling
     under column 1 — items are already in exactly that DOM order
     (خبرة طويلة, أسعار تنافسية / دعم فني متخصص, توصيل سريع / منتجات
     أصلية 100%), so a plain 2-column grid plus one full-width rule
     on the last item is all that's needed, no markup change. */
  .st3-benefits__row {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--st3-space-4);
    row-gap: var(--st3-space-4);
    padding-block: var(--st3-space-5);
  }
  .st3-benefits__item:last-child {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .st3-benefits__icon { width: 40px; height: 40px; }
  .st3-benefits__icon svg { width: 20px; height: 20px; }
  /* At 2 columns the longest label ("منتجات أصلية 100%") doesn't fit
     on one line and the nowrap+ellipsis above was cutting the "100%"
     figure mid-digit ("...00..."), reading as a rendering glitch
     rather than an intentional truncation. Wrap to two lines instead
     — nothing gets silently chopped. */
  .st3-benefits__text strong,
  .st3-benefits__text span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ============================================================
   CATEGORY DISCOVERY
   ============================================================
   A real grid on desktop/tablet — the full category set is visible
   without a scrollbar. Only mobile (where a 6-column grid would
   force tiles too small to read) falls back to a horizontal swipe
   strip, which is an intentional, controlled mobile pattern, not the
   primary discovery mechanism. */
.st3-cat-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--st3-space-4);
}
/* Base tile: only reached by the (currently unused, kept as a safety
   net) icon fallback — a category with no term thumbnail. Stacked
   icon-above-caption, both always visible, no overlay needed since
   there's no photo to lay text over. */
.st3-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--st3-space-3);
  text-align: center;
}
.st3-cat-tile__icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--st3-soft-gray);
  border-radius: var(--st3-radius-lg);
  color: var(--st3-red);
  transition: background-color var(--st3-fast) var(--st3-ease);
}
.st3-cat-tile__icon svg { width: 40px; height: 40px; }
.st3-cat-tile__label {
  font-size: var(--st3-text-sm);
  font-weight: 600;
  color: var(--st3-ink);
}
.st3-cat-tile:hover .st3-cat-tile__icon { background: var(--st3-red); color: var(--st3-white); }

/* Photo tile: the whole tile IS the image box (not a flex column with
   the caption stacked below it) — the caption is layered ON TOP of the
   photo via absolute positioning. This is a deliberate structural
   change: the previous version put `.st3-cat-tile__label` as a normal
   flex child inside a box that was simultaneously `aspect-ratio:1/1`
   AND `overflow:hidden`, which silently clipped the caption out of
   the visible box entirely (verified: the label existed in the DOM
   with real geometry, just positioned below the tile's own clipped
   render box — invisible at every viewport, not just before hover). */
.st3-cat-tile--photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--st3-radius-lg);
  overflow: hidden;
  background: var(--st3-soft-gray);
}
.st3-cat-tile--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--st3-base-speed) var(--st3-ease);
}
.st3-cat-tile--photo .st3-cat-tile__scrim {
  position: absolute;
  inset: 0;
  /* Strong enough at rest for the always-visible white caption to
     read cleanly against any photo; deepens further on hover instead
     of only appearing then. */
  background: linear-gradient(to top, rgba(15,15,15,.82) 0%, rgba(15,15,15,.32) 38%, rgba(15,15,15,0) 68%);
  transition: background var(--st3-fast) var(--st3-ease);
}
.st3-cat-tile--photo .st3-cat-tile__label {
  position: absolute;
  z-index: 1;
  inset-inline: var(--st3-space-3);
  bottom: var(--st3-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st3-space-2);
  color: var(--st3-white);
  font-size: var(--st3-text-sm);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.st3-cat-tile__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--st3-fast) var(--st3-ease), transform var(--st3-fast) var(--st3-ease);
}
[dir="rtl"] .st3-cat-tile__arrow { transform: translateX(4px) scaleX(-1); }
.st3-cat-tile:hover.st3-cat-tile--photo img,
.st3-cat-tile:focus-visible.st3-cat-tile--photo img { transform: scale(1.06); }
.st3-cat-tile:hover.st3-cat-tile--photo .st3-cat-tile__scrim,
.st3-cat-tile:focus-visible.st3-cat-tile--photo .st3-cat-tile__scrim {
  background: linear-gradient(to top, rgba(15,15,15,.9) 0%, rgba(15,15,15,.45) 45%, rgba(15,15,15,.05) 75%);
}
.st3-cat-tile:hover .st3-cat-tile__arrow,
.st3-cat-tile:focus-visible .st3-cat-tile__arrow {
  opacity: 1;
  transform: translateX(0);
}
[dir="rtl"] .st3-cat-tile:hover .st3-cat-tile__arrow,
[dir="rtl"] .st3-cat-tile:focus-visible .st3-cat-tile__arrow { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .st3-cat-tile--photo img,
  .st3-cat-tile__arrow { transition: none; }
}

/* ============================================================
   BRAND DISCOVERY — continuous marquee rail
   ============================================================
   Minimal/transparent surfaces (no boxed cards), substantially
   larger logos than the old grid, slow auto-scroll with a
   seamless loop (two identical sets, track translated -50%).
   Pauses on hover/focus; a soft edge mask hides the container
   seam; falls back to a static wrapped row when the user prefers
   reduced motion or JS/animation is unavailable. */
.st3-brand-marquee {
  position: relative;
  margin-top: var(--st3-space-7);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.st3-brand-marquee__track {
  display: flex;
  width: max-content;
  animation: st3-brand-scroll 42s linear infinite;
}
.st3-brand-marquee:hover .st3-brand-marquee__track,
.st3-brand-marquee:focus-within .st3-brand-marquee__track {
  animation-play-state: paused;
}
.st3-brand-marquee__set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.st3-brand-marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding-inline: var(--st3-space-6);
  flex-shrink: 0;
}
.st3-brand-marquee__item img {
  max-height: 56px;
  max-width: 148px;
  width: auto;
  object-fit: contain;
  /* Full color, full opacity at rest — this is a "brands we sell"
     showcase (unlike the monochrome-by-default Success Partners trust
     wall below it), so a resting fade read as washed out rather than
     restrained. Hover/focus now only lifts the logo, it doesn't need
     to "turn on" color that should already be there. */
  transition: transform var(--st3-fast) var(--st3-ease);
}
/* TOHO & TOYO's real lockup is a genuinely wide two-wordmark-plus-
   ampersand mark (~7.5:1) — the shared 148px width cap above forces
   its height down to ~20px against everyone else's 40-56px, right
   back into the "one tiny logo" problem the crop pass just fixed.
   Letting this one mark run wider (flex row has room) keeps its
   optical height consistent with the rest instead. */
.st3-brand-marquee__item img[alt="TOHO & TOYO"] {
  /* This source file's cropped content is only 36px tall at its
     native resolution — max-height/max-width alone never upscale a
     raster image past its intrinsic pixels, so the rule above left it
     stuck smaller than every other logo. Forcing height (not
     max-height) makes the browser actually scale it up to match; at
     ~1.5x this simple two-color wordmark stays crisp. */
  height: 56px;
  max-width: 420px;
}
.st3-brand-marquee__item:hover img,
.st3-brand-marquee__item:focus-visible img {
  transform: scale(1.06);
}
/* Direction is NOT a cosmetic mirror choice here — it's load-bearing.
   A wider-than-container block under an RTL ancestor is flush against
   the CONTAINER'S RIGHT edge at rest (overflow hangs off the left;
   see CSS Overflow direction rules) instead of flush-left like in LTR.
   Shifting the two duplicated sets further in that same "hanging off
   the left" direction drains the whole rail out of view before the
   loop resets (verified: at ~50% of the cycle the viewport goes
   completely empty). Moving the RTL track the OTHER way (positive
   translateX) instead pulls the second set into view from the right
   as the first exits left, keeping the rail continuously full. */
@keyframes st3-brand-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
[dir="rtl"] .st3-brand-marquee__track { animation-name: st3-brand-scroll-rtl; }
@keyframes st3-brand-scroll-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}
@media (max-width: 600px) {
  /* The scrolling marquee doesn't translate to mobile (no ambient
     mouse-hover, and a moving rail next to fixed-width fingers is
     harder to scan) — same underlying technique as the
     prefers-reduced-motion fallback below (stop the animation, drop
     the duplicated loop-set, let the first set lay out on its own),
     but landing on a real 2-column grid instead of a wrapped row, per
     the approved mobile brands requirement. */
  .st3-brand-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: visible; }
  .st3-brand-marquee__track,
  [dir="rtl"] .st3-brand-marquee__track { animation: none !important; width: 100%; }
  .st3-brand-marquee__set:last-child { display: none; }
  .st3-brand-marquee__set {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--st3-space-3);
    width: 100%;
  }
  .st3-brand-marquee__item {
    height: 76px;
    padding-inline: var(--st3-space-4);
    background: var(--st3-white);
    border: 1px solid var(--st3-border);
    border-radius: var(--st3-radius);
  }
  .st3-brand-marquee__item img { max-height: 40px; max-width: 100%; }
  /* The TOHO & TOYO rule above forces a fixed height:56px/max-width:420px
     (needed at desktop's wide flex-row spacing) — at a ~165px-wide
     mobile grid tile that fixed height scales the wide wordmark
     straight past the tile edge. Same selector specificity, so this
     override needs to match it exactly, not just the generic img rule
     above. */
  .st3-brand-marquee__item img[alt="TOHO & TOYO"] {
    height: auto;
    max-height: 40px;
    max-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .st3-brand-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: visible; }
  .st3-brand-marquee__track,
  [dir="rtl"] .st3-brand-marquee__track { animation: none !important; width: 100%; }
  .st3-brand-marquee__set:last-child { display: none; }
  .st3-brand-marquee__set {
    /* The visible set is itself a flex item inside .track; without an
       explicit width it sizes to its own (wider-than-viewport) content
       instead of the container, so flex-wrap here never had anything
       to wrap against — it just overflowed in one long row. Giving it
       the container's full width is what actually makes it wrap into
       a clean static grid. */
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ============================================================
   SUCCESS PARTNERS (شركاء النجاح)
   ============================================================
   Real customer/company logos — a trust module, deliberately
   distinct from the brand-discovery grid above: monochrome by
   default, picking up color + a lift on hover, no border/card (reads
   as "companies who trust us", not "brands you can shop"). */
.st3-partners { background: var(--st3-surface); }
.st3-partners__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--st3-space-8) var(--st3-space-9);
}
.st3-partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}
.st3-partners__item img {
  max-height: 100%;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.55);
  transition: filter var(--st3-fast) var(--st3-ease), transform var(--st3-fast) var(--st3-ease);
}
.st3-partners__item:hover img {
  filter: grayscale(0) opacity(1);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .st3-partners__item img { transition: none; }
}
@media (max-width: 600px) {
  .st3-partners__rail { gap: var(--st3-space-6) var(--st3-space-7); }
  .st3-partners__item { height: 34px; }
  .st3-partners__item img { max-width: 104px; }
}

/* ============================================================
   FEATURED PRODUCTS
   ============================================================ */
.st3-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--st3-space-4);
}
.st3-product-card {
  border: 1px solid var(--st3-border);
  border-radius: var(--st3-radius);
  overflow: hidden;
  background: var(--st3-white);
  transition: border-color var(--st3-fast) var(--st3-ease), box-shadow var(--st3-fast) var(--st3-ease);
}
.st3-product-card:hover { border-color: var(--st3-dark); box-shadow: var(--st3-shadow-md); }
.st3-product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--st3-soft-gray);
}
.st3-product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--st3-space-4); box-sizing: border-box; }
.st3-product-card__stock { position: absolute; top: var(--st3-space-2); inset-inline-start: var(--st3-space-2); }
.st3-product-card__body { padding: var(--st3-space-3); border-top: 1px solid var(--st3-border); }
.st3-product-card__brand {
  display: block;
  font-size: var(--st3-text-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--st3-muted);
  margin-bottom: 4px;
}
.st3-product-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--st3-text-base) * 1.4 * 2);
  font-size: var(--st3-text-base);
  font-weight: 600;
  color: var(--st3-ink);
  line-height: 1.4;
  margin-bottom: var(--st3-space-2);
}
.st3-product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--st3-space-2); }
.st3-product-card__price { font-weight: 700; font-size: var(--st3-text-base); color: var(--st3-red); }
.st3-product-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--st3-radius-sm);
  background: var(--st3-dark);
  color: var(--st3-white);
}
.st3-product-card__add:hover { background: var(--st3-red); }
.st3-product-card__add svg { width: 17px; height: 17px; }

.st3-products__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--st3-space-3);
  max-width: 480px;
  margin-inline: auto;
  padding-block: var(--st3-space-7);
}
.st3-products__empty-icon { width: 40px; height: 40px; color: var(--st3-muted); }
.st3-products__empty p { color: var(--st3-body); margin-bottom: var(--st3-space-2); }

/* ============================================================
   B2B
   ============================================================ */
.st3-b2b__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--st3-space-8);
  align-items: center;
}
.st3-b2b__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--st3-radius-lg);
  overflow: hidden;
}
.st3-b2b__media img { width: 100%; height: 100%; object-fit: cover; }
.st3-b2b__copy h2 { font-size: var(--st3-text-xl); margin: 0 0 var(--st3-space-3); }
.st3-b2b__copy > p { color: var(--st3-body); max-width: 48ch; margin-bottom: var(--st3-space-5); }
.st3-b2b__facts { display: flex; flex-direction: column; gap: var(--st3-space-3); margin-bottom: var(--st3-space-6); }
.st3-b2b__facts li { display: flex; align-items: center; gap: var(--st3-space-3); font-size: var(--st3-text-sm); font-weight: 600; color: var(--st3-ink); }
.st3-b2b__facts svg { width: 20px; height: 20px; color: var(--st3-red); flex-shrink: 0; }

@media (max-width: 1024px) {
  .st3-b2b__inner { grid-template-columns: 1fr; }
  .st3-b2b__media { order: -1; }
}

/* ============================================================
   INDUSTRIAL SOLUTIONS (الحلول الصناعية)
   ============================================================
   Real industry taxonomy terms, now image-led (real photography per
   sector) — same card grammar as the category tiles (photo + dark
   scrim + text), so the three discovery systems on this page (category/
   industry/product) read as one family while each stays visually
   distinct in density and purpose. Every card is a real link (a
   pre-filled quote request for that sector), not a decorative tile. */
.st3-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--st3-space-4);
}
.st3-industries__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--st3-radius-lg);
  overflow: hidden;
  background: var(--st3-charcoal);
}
.st3-industries__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--st3-base-speed) var(--st3-ease);
}
.st3-industries__card:hover img { transform: scale(1.06); }
.st3-industries__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,11,.92) 0%, rgba(10,10,11,.5) 45%, rgba(10,10,11,.1) 75%);
}
.st3-industries__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--st3-space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.st3-industries__name { font-size: var(--st3-text-lg); font-weight: 700; color: var(--st3-white); }
.st3-industries__desc { font-size: var(--st3-text-sm); color: rgba(255,255,255,.75); line-height: var(--st3-leading-normal); }
.st3-industries__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--st3-space-2);
  font-size: var(--st3-text-sm);
  font-weight: 700;
  color: var(--st3-white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--st3-fast) var(--st3-ease), transform var(--st3-fast) var(--st3-ease);
}
.st3-industries__cta-icon { width: 14px; height: 14px; transform: scaleX(-1); }
.st3-industries__card:hover .st3-industries__cta,
.st3-industries__card:focus-visible .st3-industries__cta { opacity: 1; transform: none; }
@media (max-width: 1024px) {
  .st3-industries__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .st3-industries__grid { grid-template-columns: 1fr; }
  .st3-industries__cta { opacity: 1; transform: none; } /* no hover on touch */
}

/* ============================================================
   PROMO
   ============================================================ */
.st3-promo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--st3-space-4);
}
.st3-promo__card {
  position: relative;
  display: block;
  aspect-ratio: 21 / 10;
  border-radius: var(--st3-radius-lg);
  overflow: hidden;
}
.st3-promo__card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--st3-base-speed) var(--st3-ease); }
.st3-promo__card:hover img { transform: scale(1.05); }
.st3-promo__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(21,21,21,.82) 0%, rgba(21,21,21,.35) 55%, transparent 85%);
}
.st3-promo__content {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 62%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--st3-space-2);
  padding-inline: var(--st3-space-6);
}
.st3-promo__eyebrow { font-size: var(--st3-text-xs); font-weight: 700; color: var(--st3-white); opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.st3-promo__title { font-size: var(--st3-text-lg); font-weight: 700; color: var(--st3-white); margin-bottom: var(--st3-space-2); }
.st3-promo__content .st3-btn { pointer-events: none; }

@media (max-width: 768px) {
  .st3-promo__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.st3-trust__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--st3-space-6);
}
.st3-trust__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline-start: var(--st3-space-4);
  border-inline-start: 2px solid var(--st3-red);
}
.st3-trust__number { font-size: var(--st3-text-xl); font-weight: 700; color: var(--st3-ink); }
.st3-trust__label { font-size: var(--st3-text-sm); color: var(--st3-body); }

@media (max-width: 768px) {
  .st3-trust__row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — cross-section
   ============================================================ */
@media (max-width: 1024px) {
  .st3-product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .st3-section { padding-block: var(--st3-space-7); }
  .st3-section-header { flex-direction: column; align-items: flex-start; gap: var(--st3-space-2); }
  .st3-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--st3-space-3); }
  .st3-promo__content { width: 100%; padding-inline: var(--st3-space-4); }
  .st3-promo__title { font-size: var(--st3-text-base); }
}
@media (max-width: 1024px) {
  .st3-cat-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  /* Static 2-column grid, not the earlier horizontal swipe strip —
     every category is reachable without side-scrolling. Tiles stay
     square via aspect-ratio (undoing the old fixed 118x118 flex
     sizing) so they scale cleanly to the column width at any of
     375/390/430px with no horizontal overflow. */
  .st3-cat-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--st3-space-3);
    overflow-x: visible;
    padding-bottom: 0;
  }
  .st3-cat-tile,
  .st3-cat-tile__icon,
  .st3-cat-tile--photo { flex: initial; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .st3-cat-tile__icon svg { width: 32px; height: 32px; }
}