/* =========================================================
   HOME BOARD — Premium design system for Selia (Salla)
   All rules are scoped to Selia/Twilight classes or .sf-*
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  --sf-dark: #252525;
  --sf-peach: #EFA477;
  --sf-peach-deep: #E08E5D;
  --sf-beige: #E7CFB4;
  --sf-cream: #F8F5EC;
  --sf-white: #FFFFFF;
  --sf-text: #252F2C;
  --sf-muted: #6B6560;
  --sf-line: rgba(37, 37, 37, .08);
  --sf-radius-sm: 10px;
  --sf-radius: 18px;
  --sf-radius-lg: 28px;
  --sf-shadow-sm: 0 2px 10px rgba(37, 37, 37, .05);
  --sf-shadow: 0 14px 40px -18px rgba(37, 37, 37, .22);
  --sf-ease: cubic-bezier(.22, .61, .36, 1);
  --sf-head-font: var(--font-main), sans-serif;

  /* Map onto Selia / Twilight variables */
  --color-primary: #252525;
  --color-primary-dark: #111111;
  --color-primary-light: #3a3a3a;
  --color-primary-reverse: #FFFFFF;
  --bg-primary: #F8F5EC;
  --bg-secondary: #FFFFFF;
  --header-bg: #252525;
  --header-text-color: #FFFFFF;
  --store-text-primary: #252F2C;
  --store-text-secondary: #6B6560;
  --product-bg: #FFFFFF;
  --product-border-color: rgba(37, 37, 37, .06);
  --product-enhanced-btn-bg: #FFFFFF;
  --product-enhanced-btn-color: #252525;
  --s-radius: 14px;
  --footer-bg: #252525;
  --footer-text-color: #E9E4DA;
  --bottom-footer-bg: #1C1C1C;
  --bottom-nav-bg: #FFFFFF;
  --bottom-nav-text-color: #252525;
}

html { scroll-behavior: smooth; }
body {
  background-color: var(--sf-cream);
  color: var(--sf-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sf-peach); color: var(--sf-dark); }

/* ---------- 2. Typography ---------- */
h1, h2, h3,
.s-block__title h2, .s-block__title,
.product-single__title, .product-entry__title,
.main-title, .section-title {
  font-family: var(--sf-head-font);
  letter-spacing: 0;
  color: var(--sf-dark);
}
.s-block__title h2, .s-block__title .title, .s-block__title > h2 {
  font-weight: 700;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2.1rem);
  line-height: 1.35;
}
.s-block__title p, .s-block__title .subtitle { color: var(--sf-muted); }

/* ---------- 3. Buttons ---------- */
.s-button-solid.s-button-primary,
.s-button-btn.s-button-solid,
.btn--primary {
  background: var(--sf-dark) !important;
  border-color: var(--sf-dark) !important;
  color: #fff !important;
  border-radius: 999px !important;
  transition: background .25s var(--sf-ease), transform .25s var(--sf-ease), box-shadow .25s var(--sf-ease);
}
.s-button-solid.s-button-primary:hover,
.s-button-btn.s-button-solid:hover {
  background: var(--sf-peach) !important;
  border-color: var(--sf-peach) !important;
  color: var(--sf-dark) !important;
  box-shadow: 0 10px 24px -12px rgba(224, 142, 93, .9);
}
.s-button-outline.s-button-primary-outline,
.s-button-btn.s-button-outline {
  border-radius: 999px !important;
  border-color: rgba(37, 37, 37, .18) !important;
  color: var(--sf-dark) !important;
}
.s-button-outline.s-button-primary-outline:hover,
.s-button-btn.s-button-outline:hover {
  background: var(--sf-dark) !important;
  color: #fff !important;
  border-color: var(--sf-dark) !important;
}
:focus-visible { outline: 2px solid var(--sf-peach); outline-offset: 2px; }

/* ---------- 4. Announcement bar & header ---------- */
salla-advertisement .s-advertisement,
.s-advertisement {
  background: var(--sf-dark) !important;
  color: var(--sf-cream) !important;
  font-size: .85rem;
  letter-spacing: .01em;
}
.store-header .top-navbar {
  background: var(--sf-dark);
  color: #E9E4DA;
  font-size: .82rem;
}
.store-header .top-navbar a, .store-header .top-navbar button { color: #E9E4DA; }
.store-header .main-nav-container {
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--sf-line);
  transition: box-shadow .3s var(--sf-ease), background .3s var(--sf-ease);
}
.store-header .main-nav-container .inner { background: transparent !important; }
body.sf-scrolled .store-header .main-nav-container {
  box-shadow: 0 10px 30px -20px rgba(37, 37, 37, .35);
  background: rgba(248, 245, 236, .97);
}
.store-header .main-menu > li > a,
.store-header custom-main-menu a {
  font-weight: 500;
  color: var(--sf-dark);
  position: relative;
  transition: color .2s var(--sf-ease);
}
.store-header .main-menu > li > a:hover,
.store-header custom-main-menu > ul > li > a:hover { color: var(--sf-peach-deep); }
.s-cart-summary-count, .s-cart-summary-count.badge {
  background: var(--sf-peach) !important;
  color: var(--sf-dark) !important;
  font-weight: 700;
}

/* ---------- 5. Product cards ---------- */
.product-card {
  background: var(--sf-white);
  border-radius: var(--sf-radius) !important;
  border: 1px solid var(--product-border-color);
  box-shadow: var(--sf-shadow-sm);
  overflow: hidden;
  transition: transform .35s var(--sf-ease), box-shadow .35s var(--sf-ease);
}
@media (hover: hover) {
  .product-card:hover { transform: translateY(-4px); box-shadow: var(--sf-shadow); }
}
.product-card .product-card__image {
  background: linear-gradient(180deg, #FBF8F2 0%, #F3EDE2 100%);
  border-radius: 0 !important;
}
.product-card .product-card__image img { mix-blend-mode: multiply; }
.product-card .product-card__content { padding: 14px 16px 16px; }
.product-card .product-card__title a {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sf-dark);
}
.product-card .product-card__subtitle, .product-card .product-card__promotion {
  color: var(--sf-muted);
  font-size: .8rem;
}
/* size selector inside card */
.product-card .product-options { margin-top: 10px; }
.product-card .s-product-options-option-label {
  font-size: .78rem;
  color: var(--sf-muted);
  margin-bottom: 4px;
}
.product-card .s-product-options-option-label b span { color: var(--sf-peach-deep); }
.product-card .product-options select.s-form-control {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(37, 37, 37, .14);
  background-color: var(--sf-cream);
  color: var(--sf-dark);
  font-weight: 500;
  font-size: .92rem;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.product-card .product-options select.s-form-control:hover,
.product-card .product-options select.s-form-control:focus {
  border-color: var(--sf-peach);
  box-shadow: 0 0 0 3px rgba(239, 164, 119, .25);
  outline: none;
}
.product-card .product-card__price { margin-top: 10px; gap: 8px; align-items: baseline; }
.product-card .total-price { font-size: 1.15rem; font-weight: 700; color: var(--sf-dark) !important; }
.product-card .price_is_on_sale .total-price { color: #C0532E !important; }
.product-card .before-price { font-size: .85rem; color: #9A938B !important; }
.product-card .starting-price-title { font-size: .78rem; font-weight: 500; color: var(--sf-muted) !important; }
.product-card .sf-price-flash { animation: sfPriceFlash .5s var(--sf-ease); }
@keyframes sfPriceFlash { 0% { opacity: .2; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
/* add to cart: large, touch-friendly */
.product-card salla-add-product-button button.s-button-element {
  min-height: 46px;
  font-weight: 600;
  font-size: .95rem;
}
.product-card salla-add-product-button button.s-button-outline {
  background: var(--sf-dark) !important;
  color: #fff !important;
  border-color: var(--sf-dark) !important;
}
.product-card salla-add-product-button button.s-button-outline:hover {
  background: var(--sf-peach) !important;
  border-color: var(--sf-peach) !important;
  color: var(--sf-dark) !important;
}
/* wishlist / quick view floating glass buttons */
.product-card .product-card__actions button,
.product-card .wishlist button,
.product-card .quickview-btn button {
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .6) !important;
  color: var(--sf-dark) !important;
  box-shadow: 0 4px 14px -6px rgba(37, 37, 37, .3);
}
.product-card .btn--wishlist.added i, .product-card .btn--wishlist.favorited i { color: #D9534F; }
/* badges */
.product-card .promotion-title, .product-card .product-card__promotion-title,
.product-card [class*="discount"] {
  border-radius: 999px;
}

/* ---------- 6. Section rhythm ---------- */
.s-block { position: relative; }
.s-block--about, .s-block--faq, .s-block--features { background: transparent; }
.s-block--faq details, .s-block--faq .faq-item, .s-block--faq .accordion-item {
  background: var(--sf-white);
  border: 1px solid var(--sf-line);
  border-radius: 14px;
  margin-bottom: 10px;
  transition: box-shadow .25s var(--sf-ease);
}
.s-block--faq details[open], .s-block--faq .faq-item.active { box-shadow: var(--sf-shadow-sm); }

/* ---------- 7. Footer ---------- */
.store-footer { background: var(--sf-dark) !important; color: #E9E4DA; }
.store-footer a { color: #E9E4DA; transition: color .2s; }
.store-footer a:hover { color: var(--sf-peach); }
.store-footer h3, .store-footer .title { color: #fff; font-family: var(--sf-head-font); }

/* ---------- 8. Scroll reveal (JS adds .sf-reveal) ---------- */
.sf-js .sf-reveal { opacity: 0; transform: translateY(26px); }
.sf-js .sf-reveal.sf-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--sf-ease), transform .8s var(--sf-ease);
  transition-delay: var(--sf-delay, 0s);
}

/* ---------- 9. Mobile ---------- */
html, body { overflow-x: clip; }
@media (max-width: 640px) {
  .product-card .product-card__content { padding: 10px 10px 12px; }
  .product-card .product-card__title a { font-size: .9rem; }
  .product-card .total-price { font-size: 1.02rem; }
  .product-card .product-options select.s-form-control { min-height: 42px; font-size: .85rem; }
  .product-card salla-add-product-button button.s-button-element { min-height: 44px; font-size: .88rem; }
}

/* ---------- 11. Hero slider ---------- */
.advanced-slider.s-block { margin-top: 0 !important; }
.advanced-slider .advanced-slider__caption__inner__content__heading {
  color: #fff !important;
  font-family: var(--sf-head-font);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.6rem);
  line-height: 1.25;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
.advanced-slider .advanced-slider__caption__inner__content__text {
  color: rgba(255, 255, 255, .9) !important;
  font-size: clamp(.95rem, .85rem + .4vw, 1.2rem);
  line-height: 1.9;
  max-width: 36ch;
}
.advanced-slider .advanced-slider__caption__inner__content__button {
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-weight: 700;
  background: var(--sf-peach) !important;
  color: var(--sf-dark) !important;
  border: 0 !important;
  box-shadow: 0 14px 30px -14px rgba(239, 164, 119, .9);
  transition: transform .25s var(--sf-ease), background .25s var(--sf-ease);
}
.advanced-slider .advanced-slider__caption__inner__content__button:hover { background: #fff !important; transform: translateY(-2px); }

/* ---------- 12. Category grid ---------- */
.s-block--images-grid .images-grid__item { border-radius: var(--sf-radius-lg) !important; overflow: hidden; isolation: isolate; }
.s-block--images-grid .images-grid__item img { transition: transform .9s var(--sf-ease); }
.s-block--images-grid .images-grid__item:hover img { transform: scale(1.05); }
.s-block--images-grid .images-grid__title {
  bottom: 16px !important;
  inset-inline-start: 16px !important;
  inset-inline-end: auto !important;
  width: auto !important;
  padding: 10px 20px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--sf-dark) !important;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 8px 24px -12px rgba(37, 37, 37, .35);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.s-block--images-grid .images-grid__title::after { content: '\2190'; font-size: .9em; transition: transform .3s var(--sf-ease); }
.s-block--images-grid .images-grid__item:hover .images-grid__title::after { transform: translateX(-4px); }

/* ---------- 13. Product rows ---------- */
.s-slider-block__title { align-items: center; }
.s-slider-block__title h2 { font-family: var(--sf-head-font); font-weight: 700; font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem); }
.s-slider-block__display-all {
  border: 1px solid rgba(37, 37, 37, .15) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: .82rem !important;
  font-weight: 600;
  color: var(--sf-dark) !important;
  background: #fff;
  transition: all .25s var(--sf-ease);
}
.s-slider-block__display-all:hover { background: var(--sf-dark); color: #fff !important; border-color: var(--sf-dark) !important; }
.s-slider-nav-arrow { border-radius: 999px !important; background: #fff !important; border: 1px solid var(--sf-line) !important; }
.product-card form.product-form { flex: 1 1 auto; display: flex; flex-direction: column; }
.product-card .product-card__content { flex: 1 1 auto; display: flex; flex-direction: column; }
.product-card .product-card__content-wrapper { flex: 1 1 auto; }

/* ---------- 14. Features & about ---------- */
.s-block--enhanced-features [class*="feature"] { border-radius: var(--sf-radius) !important; }
.s-block--enhanced-features img { transition: transform .4s var(--sf-ease); }
.s-block--enhanced-features div:hover > img { transform: translateY(-3px) scale(1.04); }
.s-block--about img { border-radius: var(--sf-radius-lg) !important; }

/* ---------- 15. Dark header flowing into hero (Dafina-style) ---------- */
.store-header .main-nav-container,
.store-header .main-nav-container .inner,
body.sf-scrolled .store-header .main-nav-container {
  background: var(--sf-dark) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0 !important;
}
.store-header .main-nav-container a,
.store-header .main-nav-container button,
.store-header .main-nav-container i,
.store-header .main-nav-container .header-btn__icon,
.store-header .main-nav-container span { color: #fff !important; }
body.sf-scrolled .store-header .main-nav-container { box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .7); }
.store-header .s-cart-summary-count { background: var(--sf-peach) !important; color: var(--sf-dark) !important; }
.advanced-slider { background: var(--sf-dark); }

/* ---------- 16. Product cards & sections (Dafina-style) ---------- */
.product-card { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
@media (hover: hover) { .product-card:hover { transform: none; box-shadow: none; } }
.product-card .product-card__image {
  border-radius: 18px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 0 rgba(37, 37, 37, .04);
  transition: box-shadow .35s var(--sf-ease);
}
@media (hover: hover) { .product-card:hover .product-card__image { box-shadow: 0 18px 40px -22px rgba(37, 37, 37, .35); } }
.product-card .product-card__image img { mix-blend-mode: normal; }
.product-card .product-card__content { padding: 14px 6px 6px !important; text-align: center; }
.product-card .product-card__title, .product-card .product-card__title a { text-align: center; display: block; font-weight: 600; line-height: 1.6; }
.product-card .product-card__price { justify-content: center; }
.product-card .s-product-options-option-label { justify-content: center; }
.s-slider-block__title h2, .s-block__title h2 { color: var(--sf-dark); }

/* ---------- 17. Centered classic titles for product rows ---------- */
.sf-title-center { display: flex !important; flex-direction: column; align-items: center; border-bottom: 0 !important; text-align: center; }
.sf-title-center .s-slider-block__title-right { border: 0 !important; display: flex; flex-direction: column; align-items: center; width: 100%; }
.sf-title-center .s-slider-block__title-right h2 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem) !important; font-weight: 700; }
.sf-title-center .s-slider-block__title-left { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.sf-title-divider { display: block; position: relative; width: 14px; height: 14px; margin: 14px auto 4px; border: 2px solid var(--sf-dark); border-radius: 50%; }
.sf-title-divider::before, .sf-title-divider::after { content: ''; position: absolute; top: 4px; width: 110px; height: 2px; background: var(--sf-dark); }
.sf-title-divider::before { right: calc(100% + 10px); }
.sf-title-divider::after { left: calc(100% + 10px); }
@media (max-width: 640px) { .sf-title-divider::before, .sf-title-divider::after { width: 64px; } }

/* ---------- 10. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sf-js .sf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .product-card, .product-card:hover { transition: none; transform: none; }
  .sf-price-flash { animation: none !important; }
}

/* ---------- 18. Home Board hero + image grid (v3) ---------- */
/* Hero artwork already carries logo, headline and CTA: keep slider dark so it joins the header seamlessly */
.advanced-slider, .advanced-slider .swiper, .advanced-slider .swiper-slide { background: var(--sf-dark); }
.advanced-slider { margin-top: 0 !important; }
.advanced-slider a { cursor: pointer; }
/* Grid banners: clean photo + gradient + live title + "shop now" pill (responsive, nothing baked into the image) */
.s-block--images-grid .images-grid__item::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(37, 37, 37, .82) 0%, rgba(37, 37, 37, .35) 38%, rgba(37, 37, 37, 0) 65%);
}
.s-block--images-grid .images-grid__title {
  z-index: 2 !important;
  inset-inline-start: 0 !important; inset-inline-end: 0 !important; bottom: 0 !important;
  width: auto !important; display: block !important;
  padding: 0 22px 64px !important;
  font-size: clamp(1.25rem, 2.1vw, 2rem) !important; font-weight: 700 !important; line-height: 1.25 !important;
  color: #fff !important; background: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35); text-align: start;
}
.s-block--images-grid .images-grid__title::after { display: none !important; }
.s-block--images-grid .images-grid__item::after {
  content: 'تسوّق الآن  \2190'; position: absolute; z-index: 2; bottom: 20px; inset-inline-start: 22px;
  padding: 7px 16px; border-radius: 999px; background: #fff; color: var(--sf-dark);
  font-size: .8125rem; font-weight: 600; line-height: 1.2;
  transition: background-color .3s var(--sf-ease);
}
.s-block--images-grid .images-grid__item:hover::after { background: var(--sf-peach); }
@media (max-width: 640px) {
  .s-block--images-grid .images-grid__title { padding: 0 16px 50px !important; font-size: 1.15rem !important; }
  .s-block--images-grid .images-grid__item::after { bottom: 14px; inset-inline-start: 16px; font-size: .75rem; padding: 6px 12px; }
}
/* Announcement bar: close the 4px gap between the bar and the dark header */
salla-advertisement { display: block; background: var(--sf-dark); }
/* Phones: keep WhatsApp + back-to-top buttons above Selia's bottom navigation (they covered the cart tab) */
@media (max-width: 1023.98px) {
  body.has-bottom-nav .wa-s-n { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-bottom-nav .scroll-to-top { bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- 19. Same header on every page ---------- */
/* Selia only swaps in the alternate (transparent) logo on the homepage; use it on every page so the dark header looks identical */
.store-header img.logo-normal {
  content: url("https://cdn.files.salla.network/homepage/1751611848/a2fc121d-c851-4a96-8301-be5f1d0af08c-original.webp");
  object-fit: contain;
}

/* ---------- 20. Product page (Dafina-style) ---------- */
.product-single__title { font-size: clamp(1.5rem, 2.2vw, 2.1rem) !important; line-height: 1.35 !important; color: var(--sf-text); letter-spacing: 0; }
.product-single .details-slider,
.product-single .details-slider .swiper-slide img { border-radius: var(--sf-radius-lg); }
.product-single .thumbs-slider img, .product-single [class*="thumb"] img { border-radius: 14px; }
.product-single .swiper-slide-thumb-active img { outline: 2px solid var(--sf-dark); outline-offset: 2px; }
/* size selector as pills */
.s-product-options-grid-mode { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
.s-product-options-grid-mode label { margin: 0 !important; cursor: pointer; }
.s-product-options-grid-mode input { position: absolute; opacity: 0; pointer-events: none; }
.s-product-options-grid-mode .s-product-options-grid-mode-span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
  padding: 8px 18px !important; border-radius: 999px !important;
  border: 1.5px solid rgba(37, 37, 37, .18) !important; background: #fff !important;
  color: var(--sf-text) !important; font-weight: 600; font-size: .9rem; line-height: 1.2;
  transition: background-color .2s var(--sf-ease), border-color .2s var(--sf-ease), color .2s var(--sf-ease);
}
.s-product-options-grid-mode label:hover .s-product-options-grid-mode-span { border-color: var(--sf-dark) !important; }
.s-product-options-grid-mode input:checked + .s-product-options-grid-mode-span { background: var(--sf-dark) !important; border-color: var(--sf-dark) !important; color: #fff !important; }
.s-product-options-grid-mode input:focus-visible + .s-product-options-grid-mode-span { outline: 2px solid var(--sf-peach); outline-offset: 2px; }
.s-product-options-grid-mode .s-product-options-option-stock-out .s-product-options-grid-mode-span { opacity: .5; text-decoration: line-through; }
/* buttons */
.product-single salla-add-product-button .s-button-element { min-height: 52px; border-radius: 999px !important; font-weight: 700; }
.product-single salla-add-product-button .s-button-solid, .product-single salla-add-product-button .s-button-primary { background: var(--sf-dark) !important; border-color: var(--sf-dark) !important; color: #fff !important; }
.product-single salla-add-product-button .s-button-solid:hover { background: #000 !important; }
@media (max-width: 640px) {
  .s-product-options-grid-mode .s-product-options-grid-mode-span { min-height: 40px; padding: 7px 14px !important; font-size: .85rem; }
}

/* Category page: quick category switcher chips (built from the store's own header menu) */
.sf-cat-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sf-cat-chips::-webkit-scrollbar { display: none; }
.sf-cat-chips a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 999px;
  background: #fff; border: 1.5px solid rgba(37, 37, 37, .14); color: var(--sf-text); font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: background-color .2s var(--sf-ease), border-color .2s var(--sf-ease), color .2s var(--sf-ease);
}
.sf-cat-chips a:hover { border-color: var(--sf-dark); }
.sf-cat-chips a.is-active { background: var(--sf-dark); border-color: var(--sf-dark); color: #fff; }
.product-index__title { font-size: clamp(1.4rem, 2vw, 1.9rem) !important; }

/* Product cards: sizes as a compact horizontal chip row (the product page keeps the full pill grid) */
.product-card .s-product-options-grid-mode, .s-products-slider-card .s-product-options-grid-mode {
  flex-wrap: nowrap !important; overflow-x: auto; gap: 6px !important; padding: 2px 2px 8px; justify-content: flex-start !important;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.product-card .s-product-options-grid-mode label, .s-products-slider-card .s-product-options-grid-mode label { flex: 0 0 auto; scroll-snap-align: start; }
.product-card .s-product-options-grid-mode .s-product-options-grid-mode-span,
.s-products-slider-card .s-product-options-grid-mode .s-product-options-grid-mode-span { min-height: 32px; padding: 4px 12px !important; font-size: .78rem; white-space: nowrap; }

/* ---------- 21. Phone polish ---------- */
/* size chips in product cards: swipe without the classic scrollbar arrows */
.product-card .s-product-options-grid-mode, .s-products-slider-card .s-product-options-grid-mode { scrollbar-width: none; }
.product-card .s-product-options-grid-mode::-webkit-scrollbar, .s-products-slider-card .s-product-options-grid-mode::-webkit-scrollbar { display: none; }
@media (max-width: 1023.98px) {
  /* product page has a sticky add-to-cart bar above the bottom nav: keep floating buttons clear of it */
  body.product-single.has-bottom-nav .wa-s-n { bottom: calc(200px + env(safe-area-inset-bottom, 0px)) !important; }
  body.product-single .scroll-to-top { display: none !important; }
  .product-single .sticky-product-bar { padding: 12px 16px !important; box-shadow: 0 -10px 30px -18px rgba(37, 37, 37, .35); }
}

/* ---------- 22. Client notes: policies at the bottom + size dropdown ---------- */
.store-footer__bottom-inner { flex-wrap: wrap; gap: 10px 24px; }
.sf-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; width: 100%; padding: 4px 0 10px; }
.sf-legal a { color: #fff; opacity: .88; font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(239, 164, 119, .6); }
.sf-legal a:hover { opacity: 1; color: var(--sf-peach); }
@media (min-width: 768px) { .sf-legal { width: auto; justify-content: flex-start; padding: 0; } }
/* size dropdown (cards + product page) */
salla-product-options select, .s-product-options-wrapper select { border-radius: 999px !important; min-height: 44px; padding-inline: 18px 40px !important; font-weight: 600; border: 1.5px solid rgba(37, 37, 37, .18) !important; background-color: #fff; color: var(--sf-text); }
salla-product-options select:focus, .s-product-options-wrapper select:focus { border-color: var(--sf-dark) !important; box-shadow: 0 0 0 3px rgba(239, 164, 119, .35) !important; }
.product-card salla-product-options select { min-height: 38px; font-size: .85rem; }
/* Custom-made highlight (bedrooms) */
.sf-cm-tag { display: inline-block; margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: var(--sf-peach); color: var(--sf-dark); font-size: .7rem; font-weight: 700; }
.sf-cat-chips a.is-active .sf-cm-tag { background: #fff; }
.sf-cm-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: var(--sf-dark); color: #E7CFB4; font-size: .95rem; }
.sf-cm-note strong { color: var(--sf-peach); font-weight: 800; }

/* ---- 23. Single-size products (small / medical mattresses): no size dropdown, show the size as a label ---- */
.sf-single-size select{display:none!important}
.sf-single-size small{display:none!important}
.sf-single-size__label{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:var(--sf-cream,#F8F5EC);border:1px solid var(--sf-beige,#E7CFB4);color:#252525;font-size:13px;font-weight:500;line-height:1.4}

/* ---- 24. Warranty + price colours (client note 04) ---- */
:root{--sf-price:#A9551F;--sf-warranty-bg:#FBEFE3;--sf-warranty:#8A4A1C}
.product-card__subtitle{display:inline-flex;align-items:center;gap:6px;width:auto;max-width:100%;margin:4px auto 0;padding:3px 12px;border-radius:999px;background:var(--sf-warranty-bg);border:1px solid rgba(239,164,119,.55);color:var(--sf-warranty)!important;font-weight:600;font-size:12px;line-height:1.6}
.product-card__subtitle::before{content:'';width:12px;height:12px;flex:0 0 12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E") center/contain no-repeat}
.product-single-top-description .sf-warranty{color:var(--sf-warranty);font-weight:700}
.product-single-top-description .sf-warranty::marker{color:var(--sf-price)}
.total-price,.product-card__price .total-price,.product-single .total-price{color:var(--sf-price)!important}

/* ---- 25. Marketing: discount + limited-stock badges, stock alert ---- */
.product-card__image .sf-badge{position:absolute;top:10px;z-index:3;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.5;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.14)}
.sf-badge--sale{inset-inline-start:10px;background:#D64534;color:#fff}
.sf-badge--stock{inset-inline-end:10px;background:#252525;color:#EFA477}
.sf-stock-alert{margin:12px 0;padding:10px 14px;border-radius:12px;background:#FFF4EC;border:1px solid #EFA477;color:#8A4A1C;font-weight:700;font-size:14px}

/* ---- 26. Bedrooms: custom-made process banner + WhatsApp booking + projects ---- */
.sf-process{position:relative;overflow:hidden;margin:8px 0 26px;padding:30px 24px;border-radius:24px;background:linear-gradient(135deg,#252525 0%,#3b322b 100%);color:#F8F5EC}
.sf-process::before{content:'';position:absolute;top:-90px;inset-inline-end:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(239,164,119,.24),transparent 70%);pointer-events:none}
.sf-process__head{position:relative;text-align:center;margin-bottom:22px}
.sf-process__eyebrow{display:inline-block;margin-bottom:10px;padding:4px 14px;border-radius:999px;background:rgba(239,164,119,.16);color:#EFA477;font-size:13px;font-weight:700}
.sf-process__head h2{margin:0 0 6px;color:#fff;font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.4}
.sf-process__head p{margin:0;color:#E7CFB4;font-size:14px}
.sf-process__steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.sf-process__step{position:relative;padding:18px 16px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(239,164,119,.22);transition:transform .25s ease,border-color .25s ease}
.sf-process__step:hover{transform:translateY(-3px);border-color:rgba(239,164,119,.6)}
.sf-process__num{position:absolute;top:12px;inset-inline-end:12px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#EFA477;color:#252525;font-size:13px;font-weight:800}
.sf-process__icon{display:block;width:30px;height:30px;margin-bottom:10px;fill:none;stroke:#EFA477;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sf-process__step h3{margin:0 0 4px;color:#fff;font-size:15px;font-weight:700;line-height:1.5}
.sf-process__step p{margin:0;color:#d9cbbb;font-size:12.5px;line-height:1.75}
.sf-process__cta{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin-top:24px}
.sf-process__btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:999px;background:#EFA477;color:#252525!important;font-size:15px;font-weight:800;text-decoration:none;box-shadow:0 8px 22px rgba(239,164,119,.35);transition:transform .2s ease,box-shadow .2s ease}
.sf-process__btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(239,164,119,.45)}
.sf-process__btn svg{width:20px;height:20px;fill:currentColor}
.sf-process__cta span{color:#E7CFB4;font-size:13px}
body.sf-has-process .sf-cm-note{display:none}
@media (max-width:1024px){.sf-process__steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.sf-process{padding:22px 14px;border-radius:18px}.sf-process__steps{gap:10px}.sf-process__step{padding:14px 12px}.sf-process__num{top:10px;inset-inline-end:10px;width:22px;height:22px;font-size:12px}.sf-process__icon{width:26px;height:26px}.sf-process__step h3{font-size:14px}.sf-process__step p{font-size:12px}.sf-process__btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.sf-process__step,.sf-process__btn,.sf-projects__grid img{transition:none}.sf-process__step:hover,.sf-process__btn:hover{transform:none}}

/* ---- 27. Bedrooms: previous projects gallery (bento grid, mobile swipe, lightbox) ---- */
.sf-projects{margin:0 0 30px}
.sf-projects__head{text-align:center;margin-bottom:18px}
.sf-projects__eyebrow{display:inline-block;margin-bottom:10px;padding:4px 14px;border-radius:999px;background:#F3E3D3;color:#A9551F;font-size:13px;font-weight:700}
.sf-projects__head h2{margin:0 0 6px;font-size:clamp(20px,2.6vw,28px);font-weight:800;line-height:1.4;color:#252525}
.sf-projects__head p{margin:0;color:#7a6f66;font-size:14px}
.sf-projects__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(110px,14vw,190px);grid-auto-flow:dense;gap:12px}
.sf-projects__item{position:relative;grid-row:span 2;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:18px;overflow:hidden;background:#F3EADF;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.sf-projects__item.is-wide{grid-column:span 2}
.sf-projects__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sf-projects__item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(37,37,37,.35),transparent 45%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.sf-projects__item:hover img{transform:scale(1.05)}
.sf-projects__item:hover::after{opacity:1}
.sf-projects__item:focus-visible{outline:3px solid #EFA477;outline-offset:2px}
@media (max-width:640px){
  .sf-projects__grid{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
  .sf-projects__grid::-webkit-scrollbar{display:none}
  .sf-projects__item{flex:0 0 auto;height:min(88vw,360px);width:calc(min(88vw,360px)*.75);scroll-snap-align:center}
  .sf-projects__item.is-wide{width:min(86vw,440px)}
}
.sf-lb{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:56px 72px;background:rgba(20,18,16,.92)}
.sf-lb[hidden]{display:none}
.sf-lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}
.sf-lb__fig img{display:block;max-width:min(92vw,1100px);max-height:calc(100vh - 140px);width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.sf-lb__count{color:#E7CFB4;font-size:13px;font-weight:700;direction:ltr;unicode-bidi:isolate}
.sf-lb__close,.sf-lb__nav{position:absolute;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .2s ease,color .2s ease}
.sf-lb__close:hover,.sf-lb__nav:hover,.sf-lb__close:focus-visible,.sf-lb__nav:focus-visible{background:#EFA477;color:#252525;outline:none}
.sf-lb__close{top:14px;inset-inline-end:14px}
.sf-lb__nav{top:50%;transform:translateY(-50%)}
.sf-lb__prev{inset-inline-start:14px}
.sf-lb__next{inset-inline-end:14px}
.sf-lb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html.sf-lb-open,html.sf-lb-open body{overflow:hidden}
@media (max-width:640px){.sf-lb{padding:64px 10px 80px}.sf-lb__nav{top:auto;bottom:18px;transform:none}.sf-lb__fig img{max-height:calc(100vh - 190px)}}
@media (prefers-reduced-motion:reduce){.sf-projects__item img,.sf-projects__item::after,.sf-lb__close,.sf-lb__nav{transition:none}.sf-projects__item:hover img{transform:none}}
.sf-projects__more{display:flex;align-items:center;gap:8px;margin:18px auto 0;padding:11px 26px;border:1.5px solid #252525;border-radius:999px;background:transparent;color:#252525;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s ease,color .2s ease}
.sf-projects__more:hover,.sf-projects__more:focus-visible{background:#252525;color:#fff;outline:none}
.sf-projects.is-open .sf-projects__more{display:none}
@media (min-width:641px){.sf-projects:not(.is-open) .sf-projects__item.is-more{display:none}}
@media (max-width:640px){.sf-projects__more{display:none}}

/* ---- 28. Homepage reviews section (empty state until real reviews exist) ---- */
.sf-reviews{padding:48px 0 40px}
.sf-reviews__wrap{max-width:1280px;margin:0 auto;padding:0 16px}
.sf-reviews__head{text-align:center;margin-bottom:22px}
.sf-reviews__eyebrow{display:inline-block;margin-bottom:10px;padding:4px 14px;border-radius:999px;background:#F3E3D3;color:#A9551F;font-size:13px;font-weight:700}
.sf-reviews__head h2{margin:0 0 6px;font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.4;color:#252525}
.sf-reviews__head p{margin:0;color:#7a6f66;font-size:14px}
.sf-reviews__empty{max-width:640px;margin:0 auto;padding:30px 24px;border-radius:22px;background:#fff;border:1px dashed #E7CFB4;text-align:center;box-shadow:0 10px 30px rgba(37,37,37,.05)}
.sf-reviews__stars{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.sf-reviews__stars svg{width:26px;height:26px;fill:none;stroke:#EFA477;stroke-width:1.6;stroke-linejoin:round}
.sf-reviews__empty h3{margin:0 0 8px;font-size:19px;font-weight:800;color:#252525}
.sf-reviews__empty p{margin:0 auto 18px;max-width:440px;color:#6f655d;font-size:14px;line-height:1.9}
.sf-reviews__btn{display:inline-flex;align-items:center;padding:11px 26px;border-radius:999px;background:#252525;color:#fff!important;font-size:14px;font-weight:700;text-decoration:none;transition:background .2s ease,color .2s ease}
.sf-reviews__btn:hover,.sf-reviews__btn:focus-visible{background:#EFA477;color:#252525!important;outline:none}
@media (max-width:640px){.sf-reviews{padding:36px 0 28px}.sf-reviews__empty{padding:24px 16px}}
@media (prefers-reduced-motion:reduce){.sf-reviews__btn{transition:none}}