/* Add custom CSS styles below */ 
/* ═══════════════════════════════════════════════════════════════
   IBRANDS SHOP — SITE-WIDE CSS
   Paste into: Salla → Store Design → Raed → (…) → Customize copy
                → theme customization → Custom CSS
   Contains: design tokens + shared motion utilities.
   Every homepage block references these.

   SAFE BY DEFAULT: all motion is gated behind .ib-js, which the
   Custom JS adds to <html>. If the JS is ever stripped or fails,
   nothing hides — the page just renders static. Never blank.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── palette: one warm neutral family, no second hue ── */
  --ib-paper:#FAF7F2;   /* birch — page / light surfaces */
  --ib-oat:#F0E9DF;     /* oat — panels, image plate base */
  --ib-latte:#DFD1BF;   /* mocha latte — soft accents */
  --ib-mocha:#B39B82;   /* mocha — the "soft word" in headings */
  --ib-coffee:#7C6450;  /* coffee roast — icons, small marks */
  --ib-cocoa:#463629;   /* chocolate */
  --ib-ink:#2A211A;     /* near-black warm — body text, buttons */
  --ib-soft:#7A6B5D;    /* muted body text (AA on paper) */
  --ib-line:#E5DACB;    /* hairlines */

  /* ── motion ── */
  --ib-ease:cubic-bezier(.22,.61,.36,1);

  /* ── spacing scale ── */
  --ib-s1:4px;  --ib-s2:8px;  --ib-s3:12px; --ib-s4:16px;
  --ib-s5:24px; --ib-s6:32px; --ib-s7:48px; --ib-s8:64px;
}

/* ═══ SHARED MOTION UTILITIES ═══
   Used by every homepage block. Prefixed .ib- so they can't
   collide with anything in Raed. */

/* 1 · reveal on scroll */
.ib-rv{transition:opacity .9s var(--ib-ease),transform .9s var(--ib-ease)}
.ib-js .ib-rv{opacity:0;transform:translateY(24px)}
.ib-js .ib-rv.ib-in{opacity:1;transform:none}
.ib-d1{transition-delay:.09s}
.ib-d2{transition-delay:.18s}
.ib-d3{transition-delay:.27s}
.ib-d4{transition-delay:.36s}

/* 2 · word-by-word heading reveal
   NOTE: the JS splits by WORD, never by letter — splitting Arabic
   into characters breaks letter joining and renders as gibberish.
   padding+negative margin keeps the mask off descenders/diacritics. */
.ib-wr{display:inline-block;overflow:hidden;vertical-align:top;
  padding-block:.18em;margin-block:-.18em}
.ib-wr>i{display:inline-block;font-style:normal;
  transition:transform .9s var(--ib-ease)}
.ib-js .ib-wr>i{transform:translateY(105%)}
.ib-js .ib-in .ib-wr>i,
.ib-js .ib-wr.ib-in>i{transform:none}

/* 3 · image wipe-open */
.ib-wipe{transition:clip-path 1.3s var(--ib-ease)}
.ib-js .ib-wipe{clip-path:inset(0 0 100% 0)}
.ib-js .ib-wipe.ib-in{clip-path:inset(0 0 0 0)}

/* 4 · image plate — forces block so aspect-ratio + overflow apply.
   (Inline spans silently ignore both. This was a real bug.) */
.ib-plate{display:block;position:relative;overflow:hidden;background:var(--ib-oat)}
.ib-plate img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ib-ease)}
.ib-plate__ph{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--ib-mocha);
  background:linear-gradient(150deg,var(--ib-oat) 0%,var(--ib-paper) 46%,var(--ib-latte) 100%);
  animation:ib-kb 20s ease-in-out infinite alternate}
@keyframes ib-kb{from{transform:scale(1.02)}to{transform:scale(1.1)}}

/* ═══ ACCESSIBILITY ═══ */
@media (prefers-reduced-motion: reduce){
  .ib-js .ib-rv,
  .ib-js .ib-wipe{opacity:1;transform:none;clip-path:none}
  .ib-js .ib-wr>i{transform:none}
  .ib-plate__ph{animation:none}
  .ib-rv,.ib-wipe,.ib-wr>i{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   THEME PAGE RESTYLING — product / category / cart
   Intentionally left empty for now. Restyling Raed's internal
   pages blind risks breaking the live store. Send me screenshots
   of the product and category pages (and the inspected class
   names) and I'll write this section against the real DOM.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   IBRANDS — SITE-WIDE PALETTE OVERRIDE
   Append to the BOTTOM of your existing site-wide Custom CSS.

   TRY THE DASHBOARD FIRST: Store Design → Raed → theme settings →
   colours → set primary to #2A211A. That does the same job with no
   code. Only use this patch if that setting is missing or ignored.

   Raed builds its blue from CSS variables, so overriding them
   recolours links, hovers, buttons and badges on EVERY page —
   product, category and cart included.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --color-primary:#2A211A !important;        /* near-black warm — links, buttons */
  --color-primary-dark:#1B1510 !important;   /* pressed / hover states */
  --color-primary-light:#7C6450 !important;  /* coffee — soft accents */
  --color-primary-reverse:#FAF7F2 !important;/* text sitting on primary */
}

/* ── Header links: kill the blue hover ──
   If the variable override alone doesn't catch it, these do.
   Broad on purpose — narrow it once you know the real class name
   (see FINDING THE EXACT SELECTOR at the bottom).                */
header a:hover,
header a:focus,
.main-menu a:hover,
.main-menu__link:hover,
.header-nav a:hover,
.mobile-menu a:hover{
  color:#2A211A !important;
}

/* header icons (search / cart / account) */
header .s-block a:hover svg,
header a:hover svg{
  color:#2A211A !important;
  stroke:#2A211A !important;
}

/* ── Buttons: match the homepage blocks ── */
.btn--primary,
.s-button-primary,
button.btn-primary{
  background-color:#2A211A !important;
  border-color:#2A211A !important;
  color:#FAF7F2 !important;
}
.btn--primary:hover,
.s-button-primary:hover,
button.btn-primary:hover{
  background-color:#1B1510 !important;
  border-color:#1B1510 !important;
}

/* ══════════════════════════════════════════════════════════════════
   FINDING THE EXACT SELECTOR (2 minutes, desktop browser)

   1. Open your store, right-click a header link, choose "Inspect".
   2. The highlighted line shows the element, e.g.
        <a class="main-menu__link" href="...">
   3. Send me that class name and I'll replace the broad rules above
      with one precise rule — safer than blanket !important.

   ── WHAT THIS PATCH DOES NOT DO ──
   It recolours the theme. It does NOT restyle product or category
   page LAYOUT — spacing, card shape, typography scale. Those pages
   will match on colour but still look like stock Raed.
   For that, send me mobile screenshots of a product page and a
   category page and I'll write that section properly.
   ══════════════════════════════════════════════════════════════════ */