/* =====================================================================
   Another Shine — Salla Custom CSS · Theme: Fikra / فكرة 1.21.0
   Version: "Clavix 13/10 – Live" (theme 1035638734 · profile 294204638)
   Store: https://anothershine.com
   Figma: implementation-Projects (GGZr9jxeedwMJX1YEEBGrK) — frame "Shine 1"
          2010:148 (2000 × 12896, home page)
   Mobile: no design — adapted from desktop (§02, §04, §05, §06, §07)
   Verified on the live store at 1280 × 800 and 375 × 812, Oct 13 2026

   v1.0 — Figma pass: page bg, section titles, 2×2 categories, white
   product cards with aligned rows, rounded side/boxed banners shown
   whole, review cards, clickable hero, theme fixes.
   (v0.1 = structure pass: sticky header, duplicate icons, native-ratio
   banners — kept as is.)

   Author: Khaled Omar <KO />
   Portfolio: https://sunnysapartment.com
   LinkedIn: https://linkedin.com/in/khaledmahmoudomar
   GitHub: SunnysApartment

   PALETTE — every brand colour is a :root token, values read from the
   Figma frame unless marked THEME (current theme setting, no Figma value).
   ⚠ Fikra S_* sections have NO component-id. Rules use block classes
     (.S_header_section, .s-categories, .S_products_slider) so they survive
     reordering. No positional ids are used.
   ⚠ Replaces the whole Custom CSS field: the existing WhatsApp-button
     styles are carried over in §10 — keep them when pasting.
   ===================================================================== */
:root {
  /* brand */
  --as-primary:      #584436;   /* THEME primary — buttons, slider arrows   */
  --as-primary-dark: #321e10;   /* THEME primary-dark — hover               */
  --as-bg:           #fff9f9;   /* page background (Figma "Shine 1")        */
  --as-title:        #774c2f;   /* section titles                           */
  --as-ink:          #372415;   /* product titles                           */
  --as-card-bg:      #ffffff;   /* product cards                            */
  --as-footer:       #ab9a87;   /* footer (Figma = theme)                   */
  --as-cream:        #f7ebdf;   /* copyright bar (Figma = theme)            */

  /* reviews */
  --as-review-ink:    #523b25;
  --as-review-accent: #945229;  /* quote mark, avatar ring                  */
  --as-review-avatar: #fff8ee;
  --as-star:          #ffc62a;
  --as-review-border: linear-gradient(135deg, #492109 0%, #ebe0cf 29%, #ebe0cf 65%, #492109 100%);

  /* type — titles are "DG 3asomy Thin" in Figma. The font is not on Salla:
     until its files are uploaded (see §00) titles fall back to the store font. */
  --as-font-display: "DG 3asomy", var(--font-main, "Cairo"), sans-serif;
  --as-title-size:   clamp(1.5rem, 3vw, 3.75rem);   /* 60px @2000, 38px @1280, 24px mobile */

  /* header */
  --as-header-bg:    var(--as-primary);         /* solid header bar (no header in Figma) */
  --as-header-ink:   #ffffff;                   /* menu, icons, top bar  */
  --as-logo-filter:  brightness(0) invert(1);   /* white logo on the bar; `none` = original brown */
  --as-topbar-h:     55px;                      /* measured top bar height (desktop) */

  /* shape — Figma radii scaled from the 2000px frame */
  --as-r-cat:        clamp(16px, 2vw, 40px);    /* category cards   (40 @2000) */
  --as-r-boxed:      clamp(20px, 2.5vw, 50px);  /* boxed banner     (50 @2000) */
  --as-r-side:       clamp(16px, 1.8vw, 36px);  /* side banners     (36 @2000) */
  --as-r-review:     clamp(14px, 1vw, 20px);    /* review cards     (20 @2000) */

  /* media ratios — native ratio of the uploaded images (w / h) */
  --as-ratio-cat:    740 / 796; /* category cards (4× 740×796)          */
}

/* ---------------------------------------------------------------------
   00. BASE
   Page background + product-card colours are theme settings; they are
   set here as variables so the store matches the design either way.
   Editor equivalent: store background #fff9f9 · product card background
   #ffffff · product card border #ffffff · product title colour #372415.
   No html/body overflow rule: Fikra already puts .overflow-x-hidden on
   <body>; overflow-x:clip on <html> made <body> the scroller and broke
   sticky.

   DG 3asomy (titles): upload the woff2 to Salla (Files) and uncomment:
   @font-face { font-family: "DG 3asomy"; src: url("VERIFY-salla-cdn-url.woff2") format("woff2");
                font-weight: 100 900; font-display: swap; }
   (weight range = no faux-bold when titles ask for 700.)
   --------------------------------------------------------------------- */
#app {
  --store-bg: var(--as-bg);
  --pc-bg-color: var(--as-card-bg);
  --pc-border-color: var(--as-card-bg);
  --pc-title-color: var(--as-ink);
  background-color: var(--as-bg);
}
salla-slider, .s-products-slider-wrapper, .swiper { max-width: 100%; }

/* ---------------------------------------------------------------------
   01. HEADER — all widths
   Figma has no header (an empty 113px strip over a dark top scrim on the
   hero). The live header is 3 rows (~190px); overlaid on the hero it sat
   on the baked "ANOTHER SHINE" text, so it is a solid bar above the hero.
   Icons = theme icons (de-duplicated). Editor alternative: turn off
   "header over banner" and set the header colour to --as-header-bg.
   --------------------------------------------------------------------- */
#app .store-header {
  --header-bg-color: var(--as-header-bg);      /* also feeds the dropdown + mobile pinned bar */
  --header-text-color: var(--as-header-ink);
  background: var(--as-header-bg);
}
#app main#main-content { margin-top: 0 !important; }   /* theme JS writes −191px / −123px inline */
#app .store-header .top-navbar { border-color: rgba(255, 255, 255, .18) !important; }
#app .store-header .navbar-brand img { filter: var(--as-logo-filter); }
#app .store-header .mburger i,
#app .store-header .header-btn__icon { color: var(--as-header-ink) !important; }
#app .store-header .s-user-menu-login-btn svg { fill: var(--as-header-ink) !important; }   /* was #374151 = invisible on the bar */

/* desktop ≥1024
   Fikra renders search + theme toggle twice (beside the logo AND in the
   icon group) → hide the pair beside the logo.
   Sticky: Fikra pins only #mainnav .inner, so the menu row (a separate div
   under #mainnav) scrolled away. The whole header is sticky instead: the
   top bar scrolls off, logo row + menu row stay.                        */
@media (min-width: 1024px) {
  #app .store-header .header-section--left > .hidden.lg\:flex { display: none !important; }
  #app .store-header {
    position: sticky !important;
    top: calc(-1 * var(--as-topbar-h));
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
  }
  #app #mainnav .inner,
  #app #mainnav.fixed-pinned .inner,
  #app #mainnav.fixed-header .inner {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

/* ---------------------------------------------------------------------
   02. HEADER — mobile <1024 (no design → adapted)
   Theme sticky stays (pins the logo row; there is no menu row on mobile).
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  #app #mainnav.fixed-pinned .inner { background: var(--as-header-bg) !important; }
  #app .store-header .s-cart-summary-count { background: #fff !important; color: var(--as-primary) !important; }
}

/* ---------------------------------------------------------------------
   03. BANNERS (S_universal_slider ×4)
   Banners are composed images with baked text (1440 wide, ratios 1.97–2.66)
   shown at 100vh with object-fit:cover → text cropped at every width.
   Show them at their own ratio instead. Figma: hero + 2 full-bleed banners
   square, the 3rd banner boxed with radius 50.
   --------------------------------------------------------------------- */
#app .s-universal-slider .s-slider-container { margin-inline: 0 !important; padding-inline: 0 !important; }
#app .s-universal-slider .universal-slider__slide { height: auto !important; min-height: 0 !important; padding: 0 !important; }
#app .s-universal-slider .universal-slider__media { position: relative !important; inset: auto !important; }
#app .s-universal-slider .universal-slider__media picture { display: block; }
#app .s-universal-slider .universal-slider__image { display: block; width: 100% !important; height: auto !important; }

/* boxed banners (Figma 2010:647 = S_universal_slider-6, the only one set
   to "boxed" → it is the only slider with a .container-narrow child) */
#app .s-universal-slider:has(> .container-narrow) .universal-slider__slide,
#app .s-universal-slider:has(> .container-narrow) .universal-slider__image { border-radius: var(--as-r-boxed); overflow: hidden; }

/* The theme links only the banner TITLE (title URL). These banners have no
   title, so the link renders 0×0 and the banner isn't clickable (hero →
   /-/c135441036). Stretch any real link over its whole slide; "#" / empty
   links are skipped. */
#app .s-universal-slider .universal-slider__content a[href]:not([href="#"]):not([href=""])::after {
  content: ""; position: absolute; inset: 0;
}

/* ---------------------------------------------------------------------
   04. SECTION TITLES (S_header_section)
   Figma: text only — DG 3asomy Thin 60, line-height 1.5, #774c2f, no
   ornaments. The ornament images (hosted on i.ibb.co) are hidden; editor
   equivalent: clear both ornament images in each title block.
   The theme writes the title colour inline → !important.
   --------------------------------------------------------------------- */
#app .S_header_section img { display: none !important; }
#app .S_header_section .main-title-text,
#app .s-block--testimonials .s-reviews-header {
  font-family: var(--as-font-display);
  font-size: var(--as-title-size);
  font-weight: 700;
  line-height: 1.5;
  color: var(--as-title) !important;
}

/* ---------------------------------------------------------------------
   05. CATEGORY CARDS (S_categories) — Figma 2010:210
   2 × 2 grid of 740×796 cards, radius 40, gaps 60 / 68, column 1540/2000
   of the frame (→ 77vw). Cards were 50vh tall → image ratio instead.
   Images carry their own gradient + label. Mobile keeps the theme slider.
   Editor equivalent for the grid: categories block → desktop columns 2.
   --------------------------------------------------------------------- */
#app .s-categories .category-card .category-card__media {
  height: auto !important;
  aspect-ratio: var(--as-ratio-cat);
}
#app .s-categories a.category-card { border-radius: var(--as-r-cat); overflow: hidden; }
@media (min-width: 768px) {
  #app .s-categories .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(16px, 3vw, 60px) !important;
    row-gap: clamp(16px, 3.4vw, 68px) !important;
  }
  /* the hybrid grid/slider JS writes inline width + margin on each card */
  #app .s-categories .categories-grid > .category-card { width: auto !important; margin: 0 !important; }
}
@media (min-width: 1024px) {
  #app .s-categories .categories-grid { max-width: min(1540px, 77vw); margin-inline: auto; }
}

/* ---------------------------------------------------------------------
   06. PRODUCT SLIDERS (S_products_slider ×4) — Figma 2010:432 ff.
   Layout (banner ⅓ start side, slider ⅔, arrows #584436 R6 at the bottom)
   already matches. Changes: white cards + #372415 titles (via §00
   variables), side banner radius 36, side banner at its own ratio.
   The side banners carry baked text (507×900); the theme stretched them
   to the slider height (898px) with object-fit:cover → text cropped left
   and right. Native ratio instead; the row already centres the slider
   against it (as in Figma, where the banner is the taller column).
   --------------------------------------------------------------------- */
#app .S_products_slider .separate-card,
#app .S_products_slider .separate-card img { border-radius: var(--as-r-side) !important; }
#app .S_products_slider .separate-card { overflow: hidden; }
#app .S_products_slider div:has(> .separate-card),
#app .S_products_slider .separate-card,
#app .S_products_slider .separate-card img { height: auto !important; }
#app .S_products_slider div:has(> .separate-card) { align-self: center; }
#app .S_products_slider .separate-card img { display: block; }
@media (max-width: 767px) {   /* full-width banner would be ~610px tall → 4:5, text stays centred in frame */
  #app .S_products_slider .separate-card img { aspect-ratio: 4 / 5; object-fit: cover; }
}

/* Product cards (all vertical cards, site-wide) — Figma image box 263×435.
   The theme let the image absorb the card's spare height, so cards with a
   tag row had shorter images and titles sat at different heights. Fixed
   image ratio instead; the text column takes the slack, price + options +
   button stay aligned at the bottom. Photos are 2:3 → ~4% cropped per side. */
#app .s-product-card-entry.s-product-card-vertical .s-product-card-image {
  flex: none !important;
  height: auto !important;
  aspect-ratio: 263 / 435;
}
#app .s-product-card-entry .s-product-card-image > a,
#app .s-product-card-entry .s-product-card-image-cover { height: 100% !important; }
#app .s-product-card-entry.s-product-card-vertical .s-product-card-content,
#app .s-product-card-entry.s-product-card-vertical .s-product-card-content-main { flex: 1 1 auto; }

/* ---------------------------------------------------------------------
   07. REVIEWS (salla-reviews, component-id 1725326481) — Figma 2010:1364
   Title styled like §04 and centred ("عرض الكل" kept at the end of the
   row). Cards: #fff9f9, 6px gradient border, radius 20, text #523b25,
   quote #945229, stars #ffc62a, avatar 48 on #fff8ee with a #945229 ring.
   --------------------------------------------------------------------- */
#app .s-block--testimonials .s-reviews-header-wrapper {
  position: relative;
  justify-content: center;
  margin-bottom: clamp(16px, 2vw, 40px);
}
#app .s-block--testimonials .s-reviews-display-all {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
}
#app .s-reviews-testimonial {
  border: clamp(3px, .3vw, 6px) solid transparent;
  border-radius: var(--as-r-review) !important;
  background: linear-gradient(var(--as-bg), var(--as-bg)) padding-box,
              var(--as-review-border) border-box !important;
  color: var(--as-review-ink);
}
#app .s-reviews-testimonial__text p {
  color: var(--as-review-ink);
  font-size: clamp(15px, 1vw, 20px);
  font-weight: 600;
  line-height: 1.5;
}
#app .s-reviews-testimonial__info h2 { color: var(--as-review-ink); font-size: clamp(15px, .9vw, 18px); font-weight: 700; }
#app .s-reviews-testimonial__icon svg { fill: var(--as-review-accent); }
#app .s-reviews-testimonial__rating svg { fill: var(--as-star); }
#app .s-reviews-testimonial__avatar {
  width: 48px; height: 48px;
  background: var(--as-review-avatar);
  border: 1px solid var(--as-review-accent);
  overflow: hidden;
}
#app .s-reviews-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   08. FOOTER — Figma footer = current theme footer (wave #ab9a87,
   copyright bar #f7ebdf). Only change: the wave now sits on --as-bg
   (via --store-bg in §00). Nothing else to override.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   09. THEME FIXES
   a) Add-to-cart "wave" hover pulls a background image from
      web.archive.org (third-party, slow, can fail) → keep the hover
      colour, drop the image.
   b) A product offer saved without an end date renders an ended
      countdown ("انتهى العرض", 00:00:00:00 — product 443772084, in all 4
      sliders) → hide ended countdowns. Real fix: set or remove the offer
      end date on the product.
   Revert = delete the rule.
   --------------------------------------------------------------------- */
#app .add-button-wave-effect .s-button-element.s-button-btn.s-button-solid::before { background-image: none !important; }
#app .s-product-card-entry salla-count-down.s-count-down-ended { display: none !important; }

/* ---------------------------------------------------------------------
   10. WHATSAPP FLOAT (carried over from the existing Custom CSS — the
   button itself is added by the custom JS, keep that JS as is)
   --------------------------------------------------------------------- */
#designly-whatsapp-float {
  position: fixed; right: 22px; bottom: 24px; z-index: 999999;
  width: 62px; height: 62px; display: flex; align-items: center; justify-content: center;
  background: #25d366; border-radius: 50%; text-decoration: none;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .18), 0 3px 8px rgba(0, 0, 0, .12);
  transition: transform .25s ease, box-shadow .25s ease;
}
#designly-whatsapp-float svg { width: 33px; height: 33px; fill: #fff; }
#designly-whatsapp-float:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22), 0 5px 12px rgba(0, 0, 0, .14);
}
#designly-whatsapp-float:active { transform: scale(.95); }
@media (max-width: 767px) {
  #designly-whatsapp-float { width: 56px; height: 56px; right: 15px; bottom: 85px; }
  #designly-whatsapp-float svg { width: 30px; height: 30px; }
}

/* ========================== END ========================== */