@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Almarai:wght@300;400;700;800&display=swap');

/* =====================================================================
   ADHAM — Salla custom theme (CSS)
   Paste into: Salla dashboard > Theme customization > Custom CSS
   Pair with app.js in the Custom JS box.

   01 Tokens          06 Section titles + slider
   02 Base            07 Product cards
   03 Header/navbar   08 Buttons + inputs
   04 Hero            09 Footer
   05 Banners         10 Helpers  11 Inner pages  12 Responsive  13 Motion
   ===================================================================== */


/* ============================ 01 . TOKENS ============================ */
:root {
  /* Surfaces — #1c1c1c matches the banner artwork exactly */
  --ad-bg:            #1c1c1c;
  --ad-bg-soft:       #212121;
  --ad-bg-raise:      #262626;
  --ad-bg-deep:       #141414;
  --ad-line:          rgba(168, 155, 123, .22);
  --ad-line-strong:   rgba(168, 155, 123, .45);

  /* Brand gold / beige */
  --ad-gold:          #a89b7b;
  --ad-gold-light:    #cdc0a0;
  --ad-gold-lighter:  #e4d9bd;
  --ad-gold-dark:     #887c62;
  --ad-gold-deep:     #6b6150;

  /* Text */
  --ad-text:          #ece8df;
  --ad-text-muted:    #a29c90;
  --ad-text-dim:      #77726a;
  --ad-on-gold:       #1c1c1c;

  /* Effects */
  --ad-shadow:        0 18px 48px rgba(0, 0, 0, .55);
  --ad-shadow-sm:     0 8px 22px rgba(0, 0, 0, .40);
  --ad-radius:        14px;
  --ad-radius-lg:     22px;
  --ad-ease:          cubic-bezier(.22, .61, .36, 1);
  --ad-ease-out:      cubic-bezier(.16, 1, .3, 1);

  /* Fonts */
  --ad-font-display:  'Amiri', 'Amazon-Ember', serif;
  --ad-font-body:     'Almarai', 'Amazon-Ember', system-ui, sans-serif;

  /* Hero */
  --ad-hero-image: url("https://cdn.files.salla.network/other/5514823/b81ddf45-30b4-41cb-8595-1791f3ae7c3f-original.webp");
  --ad-hero-h: 100svh;
  --ad-hero-h-min: 620px;

  /* Salla theme variables */
  --color-primary:          #a89b7b;
  --color-primary-dark:     #887c62;
  --color-primary-light:    #cdc0a0;
  --color-primary-reverse:  #1c1c1c;
  --font-main:              'Almarai', 'Amazon-Ember', sans-serif;
  --s-radius:               14px;
  --mainnav-bg:             #1c1c1c;
  --footer-bg:              #a89b7b;

  color-scheme: dark;
}


/* ============================= 02 . BASE ============================= */
html { background: var(--ad-bg); scroll-behavior: smooth; }

body#app,
body.theme-raed {
  background-color: var(--ad-bg) !important;
  color: var(--ad-text) !important;
  font-family: var(--ad-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body .app-inner,
body #main-content,
body main,
body .s-blocks-wrapper { background-color: var(--ad-bg) !important; }

/* Stop the white flash while Salla web components boot */
salla-products-slider,
salla-slider,
salla-product-card,
custom-salla-product-card,
salla-custom-component { background: transparent !important; }

/* Neutralise the theme's light utility classes on every page.
   Header (03) and footer (09) are declared later and re-assert their own
   colours, so they are unaffected by these. */
body .bg-white,
body .bg-gray-50,
body .bg-gray-100,
body .bg-gray-200 { background-color: var(--ad-bg-soft) !important; }

body .text-gray-900,
body .text-gray-800,
body .text-gray-700,
body .text-gray-600 { color: var(--ad-text) !important; }

body .text-gray-500,
body .text-gray-400,
body .text-gray-300 { color: var(--ad-text-muted) !important; }

body .border-gray-100,
body .border-gray-200,
body .border-gray-300 { border-color: var(--ad-line) !important; }

::selection      { background: var(--ad-gold); color: var(--ad-on-gold); }
::-moz-selection { background: var(--ad-gold); color: var(--ad-on-gold); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ad-gold) !important;
  outline-offset: 3px;
  border-radius: 6px;
}

img { -webkit-user-drag: none; }

body h1, body h2, body h3, body h4 {
  font-family: var(--ad-font-display) !important;
  letter-spacing: 0;
}


/* ========================= 03 . HEADER / NAVBAR ====================== */
/* Hide the whole top bar (search + links + policies) */
body .store-header .top-navbar,
body .top-navbar { display: none !important; }

/* Keep .store-header in normal flow.
   The Salla theme runs its OWN sticky logic: on scroll it adds
   .fixed-pinned / .fixed-header to #mainnav and makes #mainnav .inner
   position:fixed. Pinning .store-header ourselves renders a 2nd navbar. */
body .store-header {
  position: relative !important;
  z-index: 40;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
body .store-header::before { content: none !important; }

body #mainnav,
body .main-nav-container {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Full-width glass bar — identical in the static and pinned states */
body #mainnav .inner,
body #mainnav.fixed-pinned .inner,
body #mainnav.fixed-header .inner {
  position: relative;
  background: linear-gradient(180deg, rgba(38, 38, 38, .94), rgba(28, 28, 28, .90)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .42) !important;
}

/* Thin highlight along the top edge */
body #mainnav .inner::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to left, transparent, rgba(255, 255, 255, .35), transparent);
  pointer-events: none;
}

body #mainnav .container { max-width: 1280px; }
body #mainnav .container > .flex { min-height: 68px; }

/* Logo.
   The uploaded file is pure black artwork on transparency, so it is
   invisible on the dark bar. brightness(0) flattens it to solid black and
   invert(1) flips it to white — matching the white calligraphy used in the
   banner artwork.
   For a gold logo instead, swap the filter line for:
   filter: brightness(0) invert(1) sepia(1) saturate(2.6) brightness(.9)
           drop-shadow(0 2px 8px rgba(0,0,0,.55)); */
body .navbar-brand img {
  max-height: 46px;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, .55));
}
body .main-nav-container.fixed-pinned .navbar-brand img { max-height: 38px; }

/* Same treatment wherever the logo repeats (mobile menu, sticky bar) */
body .mm-panels .navbar-brand img,
body .mobile-menu .navbar-brand img { filter: brightness(0) invert(1); }

/* Everything in the navbar is white and fully opaque */
body .store-header,
body .store-header i,
body .store-header a,
body .store-header span,
body .store-header .sicon-menu,
body .store-header .header-btn__icon,
body #mainnav i,
body #mainnav a,
body #mainnav span,
body custom-main-menu a,
body custom-main-menu i,
body .main-menu > li > a,
body .main-menu > .menu-item > a {
  color: #ffffff !important;
  opacity: 1 !important;
}

body .store-header a:hover,
body .store-header i:hover,
body #mainnav a:hover,
body custom-main-menu a:hover,
body .main-menu > li > a:hover { color: var(--ad-gold-lighter) !important; }

body .main-menu > li > a,
body .main-menu > .menu-item > a,
body custom-main-menu a {
  font-family: var(--ad-font-body) !important;
  font-size: .95rem;
  font-weight: 400;
  position: relative;
}

/* Gold underline grows from the centre on hover */
body .main-menu > li > a::after,
body .main-menu > .menu-item > a::after,
body custom-main-menu > ul > li > a::after {
  content: "";
  position: absolute;
  bottom: 10px; right: 50%; left: 50%;
  height: 1.5px;
  background: linear-gradient(to left, transparent, var(--ad-gold-lighter), transparent);
  transition: right .35s var(--ad-ease-out), left .35s var(--ad-ease-out);
}
body .main-menu > li > a:hover::after,
body .main-menu > .menu-item > a:hover::after,
body custom-main-menu > ul > li > a:hover::after { right: 12%; left: 12%; }

/* Desktop dropdowns */
body .main-menu .sub-menu,
body .sub-menu {
  background-color: var(--ad-bg-soft) !important;
  border-color: var(--ad-line) !important;
  color: var(--ad-text) !important;
}

/* ---- Mobile drawer (the .sicon-menu hamburger opens this) ----
   The theme uses mmenu-light: .mm-ocd__content is the sliding panel
   (#fff by default) and .mm-spn--light paints it #fff/#000. Inside it
   ul/li/a inherit background and colour, so setting them on .mm-spn
   cascades to the whole tree. */
body .mm-ocd__content,
body .mm-spn,
body .mm-spn.mm-spn--light,
body .mm-spn.mm-spn--dark,
body .mm-spn ul,
body .mm-spn li {
  background: var(--ad-bg) !important;
  background-color: var(--ad-bg) !important;
  color: var(--ad-gold-light) !important;
}

/* Links and labels in beige */
body .mm-spn a,
body .mm-spn span,
body .mm-spn li > a,
body .mm-spn li > span {
  color: var(--ad-gold-light) !important;
  background: transparent !important;
}

/* Panel title (rendered via ::after on the navbar row) */
body .mm-spn.mm-spn--navbar::after { color: var(--ad-gold-lighter) !important; opacity: 1 !important; }

/* Chevrons are drawn with border-color: currentColor */
body .mm-spn li::before,
body .mm-spn.mm-spn--navbar::before { border-color: var(--ad-gold) !important; opacity: .75 !important; }

/* Separator lines */
body .mm-spn li::after,
body .mm-spn a:not(:last-child)::after,
body .mm-spn.mm-spn--navbar ul::before {
  border-color: var(--ad-line) !important;
  opacity: 1 !important;
}

/* Thumbnails inside menu items */
body .mm-spn li img { background-color: var(--ad-bg-raise) !important; }

/* Backdrop behind the drawer */
body .mm-ocd--open { background: rgba(0, 0, 0, .55) !important; }

/* No hover state at all, as requested */
body .mm-spn a:hover,
body .mm-spn li:hover,
body .mm-spn li:hover > a,
body .mm-spn span:hover,
body .mm-ocd__content a:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ad-gold-light) !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
body .mm-spn li:hover { background: var(--ad-bg) !important; }

/* Drawer close button */
body .btn--close-sm,
body .btn--close-sm i {
  background: var(--ad-bg-raise) !important;
  color: var(--ad-gold-light) !important;
  border-color: var(--ad-line) !important;
}

/* Cart badge */
body .s-cart-summary-count,
body salla-cart-summary .s-cart-summary-count {
  background: var(--ad-gold) !important;
  color: var(--ad-on-gold) !important;
  font-weight: 700;
}
body .s-cart-summary-total { color: var(--ad-gold-light) !important; }

/* Search dropdown (used on inner pages) */
body .s-search-input,
body salla-search input {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--ad-line) !important;
  color: var(--ad-text) !important;
  border-radius: 999px !important;
}
body salla-search input::placeholder { color: var(--ad-text-dim) !important; }
body .s-search-results {
  background: var(--ad-bg-soft) !important;
  border: 1px solid var(--ad-line);
}


/* ============================= 04 . HERO ============================= */
/* Image only — no overlay content. Built by app.js. */
.ad-hero {
  position: relative;
  width: 100%;
  min-height: max(var(--ad-hero-h), var(--ad-hero-h-min));
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--ad-bg-deep);
  margin: 0 !important;
  padding: 0 !important;
}

/* Image layer — Ken Burns + parallax */
.ad-hero__bg {
  position: absolute;
  inset: -6% -4%;
  background-image: var(--ad-hero-image);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--ad-hero-shift, 0px), 0) scale(1.06);
  will-change: transform;
  animation: ad-kenburns 26s var(--ad-ease) infinite alternate;
  z-index: 0;
}

/* The original Salla <img> is moved in here to keep LCP fast */
.ad-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 42%;
  max-width: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

@keyframes ad-kenburns {
  from { transform: translate3d(0, var(--ad-hero-shift, 0px), 0) scale(1.05); }
  to   { transform: translate3d(0, var(--ad-hero-shift, 0px), 0) scale(1.14); }
}

/* Edge vignette that melts into the page background */
.ad-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 38%, rgba(28,28,28,0) 52%, rgba(28,28,28,.30) 82%, rgba(28,28,28,.72) 100%),
    linear-gradient(to bottom, rgba(20,20,20,.42) 0%, rgba(28,28,28,0) 22%, rgba(28,28,28,0) 72%, var(--ad-bg) 100%);
}

/* Fine film grain */
.ad-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}


/* =================== 05 . BANNER SECTIONS (full-bleed) ============== */
/* Drop the container so the artwork meets the page background seamlessly */
body .s-block--fixed-banner {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ad-bg) !important;
}
body .s-block--fixed-banner + .s-block--fixed-banner { margin-top: 0 !important; }

body .s-block--fixed-banner > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline: 0 !important;
  margin: 0 !important;
}

body .s-block--fixed-banner .banner--fixed {
  display: block;
  width: 100%;
  border-radius: 0 !important;
  background: var(--ad-bg) !important;
  overflow: hidden;
}
body .s-block--fixed-banner .banner--fixed picture { display: block; }

body .s-block--fixed-banner .banner--fixed img,
body .banner--fixed img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
  border-radius: 0 !important;
  background: var(--ad-bg) !important;
  object-fit: cover !important;
}

/* Banners with an empty href are not clickable */
body .s-block--fixed-banner .banner--fixed.ad-no-link { cursor: default; }

/* Scroll-in reveal (app.js adds .is-in; a 3s failsafe forces it) */
body .s-block--fixed-banner[data-ad-role] .banner--fixed {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ad-ease-out), transform 1.1s var(--ad-ease-out);
}
body .s-block--fixed-banner[data-ad-role].is-in .banner--fixed { opacity: 1; transform: none; }

/* The exported artwork carries a 1-3px bright seam on some top/bottom
   edges (a slicing artifact in the source files, not a CSS gap). Crop it.
   hero and features are legitimately bright, so they are excluded. */
body .s-block--fixed-banner[data-ad-role="wordmark"] .banner--fixed img,
body .s-block--fixed-banner[data-ad-role="heading"] .banner--fixed img,
body .s-block--fixed-banner[data-ad-role="divider"] .banner--fixed img,
body .s-block--fixed-banner[data-ad-role="outro"] .banner--fixed img {
  clip-path: inset(0.7% 0);
}

/* Wordmark banner */
body .s-block--fixed-banner[data-ad-role="wordmark"] {
  padding-block: clamp(6px, 2vw, 26px) !important;
}

/* Wide collage dividers — fade top and bottom into the page colour */
body .s-block--fixed-banner[data-ad-role="divider"] .banner--fixed {
  position: relative;
  overflow: hidden;
}
body .s-block--fixed-banner[data-ad-role="divider"] .banner--fixed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
              var(--ad-bg) 0%, rgba(28,28,28,0) 16%,
              rgba(28,28,28,0) 84%, var(--ad-bg) 100%);
}

/* Features strip (shipping / support / pricing) */
body .s-block--fixed-banner[data-ad-role="features"] {
  background: var(--ad-bg) !important;
  margin-block: clamp(10px, 3vw, 34px) !important;
}

/* Closing banner (the three masks) */
body .s-block--fixed-banner[data-ad-role="outro"] { margin-bottom: 0 !important; }
body .s-block--fixed-banner[data-ad-role="outro"] .banner--fixed { position: relative; }
body .s-block--fixed-banner[data-ad-role="outro"] .banner--fixed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
              var(--ad-bg) 0%, rgba(28,28,28,0) 22%,
              rgba(20,20,20,.35) 88%, var(--ad-bg) 100%);
}


/* =================== 06 . SECTION TITLES + SLIDER =================== */
body .s-block--best-offers,
body .s-block--slider-with-bg,
body section[data-testid="store-home-products-slider"] {
  background: var(--ad-bg) !important;
  padding-block: clamp(30px, 6vw, 68px) !important;
  max-width: 1320px;
  margin-inline: auto;
  /* never hidden — product blocks must always render */
  opacity: 1 !important;
  visibility: visible !important;
}

body .s-block__title,
body .s-slider-block__title-left {
  position: relative;
  justify-content: center !important;
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 38px) !important;
}

body .s-block__title h2,
body .s-slider-block__title,
body .s-slider-block__title h2 {
  font-family: var(--ad-font-display) !important;
  font-size: clamp(1.5rem, 4.2vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: var(--ad-text) !important;
  margin: 0 auto !important;
  padding-inline: clamp(16px, 4vw, 42px);
  position: relative;
  display: inline-block;
  line-height: 1.6;
}

/* Gold diamonds flanking the title, as in the artwork */
body .s-block__title h2::before,
body .s-block__title h2::after,
body .s-slider-block__title h2::before,
body .s-slider-block__title h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  background: var(--ad-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(168, 155, 123, .7);
}
body .s-block__title h2::before,
body .s-slider-block__title h2::before { inset-inline-start: 0; }
body .s-block__title h2::after,
body .s-slider-block__title h2::after  { inset-inline-end: 0; }

/* Hairline under the title (injected by app.js) */
body .ad-title-rule {
  display: block;
  width: min(320px, 60%);
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(to left, transparent, var(--ad-gold-dark), transparent);
}

body .s-block__title p {
  color: var(--ad-text-muted) !important;
  font-family: var(--ad-font-body) !important;
  font-size: .93rem;
  line-height: 2;
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

/* "View all" pill */
body .s-block__display-all,
body .s-slider-block__display-all,
body .s-block__title-nav a {
  color: var(--ad-gold) !important;
  border: 1px solid var(--ad-line-strong) !important;
  border-radius: 999px !important;
  padding: 7px 20px !important;
  font-size: .82rem !important;
  background: transparent !important;
  transition: background-color .35s var(--ad-ease), color .35s var(--ad-ease), border-color .35s var(--ad-ease);
}
body .s-block__display-all:hover,
body .s-slider-block__display-all:hover {
  background: var(--ad-gold) !important;
  color: var(--ad-on-gold) !important;
  border-color: var(--ad-gold) !important;
}

/* Nav arrows */
body .s-slider--nav-arrow,
body .swiper-button-next,
body .swiper-button-prev {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(28, 28, 28, .82) !important;
  border: 1px solid var(--ad-line-strong) !important;
  color: var(--ad-gold) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--ad-shadow-sm);
  transition: background-color .3s var(--ad-ease), color .3s var(--ad-ease), border-color .3s var(--ad-ease);
}
body .s-slider--nav-arrow:hover,
body .swiper-button-next:hover,
body .swiper-button-prev:hover {
  background: var(--ad-gold) !important;
  color: var(--ad-on-gold) !important;
  border-color: var(--ad-gold) !important;
}
body .s-slider--nav-arrow i { color: inherit !important; }
body .swiper-button-disabled { opacity: .32 !important; }

/* Pagination bullets */
body .swiper-pagination-bullet {
  background: var(--ad-text-dim) !important;
  opacity: .5 !important;
  transition: width .35s var(--ad-ease-out), background-color .35s var(--ad-ease), opacity .35s var(--ad-ease);
}
body .swiper-pagination-bullet-active {
  background: var(--ad-gold) !important;
  opacity: 1 !important;
  width: 22px !important;
  border-radius: 4px !important;
}

body .swiper-slide { height: auto !important; }

/* Product slides are never faded — guards against any stuck animation */
body .swiper-slide,
body .s-products-list-wrapper > * { opacity: 1 !important; }


/* ========================= 07 . PRODUCT CARDS =======================
   Default is the beige card from the design.
   Set cardsStyle:'dark' in app.js for the dark variant.
   ==================================================================== */
body .s-product-card-entry {
  background: linear-gradient(158deg, #b6a986 0%, #a89b7b 55%, #978b6d 100%) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: var(--ad-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--ad-shadow-sm);
  transition: box-shadow .45s var(--ad-ease);
}

/* No movement on hover — only the shadow changes */
body .s-product-card-entry:hover {
  transform: none !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}

body .s-product-card-image {
  background: rgba(28, 28, 28, .06) !important;
  border-radius: 0 !important;
  overflow: hidden;
}
body .s-product-card-image img {
  border-radius: 0 !important;
  transform: none !important;
}

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

body .s-product-card-content-title a,
body .s-product-card-content-title {
  font-family: var(--ad-font-body) !important;
  color: #1c1c1c !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  line-height: 1.7 !important;
}
body .s-product-card-content-title a:hover { color: #000 !important; text-decoration: none; }

body .s-product-card-content-subtitle,
body .s-product-card-content-sub { color: rgba(28, 28, 28, .68) !important; }

body .s-product-card-price {
  color: #1c1c1c !important;
  font-weight: 800 !important;
  font-family: var(--ad-font-body) !important;
}
body .s-product-card-sale-price,
body .s-product-card-starting-price { color: rgba(28, 28, 28, .55) !important; }

body .s-product-card-rating i { color: #4a4326 !important; }

body .s-product-card-out-badge,
body .s-product-card-out-of-stock {
  background: rgba(28, 28, 28, .88) !important;
  color: var(--ad-gold-light) !important;
  border-radius: 999px !important;
}

body .s-product-card-wishlist-btn {
  background: rgba(28, 28, 28, .82) !important;
  color: var(--ad-gold-light) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: background-color .3s var(--ad-ease);
}
body .s-product-card-wishlist-btn:hover { background: #1c1c1c !important; }
body .s-product-card-wishlist-added { color: #e07a5f !important; }

/* Add-to-cart button inside the card */
body .s-product-card-entry .s-button-primary,
body .s-product-card-entry salla-add-product-button button,
body .s-product-card-content-footer .s-button-element {
  background: #1c1c1c !important;
  border-color: #1c1c1c !important;
  color: var(--ad-gold-lighter) !important;
  border-radius: 999px !important;
  font-family: var(--ad-font-body) !important;
  font-weight: 700 !important;
  transition: background-color .35s var(--ad-ease), color .35s var(--ad-ease);
}
body .s-product-card-entry .s-button-primary:hover,
body .s-product-card-entry salla-add-product-button button:hover {
  background: #000 !important;
  color: #fff !important;
}

/* Dark card variant */
body.ad-cards-dark .s-product-card-entry {
  background: linear-gradient(158deg, var(--ad-bg-raise), var(--ad-bg-soft)) !important;
  border-color: var(--ad-line) !important;
}
body.ad-cards-dark .s-product-card-content-title a,
body.ad-cards-dark .s-product-card-price { color: var(--ad-text) !important; }
body.ad-cards-dark .s-product-card-content-subtitle { color: var(--ad-text-muted) !important; }
body.ad-cards-dark .s-product-card-entry .s-button-primary,
body.ad-cards-dark .s-product-card-entry salla-add-product-button button {
  background: var(--ad-gold) !important;
  border-color: var(--ad-gold) !important;
  color: var(--ad-on-gold) !important;
}


/* ====================== 08 . BUTTONS + INPUTS ======================= */
body .s-button-primary,
body .btn--primary,
body .s-button-solid.s-button-primary {
  background-color: var(--ad-gold) !important;
  border-color: var(--ad-gold) !important;
  color: var(--ad-on-gold) !important;
  border-radius: 999px !important;
  font-family: var(--ad-font-body) !important;
  font-weight: 700 !important;
}
body .s-button-primary:hover,
body .btn--primary:hover {
  background-color: var(--ad-gold-light) !important;
  border-color: var(--ad-gold-light) !important;
}

body .s-button-text,
body .btn--text { color: var(--ad-gold) !important; }

body .s-button-gray-outline {
  background: transparent !important;
  border-color: var(--ad-line-strong) !important;
  color: var(--ad-text) !important;
  border-radius: 999px !important;
}

body main .s-form-control,
body main input[type="text"], body main input[type="email"], body main input[type="tel"],
body main input[type="password"], body main input[type="number"], body main input[type="search"],
body main textarea, body main select {
  background-color: var(--ad-bg-raise) !important;
  border: 1px solid var(--ad-line) !important;
  color: var(--ad-text) !important;
  border-radius: 12px !important;
}
body main .s-form-control:focus,
body main input:focus, body main textarea:focus, body main select:focus {
  border-color: var(--ad-gold) !important;
  box-shadow: 0 0 0 3px rgba(168, 155, 123, .18) !important;
}
body main input::placeholder, body main textarea::placeholder { color: var(--ad-text-dim) !important; }

body .s-quantity-input-container {
  background: var(--ad-bg-raise) !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 999px !important;
}
body .s-quantity-input-button,
body .s-quantity-input-input { color: var(--ad-text) !important; background: transparent !important; }

body .s-modal-body,
body salla-modal .s-modal-body,
body .modal-content {
  background: var(--ad-bg-soft) !important;
  color: var(--ad-text) !important;
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius-lg) !important;
}


/* Any beige/gold-filled button must carry BLACK text, never beige on
   beige. Covers the label plus nested icons and spans, and the Salla web
   components that render their button in shadow DOM. */
body .s-button-primary,
body .s-button-primary *,
body .s-button-solid,
body .s-button-solid *,
body .btn--primary,
body .btn--primary *,
body .s-button-solid.s-button-primary,
body .s-button-solid.s-button-primary *,
body salla-add-product-button .s-button-primary,
body salla-add-product-button .s-button-primary *,
body .s-block__display-all:hover,
body .s-block__display-all:hover *,
body .s-slider-block__display-all:hover,
body .s-slider--nav-arrow:hover,
body .s-slider--nav-arrow:hover *,
body .swiper-button-next:hover,
body .swiper-button-prev:hover,
body .ad-top:hover,
body .ad-top:hover * {
  color: var(--ad-on-gold) !important;
  fill: currentColor !important;
}

body salla-button::part(button),
body salla-add-product-button::part(button) { color: var(--ad-on-gold) !important; }

/* The footer sits on beige, so nothing inside it may be beige-on-beige:
   solid buttons stay black-on-beige, outline/text buttons flip to black. */
body .store-footer .s-button-primary,
body .store-footer .s-button-solid,
body .store-footer .btn--primary,
body .store-footer button,
body .store-footer .s-button-text,
body .store-footer .btn--text,
body .store-footer .s-button-gray-outline,
body .store-footer .s-button-primary *,
body .store-footer button * {
  color: #1c1c1c !important;
  border-color: rgba(28, 28, 28, .45) !important;
}
body .store-footer .s-button-primary,
body .store-footer .s-button-solid,
body .store-footer .btn--primary {
  background-color: #1c1c1c !important;
  border-color: #1c1c1c !important;
}
body .store-footer .s-button-primary,
body .store-footer .s-button-primary *,
body .store-footer .s-button-solid,
body .store-footer .s-button-solid * { color: var(--ad-gold-lighter) !important; }


/* ============================ 09 . FOOTER ===========================
   Gold background, black content.
   .store-footer__inner carries its own background in the theme (and
   again under body.footer-is-light) — both must be overridden or the
   gold never shows.
   ==================================================================== */
body .store-footer,
body .store-footer .store-footer__inner,
body.footer-is-light .store-footer,
body.footer-is-light .store-footer .store-footer__inner {
  background-color: var(--ad-gold) !important;
  background-image: none !important;
  color: #1c1c1c !important;
  border-color: rgba(28, 28, 28, .18) !important;
}

body .store-footer {
  margin-top: 0 !important;
  position: relative;
  border-top: 0 !important;
}
body .store-footer::before { content: none !important; }
body .store-footer__inner { padding-block: clamp(38px, 6vw, 66px); }

/* Every piece of footer text is black */
body .store-footer,
body .store-footer h1,
body .store-footer h2,
body .store-footer h3,
body .store-footer h4,
body .store-footer p,
body .store-footer li,
body .store-footer a,
body .store-footer span,
body .store-footer div,
body .store-footer i,
body .store-footer label,
body .store-footer button,
body .store-footer salla-menu a,
body .store-footer salla-contacts a,
body .store-footer salla-contacts span,
body .store-footer salla-social i,
body .store-footer .copyright-text,
body .store-footer .copyright-text p,
body .store-footer .text-gray-400,
body .store-footer .text-gray-500 {
  color: #1c1c1c !important;
}

body .store-footer h3 {
  font-family: var(--ad-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700;
  margin-bottom: 16px !important;
  position: relative;
  padding-bottom: 10px;
}
body .store-footer h3::after {
  content: "";
  position: absolute;
  bottom: 0; inset-inline-start: 0;
  width: 42px; height: 1.5px;
  background: rgba(28, 28, 28, .55);
}

body .store-footer a:hover {
  color: #000 !important;
  opacity: 1 !important;
  text-decoration: underline;
}

body .store-footer salla-social a,
body .store-footer .social-link,
body .store-footer .contact-social a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(28, 28, 28, .35) !important;
  background: rgba(28, 28, 28, .06) !important;
  transition: background-color .35s var(--ad-ease), border-color .35s var(--ad-ease);
}

/* Hover: black circle, gold glyph.
   Covers icon fonts (i/span) and inline SVG (fill + stroke). */
body .store-footer salla-social a:hover,
body .store-footer .social-link:hover,
body .store-footer .contact-social a:hover {
  background: #1c1c1c !important;
  border-color: #1c1c1c !important;
  text-decoration: none;
}
body .store-footer salla-social a:hover,
body .store-footer salla-social a:hover *,
body .store-footer .social-link:hover,
body .store-footer .social-link:hover *,
body .store-footer .contact-social a:hover,
body .store-footer .contact-social a:hover * {
  color: var(--ad-gold-lighter) !important;
  fill: var(--ad-gold-lighter) !important;
}
body .store-footer salla-social a:hover svg [stroke]:not([stroke="none"]),
body .store-footer .social-link:hover svg [stroke]:not([stroke="none"]) {
  stroke: var(--ad-gold-lighter) !important;
}
/* Keep a real logo image legible inside the black circle */
body .store-footer salla-social a:hover img,
body .store-footer .social-link:hover img { filter: brightness(0) invert(1); }

body .store-footer .copyright-text p { font-size: .82rem; }

/* Payment / app badges keep their own colours on the beige */
body .store-footer salla-payments img,
body .store-footer salla-apps-icons img,
body .store-footer salla-trust-badges img { filter: none !important; }

/* Sticky product bar */
body .sticky-product-bar,
body salla-sticky-product-bar {
  background: rgba(20, 20, 20, .95) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--ad-line) !important;
}


/* =========================== 10 . HELPERS =========================== */
/* Back-to-top */
.ad-top {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 22px;
  z-index: 55;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--ad-line-strong);
  background: rgba(28, 28, 28, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ad-gold);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .4s var(--ad-ease), transform .4s var(--ad-ease-out),
              visibility .4s, background-color .35s var(--ad-ease), color .35s var(--ad-ease);
  box-shadow: var(--ad-shadow-sm);
}
.ad-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.ad-top:hover { background: var(--ad-gold); color: var(--ad-on-gold); }
.ad-top svg { width: 18px; height: 18px; }

/* Scroll progress bar */
.ad-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 70;
  background: transparent;
  pointer-events: none;
}
.ad-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(to left, var(--ad-gold-dark), var(--ad-gold-lighter));
}

/* Scrollbar */
* { scrollbar-color: var(--ad-gold-dark) var(--ad-bg-deep); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ad-bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--ad-gold-dark), var(--ad-gold-deep));
  border-radius: 999px;
  border: 2px solid var(--ad-bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--ad-gold); }

body .animate-pulse .bg-gray-200 { background-color: var(--ad-bg-raise) !important; }


/* ========================= 11 . INNER PAGES ========================= */
/* Every non-home page shell: policies, about, contact, cart, account… */
body .s-products-list-wrapper,
body .products-list,
body .s-information-page,
body .s-comments-container,
body .fixed-page,
body .page-content,
body .single-page,
body .static-page,
body .cart-page,
body .profile-page,
body .s-blocks-wrapper,
body section.container,
body .content-page {
  background: var(--ad-bg) !important;
  color: var(--ad-text) !important;
}

/* Long-form copy on the policy pages */
body .s-information-page *,
body .fixed-page *,
body .page-content *,
body .content-page * { border-color: var(--ad-line) !important; }

body .s-information-page h1, body .s-information-page h2,
body .s-information-page h3, body .s-information-page h4,
body .fixed-page h1, body .fixed-page h2,
body .fixed-page h3, body .fixed-page h4,
body .page-content h1, body .page-content h2,
body .page-content h3, body .page-content h4 {
  font-family: var(--ad-font-display) !important;
  color: var(--ad-gold-lighter) !important;
}

body .s-information-page p, body .s-information-page li,
body .s-information-page span, body .s-information-page td,
body .fixed-page p, body .fixed-page li,
body .page-content p, body .page-content li,
body .content-page p, body .content-page li {
  color: var(--ad-text) !important;
  line-height: 2;
}

body .s-information-page a,
body .fixed-page a,
body .page-content a { color: var(--ad-gold-light) !important; }

body .s-information-page table,
body .page-content table { border-collapse: collapse; width: 100%; }
body .s-information-page th, body .s-information-page td,
body .page-content th, body .page-content td {
  border: 1px solid var(--ad-line) !important;
  padding: 10px 12px;
}
body .s-information-page th,
body .page-content th { background: var(--ad-bg-soft) !important; color: var(--ad-gold-light) !important; }

/* Page heading band */
body .page-title,
body .s-information-page .page-header,
body .breadcrumbs-wrap {
  background: var(--ad-bg-soft) !important;
  color: var(--ad-text) !important;
  border-bottom: 1px solid var(--ad-line) !important;
}
body .page-title h1,
body .page-title h2 {
  font-family: var(--ad-font-display) !important;
  color: var(--ad-text) !important;
}

body .breadcrumbs,
body .breadcrumbs a,
body .breadcrumbs li { color: var(--ad-text-muted) !important; }
body .breadcrumbs a:hover { color: var(--ad-gold) !important; }

body h1.product__title,
body .product-single .product__title {
  font-family: var(--ad-font-display) !important;
  color: var(--ad-text) !important;
}

body .s-comments-item-user-info-name { color: var(--ad-text) !important; }
body .s-reviews-testimonial,
body .s-reviews-container {
  background: var(--ad-bg-soft) !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: var(--ad-radius) !important;
  color: var(--ad-text) !important;
}

body #viewed-section,
body .s-block--bundle-personalized-shoppers-who-bought {
  background: var(--ad-bg) !important;
  padding-block: clamp(24px, 5vw, 54px);
  opacity: 1 !important;
}
body .s-block--bundle-personalized-shoppers-who-bought .container { max-width: 1320px; }

body .s-block--categories a,
body .category-item {
  background: var(--ad-bg-soft) !important;
  border: 1px solid var(--ad-line) !important;
  color: var(--ad-text) !important;
  border-radius: var(--ad-radius) !important;
}

body .s-add-product-toast {
  background: var(--ad-bg-soft) !important;
  border: 1px solid var(--ad-line-strong) !important;
  color: var(--ad-text) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow);
}


/* ---- Auth pages (login / register / OTP) + the phone field ----
   salla-tel-input and friends register with Stencil encapsulation 0, i.e.
   they render into the light DOM, so they can be themed directly. */
body.login, body.register, body.auth, body.verify,
body.login main, body.register main, body.auth main, body.verify main,
body .s-login-page, body .login-page, body .auth-page {
  background: var(--ad-bg) !important;
  color: var(--ad-text) !important;
}

/* The card/panel the form sits in */
body.login main .container > div,
body.register main .container > div,
body.auth main .container > div,
body salla-login, body salla-verify {
  background-color: transparent !important;
  color: var(--ad-text) !important;
}

body salla-login, body salla-verify, body salla-tel-input,
body salla-login *, body salla-verify *, body salla-tel-input * {
  border-color: var(--ad-line) !important;
}

/* Inputs, including the country-code field */
body salla-tel-input input,
body salla-tel-input select,
body salla-login input,
body salla-login select,
body salla-verify input {
  background-color: var(--ad-bg-raise) !important;
  color: var(--ad-text) !important;
  border-color: var(--ad-line) !important;
}
body salla-tel-input input::placeholder,
body salla-login input::placeholder { color: var(--ad-text-dim) !important; }

/* Country-code trigger and its dropdown list */
body salla-tel-input [class*="country"],
body salla-tel-input [class*="dropdown"],
body salla-tel-input [class*="select"],
body salla-tel-input ul,
body salla-tel-input ol {
  background-color: var(--ad-bg-soft) !important;
  color: var(--ad-text) !important;
}
body salla-tel-input li { color: var(--ad-text) !important; }
body salla-tel-input li:hover { background-color: var(--ad-bg-raise) !important; }

/* Labels, hints and headings on the auth screens */
body salla-tel-input label, body salla-login label, body salla-verify label,
body salla-tel-input span,  body salla-login span,  body salla-verify span,
body salla-tel-input p,     body salla-login p,     body salla-verify p,
body salla-login h1, body salla-login h2, body salla-login h3,
body salla-verify h1, body salla-verify h2, body salla-verify h3,
body .s-verify-back {
  color: var(--ad-text) !important;
}

/* Validation messages must stay legible on dark */
body salla-tel-input [class*="error"],
body salla-login [class*="error"],
body salla-verify [class*="error"],
body .text-red-500, body .text-red-600 { color: #ff8f7a !important; }

/* OTP / verification code boxes */
body salla-verify input[type="tel"],
body salla-verify input[type="number"],
body salla-verify input[maxlength="1"] {
  background-color: var(--ad-bg-raise) !important;
  color: var(--ad-text) !important;
  border-color: var(--ad-line-strong) !important;
}


/* ========================== 12 . RESPONSIVE ========================= */
@media (max-width: 1024px) {
  body .s-block--best-offers,
  body section[data-testid="store-home-products-slider"] { padding-inline: 14px !important; }

  /* ---- Hero on tablet/mobile ----
     Show the whole artwork at full width, exactly like the other banners,
     instead of cropping a 2.5:1 image into a tall viewport-height box.
     The section height comes from the image, so the oversized/zoomed
     layer and the Ken Burns loop are switched off here. */
  .ad-hero {
    min-height: 0 !important;
    height: auto;
  }
  .ad-hero__bg {
    position: relative;
    inset: auto;
    transform: none !important;
    animation: none !important;
    background-image: none;
  }
  .ad-hero__bg img {
    position: relative;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center;
  }
  /* Only the bottom blend is needed once the hero is banner-height */
  .ad-hero__veil {
    background: linear-gradient(to bottom, rgba(28, 28, 28, 0) 72%, var(--ad-bg) 100%);
  }
  .ad-hero__grain { opacity: .05; }
}

@media (max-width: 768px) {
  /* ---- Hero on phones ----
     Native art is 2.5:1, which renders very short on a narrow screen, so
     give it a taller frame and crop the sides from the centre — the
     figure, the book and the crow all stay in shot at 16/9.
     Tune with one value: 2.5/1 = whole image, 16/9 = default, 3/2 = taller
     but starts cutting the crow. */
  .ad-hero {
    --ad-hero-ratio: 16 / 9;
    aspect-ratio: var(--ad-hero-ratio);
    height: auto;
    min-height: 0 !important;
  }
  .ad-hero__bg {
    position: absolute;
    inset: 0;
  }
  .ad-hero__bg img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 45%;
  }

  body #mainnav .container > .flex { min-height: 58px; }
  body .navbar-brand img { max-height: 36px; }

  body .s-block__title h2,
  body .s-slider-block__title h2 { font-size: 1.3rem !important; padding-inline: 24px; }

  body .s-product-card-content { padding: 12px !important; }
  body .s-product-card-content-title a { font-size: .86rem !important; }

  .ad-top { inset-block-end: 16px; inset-inline-start: 14px; width: 42px; height: 42px; }
}

@media (max-width: 480px) {
  body .store-footer h3 { font-size: 1.1rem !important; }
}


/* ====================== 13 . MOTION / PRINT ========================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body .s-block--fixed-banner[data-ad-role] .banner--fixed {
    opacity: 1 !important;
    transform: none !important;
  }
  .ad-hero__bg { animation: none !important; transform: scale(1.02) !important; }
}

@media print {
  body { background: #fff !important; color: #000 !important; }
  .ad-hero, .ad-top, .ad-progress, .store-header { display: none !important; }
}


/* ========================== 14 . FOOTER LOGO ========================
   app.js swaps the footer store-name heading for the logo image.
   Black on the gold footer — brightness(0) forces solid black even if the
   logo file is ever replaced with coloured art.
   (The navbar logo is separate and stays white — see section 03.) */
body .ad-footer-logo {
  display: block;
  height: clamp(52px, 7vw, 74px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0);
}
body .store-footer a:has(> .ad-footer-logo) { display: inline-block; }
body .store-footer a:hover .ad-footer-logo { text-decoration: none; }


/* =========================== 15 . PRELOADER =========================
   Full-screen brand-dark cover, white logo drawn stroke by stroke, then
   inked, held, and faded out. Fully self-contained: fixed position, own
   class namespace, removed from the DOM when finished — it changes no
   existing layout, timing or transition in the store.
   ==================================================================== */
.ad-preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ad-bg, #1c1c1c);
  opacity: 1;
  transition: opacity var(--ad-fade, 650ms) cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}
.ad-preloader.is-done { opacity: 0; }

.ad-preloader__logo {
  display: block;
  width: min(300px, 52vw);
  height: auto;
  overflow: visible;
}

/* Solid logo, revealed after the outline is drawn.
   fill-rule="evenodd" (set in the markup) keeps the counters hollow
   instead of flooding them white. */
.ad-preloader__fill {
  fill: #fff;
  fill-opacity: 0;
  animation: ad-pre-ink var(--ad-ink, 400ms) ease-out forwards;
  animation-delay: var(--ad-ink-delay, 2242ms);
}

/* The drawn outlines fade out as the solid logo fades in */
.ad-preloader__ink {
  animation: ad-pre-hide var(--ad-ink, 400ms) ease-out forwards;
  animation-delay: var(--ad-ink-delay, 2242ms);
}

/* pathLength="1" normalises every stroke, so all draw at the same rate
   regardless of their real length; --i staggers them right to left. */
.ad-preloader__ink path {
  fill: none;
  stroke: #fff;
  /* non-scaling-stroke keeps the line at a constant CSS-pixel width no
     matter how the 768x972 viewBox is scaled down on screen. */
  vector-effect: non-scaling-stroke;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ad-pre-draw var(--ad-draw, 1150ms) cubic-bezier(.65, 0, .35, 1) forwards;
  animation-delay: calc(var(--i) * var(--ad-stagger, 42ms));
}

@keyframes ad-pre-draw { to { stroke-dashoffset: 0; } }
@keyframes ad-pre-ink  { to { fill-opacity: 1; } }
@keyframes ad-pre-hide { to { opacity: 0; } }

/* No drawing when the visitor asks for reduced motion — just the logo */
@media (prefers-reduced-motion: reduce) {
  .ad-preloader__ink { display: none !important; }
  .ad-preloader__fill {
    animation: none !important;
    fill-opacity: 1 !important;
  }
}