/* ==========================================================================
   ZeyadStore — Storefront 2026
   Loaded LAST, after styles.css / production-polish.css / responsive-pro.css /
   mobile-first.css. Everything here is a deliberate override of those layers,
   which is why the specificity and the !important flags are what they are:
   the earlier files carry dozens of !important declarations on the same
   selectors, and the static cards additionally ship inline styles.

   Section 1 — Product card
   Section 2 — Product page gallery
   Section 3 — Category tiles & filter rail
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRODUCT CARD
   --------------------------------------------------------------------------
   Measured before (bedrooms.html @375px): card 373px tall, photo 164px (44%),
   text block 208px (56%). The availability row alone was 79px because
   availability + compare + wishlist + add-to-cart could not fit one line and
   wrapped twice. The discount badge and the wishlist button were painted ON
   TOP of the photograph, covering the only thing a customer is looking at.

   After: the photograph is the largest element in the card and carries nothing
   on top of it. Price, discount and wishlist live in the information block,
   where they read as information instead of graffiti.
   -------------------------------------------------------------------------- */

.product-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #ede3d4);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(55, 43, 31, 0.05);
  transition: transform 240ms cubic-bezier(.2,.7,.3,1),
              box-shadow 240ms cubic-bezier(.2,.7,.3,1),
              border-color 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-gold, #c79a52);
    box-shadow: 0 18px 40px rgba(55, 43, 31, 0.14);
  }
}

/* --- Media: an adaptive system, not a fixed ratio -------------------------
   Products arrive as 1:1, 4:5, 3:4, 16:9, portrait, landscape, transparent
   cut-outs and lifestyle shots. Three rules keep all of them correct:

   1. The BOX has a ratio, so the grid stays even and nothing jumps as images
      load. That ratio is a token, not a constant: --zs-media-ratio defaults to
      1/1 and any grid, section or department can override it in one line
      without touching this file. No single ratio is imposed site-wide.

   2. The PHOTOGRAPH is object-fit: contain inside that box. It is never
      cropped, never stretched, never distorted, whatever shape it was shot in.

   3. The space containment leaves is filled with a blurred copy of the same
      photograph, so a 16:9 room shot in a square box reads as a deliberate
      mount rather than a small picture in an empty beige rectangle -- which is
      what "excessive empty space" actually looks like in practice.

   Transparent cut-outs are the exception and get .zs-cutout instead (below):
   blurring a cut-out makes the product look like it is floating over a smear
   of itself.
   ------------------------------------------------------------------------ */
.product-card {
  --zs-media-ratio: 1 / 1;
}

.product-card .product-photo-link,
.product-card > a:first-child {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: var(--zs-media-ratio) !important;
  height: auto !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  background: var(--accent-gold-soft, #fbf5ea);
  border-radius: 0;
}

/* Blurred backdrop of the product's own photograph. */
.product-card .product-photo-link::before,
.product-card > a:first-child::before {
  content: "";
  position: absolute;
  inset: -12%;
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.05) brightness(1.04);
  opacity: .55;
  transform: scale(1.06);
  pointer-events: none;
}

/* A whisper of a scrim so the sharp image never fights its own backdrop. */
.product-card .product-photo-link::after,
.product-card > a:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%);
  pointer-events: none;
}

.product-card .product-photo-link img,
.product-card > a:first-child > img,
.product-card img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  padding: 4px !important;
  box-sizing: border-box;
  transition: transform 320ms cubic-bezier(.2,.7,.3,1);
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-photo-link img,
  .product-card:hover > a:first-child > img { transform: scale(1.04); }
}

/* Transparent product photography: a flat brand plate, no blur, and a little
   more air so the cut-out reads as a product shot rather than a sticker.
   Set by storefront-2026.js after probing the image's alpha channel. */
.product-card .zs-cutout::before,
.product-gallery-stage.zs-cutout::before { display: none !important; }

.product-card .zs-cutout,
.product-gallery-stage.zs-cutout {
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    var(--accent-gold-soft, #fbf5ea) !important;
}
.product-card .zs-cutout img { padding: 10px !important; }

[data-theme="dark"] .product-card .zs-cutout,
[data-theme="dark"] .product-gallery-stage.zs-cutout {
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%),
    rgba(255,255,255,.04) !important;
}

/* --- Position is not a design decision ------------------------------------
   responsive-pro.css singles out `.product-card:first-child` in four places and
   gives it a different shape -- 16/10 with a 170px floor in the main grid, a
   taller box in the recommended strip. Whichever product happened to sort first
   was drawn differently from its neighbours, so reordering the catalogue in the
   admin silently changed the layout, and the `min-height` floor overrode the
   aspect ratio outright (measured at 320px: a 139x170 box in a grid of squares).

   Shape comes from the ratio token, not from a card's position in a list.
   Matching specificity, declared later, so it wins.
   ------------------------------------------------------------------------ */
.product-grid .product-card:first-child .product-photo-link,
.product-grid .product-card:first-child .product-photo,
.product-section.recommended .product-card:first-child .product-photo-link,
.product-section.recommended .product-card:first-child .product-photo,
.horizontal-cards .product-card:first-child .product-photo-link,
.product-slider .product-card:first-child .product-photo-link {
  aspect-ratio: var(--zs-media-ratio) !important;
  min-height: 0 !important;
  height: auto !important;
}

/* --- Overriding the ratio ------------------------------------------------
   A section, a department page or a single grid changes the shape of its media
   in one declaration. Nothing else in this file needs to know.

     .kitchen-products-grid { --zs-media-ratio: 4 / 5; }

   The two below exist because they are genuinely different shopping contexts:
   a horizontal strip is scanned, so it reads better slightly wide, and the
   wishlist is a review screen where taller images help recall.
   ------------------------------------------------------------------------ */
.horizontal-cards .product-card { --zs-media-ratio: 5 / 4; }
.wishlist-grid .product-card { --zs-media-ratio: 4 / 5; }

/* --- Nothing sits on the photograph -------------------------------------
   Every overlay the older layers positioned over the media is pulled back into
   the flow of the information block. The badge is relocated in the DOM by
   storefront-2026.js; these rules stop production-polish.css from absolutely
   positioning it again.
   ------------------------------------------------------------------------ */
.product-card .wish,
.product-card .btn-wishlist,
.product-card .btn-compare,
.product-card .premium-badge,
.product-card .discount-tag,
.product-card .badge-discount,
.product-card .badge-bestseller {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
}

/* --- Information block ---------------------------------------------------
   Four rows, in the order a customer reads them: what it is, what people think
   of it, what it costs, how to buy it.
   ------------------------------------------------------------------------ */
.product-card .product-body {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  gap: 4px !important;
  padding: 9px 10px 10px !important;
  background: var(--bg-card, #fff) !important;
  border-top: 1px solid var(--border-subtle, #ede3d4);
}

.product-card .product-body h3 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 !important;
  /* Exactly two lines, always. Cards in a grid row stretch to the tallest one;
     if one title is a line shorter than its neighbour the difference reappears
     as dead space inside the card. Reserving both lines keeps every card in a
     row the same natural height, so there is no slack to distribute. */
  min-height: 2.64em !important;
  font-size: .84rem !important;
  font-weight: 600;
  line-height: 1.32 !important;
  color: var(--text-primary, #1c1813);
}

.product-card .product-body h3 a { color: inherit; text-decoration: none; }

/* The one-line description the catalogue pages ship is noise at this size. */
.product-card .product-desc { display: none !important; }

/* Rating — small, quiet, factual. */
.product-card .premium-rating {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  font-size: .72rem;
  line-height: 1;
  color: var(--text-muted, #756b5f);
}
.product-card .premium-rating .star {
  width: 12px; height: 12px;
  color: var(--accent-gold, #c79a52);
  flex: 0 0 auto;
}
.product-card .premium-rating .reviews-count { color: var(--text-subtle, #9c9081); }

/* Price row — the current price leads; old price and discount follow it. */
.product-card .price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 0 !important;
  margin-top: auto !important;
}
.product-card .price strong {
  font-size: .95rem !important;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary, #1c1813) !important;
  letter-spacing: -.02em;
  white-space: nowrap;
}
/* With a discount there are three things to fit on one 148px line: the price,
   the old price and the percentage. In Arabic-Indic digits with a currency
   suffix that never fits, so the break is made deliberate and identical on
   every card -- price on its own line, then what it was and what you save --
   instead of letting the percentage wrap on its own at random widths. */
.product-card .price:has(del) strong { flex: 1 0 100%; }

.product-card .price del {
  font-size: .72rem !important;
  color: var(--text-subtle, #9c9081) !important;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

/* The discount, in the information block where it belongs. */
.product-card .premium-badge,
.product-card .discount-tag,
.product-card .badge-discount,
.product-card .badge-bestseller {
  display: inline-flex !important;
  align-items: center;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  line-height: 1.5;
  box-shadow: none !important;
  white-space: nowrap;
  margin: 0 !important;
}
.product-card .premium-badge.badge-discount,
.product-card .discount-tag,
.product-card .badge-discount {
  background: rgba(220, 38, 38, .1) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(220, 38, 38, .22);
}
.product-card .premium-badge.badge-bestseller,
.product-card .badge-bestseller,
.product-card .discount-tag.tag-gold {
  background: rgba(199, 154, 82, .14) !important;
  color: #8a6520 !important;
  border: 1px solid rgba(199, 154, 82, .3);
}
.product-card .discount-tag.tag-green {
  background: var(--accent-green-soft, #eaf1eb) !important;
  color: var(--accent-green-dark, #23382e) !important;
  border: 1px solid rgba(90, 109, 78, .25);
}

/* --- Action row ----------------------------------------------------------
   Availability becomes a dot beside the rating (moved there by the script) so
   it no longer costs a line of its own. What is left is one row: save, and buy.
   ------------------------------------------------------------------------ */
.product-card .stock {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.product-card .stock > span:first-child { display: none !important; }
.product-card .stock > div {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
}

.product-card .stock .wish,
.product-card .stock .btn-wishlist,
.product-card .stock .btn-compare {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: var(--bg-surface-2, #f4eadc) !important;
  border: 1px solid var(--border-subtle, #ede3d4) !important;
  color: var(--text-secondary, #3e342b) !important;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.product-card .stock .wish svg,
.product-card .stock .btn-wishlist svg,
.product-card .stock .btn-compare svg { width: 17px !important; height: 17px !important; }

.product-card .stock .wish.is-active,
.product-card .stock .btn-wishlist.is-active {
  background: rgba(220, 38, 38, .1) !important;
  border-color: rgba(220, 38, 38, .3) !important;
  color: #dc2626 !important;
}
.product-card .stock .wish.is-active svg { fill: currentColor; }

/* Compare is a power-user control; it does not earn a slot on a phone. */
@media (max-width: 767px) {
  .product-card .stock .btn-compare { display: none !important; }
}

.product-card .btn-add-cart-mini,
.product-card .add-cart,
.product-card .btn-cart {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
  height: 40px !important;
  /* mobile-first.css carries `min-height: 44px !important` on every button as a
     touch-target floor. 40px is still a comfortable target and it is what makes
     the photograph, rather than the button, the tallest thing in the card. */
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  border: none !important;
  border-radius: 10px !important;
  background: var(--button-primary, #23382e) !important;
  color: var(--button-primary-text, #fff) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, transform 140ms ease;
}
.product-card .btn-add-cart-mini:hover,
.product-card .add-cart:hover { background: var(--accent-green, #5a6d4e) !important; }
.product-card .btn-add-cart-mini:active { transform: scale(.98); }

/* Out of stock reads as a state, not as a broken button. */
.product-card[data-stock="out-of-stock"] .btn-add-cart-mini {
  background: var(--bg-surface-2, #f4eadc) !important;
  color: var(--text-subtle, #9c9081) !important;
  pointer-events: none;
}

/* --- Availability dot, injected into the meta row ------------------------ */
.product-card .zs-stockdot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  color: var(--text-muted, #756b5f);
  white-space: nowrap;
}
.product-card .zs-stockdot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-success, #16a34a);
}
.product-card .zs-stockdot.is-out { color: var(--accent-danger, #dc2626); }
.product-card .zs-stockdot.is-out::before { background: var(--accent-danger, #dc2626); }

/* The meta row holds rating and availability side by side on one line. */
.product-card .zs-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 14px;
}
.product-card .zs-meta .premium-rating { margin: 0 !important; }

/* --- Grids ---------------------------------------------------------------
   Two columns on a phone with tight gutters; the card is the unit of rhythm.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* The page was spending 72px of a 375px screen on nested gutters -- 24px of
     <main> padding plus 12px of section padding on each side -- which left the
     cards 155px wide. At 168px the price, the old price and the discount fit
     one line instead of two, so the wider card is also the shorter one. */
  main { padding-inline: 14px !important; }
  main > section,
  .product-section,
  .products-section,
  .catalog-section { padding-inline: 0 !important; }

  .product-grid,
  .visual-product-grid,
  .search-results-grid,
  .wishlist-grid,
  /* The kitchens page names its grid differently and so was still one card per
     row -- every card full width, which is why the every-third-card feature had
     nothing to stand out from. */
  .kitchen-products-grid,
  .mini-product-grid,
  .solar-commerce-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .product-card .product-body { padding: 8px 9px 9px !important; }
  .horizontal-cards .product-card { flex: 0 0 63vw !important; max-width: 250px; }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .product-grid,
  .visual-product-grid,
  .search-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
}

@media (min-width: 1100px) {
  .product-grid,
  .visual-product-grid,
  .search-results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; }
  .product-card .product-body h3 { font-size: .95rem !important; }
  .product-card .price strong { font-size: 1.1rem !important; }
}

/* --------------------------------------------------------------------------
   2. PRODUCT PAGE GALLERY
   --------------------------------------------------------------------------
   Before: four circular buttons (favourite, compare, share, zoom) and a
   discount pill floated on top of the photograph, and three of the four were
   duplicates of the utility row printed directly under the price. The one
   picture the customer came to look at was carrying five pieces of chrome.

   Now the frame is empty. Favourite / compare / share live only in
   .product-utility-row, the discount sits beside the price, and zoom is a
   labelled button under the image. The stage itself is a square -- the same
   ratio as the card, so the picture the customer tapped is the picture they
   land on -- with the photograph shown whole over a blurred copy of itself.
   -------------------------------------------------------------------------- */

#product-gallery-main,
.product-gallery-main {
  position: relative;
  min-height: 0 !important;
  /* Set from the photograph by product-engine.js: a square shot gets a square
     frame, a wide one a wide frame. 1 until the image reports its size.

     !important is load-bearing. responsive-pro.css carries

         .product-gallery-main,
         .product-gallery-stage { aspect-ratio: 1 / 1 !important; }

     inside a mobile media query. This stylesheet loads last, but load order
     only breaks ties at equal weight -- an !important declaration outranks a
     normal one from any later sheet. So the frame stayed square on every
     phone, the photograph painted taller than the box that held it, and
     overflow:hidden cut off the difference. Measured live: a 928x1152 photo
     lost a fifth of its height; a 800x1400 supplier banner would lose 43%. */
  aspect-ratio: var(--zs-stage-ratio, 1) / 1 !important;
  overflow: hidden;
  border-radius: 16px;
  background: var(--accent-gold-soft, #fbf5ea);
}

/* --------------------------------------------------------------------------
   "قد يعجبك أيضاً" / "منتجات مشابهة" -- the mini cards under a product.

   mobile-first.css locks every one of these to `aspect-ratio: 1/1 !important`,
   so a portrait banner sat letterboxed in a square with a band of background
   down each side and read as cropped. These cards are a horizontal rail, not a
   grid: nothing depends on them all being the same height, so each can take
   the shape of its own picture the way the catalogue cards already do.

   --zs-media-ratio is set per card by assets/js/core/storefront-2026.js once
   the image reports its size. Until then 1/1, which is what they were.
   -------------------------------------------------------------------------- */
.product-mini-card-media,
.product-mini-card > a:first-child {
  aspect-ratio: var(--zs-media-ratio, 1 / 1) !important;
  height: auto !important;
}

/* Room for the taller ones: the rail sized itself to a square and clipped
   anything that grew past it. */
.product-mini-card,
.product-mini-cards,
.product-mini-card-rail {
  height: auto !important;
  align-items: flex-start;
}

/* The photograph is contained, never cut. The 8px pad mobile-first.css adds
   is dropped here -- with the frame already the picture's own shape there is
   nothing for the pad to protect, and it only shrinks the image. */
.product-mini-card-media img {
  padding: 0 !important;
  object-fit: contain !important;
}

/* The photograph already fills the frame, so there is no leftover space to
   fill: no blurred backdrop behind it, no pad holding it off the edge. Without
   this a square product photo sat over a 50%-opacity blurred copy of itself and
   read as washed out -- which is exactly how it looked on the live site. */
#product-gallery-stage.zs-exact::before,
.product-gallery-stage.zs-exact::before { display: none !important; }
#product-gallery-stage.zs-exact img,
.product-gallery-stage.zs-exact img { padding: 0 !important; }
#product-gallery-main:has(.zs-exact),
.product-gallery-main:has(.zs-exact) { background: transparent !important; }

#product-gallery-stage,
.product-gallery-stage {
  /* mobile-first.css gives this `margin-inline: -14px` and
     `width: calc(100% + 28px)` to bleed the photograph past the page gutter.
     The width was overridden here but the margin was not, so the frame sat
     14px off-centre inside a parent with overflow:hidden -- clipped on one
     edge, gapped on the other. That is the image "leaning to the right".
     The gallery is a rounded card now; it does not bleed. */
  margin: 0 !important;
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#product-gallery-stage::before,
.product-gallery-stage::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.05) brightness(1.05);
  opacity: .5;
  pointer-events: none;
}

#product-gallery-stage img,
#product-gallery-stage video,
.product-gallery-stage img,
.product-gallery-stage video {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 10px !important;
  box-sizing: border-box;
}

/* Any overlay left behind by an older build stays off the photograph. */
.product-gallery-main .product-gallery-side-actions,
.product-gallery-main .product-gallery-badges,
.product-gallery-main .product-float-btn { display: none !important; }

/* product-page.css gives the thumb strip `display: grid`, which outranks the
   HTML hidden attribute; without this a single-image product still drew an
   empty strip with two dead arrows. */
.product-gallery-thumbs-wrap[hidden] { display: none !important; }

/* --- The photograph, at full strength ------------------------------------
   production-polish.css puts `mix-blend-mode: multiply` on the gallery image in
   light mode -- and only light mode, which is why the page looked fine in dark
   and murky in light. Multiply paints the photograph THROUGH the beige surface
   behind it: white turns beige, every colour loses value, and the whole picture
   reads as dull. It was presumably meant to melt a white product cut-out into
   the page, but the shop's photographs are full-bleed room shots, so all it did
   was dim them.

   The image fills its frame exactly now, so there is nothing to blend into.

   The filter that replaces it is deliberately small: enough that the photograph
   looks lit rather than flat, not so much that the furniture arrives a
   different colour than it leaves the warehouse. A shop that flatters its
   photographs sells returns.
   ------------------------------------------------------------------------ */
#product-gallery-stage img,
.product-gallery-stage img,
.product-card .media img,
.product-card .product-photo-link img,
.product-thumb img {
  mix-blend-mode: normal !important;
  filter: saturate(1.05) contrast(1.03) brightness(1.02);
}

/* The frame behind it stays out of the way: a plain white ground reflects the
   photograph's own light instead of tinting it. */
#product-gallery-main,
.product-gallery-main { background: #fff; }
#product-gallery-stage,
.product-gallery-stage { background: #fff !important; }

[data-theme="dark"] #product-gallery-main,
[data-theme="dark"] .product-gallery-main,
body.dark-mode #product-gallery-main,
body.dark-mode .product-gallery-main { background: #0e1a14; }
[data-theme="dark"] #product-gallery-stage,
[data-theme="dark"] .product-gallery-stage,
body.dark-mode #product-gallery-stage,
body.dark-mode .product-gallery-stage { background: #0e1a14 !important; }

/* Zoom: under the image, named, and quiet. */
.product-gallery-bottom-action {
  position: static !important;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.product-gallery-zoom {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border-color, #e3d5c3);
  border-radius: 999px;
  background: var(--bg-surface-2, #f4eadc);
  color: var(--text-secondary, #3e342b);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.product-gallery-zoom svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.product-gallery-zoom:hover {
  background: var(--accent-gold-soft, #fbf5ea);
  border-color: var(--accent-gold, #c79a52);
  color: var(--accent-gold-hover, #b58842);
}

/* Favourite / compare / share are one row of three, not three full-width bars
   pushing the specifications half a screen further down. */
.product-utility-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.product-utility-row .product-utility-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  font-size: .8rem;
  white-space: nowrap;
}
.product-utility-row .product-utility-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* --- Size chips ----------------------------------------------------------
   The chip used to print its label and price as one run of text. currency.js
   rewrites the whole text of any leaf element that mentions a currency, so on
   the first conversion "حجم نفر واحد — 1,300 ر.س" became "١٨٢٬٠٠٠ ر.ي" and the
   customer was choosing between two prices with no names. Label and price are
   now separate elements: the price converts, the name stays.
   ------------------------------------------------------------------------ */
.product-size-chip {
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 7px 14px !important;
  border: 1px solid var(--border-color, #e3d5c3);
  border-radius: 12px;
  background: var(--bg-card, #fff);
  cursor: pointer;
  text-align: start;
}
.product-size-chip .size-chip-label {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-primary, #1c1813);
  line-height: 1.2;
}
.product-size-chip .size-chip-price {
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-muted, #756b5f);
  line-height: 1.2;
}
.product-size-chip.is-active {
  border-color: var(--accent-gold, #c79a52);
  background: var(--accent-gold-soft, #fbf5ea);
  box-shadow: 0 0 0 1px var(--accent-gold, #c79a52) inset;
}
.product-size-chip.is-active .size-chip-price { color: var(--accent-gold-hover, #b58842); }

[data-theme="dark"] .product-size-chip {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .product-size-chip .size-chip-label { color: #f1f5f9; }

/* The discount now reads as part of the price, not as a sticker on a photo. */
.product-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.product-price-row .product-discount-badge {
  background: rgba(220, 38, 38, .1);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, .24);
  min-height: 24px;
  padding: 2px 9px;
  font-size: .74rem;
}

/* Below 1280px the layout stacks, and product-page.css gives the gallery
   order:1 and the summary order:2 -- but leaves the spec sheet at the default
   order:0, so on every phone and tablet the page opened on a table of
   dimensions and the photograph was 400px further down. The photograph leads. */
@media (max-width: 1279px) {
  .product-top-layout .product-specs-card { order: 3; }
}

@media (max-width: 767px) {
  .product-gallery-card { padding: 8px !important; }
}

[data-theme="dark"] .product-gallery-main { background: rgba(255,255,255,.04); }
[data-theme="dark"] .product-gallery-zoom {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #e2e8f0;
}

/* --------------------------------------------------------------------------
   0. SITE-WIDE FIXES
   -------------------------------------------------------------------------- */

/* --- Mobile header ---------------------------------------------------------
   One row, everything on it: mark, menu, the search field, the search button,
   theme, currency, cart, more. This is the layout the shop already had and
   wanted back; what was wrong with it was never the arrangement, it was that
   the row had flex-wrap on, so at 375px it broke into three fragments -- brand
   marooned on one side, buttons on the other, search stretched underneath.

   nowrap plus a search field that is allowed to shrink (flex: 1 1 0 with
   min-width: 0) keeps all nine controls on one line at 320px and up. Nothing is
   moved into a menu, and nothing is hidden.
   ------------------------------------------------------------------------ */
.zfb-mobile-header {
  padding: 8px 10px !important;
  background: var(--bg-card, #fff) !important;
  border-bottom: 1px solid var(--border-subtle, #ede3d4) !important;
  box-shadow: 0 2px 14px rgba(55, 43, 31, .05) !important;
}

.zfb-mobile-main-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0;
  height: 44px;
  padding: 0 !important;
}

.zfb-mobile-brand-group {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto !important;
  min-width: 0;
}
/* The mark leads the row, the menu sits beside it. */
.zfb-mobile-brand-group .zfb-mobile-menu-btn { order: 1; }

.zfb-mobile-brand {
  /* responsive-pro.css pins this to a 36px grid cell; the mark is that size
     anyway, so it only needs to stop constraining the link itself. */
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
  text-decoration: none;
}

.zfb-mobile-brand-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--accent-gold, #c79a52), #a97d38);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
}

/* The name does not fit on one line with nine controls, and the mark already
   carries the brand. Kept out of the row, not out of the site. */
.zfb-mobile-brand-text { display: none !important; }

.zfb-mobile-actions {
  display: flex !important;
  align-items: center;
  gap: 5px !important;
  flex: 0 0 auto !important;
}

/* --- The search field, inline between the brand and the buttons ---------- */
.zfb-mobile-search {
  display: flex !important;
  flex-direction: row-reverse;
  align-items: center !important;
  gap: 6px;
  /* Shrinks to whatever is left after the buttons -- which is what keeps the
     row on one line instead of wrapping. */
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 4px 0 12px !important;
  border-radius: 999px !important;
  background: var(--bg-surface-2, #f4eadc) !important;
  border: 1px solid var(--border-subtle, #ede3d4) !important;
  box-shadow: none !important;
}

.zfb-mobile-search-field {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
}

.zfb-mobile-search input {
  width: 100% !important;
  height: 36px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: .8rem !important;
  font-family: inherit;
  color: var(--text-primary, #1c1813) !important;
  text-overflow: ellipsis;
}
.zfb-mobile-search input::placeholder {
  color: var(--text-subtle, #9c9081);
  font-size: .78rem;
}
.zfb-mobile-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* The submit button is a filled circle at the end of the field. */
.zfb-mobile-search-icon {
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--button-primary, #23382e) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
}
.zfb-mobile-search-icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.zfb-mobile-search:focus-within {
  border-color: var(--accent-gold, #c79a52) !important;
  background: var(--bg-card, #fff) !important;
}

/* --- The action buttons -------------------------------------------------- */
.zfb-mobile-header .zfb-mobile-icon-btn {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 11px !important;
  border: 1px solid transparent !important;
  background: var(--bg-surface-2, #f4eadc) !important;
  color: var(--text-secondary, #3e342b) !important;
  position: relative;
}
.zfb-mobile-header .zfb-mobile-icon-btn svg {
  width: 17px !important;
  height: 17px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zfb-mobile-header .zfb-mobile-icon-btn:active { transform: scale(.94); }

/* The three-dot button is the least important thing on the row; it does not
   need a filled chip of its own. */
.zfb-mobile-header .zfb-mobile-more-btn {
  width: 24px !important;
  background: none !important;
  border-color: transparent !important;
}
.zfb-mobile-header .zfb-mobile-more-btn svg { width: 16px !important; height: 16px !important; fill: currentColor; stroke: none; }

/* Currency is a word, not a glyph, so it gets width instead of a square. */
.zfb-mobile-header .zfb-mobile-curr-btn {
  width: auto !important;
  min-width: 34px !important;
  padding: 0 7px !important;
  font-size: .72rem;
  font-weight: 800;
}

/* The cart is the one control worth singling out. */
.zfb-mobile-header .zfb-mobile-cart-btn {
  background: var(--accent-gold, #c79a52) !important;
  color: #fff !important;
}
.zfb-mobile-cart-count {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg-card, #fff);
}
.zfb-mobile-cart-count[hidden] { display: none; }

/* At 320px the row is at its tightest: trim the gaps rather than drop a
   control. */
@media (max-width: 359px) {
  .zfb-mobile-main-row { gap: 4px !important; }
  .zfb-mobile-actions { gap: 3px !important; }
  .zfb-mobile-header .zfb-mobile-icon-btn { width: 31px !important; height: 31px !important; }
  .zfb-mobile-search { padding-inline-start: 8px !important; }
}

/* --- Dark ---------------------------------------------------------------- */
[data-theme="dark"] .zfb-mobile-header,
body.dark-mode .zfb-mobile-header {
  background: #141d18 !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .zfb-mobile-header .zfb-mobile-icon-btn,
body.dark-mode .zfb-mobile-header .zfb-mobile-icon-btn {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .zfb-mobile-header .zfb-mobile-more-btn,
body.dark-mode .zfb-mobile-header .zfb-mobile-more-btn {
  background: none !important;
  border-color: transparent !important;
}
[data-theme="dark"] .zfb-mobile-header .zfb-mobile-cart-btn,
body.dark-mode .zfb-mobile-header .zfb-mobile-cart-btn {
  background: var(--accent-gold, #c79a52) !important;
  color: #1a1510 !important;
}
[data-theme="dark"] .zfb-mobile-cart-count,
body.dark-mode .zfb-mobile-cart-count { box-shadow: 0 0 0 2px #141d18; }
[data-theme="dark"] .zfb-mobile-search,
body.dark-mode .zfb-mobile-search {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}
[data-theme="dark"] .zfb-mobile-search input,
body.dark-mode .zfb-mobile-search input { color: #f1f5f9 !important; }
[data-theme="dark"] .zfb-mobile-search-icon,
body.dark-mode .zfb-mobile-search-icon {
  background: var(--accent-gold, #c79a52) !important;
  color: #1a1510 !important;
}
[data-theme="dark"] .zfb-mobile-search:focus-within,
body.dark-mode .zfb-mobile-search:focus-within {
  background: rgba(255,255,255,.1) !important;
  border-color: var(--accent-gold, #c79a52) !important;
}

/* --------------------------------------------------------------------------
   CATEGORY TILES ON APPLIANCES / KITCHENS / SOLAR
   --------------------------------------------------------------------------
   These pages drew every category as the same small line glyph in a circle --
   nine categories, nine identical drawings. The category's own picture now
   fills the tile (category-strip-service adds .zs-cat-photo when the operator
   has uploaded one), and the tile is big enough to read as a product rather
   than as a bullet point.
   -------------------------------------------------------------------------- */
.zs-cat-photo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  border-radius: 14px !important;
  overflow: hidden;
  padding: 0 !important;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(255,255,255,.92), rgba(255,255,255,0) 70%),
    var(--accent-gold-soft, #fbf5ea) !important;
  border: 1px solid var(--border-subtle, #ede3d4);
}
.zs-cat-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px;
  box-sizing: border-box;
  display: block;
}
[data-theme="dark"] .zs-cat-photo,
body.dark-mode .zs-cat-photo {
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(255,255,255,.1), rgba(255,255,255,0) 70%),
    rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1);
}

@media (max-width: 767px) {
  /* Three across: enough for the picture to be a picture, few enough that a
     department with nine categories still fits three rows. */
  .appliances-categories,
  .category-icons-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  .appliances-category-card,
  .category-icon-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
  }
  .appliances-category-card span,
  .category-icon-card span {
    font-size: .74rem !important;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary, #1c1813);
  }
  [data-theme="dark"] .appliances-category-card span,
  [data-theme="dark"] .category-icon-card span,
  body.dark-mode .appliances-category-card span,
  body.dark-mode .category-icon-card span { color: #f1f5f9; }

  /* The glyph fallback, for a category with no picture yet: same box, so the
     row stays even whether or not every category has been given an image. */
  .appliances-category-card .icon-circle:not(.zs-cat-photo),
  .category-icon-card .icon-circle:not(.zs-cat-photo) {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 14px !important;
    background: var(--bg-surface-2, #f4eadc) !important;
    color: var(--accent-gold, #c79a52);
  }
  .appliances-category-card .icon-circle:not(.zs-cat-photo) svg,
  .category-icon-card .icon-circle:not(.zs-cat-photo) svg {
    /* The glyph is the whole point of the tile until a photograph replaces
       it; at 30% it read as a speck in an empty box. */
    width: 46% !important;
    height: 46% !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* --- Drawer: departments, not a sitemap ----------------------------------
   The panel used to list seven departments each expanded into six sub-links --
   forty links, all pointing at ?cat=<english-slug> which this site does not
   filter on, so none of them worked. It is a short list of real departments now.
   ------------------------------------------------------------------------ */
.mobile-drawer-accordion-group[data-zs-drawer-departments] {
  display: grid;
  gap: 6px;
}
.drawer-dept {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, #ede3d4);
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1c1813);
  text-decoration: none;
  min-height: 52px;
}
.drawer-dept img,
.drawer-dept i {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-surface-2, #f4eadc);
  display: block;
}
.drawer-dept span { display: flex; flex-direction: column; min-width: 0; }
.drawer-dept strong {
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-dept small { font-size: .68rem; color: var(--text-muted, #756b5f); }

[data-theme="dark"] .drawer-dept,
body.dark-mode .drawer-dept {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #f1f5f9;
}

/* --------------------------------------------------------------------------
   OFFERS PAGE — mobile
   --------------------------------------------------------------------------
   Measured at 375px: the document was 9,420px tall and carried ten products.
   The hero alone was 679px (83% of a screen), and each offers row laid its five
   cards out one per row at roughly 500px each. A customer scrolled nine screens
   to see ten things they could buy.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* The offer rows are product grids like any other: two columns, and the card
     system already knows what a card should look like. */
  .todays-offers-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .offers-page-hero,
  .section-hero-split.offers-page-hero {
    min-height: 0 !important;
    padding: 18px 14px !important;
  }
  .offers-page-hero h1 { font-size: 1.55rem !important; line-height: 1.22 !important; }
  .offers-hero-subline { font-size: .84rem !important; }
  .offers-hero-discount { font-size: 2.2rem !important; }

  /* The countdown was four large tiles stacked; it is a detail, not a feature. */
  .offers-countdown-panel {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  .offers-countdown-panel > * {
    min-height: 0 !important;
    padding: 6px 4px !important;
    font-size: .72rem !important;
  }

  .offers-section { padding-block: 18px !important; }
  .offers-section-head h2 { font-size: 1.15rem !important; }
}

/* --------------------------------------------------------------------------
   KITCHENS PAGE — mobile
   --------------------------------------------------------------------------
   The hero is a two-column grid with a 360px fixed first column, which on a
   375px phone leaves the photograph 15px. The copy block then stacked into a
   tall dark panel with a 2.2rem headline, two full-width buttons and four
   feature lines -- most of a screen before any kitchen was visible.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .kitchens-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border-radius: 16px;
    margin-inline: 10px;
    overflow: hidden;
  }
  /* The photograph goes behind the copy rather than beside it, so the section
     is one image with text on it instead of a dark panel and a 15px sliver. */
  .kitchens-hero-visual {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
  }
  .kitchens-hero-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .kitchens-hero::before {
    background: linear-gradient(to top,
      rgba(8,12,16,.92) 0%, rgba(8,12,16,.7) 42%, rgba(8,12,16,.35) 100%) !important;
  }
  .kitchens-hero-copy {
    padding: 22px 16px 18px !important;
    min-height: 240px;
    justify-content: flex-end !important;
  }
  .kitchens-hero-copy h1 { font-size: 1.6rem !important; margin-bottom: 6px !important; }
  .kitchens-hero-copy p { font-size: .84rem !important; line-height: 1.6 !important; margin-bottom: 12px !important; }

  /* Two actions side by side: the primary one leads, the estimator follows. */
  .kitchens-hero-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    width: 100%;
  }
  .kitchens-hero-actions > a {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
    font-size: .82rem !important;
    white-space: nowrap;
    border-radius: 12px;
  }

  /* Four promises in a 2x2 grid instead of four stacked lines. */
  .kitchens-hero-features {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
    margin-top: 12px !important;
  }
  .kitchens-hero-features span {
    font-size: .68rem !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(250,245,236,.9);
  }

  /* Categories: three across reads as a set of choices rather than a list. */
  .kitchen-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* --- Rhythm on a department catalogue -------------------------------------
   A department page is a long scroll -- fifty to a hundred cards. Eight cards
   in the usual two columns, then a band of four wide ones showing their
   photograph large, then eight more. The eye gets a landmark without losing the
   density that makes a catalogue scannable.

   Scoped to [data-zs-catalog-grid], which catalog-render-service sets only on a
   department page's own grid. The home page keeps the plain grid it had.
   Phones only: at three or four columns the row is already varied enough.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 9),
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 10),
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 11),
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 12) {
    grid-column: 1 / -1;
    /* Wide and shallow: the photograph gets the whole width of the screen
       without the card becoming a full page in its own right. */
    --zs-media-ratio: 2 / 1;
  }
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 9) .product-body h3,
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 10) .product-body h3,
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 11) .product-body h3,
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 12) .product-body h3 {
    font-size: .95rem !important;
    -webkit-line-clamp: 1;
    min-height: 0 !important;
  }
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 9) .price strong,
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 10) .price strong,
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 11) .price strong,
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 12) .price strong {
    font-size: 1.15rem !important;
  }
  /* The full width fits price, old price and discount on one line, so the
     deliberate break the narrow card needs is undone here. */
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 9) .price:has(del) strong,
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 10) .price:has(del) strong,
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 11) .price:has(del) strong,
  [data-zs-catalog-grid] > .product-card:nth-child(12n + 12) .price:has(del) strong {
    flex: 0 0 auto;
  }
}


/* --------------------------------------------------------------------------
   SOLAR — the estimator in the hero
   --------------------------------------------------------------------------
   Measured live at 375px: the hero was 1,119px, 138% of the screen, and 449px
   of that was three "steps" in a one-column grid. The two arrows between them
   were 297px tall EACH -- a decorative "←" stretched to fill its grid row.

   Three steps read as three steps when they sit in a row. The arrows are the
   first thing to go: on a row of three, left-to-right already says "then".
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .calc-step-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch;
  }
  .calc-step-arrow { display: none !important; }
  .calc-step {
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 6px !important;
    font-size: .68rem !important;
    line-height: 1.35;
    text-align: center;
    border-radius: 12px;
  }
  .calc-step svg,
  .calc-step i { width: 18px !important; height: 18px !important; margin-bottom: 4px; }

  .solar-calculator { padding: 14px !important; }
  .solar-calculator h2 { font-size: 1.05rem !important; }
  .solar-calculator > p { font-size: .78rem !important; margin-bottom: 10px !important; }
  .calc-note-bottom { font-size: .68rem !important; line-height: 1.45; }
  .btn-calc-start { height: 42px !important; font-size: .86rem !important; }

  /* The photograph sits behind the whole hero; the panel should not add a
     second full-height dark block on top of it. */
  .hero-side-panel { margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   SOLAR — the rest of the page
   --------------------------------------------------------------------------
   Measured live at 375px: 13,944px, seventeen screens. The product grids were
   already two columns; everything else on the page was one, so a customer
   scrolled a full screen per item:

     .bundle-grid              6 packages, 1 column, 389px each  = 2,392px
     .products-area            4 cards,    1 column, 353px each  = 1,484px
     .solar-promo-row          2 panels,   1 column              =   565px
     .offers-grid-with-sidebar content + sidebar stacked         = 1,866px

   None of them is a hero or a feature; they are lists. Two columns each.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .bundle-grid,
  .products-area,
  .solar-promo-row,
  .solar-features-grid,
  .solar-steps-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* The sidebar is supporting material next to the offers, not a second page. */
  .offers-grid-with-sidebar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .offers-grid-with-sidebar > :last-child { order: 2; }

  /* Package cards carry a lot of copy; at half width it has to be tighter or
     the card grows back to the height the single column had. */
  .bundle-grid > * {
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 14px;
  }
  .bundle-grid h3,
  .bundle-grid h4 { font-size: .9rem !important; line-height: 1.3 !important; }
  .bundle-grid li,
  .bundle-grid p { font-size: .72rem !important; line-height: 1.5 !important; }
  .bundle-grid .btn,
  .bundle-grid a[class*="btn"] {
    width: 100% !important;
    height: 38px;
    font-size: .78rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .solar-promo-row > * { min-height: 0 !important; padding: 12px !important; }
  .solar-promo-row h2,
  .solar-promo-row h3 { font-size: .95rem !important; }
  .solar-promo-row p { font-size: .74rem !important; }

  /* Section headings on this page were sized for a desktop column. */
  .section-block > h2,
  .section-block .section-head h2 { font-size: 1.15rem !important; }
  .section-block { padding-block: 18px !important; }
}

/* --------------------------------------------------------------------------
   APPLIANCES — the hero's two actions
   --------------------------------------------------------------------------
   127px for two buttons, because they stacked. They are a pair of choices, so
   they belong on one line.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .appliances-hero-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100%;
  }
  .appliances-hero-actions > a,
  .appliances-hero-actions > button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: .82rem !important;
    white-space: nowrap;
    border-radius: 12px;
  }
}

/* --- Cart trust row -------------------------------------------------------
   Measured at 375px: four items, each 283x200, stacking to an 868px column --
   more than a whole phone screen spent on four reassurance lines. They are
   reassurance, not content: a compact two-by-two grid says the same thing.
   ------------------------------------------------------------------------ */
.cart-trust-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
}
.cart-trust-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px !important;
  text-align: start !important;
  border-radius: 12px;
}
.cart-trust-item svg {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}
.cart-trust-item span {
  font-size: .74rem !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .cart-trust-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* --- Section overlines ----------------------------------------------------
   The small label above a section heading is a caption, not a second heading.
   ------------------------------------------------------------------------ */
.overline {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--accent-gold, #c79a52) !important;
  margin: 0 0 2px !important;
  opacity: .95;
}

/* --- Product colour swatches ---------------------------------------------
   The swatch row was heavier than the product it described. Smaller circles, a
   thin ring for the selected one instead of a thick halo.
   ------------------------------------------------------------------------ */
#product-colors { gap: 8px !important; }
.product-color-swatch {
  width: 26px !important;
  height: 26px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(28, 24, 19, .16) !important;
  box-shadow: none !important;
  position: relative;
}
.product-color-swatch::after {
  content: none !important;
}
.product-color-swatch.is-active,
.product-color-swatch.active {
  box-shadow: 0 0 0 2px var(--bg-card, #fff), 0 0 0 3px var(--accent-gold, #c79a52) !important;
  transform: none !important;
}
[data-theme="dark"] .product-color-swatch,
body.dark-mode .product-color-swatch { border-color: rgba(255,255,255,.22) !important; }
[data-theme="dark"] .product-color-swatch.is-active,
[data-theme="dark"] .product-color-swatch.active,
body.dark-mode .product-color-swatch.is-active,
body.dark-mode .product-color-swatch.active {
  box-shadow: 0 0 0 2px #142019, 0 0 0 3px var(--accent-gold, #c79a52) !important;
}

/* --- Majalis project stats ------------------------------------------------
   561px tall for four numbers, one per row. They are a footnote to the gallery.
   ------------------------------------------------------------------------ */
.majalis-project-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.majalis-project-stats > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 8px !important;
  border-radius: 12px;
  text-align: center;
}
.majalis-project-stats strong {
  font-size: 1.15rem !important;
  line-height: 1.2 !important;
}
.majalis-project-stats span {
  font-size: .68rem !important;
  line-height: 1.3 !important;
  color: var(--text-muted, #756b5f);
}
@media (min-width: 768px) {
  .majalis-project-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* --------------------------------------------------------------------------
   2a. DEPARTMENT ICONS (category.html)
   --------------------------------------------------------------------------
   All six departments drew the same gold glyph on the same translucent plate,
   so the grid read as six copies of one tile and the icon did no work at all --
   you had to read the label to tell the kitchen from the solar department.

   Two changes, both small:

   1. Each department gets its own accent, keyed off its HREF rather than its
      position in the grid, so reordering the cards in the admin or the markup
      cannot shuffle the colours. The palette is the brand's own -- gold, olive,
      copper, walnut -- not six arbitrary hues.

   2. Every colour is declared for BOTH themes as an opaque value rather than an
      alpha wash over an unknown backdrop, which is what makes a plate look
      muddy in one theme and washed out in the other.

   Measured after: contrast of the glyph against its plate is >= 4.6:1 in both
   themes for all six.
   -------------------------------------------------------------------------- */

.main-cat-card {
  --zs-dept-ink: #8a6520;
  --zs-dept-plate: #fbf1de;
  --zs-dept-ring: rgba(199, 154, 82, .34);
}
.main-cat-card[href^="bedrooms"]   { --zs-dept-ink: #3f5d46; --zs-dept-plate: #e9f1ea; --zs-dept-ring: rgba(63, 93, 70, .3); }
.main-cat-card[href^="kitchens"]   { --zs-dept-ink: #9a5a2c; --zs-dept-plate: #fbeade; --zs-dept-ring: rgba(154, 90, 44, .3); }
.main-cat-card[href^="appliances"] { --zs-dept-ink: #3c5a6b; --zs-dept-plate: #e7f0f5; --zs-dept-ring: rgba(60, 90, 107, .3); }
.main-cat-card[href^="furniture"]  { --zs-dept-ink: #7a4b33; --zs-dept-plate: #f6e8de; --zs-dept-ring: rgba(122, 75, 51, .3); }
.main-cat-card[href^="solar"]      { --zs-dept-ink: #8a6a12; --zs-dept-plate: #fbf3d9; --zs-dept-ring: rgba(138, 106, 18, .32); }

[data-theme="dark"] .main-cat-card,
body.dark-mode .main-cat-card {
  --zs-dept-ink: #e6c37c;
  --zs-dept-plate: #23301f;
  --zs-dept-ring: rgba(230, 195, 124, .3);
}
[data-theme="dark"] .main-cat-card[href^="bedrooms"],
body.dark-mode .main-cat-card[href^="bedrooms"]   { --zs-dept-ink: #9fd0ab; --zs-dept-plate: #17281d; --zs-dept-ring: rgba(159, 208, 171, .26); }
[data-theme="dark"] .main-cat-card[href^="kitchens"],
body.dark-mode .main-cat-card[href^="kitchens"]   { --zs-dept-ink: #efac7c; --zs-dept-plate: #2a1e16; --zs-dept-ring: rgba(239, 172, 124, .26); }
[data-theme="dark"] .main-cat-card[href^="appliances"],
body.dark-mode .main-cat-card[href^="appliances"] { --zs-dept-ink: #96c2da; --zs-dept-plate: #15242c; --zs-dept-ring: rgba(150, 194, 218, .26); }
[data-theme="dark"] .main-cat-card[href^="furniture"],
body.dark-mode .main-cat-card[href^="furniture"]  { --zs-dept-ink: #dfa985; --zs-dept-plate: #26190f; --zs-dept-ring: rgba(223, 169, 133, .26); }
[data-theme="dark"] .main-cat-card[href^="solar"],
body.dark-mode .main-cat-card[href^="solar"]      { --zs-dept-ink: #ecd07a; --zs-dept-plate: #29240f; --zs-dept-ring: rgba(236, 208, 122, .28); }

/* --- A real photograph, when there is one --------------------------------
   department-tile-service.js swaps the glyph for the department's own image
   (admin-uploaded, or a photo of a product actually in that department). The
   plate becomes the frame: bigger, squarer, and the picture fills it.
   ------------------------------------------------------------------------ */
.main-cat-card .cat-icon.cat-icon--photo {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  border-radius: 14px !important;
  overflow: hidden;
  padding: 0 !important;
  background: var(--zs-dept-plate) !important;
  border: 1px solid var(--zs-dept-ring) !important;
  box-shadow: none !important;
}
.main-cat-card .cat-icon.cat-icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* With a picture the card leads with it, so the text block sits under it and
   the whole tile aligns to the start rather than centring around a glyph. */
.main-cat-card:has(.cat-icon--photo) {
  align-items: stretch !important;
  text-align: start !important;
  padding: 10px 10px 12px !important;
}
.main-cat-card:has(.cat-icon--photo) h2 { margin-top: 10px !important; }
.main-cat-card:has(.cat-icon--photo) .cat-link-text { align-self: flex-start; }

.main-cat-card .cat-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 20px !important;
  background: var(--zs-dept-plate) !important;
  border: 1px solid var(--zs-dept-ring) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 6px 14px -6px var(--zs-dept-ring) !important;
  margin-bottom: 12px !important;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease;
}

.main-cat-card .cat-icon svg {
  width: 30px !important;
  height: 30px !important;
  stroke: var(--zs-dept-ink) !important;
  /* The glyphs are line art; a slightly heavier, rounded stroke reads far
     better at 30px than the hairline they shipped with. */
  stroke-width: 1.7 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none !important;
}

/* The pill picks up the department's own colour instead of gold everywhere. */
.main-cat-card .cat-link-text {
  color: var(--zs-dept-ink) !important;
  background: var(--zs-dept-plate) !important;
  border-color: var(--zs-dept-ring) !important;
}

@media (hover: hover) and (pointer: fine) {
  .main-cat-card:hover .cat-icon {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .5) inset,
      0 12px 22px -8px var(--zs-dept-ring) !important;
  }
}
.main-cat-card:active .cat-icon { transform: scale(.96); }

/* A hairline of the department's colour along the top edge, so the card is
   identifiable before you have read a word of it. */
.main-cat-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--zs-dept-ink);
  opacity: .55;
}

@media (max-width: 767px) {
  .main-categories-grid { gap: 10px !important; }
  .main-cat-card { padding: 16px 11px 14px !important; border-radius: 18px !important; }
  /* :not(--photo) matters: the photo plate is a full-width frame, and clamping
     it back to a 56px square here is what shrank the pictures to thumbnails. */
  .main-cat-card .cat-icon:not(.cat-icon--photo) { width: 56px !important; height: 56px !important; border-radius: 18px !important; }
  .main-cat-card .cat-icon svg { width: 27px !important; height: 27px !important; }
  .main-cat-card h2 { font-size: .95rem !important; }
  .main-cat-card p { font-size: .71rem !important; }
}

/* Motion is a nicety; never at the cost of someone who asked for less of it. */
@media (prefers-reduced-motion: reduce) {
  .main-cat-card .cat-icon { transition: none; }
  .main-cat-card:hover .cat-icon,
  .main-cat-card:active .cat-icon { transform: none; }
}

/* --------------------------------------------------------------------------
   2b. DEPARTMENT HERO
   --------------------------------------------------------------------------
   Measured on bedrooms.html at 375×812: the hero section was 650px tall --
   80% of the screen -- because two 320px cards stacked, and each carried a
   58%→42% dark wash across the whole photograph. A customer arriving on the
   page saw two darkened pictures and no products.

   The cards become a snap-scrolling rail on a phone: one hero at a time with
   the next one peeking, so the section costs one card instead of all of them.
   That also means the count stops mattering -- one hero, two, or five all lay
   out the same way, which is what makes it safe for the heroes to become
   admin-managed banners later.

   The scrim is re-anchored to the bottom, sized to the text rather than the
   image, so the top half of the photograph is actually visible.

   A department opts in by adding .zs-hero-rail to its hero container;
   .bedrooms-hero-grid is listed because it is the one that exists today.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .zs-hero-rail,
  .bedrooms-hero-grid {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none !important;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -14px;
    padding-inline: 14px;
  }
  .zs-hero-rail::-webkit-scrollbar,
  .bedrooms-hero-grid::-webkit-scrollbar { display: none; }

  .zs-hero-rail > *,
  .bedrooms-hero-grid > * {
    scroll-snap-align: center;
    /* A third of the screen, not four fifths. Enough for the photograph to
       carry the department and for the call to action to sit on it. */
    min-height: 0 !important;
    height: 240px !important;
  }

  /* The wash covered the whole picture. Anchor it under the text instead. */
  .bedroom-hero-overlay {
    background: linear-gradient(
      to top,
      rgba(38, 27, 19, .78) 0%,
      rgba(38, 27, 19, .55) 34%,
      rgba(38, 27, 19, .12) 62%,
      rgba(38, 27, 19, 0) 100%
    ) !important;
  }

  .bedroom-hero-body { justify-content: flex-end; }
  .bedroom-hero-copy h1 { font-size: 1.5rem !important; line-height: 1.25 !important; }
  .bedroom-hero-copy p { font-size: .82rem !important; }
  /* Three feature bullets on a 240px card push the headline off it. They are
     repeated verbatim in the trust bar further down the page. */
  .bedroom-hero-features { display: none !important; }
}

/* --------------------------------------------------------------------------
   3. CATEGORY TILES AND THE FILTER RAIL
   --------------------------------------------------------------------------
   Before: two hardcoded strips of five tiles -- "حسب النمط" and "حسب الفئة" --
   listing categories that do not exist in the database, with their images baked
   into CSS classes no operator could change, plus a separate row of plain text
   pills for the filter that actually worked.

   Now: one section, built from the department's real categories. The image, the
   name, the order and which categories exist are all admin decisions. Every
   tile is a real link to ?category=<slug>, so it works with JavaScript off and
   each category is a shareable URL; storefront-2026.js upgrades the same links
   to filter the grid in place.
   -------------------------------------------------------------------------- */

.zs-cat-section {
  margin: 22px 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

.zs-cat-head { margin-bottom: 12px; }
.zs-cat-head h2 {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-primary, #1c1813);
}
.zs-cat-head p {
  margin: 3px 0 0;
  font-size: .82rem;
  color: var(--text-muted, #756b5f);
}

/* A snap-scrolling rail on a phone: tiles stay large enough to read and to hit,
   and the row itself tells the customer there is more by cutting the next tile.
   Nothing about it is a carousel with hidden arrows. */
.zs-cat-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  /* The rail bleeds into the page gutter so the first tile lines up with the
     text above it and the last one runs off the edge rather than stopping short. */
  margin-inline: -14px;
  padding-inline: 14px;
}
.zs-cat-rail::-webkit-scrollbar { display: none; }

.zs-cat-tile {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #ede3d4);
  transition: transform 200ms cubic-bezier(.2,.7,.3,1), border-color 200ms ease, box-shadow 200ms ease;
}

.zs-cat-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--accent-gold-soft, #fbf5ea);
}
.zs-cat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(.2,.7,.3,1);
}

/* A category with no photograph gets a lettered plate from its own name rather
   than stock artwork of something the shop may not sell. */
.zs-cat-initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-gold, #c79a52);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(199,154,82,.16), rgba(199,154,82,0) 70%),
    var(--accent-gold-soft, #fbf5ea);
}

.zs-cat-label {
  display: block;
  padding: 9px 10px 11px;
}
.zs-cat-label strong {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary, #1c1813);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zs-cat-label small {
  display: block;
  margin-top: 2px;
  font-size: .7rem;
  color: var(--text-muted, #756b5f);
}

.zs-cat-tile.is-active {
  border-color: var(--accent-gold, #c79a52);
  box-shadow: 0 0 0 1px var(--accent-gold, #c79a52) inset;
}
.zs-cat-tile.is-active .zs-cat-label strong { color: var(--accent-gold-hover, #b58842); }

@media (hover: hover) and (pointer: fine) {
  .zs-cat-tile:hover {
    transform: translateY(-3px);
    border-color: var(--accent-gold, #c79a52);
    box-shadow: 0 16px 34px rgba(55, 43, 31, .13);
  }
  .zs-cat-tile:hover .zs-cat-media img { transform: scale(1.06); }
}

@media (min-width: 768px) {
  .zs-cat-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: 14px;
  }
  .zs-cat-head h2 { font-size: 1.4rem; }
  .zs-cat-label strong { font-size: .92rem; }
}

/* --- Feature rail: a department with its own personality -----------------
   Majalis is a browse-by-taste department, so its categories are the page's
   headline rather than a filter strip above a grid. Bigger picture, name and
   count over it, and a horizontal snap rail so seven categories cost one card's
   height instead of seven.

   Before: seven cards stacked one per row at 336px each -- 2,350px of scrolling
   for what is navigation.
   ------------------------------------------------------------------------ */
.zs-cat-strip--feature .zs-cat-rail {
  grid-auto-columns: 62%;
  gap: 12px;
}
.zs-cat-strip--feature .zs-cat-tile {
  position: relative;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(55, 43, 31, .1);
}
.zs-cat-strip--feature .zs-cat-media {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
/* The label sits on the picture, so it needs its own ground to stay readable
   over whatever the operator uploaded -- a light rug or a dark wood set. */
.zs-cat-strip--feature .zs-cat-label {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 22px 12px 10px;
  background: linear-gradient(to top, rgba(20, 16, 12, .88) 0%, rgba(20, 16, 12, .55) 52%, rgba(20, 16, 12, 0) 100%);
}
.zs-cat-strip--feature .zs-cat-label strong { color: #fff; font-size: .92rem; }
.zs-cat-strip--feature .zs-cat-label small { color: rgba(255, 255, 255, .82); }
.zs-cat-strip--feature .zs-cat-tile.is-active {
  outline: 2px solid var(--accent-gold, #c79a52);
  outline-offset: 2px;
}
/* A tile with no photograph has a pale plate behind it, and the dark label
   gradient painted over that pale plate read as a white box torn out of the
   dark page. With no image there is nothing to protect the text from, so the
   gradient goes and the label sits on the card's own surface. */
.zs-cat-strip--feature .zs-cat-tile:not(:has(img)) .zs-cat-label {
  position: static;
  background: var(--bg-card, #fff);
  padding: 9px 10px 10px;
  border-top: 1px solid var(--border-subtle, #ede3d4);
}
.zs-cat-strip--feature .zs-cat-tile:not(:has(img)) .zs-cat-label strong {
  color: var(--text-primary, #1c1813);
}
.zs-cat-strip--feature .zs-cat-tile:not(:has(img)) .zs-cat-label small {
  color: var(--text-muted, #756b5f);
}
.zs-cat-strip--feature .zs-cat-tile:not(:has(img)) {
  border: 1px solid var(--border-subtle, #ede3d4);
  background: var(--bg-card, #fff);
}
[data-theme="dark"] .zs-cat-strip--feature .zs-cat-tile:not(:has(img)),
body.dark-mode .zs-cat-strip--feature .zs-cat-tile:not(:has(img)) {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .zs-cat-strip--feature .zs-cat-tile:not(:has(img)) .zs-cat-label,
body.dark-mode .zs-cat-strip--feature .zs-cat-tile:not(:has(img)) .zs-cat-label {
  background: transparent;
  border-top-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .zs-cat-strip--feature .zs-cat-tile:not(:has(img)) .zs-cat-label strong,
body.dark-mode .zs-cat-strip--feature .zs-cat-tile:not(:has(img)) .zs-cat-label strong { color: #f1f5f9; }
[data-theme="dark"] .zs-cat-strip--feature .zs-cat-tile:not(:has(img)) .zs-cat-label small,
body.dark-mode .zs-cat-strip--feature .zs-cat-tile:not(:has(img)) .zs-cat-label small { color: #b9c4b4; }
[data-theme="dark"] .zs-cat-strip--feature .zs-cat-media,
body.dark-mode .zs-cat-strip--feature .zs-cat-media { background: rgba(255,255,255,.04); }

.zs-cat-strip--feature .zs-cat-initial {
  font-size: 2rem;
  color: var(--accent-gold, #c79a52);
}

@media (min-width: 768px) {
  .zs-cat-strip--feature .zs-cat-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* --- Majlis request wizard -----------------------------------------------
   The step circles were 34px and did nothing. They are now real controls, so
   they get a real target size, a visible state for done / current / pending,
   and a keyboard-visible focus ring.
   ------------------------------------------------------------------------ */
.majalis-steps {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  list-style: none;
}
.majalis-steps li {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-muted, #756b5f);
  background: var(--bg-surface-2, #f4eadc);
  border: 1px solid var(--border-subtle, #ede3d4);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.majalis-steps li.active {
  color: var(--button-primary-text, #fff);
  background: var(--button-primary, #23382e);
  border-color: var(--button-primary, #23382e);
}
.majalis-steps li.is-done {
  color: var(--accent-green-dark, #23382e);
  background: var(--accent-green-soft, #eaf1eb);
  border-color: rgba(90, 109, 78, .4);
}

/* responsive-pro.css pins these to 36x36 (and 34 wide once flex-basis wins) in a
   narrow-screen block. They were decoration then; they are controls now, so they
   keep a real target size at every width. */
.majalis-steps li {
  /* responsive-pro.css caps these at `max-width: 34px`, which silently defeats
     any width set here -- the box measured 34x40 with a flex-basis of 40. The
     cap has to be lifted, not just out-specified. */
  max-width: none !important;
  min-width: 40px !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
}

.majalis-step-meta { margin-bottom: 12px; }
.majalis-step-meta [data-zs-wizard-progress] {
  display: block;
  font-size: .74rem;
  color: var(--text-muted, #756b5f);
  margin-bottom: 2px;
}
.majalis-step-meta strong { font-size: 1rem; }

.majalis-option-grid[data-zs-wizard-options] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.majalis-option-grid[data-zs-wizard-options] .majalis-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 56px;
  padding: 10px 12px;
  text-align: start;
  border-radius: 12px;
  border: 1px solid var(--border-color, #e3d5c3);
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1c1813);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.majalis-option-grid[data-zs-wizard-options] .majalis-option strong { font-size: .88rem; }
.majalis-option-grid[data-zs-wizard-options] .zs-wizard-hint {
  font-size: .72rem;
  color: var(--text-muted, #756b5f);
}
.majalis-option-grid[data-zs-wizard-options] .majalis-option.active {
  border-color: var(--accent-gold, #c79a52);
  background: var(--accent-gold-soft, #fbf5ea);
  box-shadow: 0 0 0 1px var(--accent-gold, #c79a52) inset;
}

.zs-wizard-summary[hidden] { display: none; }
.zs-wizard-summary {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-surface-2, #f4eadc);
  border: 1px solid var(--border-subtle, #ede3d4);
}
.zs-wizard-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .84rem;
}
.zs-wizard-row span { color: var(--text-muted, #756b5f); }

.zs-wizard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.zs-wizard-back {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color, #e3d5c3);
  background: var(--bg-card, #fff);
  color: var(--text-secondary, #3e342b);
  font-weight: 600;
  cursor: pointer;
}
.zs-wizard-back[hidden] { display: none; }
.zs-wizard-actions .majalis-calc-button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
}
/* Until a choice is made the primary action has nothing to do, and it says so
   rather than looking live and going nowhere. */
.zs-wizard-actions .majalis-calc-button[aria-disabled="true"] {
  opacity: .55;
  pointer-events: auto;
  cursor: default;
}

/* Dark theme.
   The `:not(.active):not(.is-done)` guard is the point of this block: without
   it the plain-`li` dark rule outranked `.majalis-steps li.active` (equal
   specificity, declared later) and repainted the selected step in the same
   grey as the unselected ones -- measured at 1.52:1, unreadable. States must
   survive the theme. */
[data-theme="dark"] .majalis-steps li:not(.active):not(.is-done),
body.dark-mode .majalis-steps li:not(.active):not(.is-done) {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #cbd5c4;
}
[data-theme="dark"] .majalis-steps li.active,
body.dark-mode .majalis-steps li.active {
  background: #d6a84f;
  border-color: #d6a84f;
  color: #17281d;
}
[data-theme="dark"] .majalis-steps li.is-done,
body.dark-mode .majalis-steps li.is-done {
  background: rgba(159, 208, 171, .18);
  border-color: rgba(159, 208, 171, .45);
  color: #b8e0c2;
}

[data-theme="dark"] .majalis-option-grid[data-zs-wizard-options] .majalis-option:not(.active),
body.dark-mode .majalis-option-grid[data-zs-wizard-options] .majalis-option:not(.active),
[data-theme="dark"] .zs-wizard-summary,
body.dark-mode .zs-wizard-summary,
[data-theme="dark"] .zs-wizard-back,
body.dark-mode .zs-wizard-back {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .majalis-option-grid[data-zs-wizard-options] .majalis-option:not(.active) .zs-wizard-hint,
body.dark-mode .majalis-option-grid[data-zs-wizard-options] .majalis-option:not(.active) .zs-wizard-hint {
  color: #b9c4b4;
}
/* The chosen option keeps the brand's gold ground and takes dark ink on it, so
   "selected" still reads as selected at night. */
[data-theme="dark"] .majalis-option-grid[data-zs-wizard-options] .majalis-option.active,
body.dark-mode .majalis-option-grid[data-zs-wizard-options] .majalis-option.active {
  background: #d6a84f !important;
  border-color: #d6a84f !important;
  color: #17281d !important;
}
[data-theme="dark"] .majalis-option-grid[data-zs-wizard-options] .majalis-option.active .zs-wizard-hint,
body.dark-mode .majalis-option-grid[data-zs-wizard-options] .majalis-option.active .zs-wizard-hint {
  color: #3c3016;
}
[data-theme="dark"] .zs-wizard-row span,
body.dark-mode .zs-wizard-row span { color: #b9c4b4; }

/* --- Estimator result ----------------------------------------------------
   Rendered under the estimator form once the endpoint answers, instead of the
   customer being navigated away to a page of raw JSON.
   ------------------------------------------------------------------------ */
.zs-estimate[hidden] { display: none; }
.zs-estimate {
  margin-top: 14px;
  padding: 16px;
  border-radius: 14px;
  background: var(--accent-gold-soft, #fbf5ea);
  border: 1px solid var(--border-color, #e3d5c3);
  text-align: center;
}
.zs-estimate-head {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted, #756b5f);
}
.zs-estimate-price {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 4px 0 8px;
  color: var(--text-primary, #1c1813);
}
.zs-estimate-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.zs-estimate-meta li {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #ede3d4);
  font-size: .76rem;
  color: var(--text-secondary, #3e342b);
}
.zs-estimate-note {
  margin: 0 0 12px;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--text-muted, #756b5f);
}
.zs-estimate-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--button-primary, #23382e);
  color: var(--button-primary-text, #fff) !important;
  font-weight: 700;
  text-decoration: none;
}

[data-theme="dark"] .zs-estimate,
body.dark-mode .zs-estimate {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .zs-estimate-price,
body.dark-mode .zs-estimate-price { color: #f8f2e8; }
[data-theme="dark"] .zs-estimate-meta li,
body.dark-mode .zs-estimate-meta li {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #e2e8f0;
}

/* --- Projects strip ------------------------------------------------------
   Four cards stacked one per row, every one drawing the same stock photograph
   at a different background-position -- roughly 600px of the page spent
   showing the same picture four times. Until real project photographs are
   uploaded it is at least a compact rail rather than the page's main event.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .majalis-projects-rail,
  .majalis-projects-gallery,
  .majalis-projects-grid {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 66%;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -14px;
    padding-inline: 14px;
  }
  .majalis-projects-rail::-webkit-scrollbar,
  .majalis-projects-gallery::-webkit-scrollbar,
  .majalis-projects-grid::-webkit-scrollbar { display: none; }
  .majalis-projects-rail > *,
  .majalis-projects-gallery > *,
  .majalis-projects-grid > * { scroll-snap-align: center; }
  .majalis-project-shot { aspect-ratio: 4 / 3 !important; height: auto !important; }
}

/* --- Presentation primitives ---------------------------------------------
   Four shapes, chosen per category in the admin (categories.display_style) and
   emitted by category-strip-service.js as data-presentation on the rail. The
   renderer never decides how anything looks; it only names the shape. Adding a
   fifth means one block here and one option in the admin select -- not a
   rewrite. An unknown value never reaches this file: the renderer falls back
   to "card".

     card     photograph above the name          — lifestyle categories
     circle   round crop                         — a dense row of many
     compact  small square, name beside it       — dense and image-led
     pill     name only, no image                — categories with no picture
   ------------------------------------------------------------------------ */

/* circle */
.zs-cat-rail[data-presentation="circle"] { grid-auto-columns: 92px; }
.zs-cat-rail[data-presentation="circle"] .zs-cat-tile {
  background: none;
  border: none;
  align-items: center;
  text-align: center;
}
.zs-cat-rail[data-presentation="circle"] .zs-cat-media {
  width: 78px;
  height: 78px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border-subtle, #ede3d4);
  aspect-ratio: 1 / 1;
}
.zs-cat-rail[data-presentation="circle"] .zs-cat-label { padding: 7px 2px 0; text-align: center; }
.zs-cat-rail[data-presentation="circle"] .zs-cat-label strong { font-size: .78rem; white-space: normal; }
.zs-cat-rail[data-presentation="circle"] .zs-cat-tile.is-active {
  box-shadow: none;
}
.zs-cat-rail[data-presentation="circle"] .zs-cat-tile.is-active .zs-cat-media {
  border-color: var(--accent-gold, #c79a52);
  box-shadow: 0 0 0 2px var(--accent-gold, #c79a52);
}

/* compact — a small square with the name beside it, two per row on a phone */
.zs-cat-rail[data-presentation="compact"] {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-columns: auto;
  overflow: visible;
  margin-inline: 0;
  padding-inline: 0;
}
.zs-cat-rail[data-presentation="compact"] .zs-cat-tile {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border-radius: 12px;
}
.zs-cat-rail[data-presentation="compact"] .zs-cat-media {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  aspect-ratio: 1 / 1;
}
.zs-cat-rail[data-presentation="compact"] .zs-cat-initial { font-size: 1.1rem; }
.zs-cat-rail[data-presentation="compact"] .zs-cat-label { padding: 0; min-width: 0; }
.zs-cat-rail[data-presentation="compact"] .zs-cat-label strong { font-size: .8rem; }
@media (min-width: 768px) {
  .zs-cat-rail[data-presentation="compact"] {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}

/* pill — the name alone, for categories that have no good picture */
.zs-cat-rail[data-presentation="pill"] { grid-auto-columns: max-content; }
.zs-cat-rail[data-presentation="pill"] .zs-cat-tile {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  justify-content: center;
}
.zs-cat-rail[data-presentation="pill"] .zs-cat-label { display: flex; align-items: baseline; gap: 7px; padding: 0; }
.zs-cat-rail[data-presentation="pill"] .zs-cat-label strong { font-size: .86rem; }
.zs-cat-rail[data-presentation="pill"] .zs-cat-label small { margin: 0; }
.zs-cat-rail[data-presentation="pill"] .zs-cat-tile.is-active {
  background: var(--button-primary, #23382e);
  border-color: var(--button-primary, #23382e);
}
.zs-cat-rail[data-presentation="pill"] .zs-cat-tile.is-active .zs-cat-label strong,
.zs-cat-rail[data-presentation="pill"] .zs-cat-tile.is-active .zs-cat-label small {
  color: var(--button-primary-text, #fff);
}
@media (min-width: 768px) {
  .zs-cat-rail[data-presentation="pill"] {
    grid-auto-flow: row;
    grid-template-columns: none;
    display: flex;
    flex-wrap: wrap;
  }
}

/* --- The rail above the results -----------------------------------------
   Once a customer has scrolled into the grid, switching category must not mean
   scrolling back to the tiles. The heading always names what is on screen.
   ------------------------------------------------------------------------ */
.zs-filter-bar {
  margin: 6px 0 14px;
}
.zs-filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.zs-filter-head h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-primary, #1c1813);
}
.zs-filter-head span {
  font-size: .78rem;
  color: var(--text-muted, #756b5f);
  white-space: nowrap;
}

.zs-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-inline: -14px;
  padding: 2px 14px 4px;
}
.zs-chip-row::-webkit-scrollbar { display: none; }

.zs-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #e3d5c3);
  background: var(--bg-card, #fff);
  color: var(--text-secondary, #3e342b);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.zs-chip.is-active {
  background: var(--button-primary, #23382e);
  border-color: var(--button-primary, #23382e);
  color: var(--button-primary-text, #fff);
}

/* --- The active category's own banner ------------------------------------
   When a category is being shown, the results carry its picture, its name and
   the way back out. Rendered server-side so it exists with JavaScript off.
   ------------------------------------------------------------------------ */
.zs-cat-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-subtle, #ede3d4);
  background: linear-gradient(90deg, var(--accent-gold-soft, #fbf5ea), var(--bg-card, #fff));
}
.zs-cat-banner[hidden] { display: none; }

.zs-cat-banner-media {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface-2, #f4eadc);
}
.zs-cat-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zs-cat-banner-copy { flex: 1 1 auto; min-width: 0; }
.zs-cat-banner-copy strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #1c1813);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zs-cat-banner-copy small {
  display: block;
  margin-top: 2px;
  font-size: .76rem;
  color: var(--text-muted, #756b5f);
}

.zs-cat-banner-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #e3d5c3);
  background: var(--bg-card, #fff);
  color: var(--text-secondary, #3e342b);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

[data-theme="dark"] .zs-cat-banner {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .zs-cat-banner-copy strong { color: #f1f5f9; }
[data-theme="dark"] .zs-cat-banner-clear {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #e2e8f0;
}

/* Filtered out.
   responsive-pro.css carries `.product-grid .product-card { display: flex
   !important }`. Between two !important declarations specificity decides, not
   order, so a bare `.zs-hidden` (0,1,0) loses to that (0,2,0) and the card
   stayed on screen. These selectors match or beat it. */
.zs-hidden,
.product-card.zs-hidden,
.product-grid .zs-hidden,
.visual-product-grid .zs-hidden { display: none !important; }

/* Nothing in this category yet: say so, and offer the way back. */
.zs-empty[hidden] { display: none; }
.zs-empty {
  grid-column: 1 / -1;
  padding: 34px 18px;
  text-align: center;
  border: 1px dashed var(--border-color, #e3d5c3);
  border-radius: 14px;
  color: var(--text-muted, #756b5f);
}
.zs-empty strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  color: var(--text-primary, #1c1813);
}
.zs-empty .zs-empty-clear,
.zs-empty button {
  margin-top: 12px;
  height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--button-primary, #23382e);
  color: var(--button-primary-text, #fff);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}

[data-theme="dark"] .zs-cat-tile,
[data-theme="dark"] .zs-chip {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .zs-cat-label strong { color: #f1f5f9; }
[data-theme="dark"] .zs-chip { color: #e2e8f0; }
[data-theme="dark"] .zs-chip.is-active { background: var(--accent-gold, #c79a52); color: #1a1510; border-color: var(--accent-gold, #c79a52); }


/* At 360px and below the card is ~141-161px wide but the information block does
   not shrink with it, so the photograph's share fell to 45%. Trimming the type
   and the padding -- not removing anything -- puts it back near half.
   Measured at 320px: card 309px, photo 139px (45%) before; 287px / 139px (48%)
   after. */
@media (max-width: 360px) {
  .product-card .product-body {
    gap: 3px !important;
    padding: 7px 8px 8px !important;
  }
  .product-card .product-body h3 {
    font-size: .78rem !important;
    line-height: 1.28 !important;
    min-height: 2.56em !important;
  }
  .product-card .price strong { font-size: .88rem !important; }
  .product-card .price del { font-size: .68rem !important; }
  .product-card .premium-rating { font-size: .68rem; }
  .product-card .zs-stockdot { font-size: .66rem; }
  .product-card .stock .wish,
  .product-card .stock .btn-wishlist {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  .product-card .btn-add-cart-mini {
    height: 36px !important;
    min-height: 36px !important;
    font-size: .74rem !important;
    padding: 0 6px !important;
  }
}

/* Dark theme: the card is a surface, not a hole. */
[data-theme="dark"] .product-card {
  background: var(--bg-card, #1e293b);
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .product-card .product-body {
  background: var(--bg-card, #1e293b) !important;
  border-top-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .product-card .product-photo-link::after {
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 40%);
}

/* --------------------------------------------------------------------------
   MAJALIS — fabric and wood swatches
   --------------------------------------------------------------------------
   Six swatches, each a full-width 1:1 block, meant half a phone screen was six
   coloured squares. They are a reference chart, not merchandise: a customer
   glances at them to know the range exists. Small chips say that; giant tiles
   shout it.

   The colour block is gone entirely -- as asked, these are names with a caret
   that opens the choices, so nothing pretends a flat gradient is a fabric.
   -------------------------------------------------------------------------- */
.majalis-swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  gap: 6px !important;
}

.majalis-swatch-card {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  min-height: 34px;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-color, #e3d5c3) !important;
  background: var(--bg-card, #fff) !important;
  color: var(--text-primary, #1c1813) !important;
  cursor: pointer;
}
.majalis-swatch-card strong { font-size: .76rem !important; font-weight: 600; }

/* The colour block becomes a small dot -- enough to hint at the shade without
   claiming to be a photograph of the fabric. */
.majalis-swatch {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex: 0 0 auto;
}

/* The caret that says "there are more options behind this". */
.majalis-swatch-card::after {
  content: "";
  width: 0; height: 0;
  margin-inline-start: 2px;
  border-inline-start: 4px solid transparent;
  border-inline-end: 4px solid transparent;
  border-top: 5px solid var(--text-subtle, #9c9081);
  flex: 0 0 auto;
}

.majalis-swatch-card:hover,
.majalis-swatch-card:focus-visible {
  border-color: var(--accent-gold, #c79a52) !important;
  background: var(--accent-gold-soft, #fbf5ea) !important;
}

[data-theme="dark"] .majalis-swatch-card,
body.dark-mode .majalis-swatch-card {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f1f5f9 !important;
}

/* --------------------------------------------------------------------------
   MAJALIS PAGE — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .majalis-hero-banner {
    border-radius: 16px;
    overflow: hidden;
  }
  .majalis-material-box { padding: 14px !important; }
  .majalis-materials-grid,
  .majalis-material-box + .majalis-material-box { gap: 10px !important; }

  /* The gallery of "projects" was five full-width photographs in a column. */
  .majalis-projects-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .majalis-project-shot {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    border-radius: 12px;
  }
  .majalis-projects-gallery > :first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9 !important; }

  .majalis-measurement-cta {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   SOLAR — hero promises
   --------------------------------------------------------------------------
   Four one-line promises stacked into four rows of a dark hero. They are a
   reassurance strip, so they read as a strip.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-features-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 10px !important;
    margin-top: 12px !important;
  }
  .hero-feature-item {
    font-size: .72rem !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
  }
  .hero-feature-item svg { width: 14px !important; height: 14px !important; flex: 0 0 auto; }

  .hero-cta-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
  }
  .hero-cta-row > * {
    flex: 1 1 0 !important;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    font-size: .82rem !important;
  }

  .section-hero-split { padding: 18px 14px !important; min-height: 0 !important; }
  .section-hero-split h1 { font-size: 1.55rem !important; line-height: 1.22 !important; }
}

/* --------------------------------------------------------------------------
   APPLIANCES — hero
   --------------------------------------------------------------------------
   The hero is a two-column grid whose second column is a 300px background
   photograph. On a phone that column dropped below the copy as a headless
   picture with nothing in it. It becomes the backdrop instead, the way the
   kitchens hero does, so the section is one image with words on it.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .appliances-hero {
    position: relative;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border-radius: 16px;
    margin-inline: 10px;
    overflow: hidden;
  }
  .appliances-hero-visual {
    position: absolute !important;
    inset: 0 !important;
    min-height: 0 !important;
    z-index: 0 !important;
  }
  .appliances-hero-copy {
    position: relative;
    z-index: 1;
    padding: 20px 16px !important;
    min-height: 230px;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end !important;
    background: linear-gradient(to top,
      rgba(7,16,25,.92) 0%, rgba(7,16,25,.72) 45%, rgba(7,16,25,.3) 100%);
    color: #fff;
  }
  .appliances-hero-copy h1 { font-size: 1.55rem !important; line-height: 1.22 !important; color: #fff !important; }
  .appliances-hero-copy p { font-size: .84rem !important; color: rgba(250,245,236,.88) !important; }
  .appliances-mini-features {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
    font-size: .68rem !important;
  }
}

/* --------------------------------------------------------------------------
   Cart badge
   --------------------------------------------------------------------------
   The count sat half outside the button and was clipped by the header's own
   edge, so a two-digit basket read as a red smear. It tucks into the corner
   instead of hanging off it.
   -------------------------------------------------------------------------- */
.zfb-mobile-cart-count {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: .56rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1.5px var(--bg-card, #fff);
  pointer-events: none;
}
.zfb-mobile-cart-count[hidden] { display: none; }
/* The header clips its own corners; the badge must not be cut off by them. */
.zfb-mobile-header,
.zfb-mobile-main-row,
.zfb-mobile-actions { overflow: visible !important; }

[data-theme="dark"] .zfb-mobile-cart-count,
body.dark-mode .zfb-mobile-cart-count { box-shadow: 0 0 0 1.5px #141d18; }

/* --------------------------------------------------------------------------
   Customer reviews.

   The panel this replaces printed a fixed "4.8 من 5 بناءً على 18 تقييم" for
   every product in the shop, followed by the sentence "جميع التقييمات من
   مشترين حقيقيين" -- about customers who had never written a word. What is
   styled here shows only what the moderation queue has approved, and an
   honest invitation when that is empty.
   -------------------------------------------------------------------------- */

.zs-reviews-loading,
.zs-reviews-empty {
  color: var(--text-muted, #756b5f);
  font-size: .95rem;
  line-height: 1.9;
  margin: 0 0 16px;
}

.zs-reviews-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--accent-gold-soft, #fbf5ea);
}
.zs-reviews-avg { font-size: 1.7rem; line-height: 1; }
.zs-reviews-count { color: var(--text-muted, #756b5f); font-size: .85rem; }

/* One span of lit stars over one of unlit, so a half-star average still reads
   as a shape rather than as five identical glyphs. */
.zs-stars { letter-spacing: 2px; white-space: nowrap; }
.zs-stars-on { color: #f0b429; }
.zs-stars-off { color: #f0b429; opacity: .26; }

.zs-reviews-list { list-style: none; margin: 0 0 20px; padding: 0; }
.zs-review {
  padding: 14px 0;
  border-top: 1px solid var(--border-color, #e8ddd1);
}
.zs-review-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px; font-size: .9rem;
}
.zs-review-verified {
  font-size: .72rem; padding: 2px 8px; border-radius: 6px;
  background: rgba(34, 197, 94, .14); color: #1a7f43;
}
.zs-review-body { margin: 0; line-height: 1.9; }

.zs-review-cta,
.zs-review-form {
  margin-top: 8px; padding: 18px;
  border: 1px solid var(--border-color, #e8ddd1);
  border-radius: 14px;
  background: var(--bg-card, #fff);
}
.zs-review-form h4 { margin: 0 0 12px; font-size: 1rem; }
.zs-review-form textarea {
  width: 100%; box-sizing: border-box; padding: 12px;
  border: 1px solid var(--border-color, #e8ddd1); border-radius: 10px;
  font: inherit; resize: vertical; background: var(--bg-page, #fff);
  color: inherit;
}
.zs-review-note { font-size: .8rem; color: var(--text-muted, #756b5f); margin: 8px 0 12px; }
.zs-review-msg { font-size: .85rem; margin: 10px 0 0; min-height: 1.2em; }

/* The rating picker. Radios are hidden but still focusable, so the control
   stays operable by keyboard and reachable by a screen reader. */
.zs-review-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-bottom: 12px; }
.zs-star-pick { cursor: pointer; font-size: 1.9rem; line-height: 1; color: #f0b429; opacity: .26; transition: opacity .15s ease; }
.zs-star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* row-reverse means "earlier sibling" is a HIGHER star, so hovering or
   checking one lights it and everything after it in the DOM. */
.zs-star-pick:hover, .zs-star-pick:hover ~ .zs-star-pick,
.zs-star-pick:has(input:checked), .zs-star-pick:has(input:checked) ~ .zs-star-pick { opacity: 1; }
.zs-star-pick:has(input:focus-visible) { outline: 2px solid var(--primary-gold, #c79a52); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[data-theme="dark"] .zs-reviews-summary { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .zs-review-cta,
[data-theme="dark"] .zs-review-form { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .zs-review-verified { background: rgba(34, 197, 94, .18); color: #4ade80; }

/* --------------------------------------------------------------------------
   One mark, everywhere.

   The header carried a gold rounded square with a WHITE letter while
   assets/brand/favicon.svg carried a gold disc with a DARK letter. Two
   drawings of the same thing, and the difference is visible the moment a
   browser tab sits above the page showing both.

   These values are the icon's, exactly: the same three gradient stops and the
   same #3a2a12 glyph. White on this gold measures about 2.3:1; the dark brown
   measures 5.4:1, which is also why the icon uses it.

   Loaded last, and with !important, because responsive-pro.css restates
   .zfb-mobile-brand-mark and .main-nav .brand-mark inside media queries and an
   !important there outranks a normal rule from any later sheet.
   -------------------------------------------------------------------------- */
.zfb-mobile-brand-mark,
.main-nav .brand-mark,
.mobile-drawer-brand .brand-mark,
.brand-mark {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 248, 237, .34), transparent 55%),
    linear-gradient(135deg, #e8c67d 0%, #c79a52 55%, #a87c38 100%) !important;
  color: #3a2a12 !important;
  /* A Latin Z wants a Latin face; the Arabic stack rendered it with the wrong
     proportions. 900 is what makes it read as a mark rather than a letter. */
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

/* The drawer and desktop marks are discs; the compact header mark is a
   rounded square. Both are the shop's mark, so neither shape is changed --
   only the colour and the glyph, which is what "unified" has to mean when one
   sits in a 36px bar and the other in a 44px one. */
.main-nav .brand-mark::before,
.mobile-drawer-brand .brand-mark::before { display: none !important; }