/* ==================================================================
   FENNEC ROASTERY — محمصة فنك
   Advanced brand theme for Salla "Raed" (رائد)
   Paste into: المظهر ← تخصيص متقدم ← تخصيص باستخدام CSS
   Final version — paste the whole file, replacing anything already there
   ------------------------------------------------------------------
   Contents
   01 Tokens               11 Cart, forms, toasts
   02 Base & texture       12 Footer (dune edge)
   03 Typography           13 Motion & accessibility
   04 Announcement bar     14 Raed-specific fixes
   05 Header & nav         15 Slider arrows
   06 Buttons              16 Title centering
   07 Product cards        17 Branch motif watermark
   08 Category tiles       18 Heading font, icons, chips
   09 Features & trust     19 Header logo size
   10 Product page         20 Contact links
                           21 Top bar pattern
   ================================================================== */


/* ------------------------------------------------------------------
   01 · TOKENS
   ------------------------------------------------------------------ */
:root {
  /* Brand */
  --fn-dune:         #EDE0CC;
  --fn-dune-light:   #F6EEE2;   /* cards sitting on Dune */
  --fn-dune-deep:    #E3D2B8;   /* borders, dividers */
  --fn-orange:       #E16D22;
  --fn-orange-hover: #C95A13;
  --fn-orange-tint:  rgba(225, 109, 34, .12);
  --fn-brown:        #5B1E1E;
  --fn-brown-deep:   #481616;   /* footer bottom strip */
  --fn-brown-muted:  #7C4A40;   /* secondary text on Dune (AA on Dune) */
  --fn-white:        #FFFFFF;

  /* Shape */
  --fn-r-sm: 8px;
  --fn-r:    12px;
  --fn-r-lg: 20px;
  --fn-pill: 999px;

  /* Depth — brown-tinted, never black */
  --fn-shadow-1: 0 1px 2px rgba(91, 30, 30, .06), 0 2px 8px rgba(91, 30, 30, .05);
  --fn-shadow-2: 0 6px 24px rgba(91, 30, 30, .10);
  --fn-shadow-3: 0 14px 40px rgba(91, 30, 30, .16);

  /* Motion */
  --fn-ease: cubic-bezier(.2, .7, .2, 1);
  --fn-fast: .18s;
  --fn-med:  .35s;

  /* Salla / Twilight theme variables */
  --color-primary:         #E16D22;
  --color-primary-dark:    #C95A13;
  --color-primary-light:   #F3A56F;
  --color-primary-reverse: #FFFFFF;
  --main-text-color:       #5B1E1E;
}


/* ------------------------------------------------------------------
   02 · BASE & TEXTURE
   Dune background with a very faint paper grain for a premium feel
   ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }

body,
.app-inner,
main {
  background-color: var(--fn-dune) !important;
  color: var(--fn-brown) !important;
}

body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .12 0 0 0 0 .12 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--fn-orange); color: var(--fn-white); }

/* Slim branded scrollbar (desktop) */
@media (min-width: 1024px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--fn-dune); }
  ::-webkit-scrollbar-thumb {
    background: var(--fn-brown-muted);
    border-radius: var(--fn-pill);
    border: 2px solid var(--fn-dune);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--fn-brown); }
}

/* Generous section rhythm */
.s-block { margin-block: 56px !important; }
@media (max-width: 767px) { .s-block { margin-block: 36px !important; } }


/* ------------------------------------------------------------------
   03 · TYPOGRAPHY
   Section titles get a centered fennec-dot ornament underneath
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 { color: var(--fn-brown) !important; letter-spacing: 0; }

p, li, label, .text-gray-500, .text-gray-600 { color: var(--fn-brown-muted); }

a { color: var(--fn-brown); transition: color var(--fn-fast) var(--fn-ease); }
a:hover { color: var(--fn-orange-hover); }

.s-block__title,
.s-slider-block__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 32px !important;
}
.s-block__title h2,
.s-slider-block__title h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.3;
  position: relative;
  padding-bottom: 18px;
}
/* Ornament: line · orange bean · line */
.s-block__title h2::after,
.s-slider-block__title h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 8px;
  background:
    radial-gradient(ellipse 5px 4px at center, var(--fn-orange) 98%, transparent) center / 12px 8px no-repeat,
    linear-gradient(var(--fn-brown), var(--fn-brown)) left center / 38px 1.5px no-repeat,
    linear-gradient(var(--fn-brown), var(--fn-brown)) right center / 38px 1.5px no-repeat;
  opacity: .9;
}
/* "View all" link next to slider titles */
.s-slider-block__display-all,
.s-block__display-all {
  color: var(--fn-brown) !important;
  font-weight: 700;
  border-bottom: 1.5px solid var(--fn-orange);
  padding-bottom: 2px;
}


/* ------------------------------------------------------------------
   04 · ANNOUNCEMENT BAR (marquee) + TOP STRIP
   ------------------------------------------------------------------ */
.top-navbar {
  background: var(--fn-brown) !important;
  color: var(--fn-white) !important;
  font-size: 13px;
}
.top-navbar a,
.top-navbar span,
.top-navbar i,
.top-navbar button { color: var(--fn-white) !important; }

/* Marquee: separate each message with a small bean glyph */
[class*="marquee"] {
  font-weight: 700;
  letter-spacing: .2px;
}
[class*="marquee"] span + span::before,
[class*="marquee"] .marquee-item + .marquee-item::before {
  content: "●";
  font-size: 7px;
  vertical-align: middle;
  margin-inline: 22px;
  opacity: .75;
}


/* ------------------------------------------------------------------
   05 · HEADER & NAVIGATION
   Frosted Dune header that stays readable over banners when sticky
   ------------------------------------------------------------------ */
.store-header,
.main-nav-container {
  background: rgba(237, 224, 204, .92) !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--fn-dune-deep);
  box-shadow: none !important;
}
.main-nav-container.fixed-pinned,
.main-nav-container.fixed-header {
  box-shadow: var(--fn-shadow-2) !important;
}

.navbar-brand img { max-height: 56px !important; width: auto; }

/* Menu links with an animated underline */
.main-menu > li > a {
  color: var(--fn-brown) !important;
  font-weight: 700 !important;
  position: relative;
}
.main-menu > li > a::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 6px;
  height: 2px;
  background: var(--fn-orange);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--fn-med) var(--fn-ease);
}
.main-menu > li > a:hover::after,
.main-menu > li.active > a::after { transform: scaleX(1); }

/* Dropdowns */
.main-menu .sub-menu,
.main-menu ul ul {
  background: var(--fn-dune-light) !important;
  border: 1px solid var(--fn-dune-deep) !important;
  border-radius: var(--fn-r) !important;
  box-shadow: var(--fn-shadow-3) !important;
  overflow: hidden;
}

/* Header icons (search, account, cart) */
.header-btn,
.store-header .header-btn__icon,
.store-header salla-cart-summary {
  color: var(--fn-brown) !important;
}
.header-btn:hover .header-btn__icon { color: var(--fn-orange) !important; }

/* Cart count bubble */
.s-cart-summary-count,
.cart-summary-count {
  background: var(--fn-orange) !important;
  color: var(--fn-white) !important;
  box-shadow: 0 0 0 2px var(--fn-dune);
}

/* Search field */
salla-search input,
.s-search-input {
  background: var(--fn-dune-light) !important;
  border: 1px solid var(--fn-dune-deep) !important;
  border-radius: var(--fn-pill) !important;
  color: var(--fn-brown) !important;
}


/* ------------------------------------------------------------------
   06 · BUTTONS
   Primary = orange pill, secondary = brown outline
   ------------------------------------------------------------------ */
.s-button-element,
.btn {
  border-radius: var(--fn-r-sm) !important;
  font-weight: 700 !important;
  transition:
    background-color var(--fn-fast) var(--fn-ease),
    color var(--fn-fast) var(--fn-ease),
    box-shadow var(--fn-fast) var(--fn-ease),
    transform var(--fn-fast) var(--fn-ease);
}

.s-button-primary,
.s-button-solid.s-button-primary,
.btn--primary,
salla-add-product-button .s-button-element {
  background: var(--fn-orange) !important;
  border-color: var(--fn-orange) !important;
  color: var(--fn-white) !important;
  box-shadow: 0 4px 14px rgba(225, 109, 34, .28);
}
.s-button-primary:hover,
.btn--primary:hover,
salla-add-product-button .s-button-element:hover {
  background: var(--fn-orange-hover) !important;
  border-color: var(--fn-orange-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(225, 109, 34, .34);
}
.s-button-primary:active,
.btn--primary:active { transform: translateY(0); }

.s-button-outline,
.s-button-primary-outline,
.btn--outline,
.s-button-light {
  background: transparent !important;
  border: 1.5px solid var(--fn-brown) !important;
  color: var(--fn-brown) !important;
}
.s-button-outline:hover,
.s-button-primary-outline:hover,
.btn--outline:hover,
.s-button-light:hover {
  background: var(--fn-brown) !important;
  color: var(--fn-white) !important;
}

.s-button-disabled,
.s-button-element[disabled] {
  background: var(--fn-dune-deep) !important;
  border-color: var(--fn-dune-deep) !important;
  color: var(--fn-brown-muted) !important;
  box-shadow: none !important;
}


/* ------------------------------------------------------------------
   07 · PRODUCT CARDS
   Light card on Dune, white photo stage, lift + photo zoom on hover
   ------------------------------------------------------------------ */
.s-product-card-entry {
  background: var(--fn-dune-light) !important;
  border: 1px solid rgba(91, 30, 30, .06) !important;
  border-radius: var(--fn-r) !important;
  box-shadow: var(--fn-shadow-1) !important;
  overflow: hidden;
  transition:
    transform var(--fn-med) var(--fn-ease),
    box-shadow var(--fn-med) var(--fn-ease);
}
.s-product-card-entry:hover {
  transform: translateY(-4px);
  box-shadow: var(--fn-shadow-3) !important;
}

.s-product-card-image {
  background: var(--fn-white) !important;
  border-radius: var(--fn-r) var(--fn-r) 0 0;
  overflow: hidden;
}
.s-product-card-image img {
  transition: transform .7s var(--fn-ease);
}
.s-product-card-entry:hover .s-product-card-image img {
  transform: scale(1.06);
}

.s-product-card-content { padding: 14px 16px 16px !important; }

.s-product-card-content-title a,
.s-product-card-content-title {
  color: var(--fn-brown) !important;
  font-weight: 700 !important;
  line-height: 1.5;
}
.s-product-card-content-subtitle { color: var(--fn-brown-muted) !important; }

/* Prices: orange, bold (large text → contrast OK) */
.s-product-card-price,
.s-product-card-sale-price h4,
.s-product-card-content-sub h4 {
  color: var(--fn-orange) !important;
  font-weight: 800 !important;
  font-size: 1.05rem;
}
.s-product-card-sale-price span,
.s-product-card-content-sub .line-through {
  color: var(--fn-brown-muted) !important;
  opacity: .8;
}

/* Promotion badge */
.s-product-card-promotion-title,
.s-product-card-promotion,
.promotion-title {
  background: var(--fn-orange) !important;
  color: var(--fn-white) !important;
  border-radius: var(--fn-pill) !important;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 12px !important;
  box-shadow: 0 4px 12px rgba(225, 109, 34, .3);
}
.s-product-card-out-badge {
  background: var(--fn-brown) !important;
  color: var(--fn-white) !important;
  border-radius: var(--fn-pill) !important;
}

/* Wishlist heart */
.s-product-card-wishlist-btn {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--fn-brown) !important;
  border-radius: 50% !important;
  box-shadow: var(--fn-shadow-1);
}
.s-product-card-wishlist-btn.is-added,
.s-product-card-wishlist-btn:hover { color: var(--fn-orange) !important; }

/* Rating stars */
.s-rating-stars-selected svg,
.s-product-card-rating i { color: var(--fn-orange) !important; fill: var(--fn-orange) !important; }

/* Slider arrows & dots */
.s-slider-nav-arrow,
.swiper-button-next,
.swiper-button-prev {
  background: var(--fn-white) !important;
  color: var(--fn-brown) !important;
  border-radius: 50% !important;
  box-shadow: var(--fn-shadow-2);
  transition: background var(--fn-fast), color var(--fn-fast);
}
.s-slider-nav-arrow:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--fn-orange) !important;
  color: var(--fn-white) !important;
}
.swiper-pagination-bullet { background: var(--fn-brown) !important; opacity: .25; }
.swiper-pagination-bullet-active {
  background: var(--fn-orange) !important;
  opacity: 1;
  width: 22px !important;
  border-radius: var(--fn-pill) !important;
}


/* ------------------------------------------------------------------
   08 · CATEGORY TILES & BANNERS
   Rounded tiles with a warm brown gradient and white label
   ------------------------------------------------------------------ */
.s-block--square-photos a,
.s-block--photos-slider a,
.s-block--fixed-banner a,
.s-block--fixed-banner img,
.home-slider .swiper-slide {
  border-radius: var(--fn-r-lg) !important;
  overflow: hidden;
}

.s-block--square-photos a,
.s-block--photos-slider a {
  position: relative;
  display: block;
  box-shadow: var(--fn-shadow-1);
  transition: transform var(--fn-med) var(--fn-ease), box-shadow var(--fn-med) var(--fn-ease);
}
.s-block--square-photos a:hover,
.s-block--photos-slider a:hover {
  transform: translateY(-4px);
  box-shadow: var(--fn-shadow-3);
}
.s-block--square-photos a img,
.s-block--photos-slider a img { transition: transform .8s var(--fn-ease); }
.s-block--square-photos a:hover img,
.s-block--photos-slider a:hover img { transform: scale(1.07); }

/* Gradient + label */
.s-block--square-photos a::after,
.s-block--photos-slider a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(72, 22, 22, .72) 0%, rgba(72, 22, 22, .15) 45%, transparent 70%);
  pointer-events: none;
}
.s-block--square-photos a h3,
.s-block--square-photos a span,
.s-block--photos-slider a h3 {
  position: relative;
  z-index: 1;
  color: var(--fn-white) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}

/* Enhanced slider (brand story) text */
.home-slider h2,
.home-slider .slide-title { font-weight: 800 !important; line-height: 1.35; }


/* ------------------------------------------------------------------
   09 · FEATURES & TRUST
   ------------------------------------------------------------------ */
.s-block--features__item {
  background: var(--fn-dune-light) !important;
  border: 1px solid rgba(91, 30, 30, .06);
  border-radius: var(--fn-r) !important;
  box-shadow: var(--fn-shadow-1);
  padding: 28px 20px !important;
  transition: transform var(--fn-med) var(--fn-ease), box-shadow var(--fn-med) var(--fn-ease);
}
.s-block--features__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--fn-shadow-2);
}
.s-block--features__item .feature-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--fn-orange-tint) !important;
  color: var(--fn-orange) !important;
  font-size: 28px;
}
.s-block--features__item .feature-icon i { color: var(--fn-orange) !important; }
.s-block--features__item h2 { font-weight: 800 !important; margin-top: 12px; }
.s-block--features__item p { color: var(--fn-brown-muted) !important; }

/* Testimonials (when re-enabled with real reviews) */
.s-block--testimonials .swiper-slide > div,
.s-testimonial {
  background: var(--fn-dune-light) !important;
  border-radius: var(--fn-r) !important;
  box-shadow: var(--fn-shadow-1);
}


/* ------------------------------------------------------------------
   10 · PRODUCT PAGE
   ------------------------------------------------------------------ */
.s-breadcrumb-wrapper a,
.breadcrumbs a { color: var(--fn-brown-muted) !important; }
.s-breadcrumb-wrapper li:last-child,
.breadcrumbs li:last-child { color: var(--fn-brown) !important; font-weight: 700; }

.product-single h1,
.product-details h1 {
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem) !important;
  font-weight: 800 !important;
}

.product-single .total-price,
.product-single .price-wrapper h2,
.product-details .price {
  color: var(--fn-orange) !important;
  font-weight: 800 !important;
}

/* Gallery */
.product-single .swiper,
.details-slider,
salla-slider.photos-slider {
  background: var(--fn-white);
  border-radius: var(--fn-r-lg) !important;
  overflow: hidden;
  box-shadow: var(--fn-shadow-1);
}
.product-single .swiper-slide-thumb-active img,
.details-slider-thumbs .swiper-slide-thumb-active {
  outline: 2px solid var(--fn-orange);
  outline-offset: 2px;
  border-radius: var(--fn-r-sm);
}

/* Options (weight, grind…) as chips */
salla-product-options .s-product-options-thumbnails-wrapper label,
salla-product-options .s-product-options-multiple-options-wrapper label,
.s-product-options-option-content label {
  border: 1.5px solid var(--fn-dune-deep) !important;
  border-radius: var(--fn-r-sm) !important;
  background: var(--fn-dune-light) !important;
  color: var(--fn-brown) !important;
  transition: border-color var(--fn-fast), background var(--fn-fast);
}
salla-product-options input:checked + label,
.s-product-options-option-content input:checked + label {
  border-color: var(--fn-orange) !important;
  background: var(--fn-orange-tint) !important;
  font-weight: 700;
}

/* Quantity input */
salla-quantity-input .s-quantity-input-container {
  border: 1.5px solid var(--fn-dune-deep) !important;
  border-radius: var(--fn-r-sm) !important;
  background: var(--fn-white);
}

/* Description & tabs */
.product-single .article,
.product__description {
  color: var(--fn-brown) !important;
  line-height: 1.9;
}

/* Sticky mobile add-to-cart bar */
.sticky-product-bar,
.product-form .sticky-add-to-cart {
  background: rgba(246, 238, 226, .96) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 -6px 24px rgba(91, 30, 30, .12) !important;
  border-top: 1px solid var(--fn-dune-deep);
}


/* ------------------------------------------------------------------
   11 · CART, FORMS, MODALS, TOASTS
   ------------------------------------------------------------------ */
.form-input,
.s-form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  background: var(--fn-white) !important;
  border: 1.5px solid var(--fn-dune-deep) !important;
  border-radius: var(--fn-r-sm) !important;
  color: var(--fn-brown) !important;
}
.form-input:focus,
.s-form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--fn-orange) !important;
  box-shadow: 0 0 0 4px var(--fn-orange-tint) !important;
  outline: none !important;
}

/* Cart rows & summary */
.cart-item,
.s-cart-item,
.cart-summary,
#cart-submit-wrap {
  background: var(--fn-dune-light) !important;
  border-radius: var(--fn-r) !important;
  box-shadow: var(--fn-shadow-1);
  border: 1px solid rgba(91, 30, 30, .06) !important;
}

/* Modals & drawers */
.s-modal-body,
.s-modal-wrapper .s-modal-body,
salla-add-product-toast .s-add-product-toast {
  background: var(--fn-dune-light) !important;
  border-radius: var(--fn-r-lg) !important;
  box-shadow: var(--fn-shadow-3) !important;
}
.s-modal-overlay { background: rgba(72, 22, 22, .45) !important; }

/* Toast notifications */
.s-toast,
.toastify {
  background: var(--fn-brown) !important;
  color: var(--fn-white) !important;
  border-radius: var(--fn-r) !important;
  box-shadow: var(--fn-shadow-3) !important;
}


/* ------------------------------------------------------------------
   12 · FOOTER
   Deep Roastery Brown with a dune-wave edge on top
   ------------------------------------------------------------------ */
.store-footer {
  position: relative;
  margin-top: 96px !important;
  background: var(--fn-brown) !important;
  color: var(--fn-white) !important;
}
.store-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -47px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V30C120 12 240 4 380 14C520 24 600 40 760 34C920 28 1000 6 1140 6C1260 6 1360 22 1440 30V48Z' fill='%235B1E1E'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.store-footer__inner { background: transparent !important; padding-top: 40px !important; }

.store-footer h3,
.store-footer h4 {
  color: var(--fn-white) !important;
  font-weight: 800 !important;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.store-footer h3::after,
.store-footer h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 28px;
  height: 2px;
  background: var(--fn-orange);
  border-radius: 2px;
}

.store-footer p,
.store-footer li,
.store-footer span,
.store-footer a,
.store-footer i,
.store-footer .s-contacts-item {
  color: rgba(255, 255, 255, .86) !important;
}
.store-footer a:hover { color: var(--fn-white) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--fn-orange); }

/* Social icons as round chips */
.store-footer .s-social-link a,
.store-footer salla-social a {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: background var(--fn-fast) var(--fn-ease), transform var(--fn-fast) var(--fn-ease);
}
.store-footer .s-social-link a:hover,
.store-footer salla-social a:hover {
  background: var(--fn-orange);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Footer logo: keep the Dune logo visible on brown */
.store-footer .footer-logo img,
.store-footer img[alt*="logo"] {
  max-height: 96px;
  width: auto;
  border-radius: var(--fn-r);
}

/* Bottom copyright strip */
.store-footer .copyright-text,
.store-footer__bottom,
.store-footer .border-t {
  background: var(--fn-brown-deep) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: rgba(255, 255, 255, .7) !important;
}


/* ------------------------------------------------------------------
   13 · MOTION & ACCESSIBILITY
   ------------------------------------------------------------------ */

/* Scroll reveal — pure CSS, only in browsers that support it */
@supports (animation-timeline: view()) {
  @keyframes fn-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
  .s-block__title,
  .s-slider-block__title,
  .s-block--features__item,
  .s-block--square-photos a,
  .s-block--photos-slider a {
    animation: fn-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
.s-button-element:focus-visible,
input:focus-visible {
  outline: 3px solid var(--fn-orange) !important;
  outline-offset: 2px;
  border-radius: var(--fn-r-sm);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .s-product-card-entry:hover,
  .s-product-card-entry:hover .s-product-card-image img { transform: none !important; }
}


/* ------------------------------------------------------------------
   14 · RAED-SPECIFIC FIXES (matched to the live storefront markup)
   ------------------------------------------------------------------ */

/* Header: remove Raed's white bar + hard shadow */
.main-nav-container,
.main-nav-container .inner,
.main-nav-container.bg-white {
  background: rgba(237, 224, 204, .92) !important;
}
.main-nav-container.shadow-default { box-shadow: none !important; }

/* Section titles live inside .right-side — center the whole title row */
.s-block__title { justify-content: center !important; }
.s-block__title .right-side { display: flex; flex-direction: column; align-items: center; }

/* Category tiles (قائمة عناصر → .banner-entry) */
.s-block--banners .banner-entry {
  position: relative;
  display: block;
  border-radius: var(--fn-r-lg) !important;
  overflow: hidden;
  background: var(--fn-dune-light);
  box-shadow: var(--fn-shadow-1);
  transition: transform var(--fn-med) var(--fn-ease), box-shadow var(--fn-med) var(--fn-ease);
}
.s-block--banners .banner-entry:hover {
  transform: translateY(-4px);
  box-shadow: var(--fn-shadow-3);
}
.s-block--banners .banner-entry .lazy__bg {
  transition: transform .8s var(--fn-ease);
}
.s-block--banners .banner-entry:hover .lazy__bg { transform: scale(1.07); }
.s-block--banners .banner-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(72, 22, 22, .75) 0%, rgba(72, 22, 22, .12) 55%, transparent 80%);
  pointer-events: none;
}
.s-block--banners .banner-entry h3,
.s-block--banners .banner-entry h3.text-with-border {
  position: absolute !important;
  z-index: 2;
  inset-inline: 0;
  bottom: 18px;
  top: auto !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: center;
  color: var(--fn-white) !important;
  font-weight: 800 !important;
  font-size: 1.15rem;
}
.s-block--banners .banner-entry h3 span {
  color: var(--fn-white) !important;
  border: 0 !important;
  background: rgba(91, 30, 30, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 6px 16px;
  border-radius: var(--fn-pill);
}

/* Brand-story banner (صور متحركة محسنة) — inset card instead of a hard edge-to-edge strip */
.s-block--hero-slider {
  max-width: 1280px;
  margin-inline: auto !important;
  padding-inline: 16px;
}
.s-block--hero-slider .swiper-slide {
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow: var(--fn-shadow-3);
}
.s-block--hero-slider .swiper-slide.bg-dark { background-color: var(--fn-brown) !important; }
.s-block--hero-slider .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(72, 22, 22, .78) 0%, rgba(72, 22, 22, .35) 55%, rgba(72, 22, 22, .1) 100%);
  pointer-events: none;
}
.s-block--hero-slider .home-slider__content { z-index: 2; }
.s-block--hero-slider h2 {
  color: var(--fn-white) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}
.s-block--hero-slider p { color: rgba(255, 255, 255, .9) !important; }

/* Moving announcement banner (بنر إعلاني متحرك): pill strip with soft edges */
.s-block--bundle-marquee {
  max-width: 1280px;
  margin-inline: auto !important;
  padding-inline: 16px;
}
.s-block--bundle-marquee > * {
  border-radius: var(--fn-pill);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(225, 109, 34, .22);
}

/* Product card add-to-cart: full-width soft button */
.s-product-card-content-footer salla-button,
.s-product-card-content-footer .s-button-element { width: 100%; }
.s-product-card-content-footer .s-button-element { border-radius: var(--fn-r-sm) !important; }

/* Product slider: cards need room for the hover lift + shadow */
.s-products-slider-slider .swiper { padding: 8px 4px 28px !important; }

/* Feature icons: Raed draws a square — make it a soft circle */
.s-block--features__item .feature-icon { border: 0 !important; }

/* Footer bottom strip spans full width */
.store-footer > .container:last-child,
.store-footer .copyright-text { background: transparent !important; }
.store-footer > div:last-child {
  max-width: none;
  background: var(--fn-brown-deep);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.store-footer .text-gray-400 { color: rgba(255, 255, 255, .7) !important; }


/* ------------------------------------------------------------------
   15 · SLIDER ARROWS — aligned with the section title
   Title stays centered; arrows sit on the row's end (left in RTL),
   vertically centered on the heading text (ornament excluded).
   ------------------------------------------------------------------ */
.s-slider-block__title {
  position: relative;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 56px;
}
.s-slider-block__title-right { display: flex; justify-content: center; }
.s-slider-block__title-left {
  position: absolute;
  inset-inline-end: 0;
  top: calc(50% - 9px);           /* 9px = half the ornament space under the title */
  transform: translateY(-50%);
  margin: 0 !important;
}
.s-slider-block__title-nav { display: flex; align-items: center; gap: 10px; margin: 0 !important; }
.s-slider-block__title-nav .s-slider-nav-arrow {
  position: static !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--fn-dune-deep) !important;
  background: var(--fn-white) !important;
  color: var(--fn-brown) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(91, 30, 30, .10) !important;
  transition: background var(--fn-fast), color var(--fn-fast), transform var(--fn-fast);
}
.s-slider-block__title-nav .s-slider-nav-arrow:not(.swiper-button-disabled):hover {
  background: var(--fn-orange) !important;
  border-color: var(--fn-orange) !important;
  color: var(--fn-white) !important;
  transform: translateY(-1px);
}
.s-slider-block__title-nav .s-slider-button-icon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; line-height: 0;
}
.s-slider-block__title-nav svg { width: 14px; height: 14px; fill: currentColor; }
.s-slider-block__title-nav .swiper-button-disabled { opacity: .45; box-shadow: none !important; cursor: default; }
/* Hide arrows entirely when there aren't enough products to slide */
.s-slider-block__title-nav .swiper-button-lock { display: none !important; }
/* Phones: swipe instead of arrows, keeps the title clean */
@media (max-width: 640px) { .s-slider-block__title-left { display: none; } }


/* ------------------------------------------------------------------
   16 · TITLE CENTERING FIX
   Raed adds a hidden 32px left padding to both title wrappers and
   another 32px inside slider headings, which pushed each title
   off-center by a different amount. Zeroed so every section title
   and its ornament share the exact page center.
   ------------------------------------------------------------------ */
.s-block__title .right-side,
.s-slider-block__title .s-slider-block__title-right {
  padding: 0 !important;
  margin: 0 auto !important;
  width: auto !important;
  flex: 0 0 auto !important;
  text-align: center !important;
}
.s-block__title h2,
.s-slider-block__title h2 {
  padding: 0 0 18px !important;
  margin: 0 !important;
  text-align: center !important;
}


/* ------------------------------------------------------------------
   17 · FENNEC BRANCH MOTIF — decorative watermark
   Traced from the coffee branch, berries and flowers in the Fennec
   logo (not redrawn). Sits behind all content (z-index -1), so it
   never covers text, photos, buttons or navigation.
   Scroll-linked drift uses CSS scroll-driven animation (no JS; the
   theme has JavaScript disabled). Browsers without support, and
   visitors who prefer reduced motion, get a static motif.
   ------------------------------------------------------------------ */
:root {
  --fn-motif: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 840 1080%22%3E%3Cg fill=%22%235B1E1E%22%3E%3Cpath d=%22M508 384C522 352 544 318 570 288C574 284 580 288 578 293C556 324 537 356 522 392Z%22/%3E%3Cpath transform=%22translate%280.000000,1080.000000%29 scale%280.100000,-0.100000%29%22 d=%22M4397 7678 c-30 -40 -134 -238 -173 -331 -29 -68 -29 -68 -41 -38 -20 48 -43 197 -43 277 0 68 -2 74 -22 78 -37 8 -223 24 -227 20 -9 -8 47 -371 76 -494 3 -14 -24 17 -62 70 -114 160 -327 404 -375 430 -15 8 -28 -6 -83 -89 -65 -99 -65 -99 -30 -132 19 -19 71 -77 115 -129 395 -470 550 -960 563 -1785 3 -240 3 -240 34 -253 17 -6 31 -16 31 -20 0 -19 -34 -121 -60 -182 -15 -36 -31 -94 -35 -130 -4 -36 -22 -177 -41 -314 -76 -544 -77 -570 -39 -666 54 -138 54 -148 7 -156 -72 -11 -67 22 -67 -456 1 -421 12 -646 46 -927 5 -46 8 -85 6 -87 -14 -15 -275 541 -546 1166 -210 481 -218 497 -266 542 -50 46 -50 46 -51 -85 -1 -84 -6 -148 -15 -176 -14 -42 -13 -45 19 -110 31 -63 57 -165 50 -197 -2 -9 -30 18 -71 66 -69 81 -69 81 -99 35 -17 -25 -59 -72 -95 -104 l-65 -59 88 -103 c272 -318 521 -668 729 -1029 146 -254 410 -771 403 -792 -7 -20 -455 261 -673 422 -223 164 -442 349 -646 548 -137 132 -137 132 -204 125 -67 -8 -67 -8 -38 -48 16 -22 64 -91 107 -153 78 -114 78 -114 37 -93 -120 62 -370 150 -499 176 -32 7 -32 7 -32 -52 0 -32 -7 -83 -15 -113 -17 -66 -20 -63 85 -85 104 -21 283 -75 410 -122 113 -42 310 -133 310 -143 0 -4 -30 -10 -67 -14 -149 -15 -147 -14 -112 -53 17 -19 42 -59 57 -89 26 -54 26 -54 92 -54 292 0 733 -202 1120 -513 242 -195 706 -715 1030 -1154 l75 -102 234 -1 233 0 -78 82 c-578 614 -977 1413 -1113 2229 -90 540 -61 889 108 1279 193 445 613 823 1096 986 87 29 87 29 119 99 18 39 47 87 65 108 33 37 33 37 0 37 -19 -1 -68 -7 -109 -14 -41 -8 -77 -12 -79 -10 -17 15 120 153 209 209 25 16 47 30 49 32 5 3 -31 33 -82 69 -38 27 -38 27 -150 -29 -62 -31 -145 -81 -185 -111 -73 -56 -73 -56 -66 -8 4 26 15 81 25 122 9 41 16 76 14 78 -1 2 -30 -22 -63 -53 -94 -87 -140 -169 -164 -295 -10 -54 -13 -58 -227 -275 -215 -219 -401 -427 -554 -622 -44 -57 -82 -101 -84 -99 -6 5 39 256 88 494 106 518 216 894 367 1252 169 402 297 671 372 783 28 41 50 80 50 87 0 32 -127 -33 -211 -108 -29 -26 -49 -40 -44 -32 4 8 88 139 186 291 178 277 178 277 172 362 -7 102 10 252 42 362 13 44 22 81 21 82 -1 2 -211 -340 -466 -760 -255 -419 -469 -769 -477 -777 -11 -12 -13 -10 -13 15 -1 17 -22 250 -49 518 -47 488 -47 488 -5 595 81 203 127 436 122 621 -3 117 -12 131 -51 79z%22/%3E%3C/g%3E%3Cpath fill=%22%23E16D22%22 transform=%22translate%280.000000,1080.000000%29 scale%280.100000,-0.100000%29%22 d=%22M4020 8939 c-30 -5 -89 -26 -130 -47 -69 -34 -76 -41 -95 -88 -34 -85 -92 -170 -160 -232 -64 -58 -65 -61 -81 -138 -59 -282 57 -583 273 -710 39 -24 244 -57 345 -57 46 0 140 42 210 93 308 226 357 737 97 1015 -127 136 -288 193 -459 164z m192 -146 c22 -20 23 -70 1 -95 -37 -41 -113 -11 -113 45 0 59 68 90 112 50z M2692 8614 c-182 -48 -320 -186 -367 -365 -17 -62 -19 -233 -5 -299 101 -452 640 -724 990 -500 71 46 213 260 231 349 36 185 -36 423 -176 579 -42 47 -50 51 -103 57 -133 15 -263 73 -347 156 -39 37 -43 39 -105 38 -36 0 -89 -7 -118 -15z m-97 -299 c44 -43 15 -115 -46 -115 -31 0 -69 40 -69 72 0 25 44 68 70 68 12 0 32 -11 45 -25z M6112 6075 c-202 -48 -413 -240 -482 -437 -50 -144 -47 -287 11 -405 35 -72 157 -175 244 -205 210 -73 551 55 645 242 16 32 52 85 79 120 64 79 86 165 79 305 -15 285 -272 454 -576 380z m390 -182 c41 -37 10 -115 -47 -115 -56 0 -87 72 -48 114 20 22 70 23 95 1z M1712 6000 c-307 -65 -442 -517 -259 -865 43 -82 165 -203 242 -241 76 -37 249 -43 320 -11 39 18 39 18 -15 49 -150 84 -271 225 -324 376 -14 40 -14 40 52 61 155 50 346 50 503 2 62 -20 62 -20 57 72 -19 344 -299 615 -576 557z m-17 -185 c14 -13 25 -33 25 -45 0 -27 -43 -70 -70 -70 -27 0 -70 43 -70 70 0 27 43 70 70 70 12 0 32 -11 45 -25z M5970 4916 c-128 -34 -226 -129 -280 -268 -126 -326 138 -752 511 -826 369 -72 624 270 486 651 -112 307 -450 516 -717 443z m572 -783 c45 -53 20 -112 -46 -113 -58 0 -85 58 -50 108 19 27 74 30 96 5z M1664 4486 c-378 -140 -428 -529 -96 -749 141 -94 268 -130 452 -131 192 0 339 50 453 154 54 49 54 49 45 107 -10 59 -4 306 7 354 5 19 0 33 -17 53 -24 28 -24 28 -85 3 -223 -91 -471 -86 -688 12 -36 17 -65 35 -65 41 0 14 47 107 71 142 33 46 18 49 -77 14z m-101 -294 c25 -22 22 -77 -5 -96 -49 -35 -108 -8 -108 48 0 68 61 94 113 48z M1232 3071 c-463 -117 -616 -634 -287 -967 354 -358 1007 -248 1136 193 96 327 -84 640 -436 759 -108 36 -301 44 -413 15z m-192 -471 c11 -11 20 -31 20 -45 0 -14 -9 -34 -20 -45 -38 -38 -110 -11 -110 40 0 27 43 70 70 70 11 0 29 -9 40 -20z M2140 2095 c-509 -104 -737 -675 -397 -991 118 -109 236 -148 427 -142 359 13 644 273 658 600 5 126 -4 170 -54 260 -124 223 -367 327 -634 273z m-275 -795 c33 -13 48 -52 33 -85 -22 -48 -99 -46 -116 3 -14 42 4 72 55 91 1 1 13 -3 28 -9z%22/%3E%3Cpath fill=%22%235B1E1E%22 fill-opacity=%220.85%22 transform=%22translate%280.000000,1080.000000%29 scale%280.100000,-0.100000%29%22 d=%22M3135 9736 c-535 -132 -589 -981 -78 -1240 372 -188 782 112 783 572 1 424 -349 756 -705 668z m2 -258 c28 -26 30 -61 3 -88 -42 -42 -110 -14 -110 46 0 58 63 83 107 42z M6944 5601 c-456 -130 -624 -662 -305 -964 352 -332 983 -108 1050 373 37 273 -134 524 -405 594 -84 22 -259 20 -340 -3z m518 -278 c39 -35 3 -113 -53 -113 -49 0 -76 74 -42 112 20 22 70 23 95 1z M845 5470 c-460 -93 -536 -664 -131 -976 399 -305 950 -113 945 331 -1 78 -4 84 -69 136 -77 63 -149 174 -185 284 -34 105 -44 116 -150 166 -128 60 -289 83 -410 59z m-65 -240 c73 -39 27 -136 -54 -116 -31 8 -52 56 -37 85 20 37 57 49 91 31z%22/%3E%3Cpath fill=%22%23E16D22%22 fill-opacity=%220.42%22 transform=%22translate%280.000000,1080.000000%29 scale%280.100000,-0.100000%29%22 d=%22M6332 9203 c-252 -153 -441 -433 -493 -730 -12 -66 -12 -66 -25 -34 -23 54 -103 171 -157 228 -141 150 -389 262 -579 263 -48 0 -48 0 -48 -78 0 -209 120 -424 302 -542 57 -37 57 -37 -45 -43 -221 -14 -431 -104 -570 -245 -48 -49 -48 -49 9 -105 188 -189 492 -286 742 -238 51 10 51 15 -2 -61 -153 -220 -221 -542 -172 -818 11 -65 11 -65 48 -68 55 -5 151 22 248 69 161 79 287 236 337 422 l19 67 39 -82 c132 -274 396 -472 673 -505 55 -6 55 -6 49 153 -9 287 -98 518 -275 715 -26 29 -39 50 -30 47 43 -17 190 -29 266 -23 265 20 491 149 640 362 31 43 31 43 -50 107 -255 203 -603 250 -911 121 -12 -5 -2 18 32 69 171 263 195 617 62 902 -22 46 -41 84 -44 84 -2 0 -31 -17 -65 -37z m-415 -1055 c30 -28 30 -74 1 -105 -45 -49 -128 -14 -128 54 0 66 77 98 127 51z m163 -10 c25 -28 27 -89 3 -110 -44 -37 -103 -26 -123 23 -31 75 66 145 120 87z m-237 -135 c37 -34 17 -108 -36 -126 -41 -15 -96 27 -96 73 0 67 80 99 132 53z m331 6 c51 -40 20 -129 -46 -129 -25 0 -27 -2 -18 -19 44 -84 -50 -162 -115 -96 -50 50 -14 130 56 123 38 -3 38 -3 19 17 -63 67 32 161 104 104z m-196 -50 c4 -30 -22 -46 -44 -28 -17 14 -18 31 -2 47 19 19 43 9 46 -19z m-36 -76 c29 -26 24 -87 -8 -112 -49 -39 -108 -17 -120 44 -13 66 77 114 128 68z M2810 6084 c-196 -223 -289 -629 -213 -924 5 -22 1 -20 -43 20 -97 90 -227 163 -354 197 -92 25 -337 25 -435 0 -103 -26 -103 -27 -82 -84 73 -198 272 -371 483 -420 l72 -17 -75 -32 c-204 -89 -366 -241 -462 -433 -18 -34 -31 -64 -29 -66 2 -1 26 -14 53 -28 222 -111 520 -108 751 8 66 33 83 39 79 25 -89 -279 -36 -647 129 -908 27 -43 27 -43 89 -10 89 47 223 183 269 273 62 121 89 298 64 420 -8 39 -8 39 66 -30 117 -112 253 -191 393 -230 83 -23 287 -31 380 -15 88 15 87 14 49 122 -95 265 -274 476 -516 608 -71 38 -71 38 -32 45 333 58 579 268 683 584 29 90 28 95 -26 119 -284 120 -673 47 -912 -173 -32 -29 -42 -35 -38 -20 3 11 12 40 19 65 25 88 16 360 -15 463 -50 164 -131 299 -250 415 -64 63 -64 63 -97 26z m185 -1149 c30 -30 32 -64 4 -99 -42 -53 -129 -23 -129 46 0 69 77 102 125 53z m-160 -40 c49 -48 17 -125 -52 -125 -76 0 -104 101 -38 138 32 18 64 14 90 -13z m296 -43 c45 -37 11 -132 -48 -132 -11 0 -8 -6 11 -21 31 -24 37 -87 10 -113 -26 -27 -89 -21 -113 10 -21 27 -21 27 -21 0 0 -34 -41 -76 -75 -76 -35 0 -75 42 -75 78 0 62 85 97 129 53 18 -18 18 -17 30 14 7 20 22 37 40 45 29 11 29 11 5 35 -68 68 31 167 107 107z m-193 -94 c16 -16 -3 -48 -29 -48 -22 0 -34 22 -25 45 6 18 37 20 54 3z m-124 -28 c23 -22 25 -72 6 -96 -57 -68 -166 -6 -128 72 25 53 80 64 122 24z%22/%3E%3Cpath fill=%22%235B1E1E%22 transform=%22translate%280.000000,1080.000000%29 scale%280.100000,-0.100000%29%22 d=%22M5834 8158 c-79 -38 -27 -154 57 -126 56 19 58 101 3 127 -29 13 -32 13 -60 -1z M5980 8130 c-43 -43 -11 -120 49 -120 32 0 71 39 71 70 0 57 -80 90 -120 50z M5740 8000 c-43 -43 -11 -120 49 -120 32 0 71 39 71 70 0 57 -80 90 -120 50z M6077 8003 c-32 -37 -22 -94 21 -112 74 -31 132 57 76 114 -21 20 -77 19 -97 -2z M5855 7888 c-62 -35 -37 -128 35 -128 64 0 91 70 45 115 -26 27 -49 31 -80 13z M6000 7870 c-44 -44 -15 -120 46 -120 35 0 47 8 63 37 35 68 -55 137 -109 83z M2896 4934 c-36 -35 -28 -91 15 -115 66 -35 136 64 81 114 -23 21 -76 22 -96 1z M2730 4883 c-52 -66 41 -152 100 -93 26 26 26 81 2 103 -29 27 -77 22 -102 -10z M3036 4849 c-52 -41 -25 -119 42 -119 66 0 94 69 47 115 -30 30 -54 31 -89 4z M2710 4730 c-11 -11 -20 -33 -20 -50 0 -17 9 -39 20 -50 11 -11 33 -20 50 -20 17 0 39 9 50 20 11 11 20 33 20 50 0 17 -9 39 -20 50 -11 11 -33 20 -50 20 -17 0 -39 -9 -50 -20z M3000 4690 c-34 -34 -26 -86 17 -109 33 -17 51 -14 78 14 46 45 19 115 -45 115 -17 0 -39 -9 -50 -20z M2850 4650 c-26 -26 -26 -81 -2 -103 29 -27 77 -22 102 10 52 66 -41 152 -100 93z%22/%3E%3Cpath fill=%22%235B1E1E%22 transform=%22translate%280.000000,1080.000000%29 scale%280.100000,-0.100000%29%22 d=%22M3044 9464 c-37 -55 25 -117 80 -80 28 18 36 72 14 94 -22 22 -76 14 -94 -14z M4132 8794 c-25 -17 -31 -71 -10 -92 21 -21 75 -15 92 10 22 31 20 45 -9 73 -28 29 -42 31 -73 9z M2510 8310 c-39 -39 -14 -100 42 -100 53 0 79 74 36 104 -30 21 -54 20 -78 -4z M6404 5875 c-33 -51 28 -115 79 -82 52 34 36 100 -25 105 -30 3 -40 -1 -54 -23z M1607 5812 c-36 -40 -9 -102 45 -102 51 0 78 69 40 103 -24 22 -65 21 -85 -1z M7371 5321 c-25 -25 -27 -49 -5 -79 24 -35 84 -28 103 12 27 58 -53 112 -98 67z M706 5211 c-44 -49 14 -123 72 -91 53 30 33 110 -28 110 -15 0 -35 -9 -44 -19z M1471 4184 c-36 -46 -14 -94 43 -94 41 0 56 15 56 56 0 60 -63 84 -99 38z M6451 4126 c-21 -25 -9 -79 21 -95 52 -29 107 34 74 84 -19 29 -75 35 -95 11z M957 2592 c-34 -37 -11 -94 36 -94 36 0 57 19 57 53 0 53 -59 79 -93 41z M1800 1280 c-11 -11 -20 -28 -20 -38 0 -23 40 -62 63 -62 23 0 57 36 57 60 0 11 -9 29 -20 40 -11 11 -29 20 -40 20 -11 0 -29 -9 -40 -20z%22/%3E%3C/svg%3E");
  --fn-motif-opacity: .10;
}

/* Let the page background show the motif: colour + grain move to <html> */
html {
  background-color: var(--fn-dune) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .12 0 0 0 0 .12 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
}
html body,
html body .app-inner,
html body main {
  background-color: transparent !important;
  background-image: none !important;
}

/* Two sprigs, pinned to the page edges, partly off-screen */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  background: var(--fn-motif) center / contain no-repeat;
  opacity: var(--fn-motif-opacity);
  will-change: transform, opacity;
}
/* Upper sprig — right edge (start side in RTL) */
body::before {
  width: 400px;
  aspect-ratio: 840 / 1080;
  top: 14vh;
  right: -110px;
  transform: rotate(-8deg);
}
/* Lower sprig — left edge, mirrored */
body::after {
  width: 340px;
  aspect-ratio: 840 / 1080;
  bottom: -60px;
  left: -90px;
  transform: scaleX(-1) rotate(-10deg);
  opacity: calc(var(--fn-motif-opacity) * .8);
}

@media (max-width: 767px) {
  :root { --fn-motif-opacity: .07; }
  body::before { width: 230px; right: -90px; top: 20vh; }
  body::after  { width: 200px; left: -80px; }
}

/* Gentle parallax: moves slower than the page, then fades out */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes fn-motif-upper {
      0%   { transform: translateY(0) rotate(-8deg);      opacity: var(--fn-motif-opacity); }
      100% { transform: translateY(-18vh) rotate(-3deg);  opacity: 0; }
    }
    @keyframes fn-motif-lower {
      0%   { transform: scaleX(-1) translateY(12vh) rotate(-10deg); opacity: 0; }
      25%  { opacity: var(--fn-motif-opacity); }
      80%  { opacity: var(--fn-motif-opacity); }
      100% { transform: scaleX(-1) translateY(-8vh) rotate(-5deg); opacity: 0; }
    }
    body::before {
      animation: fn-motif-upper linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 55%;
    }
    body::after {
      animation: fn-motif-lower linear both;
      animation-timeline: scroll(root block);
      animation-range: 8% 100%;
    }
  }
}

/* Footer: the same motif as a soft Dune silhouette in the corner */
.store-footer::before { z-index: 1; }            /* dune-wave edge stays on top */
.store-footer__inner { position: relative; z-index: 1; }
.store-footer::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 300px;
  aspect-ratio: 840 / 1080;
  bottom: 0;
  left: 0;
  background-color: var(--fn-dune);
  -webkit-mask: var(--fn-motif) center / contain no-repeat;
          mask: var(--fn-motif) center / contain no-repeat;
  opacity: .06;
  transform: scaleX(-1);
  transform-origin: center;
}
@media (max-width: 767px) { .store-footer::after { width: 180px; opacity: .05; } }

/* Hero sprig (used by the "البنر الرئيسي - فنك" HTML section) */
.fn-hero__motif {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 260px;
  aspect-ratio: 840 / 1080;
  left: -70px;
  bottom: -80px;
  background: var(--fn-motif) center / contain no-repeat;
  opacity: .14;
  transform: scaleX(-1) rotate(-12deg);
}
@media (max-width: 900px) { .fn-hero__motif { width: 170px; left: auto; right: -60px; bottom: auto; top: -50px; opacity: .10; transform: rotate(-8deg); } }


/* ------------------------------------------------------------------
   18 · HEADING FONT, BRAND ICONS, TASTING-NOTE CHIPS
   ------------------------------------------------------------------ */

/* El Messiri for headings only (warm, calligraphic — closest to the
   "Fennec" serif). Body text stays IBM Plex Sans Arabic. */
@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/elmessiri/v25/K2F0fZBRmr9vQ1pHEey6MoiAAhLz.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/elmessiri/v25/K2F0fZBRmr9vQ1pHEey6Mo2AAg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --fn-display: 'El Messiri', 'IBM Plex Sans Arabic', sans-serif; }

.s-block__title h2,
.s-slider-block__title h2,
.fn-hero h1,
.fn-cat__name,
.fn-brew__name,
.fn-hero__badge b,
.home-slider h2,
.s-block--hero-slider h2,
.s-block--features__item h2,
.product-single h1,
.product-details h1,
.store-footer h3 {
  font-family: var(--fn-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Feature icons: brand line icons replace the theme's generic ones */
.s-block--features__item .feature-icon i { display: none !important; }
.s-block--features__item .feature-icon::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: var(--fn-orange);
  -webkit-mask: var(--fn-ic, none) center / contain no-repeat;
          mask: var(--fn-ic, none) center / contain no-repeat;
}
.s-block--features__item .feature-icon:has(.sicon-fire)          { --fn-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2212%22 cy=%2214%22 rx=%226.2%22 ry=%227.5%22 transform=%22rotate(-25 12 14)%22/%3E%3Cpath d=%22M9.5 8.5c2.5 2 2 5.5 0 8.5 2.5-1 4.5-4.5 2.5-8.5%22/%3E%3Cpath d=%22M15.5 2.5c-1 1.2 1 2-0 3.4M18.5 3.5c-1 1.2 1 2 0 3.4%22/%3E%3C/svg%3E"); }
.s-block--features__item .feature-icon:has(.sicon-shipping-fast) { --fn-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z%22/%3E%3Cpath d=%22M3.5 7.5 12 12l8.5-4.5M12 12v9%22/%3E%3Cpath d=%22M7.7 5.2l8.5 4.6%22/%3E%3C/svg%3E"); }
.s-block--features__item .feature-icon:has(.sicon-store2)        { --fn-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.8 19.5 6v5.6c0 4.6-3.2 8.4-7.5 9.6-4.3-1.2-7.5-5-7.5-9.6V6z%22/%3E%3Cpath d=%22m8.6 12 2.4 2.4 4.4-4.6%22/%3E%3C/svg%3E"); }
/* Any other icon keeps the theme glyph */
.s-block--features__item .feature-icon:not(:has(.sicon-fire, .sicon-shipping-fast, .sicon-store2)) i { display: inline !important; }
.s-block--features__item .feature-icon:not(:has(.sicon-fire, .sicon-shipping-fast, .sicon-store2))::before { display: none; }

/* Tasting notes: put them in the product "subtitle" field
   (e.g. توت · شوكولاتة · كراميل) and they show as a soft chip */
.s-product-card-content-subtitle {
  display: inline-block !important;
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: var(--fn-pill);
  background: var(--fn-orange-tint);
  color: var(--fn-brown) !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.8;
  opacity: 1 !important;
}
.s-product-card-content-subtitle:empty { display: none !important; }

/* Warm image placeholders while photos load (instead of grey) */
.s-product-card-image,
.lazy__bg:not(.loaded) { background-color: var(--fn-dune-light) !important; }


/* ------------------------------------------------------------------
   19 · HEADER LOGO SIZE
   The logo file is square with wide margins around the artwork, so it
   needs a larger box to read properly. Fits inside the 84px header.
   ------------------------------------------------------------------ */
.store-header .navbar-brand img {
  max-height: none !important;
  height: 76px !important;
  width: auto !important;
  transition: height .25s cubic-bezier(.2, .7, .2, 1);
}
.main-nav-container.fixed-pinned .navbar-brand img { height: 62px !important; }
@media (max-width: 767px) {
  .store-header .navbar-brand img { height: 60px !important; }
  .main-nav-container.fixed-pinned .navbar-brand img { height: 52px !important; }
}


/* ------------------------------------------------------------------
   20 · CONTACT LINKS (top bar + footer)
   Phone and email as plain tappable text with a thin outlined icon
   (no background). The theme nests a broken link inside the top-bar
   link; pointer-events keeps taps on the real one.
   ------------------------------------------------------------------ */
.top-navbar .s-contacts-topnav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(225, 109, 34, .9);
  transition: color var(--fn-fast) var(--fn-ease);
}
.top-navbar .s-contacts-topnav-link:hover { color: #F3A56F !important; }
.top-navbar .s-contacts-topnav-link a { pointer-events: none; }

/* Phone numbers always read left-to-right inside RTL text */
.s-contacts .unicode { direction: ltr; unicode-bidi: isolate; }

.store-footer .s-contacts-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.store-footer .s-contacts-list .s-contacts-item {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  background: none !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: color var(--fn-fast) var(--fn-ease);
}
.store-footer .s-contacts-list .s-contacts-item:hover { color: #F3A56F !important; }
.store-footer .s-contacts-list .s-contacts-item .s-contacts-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: none !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  margin: 0 !important;
  transition: border-color var(--fn-fast) var(--fn-ease);
}
.store-footer .s-contacts-list .s-contacts-item:hover .s-contacts-icon { border-color: #F3A56F !important; }


/* ------------------------------------------------------------------
   21 · TOP BAR — small Dune motif pattern, search only
   Tiny sprigs of the logo branch (the --fn-motif from section 17)
   repeated in Dune at very low opacity on the brown bar. The email
   is hidden here (it's in the footer); the return-policy link is
   switched off in the theme settings.
   ------------------------------------------------------------------ */
.top-navbar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.top-navbar::before,
.top-navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--fn-dune);
}
/* larger sprigs, evenly spaced */
.top-navbar::before {
  -webkit-mask: var(--fn-motif) 0 50% / auto 30px space;
          mask: var(--fn-motif) 0 50% / auto 30px space;
  opacity: .10;
}
/* smaller mirrored sprigs in between, for a fuller texture */
.top-navbar::after {
  -webkit-mask: var(--fn-motif) 0 50% / auto 20px space;
          mask: var(--fn-motif) 0 50% / auto 20px space;
  opacity: .07;
  transform: scaleX(-1) translateX(-18px);
}

/* No duplicate contact in the top bar */
.top-navbar .s-contacts-header { display: none !important; }

/* Search: centred with a comfortable width, so the pattern shows around it */
.top-navbar .container > .flex-1 { justify-content: center; }
.top-navbar .header-search {
  flex: 0 1 560px !important;
  max-width: 560px;
  margin-inline: auto;
}