/* =========================================================================
   THE ZINCO — SCENE SYSTEM
   Ink black · Steel silver · Cream white
   Rule: text lives on one side, artwork on the other. Nothing overlaps.
   ========================================================================= */

/* Note on --theme-text-color: this is Blocksy's global text-colour
   variable (Customizer → Colors → Text Color, theme_mod "fontColor"). It
   currently sits at its true default, inheriting palette-color-3 (cream) —
   correct for the dark header/footer/hero sections that read it as their
   fallback. Do NOT override it here, or anywhere in this child theme, as a
   fix for it reading wrong on some other page — that page's real problem
   is Blocksy's compiled CSS cache being stale relative to the Customizer
   value, and the fix for that is publishing once from the Customizer, not
   a CSS override here. Flag it and let Ahmed handle the publish himself. */

:root {
  /* Warm ink: a trace of brown in the black. Reads as the same colour,
     feels less clinical than a pure neutral. */
  --z-ink: #14120F;
  --z-steel: #A7ADB5;
  --z-steel-light: #C9CFD6;
  --z-cream: #F7F5F0;
  --z-cream-soft: #FBF9F5;
  /* Nature accents from the brand guide — used sparingly, ~2% of the page */
  --z-olive: #7C8963;
  --z-olive-deep: #4D5A3E;
  --z-bronze: #B28A5A;
  --z-sheen: linear-gradient(115deg,
      rgba(233,236,239,0) 0%, rgba(200,207,215,.5) 16%,
      rgba(248,250,252,.9) 36%, rgba(150,157,166,.45) 54%,
      rgba(236,240,244,.85) 72%, rgba(180,187,196,.35) 88%,
      rgba(154,160,168,0) 100%);
  --z-r-xl: 48px;
  --z-font: "IBM Plex Sans Arabic", "DM Sans", system-ui, -apple-system, sans-serif;
  --z-font-latin: "DM Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* REMOVED 2026-09-08 — this used to paint every Elementor page ink from here,
   which meant the page's own Background setting in Elementor did nothing. Each
   of the nine Elementor pages now carries its own background (Elementor → page
   settings → Style → Background), and the site-wide background is a Customizer
   setting (Colors → Site Background). Do not re-add this rule. */

/* =========================================================================
   HEADER & FOOTER

   Both are configured entirely in Appearance → Customize.
   The header (logo, menu, search, account, cart, sticky, transparent) and
   the footer (columns, spacing, colours, copyright) are theme settings.
   With one exception, noted below, nothing here styles either of them.

   Footer content lives in Appearance → Widgets, in the four footer areas.

   ONE EXCEPTION — the header glass effect below.
   Blocksy exposes no control for backdrop-filter, so it cannot be done in
   the Customizer. Everything else about the header stays a theme setting:
   the row's translucency is set in Customizer → Header → Middle Row
   background (currently ~66% ink on desktop), and this rule only blurs
   whatever is behind that translucency. Change the opacity from the
   dashboard and this still works.

   Follows Apple's guidance for materials: glass is used for navigation
   framing only, never behind body content, and never stacked.
   ========================================================================= */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  [data-header] [data-row="middle"] {
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
  }
}

/* Users who ask for less transparency get a solid bar instead of glass.
   The ink value matches the palette background, so the header simply
   becomes opaque rather than changing colour. */
@media (prefers-reduced-transparency: reduce) {
  [data-header] [data-row="middle"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--z-ink);
  }
}

#offcanvas { direction: rtl; }
.ct-footer { direction: rtl; }

/* -------------------------------------------------------------------------
   PRODUCTS ON THE HOMEPAGE
   ------------------------------------------------------------------------- */
/* REWRITTEN 2026-09-08 — the card used to be hard-coded here with !important,
   so every control on the Products widget itself did nothing. Background,
   border, radius, padding, shadow (normal + hover), image radius and spacing,
   title / price / button colours and typography, the columns and both gaps are
   ALL set on the widget now: Elementor → the products widget → Style tab.
   Do not re-add any of them here. */
.z-products .z-title .elementor-heading-title { max-inline-size: 20ch; margin-inline: auto; }

/* The two things the widget exposes no control for. */

/* WooCommerce prints the price as an inline <span> — it needs to be a block to
   sit on its own line under the title. */
.z-shop ul.products li.product .price { display: block; }

/* The widget has a hover shadow control but none for a transform, so the lift
   itself stays here. The shadow it lifts into is the widget's. */
/* 200ms, not 450ms. A card hover is seen dozens of times in a single visit,
   which is the band where motion should be reduced, not savoured — at .45s the
   card reads as heavy rather than considered. */
.z-shop ul.products li.product {
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.z-shop ul.products li.product:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .z-shop ul.products li.product { transition: none; }
  .z-shop ul.products li.product:hover { transform: none; }
}

@media (max-width: 767px) {
  #header { background: rgba(20,18,15,.82); }
  .z-tools { margin-inline-start: 4px; gap: 0; }
  .z-tools__btn { inline-size: 38px; block-size: 38px; }
  .z-search { padding-block-start: 14vh; }
  .z-search form { flex-direction: column; }
  .z-search button[type="submit"] { padding-block: 15px; }
}

/* -------------------------------------------------------------------------
   FOOTER — hand built in footer.php
   ------------------------------------------------------------------------- */
.z-footer {
  direction: rtl;
  font-family: var(--z-font);
  background: #0F0D0B;
  color: rgba(245,242,236,.72);
  border-block-start: 1px solid rgba(199,206,214,.14);
}
.z-footer__inner {
  max-inline-size: 1280px;
  margin-inline: auto;
  padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 64px) clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 56px);
}
.z-footer__title {
  font-size: 15px;
  font-weight: 600;
  color: #FBF9F5;
  margin: 0 0 18px;
  letter-spacing: 0;
}
.z-footer__logo img { max-block-size: 42px; inline-size: auto; }
.z-footer__logo--text { font-size: 22px; font-weight: 600; color: #FBF9F5; }
.z-footer__pitch {
  margin-block-start: 18px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  max-inline-size: 34ch;
  color: rgba(245,242,236,.6);
}

.z-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.z-footer__menu a,
.z-footer__contact a {
  color: rgba(245,242,236,.72);
  text-decoration: none;
  font-size: 15px;
  font-weight: 300;
  transition: color .3s ease;
}
.z-footer__menu a:hover,
.z-footer__contact a:hover { color: var(--z-bronze); }

.z-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.z-footer__contact li { display: grid; gap: 5px; font-size: 15px; font-weight: 300; line-height: 1.75; }
.z-footer__label {
  font-family: var(--z-font-latin);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--z-olive);
}
.z-footer__todo { color: rgba(245,242,236,.4); font-style: italic; }

.z-footer__bar { border-block-start: 1px solid rgba(199,206,214,.1); }
.z-footer__bar-inner {
  max-inline-size: 1280px;
  margin-inline: auto;
  padding: 22px clamp(24px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.z-footer__copy, .z-footer__made {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  color: rgba(245,242,236,.48);
}
.z-footer__made { color: var(--z-bronze); }

@media (max-width: 1024px) {
  .z-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .z-footer__inner { grid-template-columns: 1fr; gap: 34px; }
  .z-footer__bar-inner { justify-content: center; text-align: center; }
}

/* -------------------------------------------------------------------------
   MOBILE OFF-CANVAS MENU
   Colours and typography are set in the Customizer; only the RTL grid
   spacing is here, which the panel has no control for.
   ------------------------------------------------------------------------- */
#offcanvas .menu { display: grid; gap: 6px; }

/* The mobile column count for the homepage products used to be forced here.
   It is a widget setting now (Columns → mobile = 1). Removed 2026-09-08. */

/* Shop pages (cart · checkout · account · thank-you) are styled entirely in
   zinco-shop.css, which loads after this file on those pages only. The block
   that used to sit here duplicated it and has been removed. */

/* The z-doc / z-doc--flow / z-doc--cards system that used to dress the seven
   inner pages by hard-coded post ID has been removed — those IDs (29359,
   29362, 29400, 29366, 4400, 4439, 29370) are pre-rebuild drafts, now in the
   trash, and the filter that added these classes (functions.php) has been
   removed too. The live pages use z-scene + z-doc-scene / z-doc-body
   instead (further down this file), which is what actually renders. */

/* -------------------------------------------------------------------------
   RHYTHM & PROPORTION — one screen per section

   Every scene fills exactly one viewport, on every device. The trick is that
   the CONTENT has to grow with the screen too, otherwise a full-height
   section on a large display is mostly empty — which was the original fault.

   So the artwork is sized from min(vw, vh): it follows whichever dimension
   is the constraint. On a tall narrow phone it tracks the width; on a wide
   short laptop it tracks the height. It always fits, and it always fills.

   svh (small viewport height) is used instead of vh so the mobile browser
   bar appearing and disappearing never shifts the layout.
   ------------------------------------------------------------------------- */
.z-scene {
  --min-height: 100svh !important;
  --padding-block-start: clamp(72px, 8vh, 120px) !important;
  --padding-block-end:   clamp(72px, 8vh, 120px) !important;
  --padding-inline-start: clamp(24px, 4.5vw, 72px) !important;
  --padding-inline-end:   clamp(24px, 4.5vw, 72px) !important;
  --gap: clamp(28px, 4vw, 64px) !important;
}

/* The hero clears the fixed header, so it needs more room at the top */
.z-hero {
  --padding-block-start: clamp(118px, 15vh, 190px) !important;
  --padding-block-end:   clamp(72px, 9vh, 120px) !important;
}

/* The trust strip is a single short row of cards, not a full scene. Forcing
   it to a whole screen leaves a large empty gap before the next section.
   It keeps the scene padding and colours, only the forced height is dropped.
   !important is required here solely to override the .z-scene rule above,
   which itself needs !important to beat Elementor's inline --min-height.
   Scoped to .z-trust so no other section is affected. */
.z-trust { --min-height: auto !important; }

/* Artwork fills the space it is given, on any screen shape */
.z-art img {
  inline-size: clamp(220px, min(32vw, 52vh), 560px) !important;
  max-inline-size: 100% !important;
  block-size: auto;
}
.z-hero .z-hero-art img {
  inline-size: clamp(260px, min(36vw, 56vh), 640px) !important;
  max-inline-size: 100% !important;
  block-size: auto;
}

/* Sections whose content is short: keep the full screen but centre it and
   let the inner block breathe rather than stretch. */
.z-scene--cta .e-con-inner,
.z-journey .e-con-inner,
.z-trust .e-con-inner,
.z-life .e-con-inner { margin-block: auto; }

/* ---- Tablet: columns stack, so a single screen would crop. Allow the
        section to grow past one screen where it genuinely needs to. ---- */
@media (max-width: 1024px) {
  .z-scene {
    --min-height: 100svh !important;
    --padding-block-start: clamp(64px, 7vh, 96px) !important;
    --padding-block-end:   clamp(64px, 7vh, 96px) !important;
  }
  /* Stacked text + artwork needs more than one screen on these two */
  .z-materials, .z-products, .z-trust { --min-height: auto !important; }

  .z-art img { inline-size: clamp(220px, min(58vw, 38vh), 420px) !important; }
  .z-hero .z-hero-art img { inline-size: clamp(240px, min(64vw, 40vh), 460px) !important; }
}

@media (max-width: 767px) {
  .z-scene {
    --padding-block-start: clamp(88px, 12vh, 120px) !important;
    --padding-block-end:   clamp(64px, 9vh, 96px) !important;
    --padding-inline-start: 24px !important;
    --padding-inline-end:   24px !important;
  }
  .z-art img { inline-size: min(72vw, 36vh) !important; }
  .z-hero .z-hero-art img { inline-size: min(78vw, 38vh) !important; }
}

/* Very short screens — a landscape phone or a small laptop. Forcing a full
   screen here would crop the copy, so height follows content instead. */
@media (max-height: 620px) {
  .z-scene { --min-height: auto !important; }
  .z-art img { inline-size: clamp(180px, 26vw, 300px) !important; }
}

/* -------------------------------------------------------------------------
   OVERFLOW GUARDS
   A column is a flex item, and a flex item's default min-width is auto —
   meaning it refuses to shrink below its longest unbreakable word. A long
   Arabic phrase or an inline <strong> inside a list will therefore push the
   column wider than the 40% it was given, and the copy runs across the
   metal divider. These three rules stop that at the source.
   ------------------------------------------------------------------------- */
.z-half,
.z-half > .e-con-inner,
.z-half .elementor-widget,
.z-card,
.z-cards > .e-con {
  min-inline-size: 0 !important;
  min-block-size: 0;
}
.z-half .elementor-widget,
.z-card .elementor-widget { max-inline-size: 100%; }

.z-half .elementor-heading-title,
.z-half .elementor-widget-text-editor,
.z-card .elementor-heading-title,
.z-card .elementor-widget-text-editor {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* Nothing inside a column may spill past it */
.z-half, .z-card { overflow: visible; }
.z-half img { max-inline-size: 100%; }

/* -------------------------------------------------------------------------
   THE CENTRE GUTTER
   The text column is right-aligned, and in a two-column row the column that
   sits on the LEFT therefore pushes its content toward the middle — right up
   against the metal divider. The same is true in reverse for a left-aligned
   column on the right.

   So each column gets padding on the side that faces the centre. The gutter
   belongs to the layout, not to the text, and it holds no matter which
   column comes first in the markup or which way the copy is aligned.
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .z-half:first-child  { padding-inline-end:   clamp(20px, 3vw, 56px) !important; }
  .z-half:last-child   { padding-inline-start: clamp(20px, 3vw, 56px) !important; }
  .z-hero-copy:first-child,
  .z-hero-artwrap:first-child { padding-inline-end:   clamp(20px, 3vw, 56px) !important; }
  .z-hero-copy:last-child,
  .z-hero-artwrap:last-child  { padding-inline-start: clamp(20px, 3vw, 56px) !important; }

  /* Buttons and lists are block-level and stretch to the column's full
     width, so they need the same ceiling the body copy has. */
  .z-half .z-btn,
  .z-half .z-hero-cta { max-inline-size: 42ch; }
  .z-half .z-list { max-inline-size: 44ch; }
}

/* =========================================================================
   REMOVED — the second duplicate of the shop-page block once sat here.
   All cart, checkout and account styling is in zinco-shop.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   CONTACT FORM
   ------------------------------------------------------------------------- */
.z-formscene .e-con-inner { max-inline-size: 760px; margin-inline: auto; }
.z-form { inline-size: 100%; margin-block-start: 34px; direction: rtl; }

/* REWRITTEN 2026-09-08 — label, field and button colours, fonts, borders and
   radii are set on the form widget itself now (Elementor → the form → Style:
   Label / Field / Buttons). They used to be forced here with !important, which
   made those controls inert. What is left below is only what the widget has no
   control for: the placeholder colour, the focus ring, the RTL select arrow,
   the textarea resize handle and the message tints. */
.z-form input[type="text"],
.z-form input[type="email"],
.z-form input[type="tel"],
.z-form select,
.z-form textarea {
  transition: border-color .3s ease, box-shadow .3s ease;
}
.z-form textarea { resize: vertical; }
.z-form input::placeholder,
.z-form textarea::placeholder { color: #A5A19A; }

.z-form input:focus,
.z-form select:focus,
.z-form textarea:focus {
  outline: none;
  border-color: var(--z-olive) !important;
  box-shadow: 0 0 0 3px rgba(124,137,99,.14);
}

.z-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #7C8963 50%),
                    linear-gradient(135deg, #7C8963 50%, transparent 50%);
  background-position: calc(0% + 20px) calc(50% + 2px), calc(0% + 26px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-start: 44px !important;
}

/* Colour, radius and padding of the submit button are widget settings now.
   Only the lift and the shadow, which the widget has no control for. */
.z-form .elementor-button[type="submit"] {
  margin-block-start: 8px;
  transition: background-color .35s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  box-shadow: 0 14px 34px rgba(10,11,12,.12);
}
.z-form .elementor-button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(10,11,12,.18);
}

.z-form .elementor-message {
  font-family: var(--z-font) !important;
  font-size: 15px;
  border-radius: 14px;
  padding: 14px 18px;
  margin-block-start: 14px;
}
.z-form .elementor-message-success {
  background: rgba(124,137,99,.12);
  color: var(--z-olive-deep);
}
.z-form .elementor-message-danger { background: rgba(178,90,90,.1); color: #8C4B4B; }

@media (max-width: 767px) {
  /* The 16px field size that stops iOS zooming on focus is a widget setting
     now (Field → Typography). Only the full-width button is left. */
  .z-form .elementor-button[type="submit"] { inline-size: 100%; }
}

/* Dark variant — for a form placed on an ink section */
.z-form--dark .elementor-field-group > label { color: #FBF9F5; }
.z-form--dark input[type="text"],
.z-form--dark input[type="email"],
.z-form--dark input[type="tel"],
.z-form--dark input[type="number"],
.z-form--dark select,
.z-form--dark textarea {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(199,206,214,.24) !important;
  color: #FBF9F5 !important;
}
.z-form--dark input::placeholder,
.z-form--dark textarea::placeholder { color: rgba(251,249,245,.42); }
.z-form--dark input:focus,
.z-form--dark select:focus,
.z-form--dark textarea:focus {
  border-color: var(--z-bronze) !important;
  box-shadow: 0 0 0 3px rgba(178,138,90,.18);
}
.z-form--dark select {
  background-image: linear-gradient(45deg, transparent 50%, #B28A5A 50%),
                    linear-gradient(135deg, #B28A5A 50%, transparent 50%);
}
.z-form--dark .elementor-button[type="submit"] {
  background: #FBF9F5 !important;
  color: #14120F !important;
}
.z-form--dark .elementor-button[type="submit"]:hover {
  background: var(--z-bronze) !important;
  color: #14120F !important;
}
.z-form--dark .elementor-message-success {
  background: rgba(124,137,99,.18);
  color: #D6DECB;
}

/* -------------------------------------------------------------------------
   LEGAL DOCUMENT SCENE
   Policy pages are read, not scanned. The type column is capped for
   comfortable line length and the section headings carry the olive rule
   used everywhere else on the site.
   ------------------------------------------------------------------------- */
.z-doc-scene .e-con-inner { max-inline-size: 860px; margin-inline: auto; }
.z-doc-scene { --min-height: auto !important; }
.z-doc-body { inline-size: 100%; }
.z-doc-body h2 {
  font-family: var(--z-font);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 600;
  line-height: 1.45;
  color: #FBF9F5;
  margin: clamp(38px, 4.5vw, 56px) 0 12px;
  position: relative;
  padding-inline-start: 18px;
}
.z-doc-body h2:first-child { margin-block-start: 0; }
.z-doc-body h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: .18em .18em;
  inline-size: 3px;
  border-radius: 3px;
  background: var(--z-bronze);
}
.z-scene--light .z-doc-body h2 { color: #0E0F10; }
.z-scene--light .z-doc-body h2::before { background: var(--z-olive); }

.z-doc-body p { margin: 0 0 15px; }
.z-doc-body strong { font-weight: 600; color: #FBF9F5; }
.z-scene--light .z-doc-body strong { color: #0E0F10; }
.z-doc-body ul { list-style: none; margin: 0 0 16px; padding: 0; }
.z-doc-body li { position: relative; padding-inline-start: 24px; margin-block-end: 9px; }
.z-doc-body li::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  inset-block-start: .8em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 999px;
  background: var(--z-olive);
}
.z-doc-body a {
  color: var(--z-bronze);
  text-decoration: none;
  border-block-end: 1px solid rgba(178,138,90,.4);
  transition: color .3s ease, border-color .3s ease;
}
.z-doc-body a:hover { color: #FBF9F5; border-block-end-color: #FBF9F5; }
.z-scene--light .z-doc-body a:hover { color: var(--z-olive-deep); border-block-end-color: var(--z-olive-deep); }

/* Key-figure cards used at the top of a policy page */
.z-keys .z-card { flex: 1 1 0; }
.z-key-n .elementor-heading-title { font-family: var(--z-font-latin) !important; line-height: 1.1; }
.z-key-t { max-inline-size: 24ch; margin-inline: auto; }

/* -------------------------------------------------------------------------
   FAQ ACCORDION
   ------------------------------------------------------------------------- */
/* REWRITTEN 2026-09-08 — every colour, font, padding and border below used to
   be forced here with !important, so the accordion widget's own Style tab did
   nothing. All of it is on the widgets now (Elementor → the accordion → Style:
   Accordion / Title / Icon / Content), on all five accordions, light and dark.
   Only the rounded corner and the hover shadow are left — the widget has no
   control for either. */
.z-faq-scene .e-con-inner { max-inline-size: 920px; margin-inline: auto; }
.z-faq { inline-size: 100%; margin-block: 4px 30px; }
.z-faq .elementor-accordion { border: 0; }
.z-faq .elementor-accordion-item {
  border-radius: 18px;
  margin-block-end: 10px;
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.z-faq .elementor-accordion-item:hover { box-shadow: 0 14px 36px rgba(10,11,12,.06); }
.z-faq--dark .elementor-accordion-item:hover { box-shadow: 0 14px 36px rgba(0,0,0,.3); }

/* The question is an <h3> wrapper around the link the widget actually styles.
   Left alone, the theme's global H3 size (28px) sets the row height and the
   icon size while the widget's Title typography only reaches the text inside.
   This makes the wrapper defer to the widget — it is what makes the widget's
   own control effective, not an override of it. */
.z-faq .elementor-tab-title {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .z-faq .elementor-accordion-item { transition: none; }
}

/* A row of two buttons side by side, stacking on mobile */
.z-btn-row { inline-size: auto !important; margin-block-start: 22px; }
.z-btn-row .elementor-widget { inline-size: auto !important; }
.z-btn-row .z-btn { margin-block-start: 0 !important; }

/* Contact cards: the icon-box link should carry the whole card */
.z-values .z-card .elementor-icon-box-title { word-break: break-word; }
.z-values .z-card .elementor-icon-box-title a { color: inherit; text-decoration: none; }
.z-values .z-card:hover .elementor-icon-box-title a { color: var(--z-bronze); }

/* Card numbering used on the About page value cards */
.z-card-n .elementor-heading-title {
  font-family: var(--z-font-latin) !important;
  display: inline-block;
  padding-block-end: 6px;
  border-block-end: 1px solid rgba(178,138,90,.35);
}

/* Bulleted copy inside a text-editor on the scene pages */
.z-list ul { list-style: none; margin: 12px 0 0; padding: 0; }
.z-list li {
  position: relative;
  padding-inline-start: 24px;
  margin-block-end: 12px;
  line-height: 1.9;
}
.z-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  inset-block-start: .8em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 999px;
  background: var(--z-olive);
}
.z-list strong { color: #FBF9F5; font-weight: 600; }
.z-scene--light .z-list strong { color: #0E0F10; }

/* A statement scene: one large sentence, nothing else */
.z-statement-scene .z-statement .elementor-heading-title {
  max-inline-size: 24ch;
  margin-inline: auto;
  letter-spacing: -.015em;
}
.z-statement-scene .z-lead { max-inline-size: 62ch; margin-inline: auto; }
.z-values .z-title .elementor-heading-title { max-inline-size: 20ch; margin-inline: auto; }

/* -------------------------------------------------------------------------
   SCENE SHELL
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   SAFETY NET — why these two display declarations exist

   `wp-content/uploads/elementor/css/` does not persist on this host. A write
   reports success and the file is gone a moment later; the directory reads
   empty while its mtime keeps updating. Elementor therefore regenerates
   custom-frontend.min.css on EVERY request (its ?ver is a unix timestamp that
   increments each second), and the browser sometimes fetches it while it is
   still being written. A stylesheet that fails to parse is dropped WHOLE —
   `document.styleSheets` shows the 54KB file with cssRules.length === 0 — and
   with it goes Elementor's `.e-con{display:var(--display)}`.

   When that happens every scene falls back to block flow: the two 40% columns
   become full-width and stack, and the copy lands on top of the artwork panel
   while the diagonal seam is still painted across the section. That is the
   "text in the image area" fault, and it is intermittent by nature.

   The per-post CSS is printed INLINE (Elementor → Advanced → CSS Print Method
   = Internal), so --display and --flex-direction are always present in the
   HTML. Only the shared stylesheet is unreliable. Restating the two consumers
   of those variables here makes the scene system survive the failure without
   changing anything when the stylesheet does load — same property, same value,
   from Elementor's own variables.

   REMOVE THIS BLOCK once the host makes uploads/ persistent and
   `wp-content/uploads/elementor/css/` keeps its files.
   ------------------------------------------------------------------------- */
.z-scene.e-con { display: var(--display, flex); }
.z-scene.e-con > .e-con-inner {
  display: var(--display, flex);
  flex-direction: var(--flex-direction, row);
}

.z-scene {
  position: relative;
  direction: rtl;
  font-family: var(--z-font);
  overflow: hidden;
  isolation: isolate;
}
.z-scene + .z-scene {
  border-start-start-radius: var(--z-r-xl);
  border-start-end-radius: var(--z-r-xl);
  margin-block-start: -1px;
  border-block-start: 1px solid rgba(199,206,214,.28);
}
.z-scene--light + .z-scene,
.z-scene + .z-scene--light { border-block-start-color: rgba(14,15,16,.14); }

/* Two light scenes in a row must read as ONE block. The rounded shoulder
   would expose the ink page background behind it as a dark notch, and the
   metal hairline would cut a visible seam through matching cream. */
.z-scene--light + .z-scene--light {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-block-start: 0;
  margin-block-start: 0;
}

/* The trust strip is a tinted band inside the cream run, not a scene shoulder.
   The scene shell would give it a rounded top and a hairline only on the top
   edge (because the section above is dark and the one below is light), which
   reads as unequal spacing. Both edges are squared and given the same hairline
   so the band is symmetrical whatever sits around it. */
.z-scene.z-trust {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  margin-block-start: 0;
  border-block-start: 1px solid rgba(124,137,99,.20);
  border-block-end: 1px solid rgba(124,137,99,.20);
}

.z-scene > * { position: relative; z-index: 2; }

/* -------------------------------------------------------------------------
   THE DIAGONAL
   Nearly upright (56% → 44%) so it always passes through the GAP between
   the two columns and never crosses a headline or a drawing.
   ------------------------------------------------------------------------- */
.z-scene.z-diag-a::before,
.z-scene.z-diag-b::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(255,255,255,.13), rgba(255,255,255,.025) 72%);
}
.z-scene.z-diag-a::after,
.z-scene.z-diag-b::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--z-sheen); opacity: .85;
}
.z-scene.z-diag-a::before { clip-path: polygon(53% 0, 0 0, 0 100%, 47% 100%); }
.z-scene.z-diag-a::after {
  clip-path: polygon(calc(53% - 1.5px) 0, calc(53% + 1.5px) 0,
                     calc(47% + 1.5px) 100%, calc(47% - 1.5px) 100%);
}
.z-scene.z-diag-b::before { clip-path: polygon(47% 0, 100% 0, 100% 100%, 53% 100%); }
.z-scene.z-diag-b::after {
  clip-path: polygon(calc(47% - 1.5px) 0, calc(47% + 1.5px) 0,
                     calc(53% + 1.5px) 100%, calc(53% - 1.5px) 100%);
}
.z-scene--light.z-diag-a::before,
.z-scene--light.z-diag-b::before {
  background: linear-gradient(200deg, rgba(14,15,16,.08), rgba(14,15,16,.02) 72%);
}
.z-scene--light.z-diag-a::after,
.z-scene--light.z-diag-b::after { opacity: .45; }

/* -------------------------------------------------------------------------
   THE TWO COLUMNS
   Column widths live in the Elementor settings (40% desktop / 100% below),
   and the scene uses space-between, so each column already sits on its own
   edge. Nothing is forced here — everything stays editable.
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .z-scene > .e-con-inner,
  .z-scene.e-con { column-gap: 0; }
  .z-half { min-inline-size: 0; }
}

.z-half--art { display: flex; align-items: center; justify-content: center; }

/* -------------------------------------------------------------------------
   ARTWORK PANEL BACKDROP
   Sparse geometric marks drifting behind the drawing — circles, squares,
   triangles and crosshairs, in the same drafting language as the artwork.
   Two layers at different scales and speeds drift in opposite directions,
   which reads as depth rather than as a moving pattern.

   The drawings are transparent line art, so anything sitting behind them
   shows straight through the empty middle of the board and reads as being
   ON TOP. The mask therefore cuts a hole in the marks where the drawing
   sits: they live in a ring around it and never inside it.
   ------------------------------------------------------------------------- */
.z-half--art { position: relative; }
.z-half--art > * { position: relative; z-index: 3; }
.z-half--art .z-art,
.z-half--art .elementor-widget-image { position: relative; z-index: 3; }

/* Ring mask — empty at the centre where the artwork sits, marks in the
   band around it, fading out before the edges of the panel. */
.z-half--art::before,
.z-half--art::after {
  -webkit-mask-image: radial-gradient(closest-side circle at 50% 50%,
      transparent 0%, transparent 42%,
      #000 62%, #000 76%, transparent 100%);
  mask-image: radial-gradient(closest-side circle at 50% 50%,
      transparent 0%, transparent 42%,
      #000 62%, #000 76%, transparent 100%);
}

/* Layer 1 — the larger marks, drifting up and to the left */
.z-half--art::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' fill='none' stroke='%23C9CFD6' stroke-width='1.1'%3E%3Ccircle cx='86' cy='98' r='37'/%3E%3Crect x='278' y='56' width='58' height='58' rx='11' transform='rotate(18 307 85)'/%3E%3Cpath d='M152 272 L192 340 L112 340 Z'/%3E%3Cpath d='M330 300 h46 M353 277 v46'/%3E%3Ccircle cx='353' cy='300' r='14'/%3E%3Ccircle cx='222' cy='186' r='4.5'/%3E%3Ccircle cx='58' cy='344' r='4.5'/%3E%3C/svg%3E");
  background-size: 440px 440px;
  animation: z-marks-a 54s linear infinite;
}

/* Layer 2 — smaller marks drifting the other way, for parallax */
.z-half--art::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 1;
  pointer-events: none;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' fill='none' stroke='%23C9CFD6' stroke-width='.9'%3E%3Ccircle cx='42' cy='40' r='3.5'/%3E%3Cpath d='M148 28 h18 M157 19 v18'/%3E%3Crect x='124' y='126' width='24' height='24' rx='5'/%3E%3Ccircle cx='62' cy='156' r='10'/%3E%3C/svg%3E");
  background-size: 210px 210px;
  animation: z-marks-b 38s linear infinite;
}

@keyframes z-marks-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-440px, -440px, 0); }
}
@keyframes z-marks-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(210px, -210px, 0); }
}

/* Ink marks on the light scene */
.z-scene--light .z-half--art::before {
  opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' fill='none' stroke='%23141210' stroke-width='1.1'%3E%3Ccircle cx='86' cy='98' r='37'/%3E%3Crect x='278' y='56' width='58' height='58' rx='11' transform='rotate(18 307 85)'/%3E%3Cpath d='M152 272 L192 340 L112 340 Z'/%3E%3Cpath d='M330 300 h46 M353 277 v46'/%3E%3Ccircle cx='353' cy='300' r='14'/%3E%3Ccircle cx='222' cy='186' r='4.5'/%3E%3Ccircle cx='58' cy='344' r='4.5'/%3E%3C/svg%3E");
}
.z-scene--light .z-half--art::after {
  opacity: .26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' fill='none' stroke='%23141210' stroke-width='.9'%3E%3Ccircle cx='42' cy='40' r='3.5'/%3E%3Cpath d='M148 28 h18 M157 19 v18'/%3E%3Crect x='124' y='126' width='24' height='24' rx='5'/%3E%3Ccircle cx='62' cy='156' r='10'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  .z-half--art::before { background-size: 320px 320px; opacity: .38; }
  .z-half--art::after  { background-size: 160px 160px; opacity: .24; }
}
@media (prefers-reduced-motion: reduce) {
  .z-half--art::before,
  .z-half--art::after { animation: none !important; }
}

/* -------------------------------------------------------------------------
   TYPE
   ------------------------------------------------------------------------- */
.z-scene .z-eyebrow .elementor-heading-title {
  font-family: var(--z-font-latin);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
}
.z-scene .z-eyebrow .elementor-heading-title::before {
  content: ""; inline-size: 26px; block-size: 1px;
  background: currentColor; opacity: .55; flex: none;
}
.z-scene .z-title .elementor-heading-title { letter-spacing: -.02em; }
.z-scene .z-lead p:last-child { margin-bottom: 0; }
.z-scene .z-lead { max-inline-size: 42ch; }
/* No permanent will-change here. The words are split once for the headline
   reveal and never move again, so a standing compositor layer per word — five
   words per heading, across every scene — was paid for forever to buy one
   0.9s tween. GSAP promotes what it animates while it animates. */
.z-scene .z-word { display: inline-block; }

/* -------------------------------------------------------------------------
   SPACING RHYTHM
   Related things sit close, groups sit apart. The container gap is 8px —
   these margins build the 8 / 18 / 28 step on top of it.
   ------------------------------------------------------------------------- */
.z-scene .z-lead { margin-block-start: 10px; }
.z-scene .z-btn,
.z-scene .z-hero-cta { margin-block-start: 20px; }
.z-cards { margin-block-start: 28px; }
.z-film  { margin-block-start: 28px; }

/* Line heights are set per-widget in Elementor; these are only the fallback
   for any heading added later without a line-height of its own. */
.z-scene .z-title .elementor-heading-title:not([style*="line-height"]) { line-height: 1.28em; }

/* -------------------------------------------------------------------------
   ARTWORK
   ------------------------------------------------------------------------- */
.z-art img {
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 100%;
  display: block;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   HERO — two clean columns, no overlay, no overlap
   ------------------------------------------------------------------------- */
.z-hero { position: relative; overflow: hidden; }
.z-hero::after { content: none; }          /* the veil is gone: nothing overlaps now */

.z-hero .z-hero-artwrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.z-hero .z-hero-art img { inline-size: 100%; max-inline-size: 100%; }

.z-hero .z-hero-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: right;
}
.z-hero .z-hero-copy .elementor-widget { inline-size: 100%; }
.z-hero .z-lead { max-inline-size: 38ch; }

.z-hero-cta .elementor-button {
  border: 0;
  border-block-end: 1px solid rgba(251,249,245,.8);
  border-radius: 0;
  background: transparent;
  /* letter-spacing used to be animated here. It is a LAYOUT property: every
     frame re-measured the text and the button's own width, so the whole line
     reflowed on hover instead of compositing. Colour and border only. */
  transition: border-color .25s ease, color .25s ease;
}
.z-hero-cta .elementor-button:hover {
  background: transparent; transform: none;
  border-block-end-color: var(--z-steel-light);
}

/* The primary CTA carries the most visual weight on the page */
.z-hero-btn .elementor-button {
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  transition: background-color .35s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.z-hero-btn .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
}

/* -------------------------------------------------------------------------
   MATERIAL CARDS
   ------------------------------------------------------------------------- */
.z-materials .z-title .elementor-heading-title { max-inline-size: 18ch; margin-inline: auto; }
.z-cards { inline-size: 100%; margin-block-start: 26px; align-items: stretch; }
/* Radius, background, border and shadow now live in the Elementor settings
   so they stay editable. Keep only the hover lift here. */
.z-scene .z-card {
  border-radius: 22px;
  /* .2s for the same reason as the product card above. */
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.z-scene .z-card:hover { transform: translateY(-6px); }
.z-ico img { inline-size: 68px; block-size: 68px; margin-inline: auto; display: block; }
.z-card-p { max-inline-size: 30ch; margin-inline: auto; }
.z-card .z-card-t { margin-block-start: 10px; }
.z-card .z-card-p { margin-block-start: 4px; }

/* -------------------------------------------------------------------------
   LIFESTYLE SCENE — the one photographic moment on the page
   ------------------------------------------------------------------------- */
.z-life .z-title .elementor-heading-title { max-inline-size: 16ch; margin-inline: auto; }
.z-life .z-lead { max-inline-size: 54ch; margin-inline: auto; }
/* A soft vignette keeps the copy legible whatever photo sits behind it */
.z-life::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(72% 60% at 50% 50%, rgba(20,18,15,.15), rgba(20,18,15,.78) 82%);
}

/* -------------------------------------------------------------------------
   TRUST STRIP
   The four cards live in an inner row (.z-trust-row) rather than directly in
   the section. The section is a full-screen .z-scene, so cards placed in it
   directly would stretch to the whole screen height. The inner row hugs its
   content, and the cards stretch to match each other inside it.
   ------------------------------------------------------------------------- */
.z-trust .z-trust-row {
  inline-size: 100%;
  align-items: stretch;
}
.z-trust .z-trust-item {
  flex: 1 1 0;
  min-inline-size: 0;
  padding: 26px 18px;
  border-radius: 18px;
  /* The strip sits on stone, so the card surface is raised to near-white to
     keep the card readable as a separate surface from the band behind it. */
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(124,137,99,.22);
  display: flex;
  flex-direction: column;
}
.z-trust .elementor-icon-box-title { margin-block-end: 6px; }
.z-trust .elementor-icon-box-description { font-size: 14px; line-height: 1.8em; }
.z-trust .elementor-icon-box-icon { margin-block-end: 14px; }
@media (max-width: 1024px) {
  .z-trust .z-trust-item { flex: 1 1 auto; }
}

/* -------------------------------------------------------------------------
   JOURNEY INTRO + FILM
   ------------------------------------------------------------------------- */
.z-journey .z-title .elementor-heading-title { max-inline-size: 20ch; margin-inline: auto; }
.z-film { inline-size: 100%; max-inline-size: 900px; margin-block-start: 26px; }
.z-film .elementor-wrapper {
  border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

.z-btn .elementor-button { transition: background-color .35s ease, color .35s ease, transform .35s ease; }
.z-btn .elementor-button:hover { transform: translateY(-2px); }

.z-js .z-rv { opacity: 0; }

/* -------------------------------------------------------------------------
   TABLET & MOBILE
   Columns stack. Text always comes first, the drawing sits underneath it.
   The diagonal turns into a gentle horizontal band between the two.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --z-r-xl: 30px; }

  /* Widths are set per-device in Elementor (100% on tablet and mobile).
     Only the stacking ORDER is enforced here, so the text always reads
     before the drawing no matter which column comes first in the markup. */
  /* The parent class in each selector is load-bearing, not decoration.
     Elementor ships `.elementor-element { order: var(--order) }` in
     custom-frontend.min.css — the same specificity (0,1,0) as a bare
     `.z-hero-copy`, and it loads AFTER this file, so it won. `--order` is
     never set, which makes the declaration invalid at computed-value time,
     and order fell back to its initial 0. That is why the drawing kept
     rendering above the copy on phones however plainly this rule read.
     Two classes beat one. Do not simplify these selectors. */
  .z-scene .z-half--text, .z-hero .z-hero-copy    { order: 1; }
  .z-scene .z-half--art,  .z-hero .z-hero-artwrap { order: 2; }

  .z-half--text, .z-hero-copy { align-items: flex-end; text-align: right; }
  .z-scene .z-lead, .z-hero .z-lead { max-inline-size: none; }

  .z-art img, .z-hero .z-hero-art img { max-inline-size: 480px; }

  /* THE SEAM DOES NOT SURVIVE THE STACK — it is anchored, not guessed.

     On desktop the seam lives in the 20% corridor between the two columns,
     which is exactly why it never touches anything. Stacked, there is no
     corridor, and the mobile translation used to put a horizontal band at a
     FIXED 45–51% of the section height. That percentage is a guess about where
     the copy ends, and it is only right when the copy happens to be short.

     Measured on /about-zinco/ at 375px, 2026-09-13 — "لماذا الدرجة 304؟":
       section height   920px
       copy ends at     61%
       drawing starts   63%      →  the true boundary is ~62%
       band sat at      45–51%   →  eleven points too high
     so the hairline ran straight through the third bullet, "لا يتآكل مع الوقت".

     The hairline is now drawn on the artwork row's OWN top edge, so it lands on
     the real boundary whatever the copy's length. border-image is used rather
     than a background gradient so the container's Background control in
     Elementor stays free (principle 2 — the admin owns what we make). The tint
     keeps a full-section wash with its clip removed: no edge left to collide
     with anything. */
  .z-scene.z-diag-a::before,
  .z-scene.z-diag-b::before { clip-path: none; opacity: .5; }

  .z-scene.z-diag-a::after,
  .z-scene.z-diag-b::after { content: none; }

  .z-scene.z-diag-a .z-half--art,
  .z-scene.z-diag-b .z-half--art,
  .z-scene.z-diag-a .z-hero-artwrap,
  .z-scene.z-diag-b .z-hero-artwrap {
    border-block-start: 2px solid transparent;
    border-image-source: var(--z-sheen);
    border-image-slice: 1;
  }

  /* The steel sheen is built for ink. On a cream scene it disappears, so the
     line there is drawn in ink at low opacity instead. */
  .z-scene--light.z-diag-a .z-half--art,
  .z-scene--light.z-diag-b .z-half--art,
  .z-scene--light.z-diag-a .z-hero-artwrap,
  .z-scene--light.z-diag-b .z-hero-artwrap {
    border-image-source: linear-gradient(90deg,
      rgba(14,15,16,0), rgba(14,15,16,.20) 28%,
      rgba(14,15,16,.20) 72%, rgba(14,15,16,0));
  }
}

@media (max-width: 767px) {
  /* Elementor drives height through --min-height — override the variable,
     not the property, or Elementor's own rule wins.

     DELIBERATELY INERT — do not "fix" this by adding !important.
     The base rule at the top of this file sets `--min-height: 100svh
     !important`, and !important beats specificity however many classes are
     stacked here, so this line does not apply. That was tried on 2026-09-13:
     with it applied, mobile scenes take their content height, the ~230px of
     dead space in the hero disappears and the CTA rises to 425px from the top
     instead of 785px. Ahmed reviewed both and chose the full screen, because
     "قسم واحد لكل شاشة" is the design system and the phone should not be the
     exception. The line is kept, and kept powerless, so the intent stays
     visible and nobody re-derives this from scratch.
     (.z-materials / .z-products / .z-trust are genuinely auto — they carry
     their own !important override in the 1024 block above, on purpose.) */
  .z-scene.z-scene { --min-height: auto; }
  .z-art img, .z-hero .z-hero-art img { max-inline-size: 330px; }
  .z-ico img { inline-size: 58px; block-size: 58px; }
  .z-scene .z-eyebrow .elementor-heading-title::before { inline-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .z-rv { opacity: 1 !important; transform: none !important; }
}
.z-scene :focus-visible { outline: 2px solid var(--z-steel); outline-offset: 3px; border-radius: 6px; }

/* The "SHOP BORDER FIX" that used to sit here (--theme-border-color reset +
   panel/table border rules for the cart, checkout and account pages) has
   been removed as a duplicate. zinco-shop.css opens with the same reset and
   is loaded after this file on those pages only, so it was always the one
   actually in effect — this copy never had any visible effect, it just
   shipped extra CSS. zinco-shop.css remains the single source for shop-page
   borders. */

/* -------------------------------------------------------------------------
   INTERACTION STATES — hover gating + press feedback

   New scope. Nothing else in this file, in zinco-shop.css or in the theme
   defines :active, so this block is the single source for it. The two rules
   below must stay in THIS order: the touch gate neutralises hover transforms,
   and :active has to come after it or a tap on a phone would be cancelled by
   the gate it is meant to work alongside.
   ------------------------------------------------------------------------- */

/* A touch device fires :hover on tap and leaves it stuck until the next tap
   somewhere else, so every hover-lift in this file reads as a card that got
   nudged and stayed nudged. Gated once here, for the whole file, rather than
   repeating the query at each rule. */
@media (hover: none), (pointer: coarse) {
  .z-shop ul.products li.product:hover,
  .z-scene .z-card:hover,
  .z-values .z-card:hover,
  .z-btn .elementor-button:hover,
  .z-hero-btn .elementor-button:hover,
  .z-form .elementor-button[type="submit"]:hover { transform: none; }
}

/* Press feedback. This matters more than any of the hover work above: hover
   does not exist on a phone, and the phone is where the buying happens.
   Without it a tap on «أضف إلى السلة» returns nothing at all until the cart
   count changes.

   No transition is declared here on purpose. The branded buttons already
   transition transform in their own rules and will ease into the press; the
   WooCommerce buttons carry Blocksy's own colour transitions, and restating
   `transition` here would replace those wholesale — so they snap instead,
   which for a press is crisp rather than wrong. */
.z-shop ul.products li.product a.button:active,
.z-btn .elementor-button:active,
.z-hero-btn .elementor-button:active,
.z-hero-cta .elementor-button:active,
.z-form .elementor-button[type="submit"]:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce .single_add_to_cart_button:active,
.ct-button:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .z-shop ul.products li.product a.button:active,
  .z-btn .elementor-button:active,
  .z-hero-btn .elementor-button:active,
  .z-hero-cta .elementor-button:active,
  .z-form .elementor-button[type="submit"]:active,
  .woocommerce a.button:active,
  .woocommerce button.button:active,
  .woocommerce .single_add_to_cart_button:active,
  .ct-button:active { transform: none; }
}