/* Add custom CSS styles below */ 
/* ==========================================================================
   TILA & MORE — Salla custom CSS
   Theme: Raed (Twilight). Written against the open-source Raed master branch.
   Paste into: Salla dashboard → Appearance → Theme → Custom code → CSS
   Version 2.4 — 29 Aug 2026 · email removed from the top bar
   --------------------------------------------------------------------------
   READ ME FIRST
   1. Class names below come from the public Raed source. If your installed
      version differs, a rule may not bite. Nothing here can break your store —
      worst case a rule is ignored. Verify with your browser inspector.
   2. Product cards are deliberately left structurally alone, per your decision
      to keep the current card style. They only inherit type and colour.
   3. Everything is scoped and additive. To roll back, delete this file.
   ========================================================================== */


/* ==========================================================================
   1 — FONTS
   Rubik = Arabic + Latin display.  IBM Plex Sans Arabic = body, both scripts.
   Both are SIL Open Font License, free for commercial use.

   NOTE: @import is render-blocking. Once you buy the Jedira webfont licence,
   self-host all three as WOFF2 and replace this block with @font-face rules
   (template at the bottom of this file).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600&display=swap');


/* ==========================================================================
   2 — BRAND TOKENS
   Raed reads these custom properties throughout, so overriding them here
   re-skins the whole theme in one move. This is the highest-leverage block
   in the file — it replaces #de810b everywhere it appears.
   ========================================================================== */
:root {
  /* Applied brand palette, sampled from your own campaign work */
  --tila-terracotta:      #CC8460;
  --tila-terracotta-dark: #B4713F;
  --tila-lavender:        #C0B4CC;
  --tila-lavender-light:  #D6CEDE;
  --tila-cream:           #F0D8C0;   /* section fields */
  --tila-paper:           #FAF3E9;   /* page background — paler than the field */
  --tila-white:           #FFFFFF;   /* product surfaces */
  --tila-ink:             #14262B;   /* headings, body */
  --tila-ink-soft:        #4A5A5F;   /* secondary text */
  --tila-line:            rgba(20, 38, 43, .14);

  /* --- Raed's own variables, remapped --- */
  --color-primary:         var(--tila-terracotta);
  --color-primary-d:       var(--tila-terracotta-dark);
  --color-primary-dark:    var(--tila-terracotta-dark);
  --color-primary-l:       #DBA88C;
  --color-primary-light:   #DBA88C;
  --color-primary-reverse: var(--tila-ink);
  --main-text-color:       var(--tila-ink);
  --main-text-color-dark:  var(--tila-ink);
  --color-text:            var(--tila-ink-soft);
  --color-grey:            var(--tila-paper);
  --color-light-grey:      #EDE3D4;
  --bg-gray:               rgba(240, 216, 192, .35);
  --infinte-color:         var(--tila-line);

  --font-main: 'IBM Plex Sans Arabic', 'DINNextLTArabic', system-ui, sans-serif;

  /* Type + spacing scale used by the rules below */
  --tila-display: 'Rubik', 'IBM Plex Sans Arabic', sans-serif;
  --tila-body:    'IBM Plex Sans Arabic', sans-serif;
  --tila-radius:  4px;
  --tila-ease:    cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================================
   3 — GLOBAL TYPE & CANVAS
   The rule that creates the look: a deliberate gap between display sizes and
   body sizes. Nothing lives between 44px and 20px.
   ========================================================================== */
body {
  font-family: var(--tila-body);
  background: var(--tila-paper);
  color: var(--tila-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .s-block__title h2, .s-block__title h3 {
  font-family: var(--tila-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--tila-ink);
}

/* Arabic needs more leading than Latin at the same size */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 { line-height: 1.25; }

h1 { font-size: clamp(34px, 5.4vw, 74px); line-height: 1.05; }
h2 { font-size: clamp(26px, 3.6vw, 46px); line-height: 1.1; }
h3 { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.15; }

/* Small refined supporting text — the counterweight to the big headlines */
.tila-micro,
.s-block__title .sub-title {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tila-ink-soft);
}


/* ==========================================================================
   4 — SECTION RHYTHM
   Generous, consistent vertical space is most of what separates an editorial
   site from a template. Raed wraps every homepage module in .s-block.
   ========================================================================== */
/* v1.2 — reduced again, close to Raed's own spacing. The remaining white space
   on the homepage is coming from the banner blocks themselves, not from here. */
.s-block { padding-top: 12px; padding-bottom: 12px; }

@media (min-width: 1024px) {
  .s-block { padding-top: 24px; padding-bottom: 24px; }
}

/* v1.2 — banner blocks. These reserve more height than the image inside them,
   which leaves a pale band above and below the picture. This makes the image
   fill its block and removes any forced minimum height.
   NOTE: this is a best guess made without inspecting your live page. If the
   banners still look wrong after this, the real fix is re-uploading them at
   the size Salla expects — not more CSS. */
.s-block--fixed-banner,
.s-block--banners,
.banner,
.banner-entry,
.full-banner-entry {
  min-height: 0 !important;
}

.s-block--fixed-banner img,
.s-block--banners img,
.banner img,
.banner-entry img,
.full-banner-entry img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.s-block__title { margin-bottom: 28px; }

@media (min-width: 1024px) {
  .s-block__title { margin-bottom: 44px; }
}

.s-block__title h2 {
  font-family: var(--tila-display);
  font-weight: 300;
}

/* v1.1 — the alternating full-width cream bands were removed. They fought
   Raed's container widths and made sections look detached. If you want a
   coloured band later, we'll do it on one specific section, not by position. */


/* ==========================================================================
   5 — HEADER
   Cream bar, hairline rule, quieter nav. The hide-on-scroll behaviour is in
   the companion JS file.
   ========================================================================== */
.store-header .main-nav-container,
.store-header .inner {
  background: var(--tila-paper) !important;
  box-shadow: none !important;
}

.store-header .main-nav-container {
  border-bottom: 1px solid var(--tila-line);
}

.top-navbar {
  background: var(--tila-ink);
  color: var(--tila-paper);
  font-size: 11px;
  letter-spacing: .14em;
}

.top-navbar a,
.top-navbar span { color: var(--tila-paper); }

/* The email sat in the top bar as a <salla-contacts> element. Hidden here
   only — the footer contacts are scoped to .store-footer and are untouched. */
.top-navbar salla-contacts { display: none !important; }

.navbar-brand img { max-height: 42px; width: auto; }

/* Main menu links */
.main-nav-container .navbar-nav > li > a,
.main-nav-container .mainMenu > li > a {
  font-family: var(--tila-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tila-ink);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .24s var(--tila-ease);
}

.main-nav-container .navbar-nav > li > a:hover,
.main-nav-container .mainMenu > li > a:hover {
  border-bottom-color: var(--tila-ink);
  opacity: 1;
}

.header-btn__icon,
.mburger .sicon-menu { color: var(--tila-ink) !important; }

/* Header applied by the JS: slides away on scroll down, returns on scroll up */
.store-header { transition: transform .32s var(--tila-ease); }
.tila-header-hidden .store-header { transform: translateY(-100%); }


/* ==========================================================================
   6 — BUTTONS
   Primary CTA is ink, not terracotta. Ink never fails contrast, reads more
   premium, and keeps terracotta scarce enough to stay special.
   White on terracotta fails WCAG contrast — never use that pairing.
   ========================================================================== */
.btn,
salla-button .s-button-btn {
  border-radius: var(--tila-radius) !important;
  font-family: var(--tila-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  padding-top: 14px;
  padding-bottom: 14px;
  transition: background-color .24s var(--tila-ease), opacity .24s var(--tila-ease);
}

.btn--primary,
salla-button[color="primary"] .s-button-btn,
.s-button-primary {
  background: var(--tila-ink) !important;
  color: var(--tila-paper) !important;
  border-color: var(--tila-ink) !important;
}

.btn--primary:hover,
salla-button[color="primary"] .s-button-btn:hover {
  background: #22383F !important;
  opacity: 1 !important;
}

/* Secondary — outline */
.btn--outline,
.s-button-outline {
  background: transparent !important;
  color: var(--tila-ink) !important;
  border: 1px solid var(--tila-ink) !important;
}

/* Minimum 44px tap target on mobile */
@media (max-width: 767px) {
  .btn, salla-button .s-button-btn { min-height: 46px; }
}


/* ==========================================================================
   7 — PRODUCT CARDS
   Structure intentionally untouched. Type, colour and corner radius only,
   so cards sit inside the new system without changing their layout.
   ========================================================================== */
.s-product-card-entry {
  border-radius: var(--tila-radius);
  background: var(--tila-white);
  box-shadow: none;
}

.s-product-card-shadow:hover { box-shadow: 0 8px 28px rgba(20, 38, 43, .07); }

.s-product-card-image { border-radius: var(--tila-radius) var(--tila-radius) 0 0; }

.s-product-card-content-title a {
  font-family: var(--tila-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--tila-ink);
}

.s-product-card-price {
  font-family: var(--tila-body);
  font-weight: 600;
  color: var(--tila-ink);
  font-variant-numeric: tabular-nums;
}

.s-product-card-sale-price { color: var(--tila-terracotta-dark); }

.s-product-card-promotion-title,
.s-product-card-out-badge {
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Promotion flags — replace Raed's red.
   Raed sets these with Tailwind `bg-red-800` / `bg-red-400` and forces the
   sale price with `text-red-800 !important`, so these need !important to win.
   Ink was chosen over terracotta deliberately: terracotta is reserved for
   colour names and sale tags, and loses its meaning if it is also every
   "best seller" flag. Never white-on-terracotta — that combination fails
   contrast.
   -------------------------------------------------------------------------- */
.s-product-card-promotion-title,
.promotion-title {
  background: var(--tila-ink) !important;
  color: var(--tila-paper) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}

/* Low-stock badge ("متبقي ٣") */
.s-product-card-quantity {
  background: var(--tila-terracotta) !important;
  color: var(--tila-ink) !important;
}

/* Sale price — terracotta instead of red */
.s-product-card-sale-price h4,
.s-product-price.has-sale-price,
.total-price .has-sale-price {
  color: var(--tila-terracotta) !important;
}


/* ==========================================================================
   8 — COLOUR SYSTEM UTILITIES
   For the colour tag pages (colour-pink, colour-matcha, …).
   Add class "tila-swatch" + the colour class to any element to render a chip.
   Hex values are your placeholders — replace once sampled from real beads.
   ========================================================================== */
.tila-swatch {
  display: inline-block;
  width: 44px; height: 44px;
  border-radius: var(--tila-radius);
  box-shadow: inset 0 0 0 1px rgba(20, 38, 43, .12);
  vertical-align: middle;
}

.tila-c-white       { background: #F6F2EA; }
.tila-c-pastel-pink { background: #F3C4CF; }
.tila-c-pink        { background: #E98CA5; }
.tila-c-coral       { background: #E97C6E; }
.tila-c-orange      { background: #E88736; }
.tila-c-yellow      { background: #F2D85B; }
.tila-c-gold        { background: #C6A15B; }
.tila-c-brown       { background: #8B664E; }
.tila-c-matcha      { background: #A8B47A; }
.tila-c-green       { background: #5E8A61; }
.tila-c-turquoise   { background: #43B6B2; }
.tila-c-light-blue  { background: #AFCFE2; }
.tila-c-blue        { background: #4D79B8; }
.tila-c-navy        { background: #283A59; }
.tila-c-purple      { background: #8E71B2; }

/* Horizontal swatch rail — the Tila Spectrum */
.tila-spectrum {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.tila-spectrum::-webkit-scrollbar { height: 0; }
.tila-spectrum > * { flex: 0 0 132px; scroll-snap-align: start; }
.tila-spectrum .tila-swatch { width: 100%; height: auto; aspect-ratio: 1; }

@media (min-width: 1024px) {
  .tila-spectrum > * { flex: 0 0 180px; }
}

/* Colour name label, used above product titles */
.tila-colour-name {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tila-terracotta-dark);
  display: block;
  margin-bottom: 3px;
}


/* ==========================================================================
   9 — FILTERS, FORMS, CART
   ========================================================================== */
input, select, textarea, .form-input {
  border-radius: var(--tila-radius) !important;
  border-color: var(--tila-line) !important;
  font-family: var(--tila-body);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--tila-ink) !important;
  box-shadow: none !important;
  outline: none;
}

.s-filter-item, .filter-item { font-family: var(--tila-body); }


/* ==========================================================================
   10 — FOOTER
   Rewritten 29 Aug 2026 against the real DOM, read from the live page:

     footer.store-footer
       .store-footer__inner
         .container.grid.lg:grid-cols-6
           div.lg:col-span-2      brand: logo · description · salla-social · salla-trust-badges
           div                    h3 «روابط مهمة» · salla-menu
           div                    salla-contacts · .contact-social
           salla-apps-icons
       div.md:flex…py-4           .copyright-text · salla-payments

   The list, contacts, social, badge and payment blocks are Salla web
   components rendered by their own script. Rules below style the host and
   reach inside where the markup is light DOM. If Salla renders any of them
   into shadow DOM, that block will keep its default look and needs a
   different approach — say so and we will handle those individually.
   ========================================================================== */

/* Softer than the near-black default: the deep teal-charcoal from the
   «لماذا تيلا» artwork, not the page ink. */
/* Raed paints .store-footer__inner near-black (#1D1F1F) on top of the footer,
   which is what made it read as black — and made the bottom row look like a
   separate lighter strip. All three surfaces get the same colour, and the
   selector is element+class so it outweighs Raed's own rule. */
footer.store-footer,
footer.store-footer .store-footer__inner,
footer.store-footer > div {
  background-color: #22333B !important;
}
.store-footer {
  color: var(--tila-paper);
  font-family: var(--tila-body);
}

.store-footer__inner { padding-top: 26px; padding-bottom: 4px; }
@media (min-width: 1024px) {
  .store-footer__inner { padding-top: 56px; padding-bottom: 14px; }
}

.store-footer > .store-footer__inner > .container { row-gap: 20px; }
@media (min-width: 1024px) {
  .store-footer > .store-footer__inner > .container { row-gap: 0; }
}

.store-footer a,
.store-footer p,
.store-footer li,
.store-footer span { color: var(--tila-paper) !important; }

.store-footer a,
.store-footer li { opacity: .82; transition: opacity .22s var(--tila-ease); }
.store-footer a:hover { opacity: 1; }

/* Column headings — quiet, spaced, uppercase */
.store-footer h3,
.store-footer .footer-title {
  font-family: var(--tila-body);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tila-paper) !important;   /* was inheriting ink — unreadable */
  opacity: .55;
  margin-bottom: 10px;
}

/* --- Brand introduction: compact, RTL, not a wall of text ---------------- */
.store-footer .max-w-sm {
  font-size: 13px;
  line-height: 1.85;
  opacity: .8;
  max-width: 34ch;
  margin-bottom: 14px !important;
}
.store-footer .max-w-sm p { margin-bottom: 6px; }
.store-footer .max-w-sm p:last-child { margin-bottom: 0; }
.store-footer .navbar-brand img,
.store-footer__inner a.flex img { max-height: 30px; width: auto; margin-bottom: 12px; }

/* --- Links list ---------------------------------------------------------- */
.store-footer salla-menu { display: block; }
.store-footer salla-menu ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.store-footer salla-menu a { font-size: 13px; line-height: 1.6; }

/* --- Contact ------------------------------------------------------------- */
.store-footer salla-contacts { display: block; }
.store-footer salla-contacts ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.store-footer salla-contacts a,
.store-footer salla-contacts li { font-size: 13px; direction: ltr; text-align: start; }
html[dir="rtl"] .store-footer salla-contacts a { unicode-bidi: plaintext; }
/* The circle around each contact icon is drawn by Salla, not by this file.
   Forcing width/height: 15px on it squashed that circle and threw the glyph
   off-centre. Size is left to Salla; this only centres the glyph inside
   whatever box it uses, and spaces it from the text. */
.store-footer salla-contacts a,
.store-footer salla-contacts li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.store-footer salla-contacts i,
.store-footer salla-contacts svg {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 15px;
  opacity: .6;
  margin: 0 !important;
  vertical-align: middle;
}

/* --- Hide the blog link from the footer ---------------------------------- */
/* Matched on the destination rather than the label, so it keeps working
   whatever the page is called and in either language. This hides it in the
   FOOTER only — المدونة is still in your main navigation. Say the word if you
   want it gone from there too. */
.store-footer a[href*="/blog"] { display: none !important; }

/* --- Social row: equal size, equal spacing, delicate circular outlines ---- */
/* Do NOT set display on these: `.contact-social` carries Tailwind's `lg:hidden`
   and a plain `display:block` here outranks it, which showed the mobile social
   row on desktop as well — two identical rows. Style the list only. */
@media (min-width: 1024px) {
  .store-footer .contact-social { display: none !important; }
}
.store-footer salla-social ul,
.store-footer .contact-social ul {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.store-footer salla-social a,
.store-footer .contact-social a {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(250, 243, 233, .28);
  border-radius: 50%;
  opacity: .85;
  transition: border-color .22s var(--tila-ease), opacity .22s var(--tila-ease);
}
.store-footer salla-social a:hover,
.store-footer .contact-social a:hover {
  border-color: rgba(250, 243, 233, .7);
  opacity: 1;
}
.store-footer salla-social i,
.store-footer .contact-social i,
.store-footer salla-social svg,
.store-footer .contact-social svg { font-size: 15px; width: 15px; height: 15px; }

/* --- وثيقة العمل الحر — a small trust mark, not a focal point ------------- */
.store-footer salla-trust-badges {
  display: block;
  margin-top: 4px;
  opacity: .5;
  transition: opacity .22s var(--tila-ease);
}
.store-footer salla-trust-badges:hover { opacity: .85; }
.store-footer salla-trust-badges img,
.store-footer salla-trust-badges svg { max-height: 30px !important; width: auto !important; }

/* --- Thin divider before the social / payment area ----------------------- */
.store-footer .md\:flex.items-center.justify-between,
.store-footer__inner + div {
  border-top: 1px solid rgba(250, 243, 233, .14);
  margin-top: 6px;
  padding-top: 14px !important;
  padding-bottom: 16px !important;
  gap: 18px;
}

/* --- Payments: smaller, evenly spaced, no contrasting strip -------------- */
.store-footer salla-payments {
  display: block;
  background: transparent !important;
}
.store-footer salla-payments ul,
.store-footer salla-payments > div {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; margin: 0; padding: 0; list-style: none;
  background: transparent !important;
}
.store-footer salla-payments img,
.store-footer salla-payments svg {
  height: 22px !important; width: auto !important;
  opacity: .75;
  background: transparent !important;
}

/* --- Salla credit: present but secondary --------------------------------- */
.store-footer .copyright-text,
.store-footer .copyright-text p,
.store-footer .copyright-text a {
  font-size: 11px !important;
  letter-spacing: .06em;
  color: var(--tila-paper) !important;
  opacity: .5;
}
.store-footer .copyright-text a:hover { opacity: .75; }

/* --- Mobile: reorder into one connected column, and tighten ------------- */
/* Requested order: intro -> links -> contact -> وثيقة العمل الحر -> divider
   -> social -> site / payments.
   The certificate sits inside the brand column and the social row sits inside
   the contact column, so neither can be moved by `order` alone.
   `display: contents` dissolves those two wrappers on mobile only, promoting
   their children to grid items that CAN be ordered. Desktop is untouched.
   This is the most fragile rule in the file: it depends on the grid keeping
   three div children in this sequence. If Salla changes the footer markup the
   order reverts to source order — it degrades, it does not break. */
@media (max-width: 1023px) {
  .store-footer__inner > .container { padding-inline: 20px; row-gap: 16px; }

  .store-footer__inner > .container > div:nth-child(1) { display: contents; }
  .store-footer__inner > .container > div:nth-child(1) > a { order: 1; }
  .store-footer__inner > .container > div:nth-child(1) > .max-w-sm { order: 2; margin-bottom: 4px !important; }
  .store-footer__inner > .container > div:nth-child(1) > .flex { order: 5; }

  .store-footer__inner > .container > div:nth-child(2) { order: 3; }

  .store-footer__inner > .container > div:nth-child(3) { display: contents; }
  .store-footer__inner > .container > div:nth-child(3) > salla-contacts { order: 4; }
  .store-footer__inner > .container > div:nth-child(3) > .contact-social {
    order: 7;
    width: 100%;
    border-top: 1px solid rgba(250, 243, 233, .14);
    padding-top: 16px;
    margin-top: 4px;
  }

  .store-footer__inner > .container > salla-apps-icons { order: 8; margin-top: 2px; }
  .store-footer salla-trust-badges { margin-top: 0; }

  .store-footer .md\:flex.items-center.justify-between {
    flex-direction: column;
    align-items: flex-start;
    padding-inline: 20px;
    gap: 12px;
  }
}

/* --- Desktop: close the empty column and the oversized gutters ----------- */
@media (min-width: 1024px) {
  .store-footer__inner > .container { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
  .store-footer__inner > .container > salla-apps-icons { grid-column: auto; }
  .store-footer__inner > .container > salla-apps-icons:empty { display: none; }
  .store-footer .rtl\:lg\:pl-20 { padding-left: 0 !important; }
  .store-footer .ltr\:lg\:pr-20 { padding-right: 0 !important; }
  .store-footer .rtl\:lg\:pr-20 { padding-right: 0 !important; }
  .store-footer .ltr\:lg\:pl-20 { padding-left: 0 !important; }
}

/* --- tilaandmore.com reads as a line, not a call-to-action --------------- */
.store-footer salla-apps-icons a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .6;
}
.store-footer salla-apps-icons a:hover { opacity: .9; }

/* Remove the floating WhatsApp bubble — WhatsApp belongs in the footer,
   the mobile menu, and one line on the product page. Delete this rule if
   you decide to keep the bubble. */
.whatsapp-btn,
[class*="whatsapp-float"],
salla-whatsapp-btn { display: none !important; }


/* ==========================================================================
   11 — MOTION
   Five behaviours only. Everything else stays still.
   ========================================================================== */
.tila-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--tila-ease), transform .6s var(--tila-ease);
}
.tila-reveal.is-in { opacity: 1; transform: none; }

/* Mobile sticky add-to-bag bar, injected by the JS file */
.tila-sticky-atc {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--tila-ink);
  color: var(--tila-paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .3s var(--tila-ease);
  font-family: var(--tila-body);
}
.tila-sticky-atc.is-in { transform: none; }
.tila-sticky-atc .price { font-weight: 600; font-variant-numeric: tabular-nums; }
.tila-sticky-atc button {
  background: var(--tila-paper);
  color: var(--tila-ink);
  border-radius: var(--tila-radius);
  padding: 12px 22px;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 700;
}
@media (min-width: 768px) { .tila-sticky-atc { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .tila-reveal { opacity: 1; transform: none; transition: none; }
  .store-header { transition: none; }
  * { scroll-behavior: auto !important; }
}


/* ==========================================================================
   12 — SELF-HOSTED FONT TEMPLATE
   Use this once you own the Jedira webfont licence. Upload the WOFF2 files to
   Salla, then uncomment and replace the URLs. Delete the @import at the top.
   ========================================================================== */
/*
@font-face {
  font-family: 'Jedira';
  src: url('https://cdn.salla.sa/YOUR-STORE-ID/jedira-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root { --tila-display-latin: 'Jedira', Georgia, serif; }
h1 [lang="en"], .tila-latin-display { font-family: var(--tila-display-latin); }
*/


/* ==========================================================================
   13 — SHOP BY COLOUR RAIL
   Styles Salla's "Quick Links" block (.s-block--categories) into the Tila
   spectrum. Each link is matched on the tag id inside its href, so the
   swatches stay correct even if the slider reorders or clones slides.
   ========================================================================== */

.s-block--categories .slide--cat-entry {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 6px 0 !important;
  gap: 11px;
}
.s-block--categories .slide--cat-entry:hover {
  box-shadow: none !important;
  color: var(--tila-ink) !important;
}
/* Square, not round. A Tila bead IS a small square glass tile — the swatch
   should be the same shape as the thing it is selling. The tiny 3px radius
   matches the corner softening on the beads themselves. To go back to circles,
   change the border-radius below to 50%. */
.s-block--categories .slide--cat-entry i {
  width: 44px;
  height: 44px;
  border-radius: 3px;
  margin: 0 !important;
  background: var(--tila-cream);
  box-shadow: inset 0 0 0 1px rgba(20, 38, 43, .12);
  transition: transform .35s var(--tila-ease);
}
.s-block--categories .slide--cat-entry i::before { content: none !important; }
.s-block--categories .slide--cat-entry:hover i { transform: scale(1.08); }
.s-block--categories .slide--cat-entry h2 {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--tila-ink-soft);
  letter-spacing: .01em;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .s-block--categories .slide--cat-entry i { width: 48px; height: 48px; }
  .s-block--categories .slide--cat-entry h2 { font-size: 11.5px !important; }
}

/* The seventeen Tila colours */
.s-block--categories a[href*="1118943409"] i { background: #F6F2EA; }   /* أبيض */
.s-block--categories a[href*="1853613747"] i { background: #F3C4CF; }   /* وردي باستيل */
.s-block--categories a[href*="1678394302"] i { background: #E98CA5; }   /* وردي */
.s-block--categories a[href*="1570414777"] i { background: #E97C6E; }   /* مرجاني */
.s-block--categories a[href*="1843280080"] i { background: #B23A34; }   /* أحمر */
.s-block--categories a[href*="795332538"] i { background: #E88736; }   /* برتقالي */
.s-block--categories a[href*="2035084987"] i { background: #F2D85B; }   /* أصفر */
.s-block--categories a[href*="1260981636"] i { background: #C6A15B; }   /* ذهبي */
.s-block--categories a[href*="620113029"] i { background: #8B664E; }   /* بني */
.s-block--categories a[href*="1993558918"] i { background: #A8B47A; }   /* ماتشا */
.s-block--categories a[href*="1085827719"] i { background: #5E8A61; }   /* أخضر */
.s-block--categories a[href*="310806912"] i { background: #43B6B2; }   /* فيروزي */
.s-block--categories a[href*="1818470529"] i { background: #AFCFE2; }   /* أزرق فاتح */
.s-block--categories a[href*="1044952962"] i { background: #4D79B8; }   /* أزرق */
.s-block--categories a[href*="135648899"] i { background: #283A59; }   /* كحلي */
.s-block--categories a[href*="1710421388"] i { background: #8E71B2; }   /* بنفسجي */
.s-block--categories a[href*="306213900"] i { background: #1E1E1E; }   /* أسود */

@media (prefers-reduced-motion: reduce) {
  .s-block--categories .slide--cat-entry i { transition: none; }
  .s-block--categories .slide--cat-entry:hover i { transform: none; }
}

/* --------------------------------------------------------------------------
   Colour rail — show the whole spectrum at once instead of scrolling.
   Salla renders this block through <salla-slider> (Swiper). Swiper sets a
   translate transform and fixed slide widths inline; stylesheet !important
   beats inline styles, which is what lets us flatten it into a wrapped grid.
   Both `.swiper-wrapper` and `[slot="items"]` are targeted because the
   component moves the slides between them.
   -------------------------------------------------------------------------- */
.s-block--categories .swiper-wrapper,
.s-block--categories [slot="items"] {
  display: flex !important;
  flex-wrap: wrap !important;
  transform: none !important;
  width: 100% !important;
  row-gap: 16px;
  /* Rows fill from the start edge (the right, in Arabic) and the short last
     row hangs off the end like a normal grid. Centring the last row instead
     made it read as a mistake rather than a decision. */
  justify-content: flex-start;
}
.s-block--categories .swiper-slide {
  width: auto !important;
  flex: 0 0 16.6666%;         /* 6 per row on a phone → 6 · 6 · 5 */
  margin: 0 !important;
  transform: none !important;
}
.s-block--categories .swiper-slide-duplicate { display: none !important; }

/* Arrows are pointless once nothing scrolls */
.s-block--categories .s-slider-controls,
.s-block--categories .swiper-button-next,
.s-block--categories .swiper-button-prev { display: none !important; }

@media (min-width: 640px) {
  .s-block--categories .swiper-slide { flex-basis: 11.1111%; }   /* 9 per row → 9 · 8 */
}

/* Desktop: the entire spectrum on one line */
@media (min-width: 1024px) {
  .s-block--categories .swiper-slide { flex-basis: 5.8823%; }    /* all 17 */
}


/* ==========================================================================
   14 — WHY TILA  ·  trust section
   Skins Salla's native Store Features block into Sara's «لماذا تيلا» design.

   Selectors verified against the LIVE page, not guessed. Real structure is:
     section.s-block.s-block--features.container
       > div.grid.grid-cols-[...]           <- Tailwind arbitrary-value grid
         > div.s-block--features__item
             > div.feature-icon > i.sicon-*
             > h2
             > p
   Two gotchas that broke v1.7: the item is `__item` (not .feature-item / li)
   and the title is an h2 (not h3). The grid's gap comes from Tailwind
   utilities, so it needs !important to become a 1px hairline.

   Salla only permits its own sicon glyphs, so the real line-art marks are
   painted here as inline SVG and the glyph is hidden.
   ========================================================================== */
.s-block--features { background: var(--tila-paper); }

.s-block--features > .grid {
  background: var(--tila-line);
  gap: 1px !important;
  border-radius: 0;
  overflow: hidden;
}

.s-block--features__item {
  background: var(--tila-paper) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: clamp(26px, 4vw, 44px) clamp(16px, 2.6vw, 30px) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

/* The terracotta disc behind Salla's glyph is removed — these are line marks */
.s-block--features .feature-icon {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-block--features .feature-icon i {
  display: block;
  width: 46px;
  height: 46px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent !important;
  font-size: 0 !important;
}
.s-block--features .feature-icon i::before { content: none !important; }

.s-block--features__item:nth-child(1) .feature-icon i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 46 46%22 fill=%22none%22 stroke=%22%2314262B%22 stroke-width=%221.15%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%226%22 y=%2216%22 width=%2210%22 height=%2214%22 rx=%221.5%22/%3E%3Crect x=%2218%22 y=%2216%22 width=%2210%22 height=%2214%22 rx=%221.5%22/%3E%3Crect x=%2230%22 y=%2216%22 width=%2210%22 height=%2214%22 rx=%221.5%22/%3E%3Cpath d=%22M2 23h4M40 23h4%22/%3E%3C/svg%3E"); }
.s-block--features__item:nth-child(2) .feature-icon i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 46 46%22 fill=%22none%22 stroke=%22%2314262B%22 stroke-width=%221.15%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M23 8l12 4v10c0 8-6 13-12 16-6-3-12-8-12-16V12z%22/%3E%3Cpath d=%22M18 23l4 4 7-8%22/%3E%3C/svg%3E"); }   /* shield — ضمان */
.s-block--features__item:nth-child(3) .feature-icon i { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 46 46%22 fill=%22none%22 stroke=%22%2314262B%22 stroke-width=%221.15%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M23 34c-5-4-11-8.5-11-15a6 6 0 0111-3 6 6 0 0111 3c0 6.5-6 11-11 15z%22/%3E%3C/svg%3E"); }   /* heart — العملاء */

.s-block--features__item h2 {
  font-family: var(--tila-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: var(--tila-ink);
  margin: 0 !important;
}
.s-block--features__item p {
  font-size: 13px !important;
  line-height: 1.65;
  color: var(--tila-ink-soft);
  max-width: 210px;
  margin: 0 !important;
}

@media (min-width: 1024px) {
  .s-block--features__item { gap: 17px; }
}