/* =====================================================================
   SNAXAR — Raed theme custom CSS (draft "تنسيق رائد رقم (2)")
   Part A: brand overrides for native Raed elements
   Part B: shared styles for the custom "محتوى HTML" sections (.sx)
   Updated: 14 Oct 2026 — remove a block to revert it.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Montserrat:wght@800&display=swap');

/* ---------- A1. Brand tokens ---------- */
:root, body {
  --color-primary: #8f1747 !important;
  --color-primary-dark: #5a0d2e !important;
  --color-primary-light: #f7e4ec !important;
  --color-primary-reverse: #ffffff !important;
  --sx-wine: #5a0d2e; --sx-berry: #8f1747; --sx-pink: #d9487f; --sx-blush: #f7e4ec;
  --sx-cream: #f8f2ea; --sx-paper: #fffdfa; --sx-ink: #2a1520; --sx-muted: #6b5260; --sx-line: #ead9df;
  --sx-gold: #b8893a; --sx-leaf: #5f7f27;
}
body.theme-raed { background: var(--sx-paper); color: var(--sx-ink); }
body.theme-raed, body.theme-raed .s-block, body.theme-raed button, body.theme-raed input {
  font-family: 'IBM Plex Sans Arabic', 'PingARLT', system-ui, sans-serif;
}

/* ---------- A2. Header ---------- */
.store-header .top-navbar { background: var(--sx-cream); }
.store-header .main-nav-container { box-shadow: none !important; border-bottom: 1px solid var(--sx-line); background: var(--sx-paper) !important; }
.store-header .main-nav-container .inner { background: var(--sx-paper) !important; }
.store-header custom-main-menu a, .store-header .main-menu a { font-weight: 500; }
.store-header custom-main-menu a:hover { color: var(--sx-berry) !important; }
.store-header .navbar-brand img { max-height: 48px; }

/* ---------- A3. Section titles ---------- */
.s-block__title h2 {
  font-family: 'El Messiri', serif !important; font-weight: 700 !important;
  font-size: 34px !important; line-height: 1.25 !important; color: var(--sx-wine) !important;
}
.s-block__display-all { color: var(--sx-berry) !important; font-weight: 600; }
@media (max-width: 760px) { .s-block__title h2 { font-size: 26px !important; } }

/* ---------- A4. Product cards ---------- */
.s-product-card-entry {
  background: #fff !important; border: 1px solid var(--sx-line) !important; border-radius: 22px !important;
  overflow: hidden; transition: box-shadow .2s, transform .2s; box-shadow: none !important;
}
.s-product-card-entry:hover { box-shadow: 0 18px 40px rgba(90,13,46,.12) !important; transform: translateY(-3px); }
.s-product-card-image { background: var(--sx-cream) !important; border-radius: 0 !important; }
.s-product-card-image img { border-radius: 0 !important; }
.s-product-card-content { padding: 14px 16px 16px !important; }
.s-product-card-content-title, .s-product-card-content-title a { font-weight: 600 !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--sx-ink) !important; }
.s-product-card-sale-price h4, .s-product-card-price { color: var(--sx-wine) !important; font-weight: 700 !important; font-size: 18px !important; }
.s-product-card-sale-price span { color: var(--sx-muted) !important; text-decoration: line-through; }
.s-product-card-content-footer .s-button-element {
  border-radius: 12px !important; min-height: 44px; font-weight: 600 !important;
  background: #fff !important; color: var(--sx-berry) !important; border: 1.5px solid var(--sx-berry) !important;
}
.s-product-card-content-footer .s-button-element:hover { background: var(--sx-berry) !important; color: #fff !important; }
.s-product-card-promotion-title, .s-product-card-entry .promotion-title {
  background: var(--sx-berry) !important; color: #fff !important; border-radius: 8px !important;
}

/* ---------- A5. Buttons, banners, marquee ---------- */
.s-button-primary, .btn--primary { border-radius: 12px !important; }
.s-block--banners img, .s-block--banners .banner-entry { border-radius: 22px !important; }
.s-block--bundle-marquee { background: var(--sx-wine) !important; }

/* ---------- A6. Footer ---------- */
.store-footer, .store-footer .store-footer__inner { background: #2a0b19 !important; color: #e9cfd9 !important; }
.store-footer h3, .store-footer h4, .store-footer .store-footer__title { color: #fff !important; font-weight: 600; }
.store-footer a, .store-footer p, .store-footer span { color: #e9cfd9 !important; }
.store-footer a:hover { color: #fff !important; }
.store-footer .copyright-text, .store-footer__copyright { border-top: 1px solid rgba(255,255,255,.12) !important; color: #bf9aaa !important; }

/* ---------- A7. WhatsApp float (added by custom JS) ---------- */
.sx-wa { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 60; width: 56px; height: 56px; border-radius: 50%;
  background: #1f8a4c; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
@media (max-width: 1023px) { .sx-wa { bottom: 84px; inset-inline-end: 16px; width: 52px; height: 52px; } }

/* =====================================================================
   PART B — custom HTML sections. Markup lives in "محتوى HTML" elements,
   always wrapped in <div class="sx">. Bilingual: .ar / .en spans.
   ===================================================================== */
html[lang="en"] .sx .ar { display: none !important; }
html:not([lang="en"]) .sx .en { display: none !important; }
.s-block--bundle-html-content:has(.sx) { padding: 0 !important; margin: 0 !important; }
.sx { color: var(--sx-ink); font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; line-height: 1.6; width: 100%; }
.sx * { box-sizing: border-box; }
.sx a { color: inherit; text-decoration: none; }
.sx .sx-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.sx .sx-sec { padding-top: 72px; }
.sx .sx-kick { color: var(--sx-berry); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.sx .sx-h2 { font-family: 'El Messiri', serif; font-weight: 700; font-size: 38px; line-height: 1.2; color: var(--sx-wine); margin: 0; }
.sx .sx-head { margin-bottom: 26px; }
.sx .sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 14px; font-weight: 600; font-size: 16px; transition: transform .15s, background .15s; }
.sx .sx-btn:hover { transform: translateY(-1px); }
.sx .sx-btn-p { background: var(--sx-berry); color: #fff; }
.sx .sx-btn-p:hover { background: var(--sx-wine); }
.sx .sx-btn-o { border: 1.5px solid var(--sx-wine); color: var(--sx-wine); }
.sx .sx-btn-o:hover { background: var(--sx-blush); }
.sx .sx-btn-w { background: #fff; color: var(--sx-wine); }
.sx .sx-btn-ow { border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.sx svg { flex: none; }
html[dir="ltr"] .sx .sx-flip { transform: scaleX(-1); }

/* B1. Hero */
.sx .sx-hero { padding: 32px 0 0; }
.sx .sx-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: stretch; }
.sx .sx-copy { padding: 40px 0; display: flex; flex-direction: column; justify-content: center; }
.sx .sx-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--sx-berry); font-weight: 600; font-size: 14px; background: var(--sx-blush); border-radius: 999px; padding: 7px 15px; align-self: flex-start; }
.sx .sx-h1 { font-family: 'El Messiri', serif; font-weight: 700; font-size: 60px; line-height: 1.15; margin: 20px 0 16px; color: var(--sx-wine); }
.sx .sx-h1 em { font-style: normal; color: var(--sx-pink); }
.sx .sx-lead { font-size: 18px; color: var(--sx-muted); max-width: 520px; margin: 0 0 28px; }
.sx .sx-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.sx .sx-meta { display: flex; gap: 24px; margin-top: 30px; flex-wrap: wrap; color: var(--sx-muted); font-size: 14px; }
.sx .sx-meta span { display: flex; align-items: center; gap: 8px; }
.sx .sx-meta svg { color: var(--sx-berry); }
.sx .sx-stage { position: relative; border-radius: 32px; background: var(--sx-wine); overflow: hidden; min-height: 560px; display: grid; place-items: center; }
.sx .sx-arc { position: absolute; width: 540px; height: 540px; border-radius: 50%; background: var(--sx-berry); bottom: -210px; left: 50%; transform: translateX(-50%); }
.sx .sx-ring { position: absolute; width: 450px; height: 450px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.28); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: sxSpin 40s linear infinite; }
@keyframes sxSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.sx .sx-pouch { position: relative; width: 310px; max-width: 70%; filter: drop-shadow(0 30px 40px rgba(20,0,10,.45)); transform: rotate(-4deg); transition: transform .4s; }
.sx .sx-stage:hover .sx-pouch { transform: rotate(0) scale(1.03); }
.sx .sx-chip { position: absolute; background: #fff; border-radius: 16px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 30px rgba(40,0,20,.25); font-size: 13px; color: var(--sx-ink); }
.sx .sx-chip b { display: block; font-size: 15px; color: var(--sx-wine); }
.sx .sx-chip i { width: 36px; height: 36px; border-radius: 10px; background: var(--sx-blush); color: var(--sx-berry); display: grid; place-items: center; font-style: normal; }
.sx .sx-chip-a { top: 54px; right: 30px; } .sx .sx-chip-b { bottom: 58px; left: 28px; }

/* B2. Trust strip */
.sx .sx-trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--sx-cream); border-radius: 22px; margin-top: 22px; }
.sx .sx-t { display: flex; gap: 14px; align-items: center; padding: 20px 22px; }
.sx .sx-t + .sx-t { border-inline-start: 1px solid var(--sx-line); }
.sx .sx-t i { width: 46px; height: 46px; flex: none; border-radius: 14px; background: #fff; color: var(--sx-berry); display: grid; place-items: center; }
.sx .sx-t b { display: block; font-size: 15px; } .sx .sx-t small { color: var(--sx-muted); font-size: 13px; }

/* B3. Categories */
.sx .sx-cats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px; }
.sx .sx-cat { background: var(--sx-cream); border-radius: 22px; padding: 22px 14px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 1px solid transparent; transition: border-color .2s, transform .2s; }
.sx .sx-cat:hover { border-color: var(--sx-pink); transform: translateY(-3px); }
.sx .sx-cat-art { width: 96px; height: 96px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--sx-berry); }
.sx .sx-cat b { font-size: 16px; } .sx .sx-cat small { color: var(--sx-muted); font-size: 13px; margin-top: -6px; }

/* B4. Offers */
.sx .sx-offers { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
.sx .sx-boxban { position: relative; border-radius: 28px; background: var(--sx-wine); color: #fff; padding: 52px 48px; overflow: hidden; min-height: 400px; display: flex; flex-direction: column; justify-content: center; }
.sx .sx-boxban .sx-h2 { color: #fff; font-size: 42px; max-width: 440px; position: relative; }
.sx .sx-boxban p { color: #f1d5df; max-width: 420px; margin: 14px 0 26px; font-size: 16.5px; position: relative; }
.sx .sx-boxban .sx-btn { align-self: flex-start; position: relative; }
.sx .sx-boxart { position: absolute; left: 40px; bottom: -30px; width: 280px; height: 280px; }
html[dir="ltr"] .sx .sx-boxart { left: auto; right: 40px; }
.sx .sx-side { display: flex; flex-direction: column; gap: 22px; }
.sx .sx-coupon { flex: 1; border-radius: 28px; background: var(--sx-blush); padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.sx .sx-big { font-family: 'El Messiri', serif; font-size: 28px; color: var(--sx-wine); line-height: 1.25; font-weight: 700; }
.sx .sx-code { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; border: 2px dashed var(--sx-berry); border-radius: 12px; padding: 8px 10px 8px 16px; font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: 2px; color: var(--sx-berry); font-size: 20px; background: #fff; }
.sx .sx-copybtn { border: 0; background: var(--sx-berry); color: #fff; border-radius: 8px; font-size: 12.5px; padding: 6px 10px; font-family: 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; cursor: pointer; }
.sx .sx-ship { flex: 1; border-radius: 28px; background: var(--sx-cream); padding: 28px 30px; display: flex; align-items: center; gap: 18px; }
.sx .sx-ship i { width: 64px; height: 64px; flex: none; border-radius: 18px; background: #fff; color: var(--sx-berry); display: grid; place-items: center; }
.sx .sx-muted { color: var(--sx-muted); }

/* B5. Occasions */
.sx .sx-occ { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.sx .sx-oc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; aspect-ratio: 6 / 5; min-height: 250px; padding: 22px 22px 20px; border-radius: 24px; overflow: hidden; color: #fff; background: var(--sx-wine); box-shadow: 0 10px 30px -14px rgba(90,13,46,.45); transition: transform .25s, box-shadow .25s; isolation: isolate; }
.sx .sx-oc:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(90,13,46,.55); }
.sx .sx-oc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.sx .sx-oc:hover .sx-oc-img { transform: scale(1.05); }
.sx .sx-oc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(58,8,30,.94) 0%, rgba(90,13,46,.6) 38%, rgba(90,13,46,0) 66%); }
.sx .sx-oc-ic { position: absolute; top: 18px; inset-inline-start: 18px; width: 60px; height: 60px; border-radius: 16px; background: #fff; color: var(--sx-berry); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.sx .sx-oc-ic svg { width: 31px; height: 31px; position: static; opacity: 1; }
.sx .sx-oc-tx { display: flex; flex-direction: column; gap: 3px; }
.sx .sx-oc b { font-family: 'El Messiri', serif; font-size: clamp(19px, 1.75vw, 25px); line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.sx .sx-oc small { font-size: 14px; line-height: 1.5; opacity: .92; }
.sx .sx-oc-go { align-self: flex-end; margin-top: 12px; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--sx-pink); color: #fff; display: grid; place-items: center; transition: background .2s, transform .2s; }
.sx .sx-oc:hover .sx-oc-go { background: #fff; color: var(--sx-berry); transform: translateX(-3px); }
html[dir="ltr"] .sx .sx-oc:hover .sx-oc-go { transform: translateX(3px); }

/* B6. About + why */
.sx .sx-why { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.sx .sx-story { border-radius: 28px; background: var(--sx-cream); padding: 46px 42px; }
.sx .sx-story p { color: var(--sx-muted); font-size: 16.5px; margin: 16px 0 0; }
.sx .sx-stats { display: flex; gap: 30px; margin-top: 26px; flex-wrap: wrap; }
.sx .sx-stats b { display: block; font-family: 'El Messiri', serif; font-size: 30px; color: var(--sx-berry); line-height: 1.1; }
.sx .sx-stats small { color: var(--sx-muted); font-size: 13.5px; }
.sx .sx-reasons { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 22px; }
.sx .sx-rs { border: 1px solid var(--sx-line); border-radius: 22px; padding: 22px; background: #fff; }
.sx .sx-rs i { width: 48px; height: 48px; border-radius: 14px; background: var(--sx-blush); color: var(--sx-berry); display: grid; place-items: center; margin-bottom: 12px; }
.sx .sx-rs b { font-size: 17px; display: block; margin-bottom: 4px; } .sx .sx-rs p { margin: 0; color: var(--sx-muted); font-size: 14.5px; }

/* B7. Wholesale */
.sx .sx-b2b { margin-top: 72px; background: var(--sx-wine); color: #fff; }
.sx .sx-b2b-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; padding: 60px 32px; }
.sx .sx-b2b .sx-h2 { color: #fff; } .sx .sx-b2b p { color: #ecc9d6; margin: 12px 0 24px; }
.sx .sx-tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.sx .sx-tier { border: 1px solid rgba(255,255,255,.22); border-radius: 20px; padding: 24px 18px; text-align: center; }
.sx .sx-tier b { display: block; font-family: 'El Messiri', serif; font-size: 40px; line-height: 1.1; color: #fff; }
.sx .sx-tier small { color: #ecc9d6; font-size: 14px; }
.sx .sx-tier.top { background: var(--sx-berry); border-color: var(--sx-berry); }

/* B8. Responsive */
@media (max-width: 1100px) {
  .sx .sx-cats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sx .sx-occ { grid-template-columns: 1fr 1fr; }
  .sx .sx-oc { aspect-ratio: 16 / 10; }
  .sx .sx-oc b { font-size: 24px; }
  .sx .sx-boxban { padding-bottom: 200px; }
  .sx .sx-boxart { width: 200px; height: 200px; bottom: -26px; }
  .sx .sx-why, .sx .sx-b2b-in { grid-template-columns: 1fr; }
  .sx .sx-h1 { font-size: 50px; }
}
@media (max-width: 760px) {
  .sx .sx-wrap { padding: 0 16px; }
  .sx .sx-hero { padding-top: 14px; }
  .sx .sx-hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .sx .sx-copy { padding: 6px 0 0; }
  .sx .sx-stage { min-height: 360px; border-radius: 24px; }
  .sx .sx-arc { width: 360px; height: 360px; bottom: -160px; } .sx .sx-ring { width: 300px; height: 300px; }
  .sx .sx-pouch { width: 190px; }
  .sx .sx-chip { padding: 8px 10px; font-size: 11.5px; gap: 8px; } .sx .sx-chip b { font-size: 13px; } .sx .sx-chip i { width: 30px; height: 30px; }
  .sx .sx-chip-a { top: 16px; right: 12px; } .sx .sx-chip-b { bottom: 20px; left: 12px; }
  .sx .sx-h1 { font-size: 35px; margin: 14px 0 10px; }
  .sx .sx-lead { font-size: 15.5px; margin-bottom: 20px; }
  .sx .sx-ctas .sx-btn { flex: 1; padding: 0 14px; height: 50px; }
  .sx .sx-meta { gap: 12px; margin-top: 18px; font-size: 13px; }
  .sx .sx-trust { grid-template-columns: 1fr 1fr; border-radius: 18px; }
  .sx .sx-t { padding: 14px 12px; gap: 10px; } .sx .sx-t i { width: 38px; height: 38px; } .sx .sx-t + .sx-t { border: 0; }
  .sx .sx-t b { font-size: 13.5px; } .sx .sx-t small { font-size: 12px; }
  .sx .sx-sec { padding-top: 48px; }
  .sx .sx-h2 { font-size: 27px; } .sx .sx-head { margin-bottom: 18px; }
  .sx .sx-cats { gap: 10px; }
  .sx .sx-cat { padding: 14px 6px; border-radius: 18px; gap: 8px; }
  .sx .sx-cat-art { width: 64px; height: 64px; } .sx .sx-cat-art svg { width: 38px; height: 38px; }
  .sx .sx-cat b { font-size: 13px; } .sx .sx-cat small { display: none; }
  .sx .sx-offers { grid-template-columns: 1fr; }
  .sx .sx-boxban { padding: 32px 22px 150px; min-height: 0; border-radius: 24px; }
  .sx .sx-boxban .sx-h2 { font-size: 29px; }
  .sx .sx-boxart { width: 180px; height: 180px; left: 14px; bottom: -24px; }
  .sx .sx-coupon, .sx .sx-ship { border-radius: 22px; padding: 22px 18px; }
  .sx .sx-big { font-size: 23px; }
  .sx .sx-occ { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sx .sx-oc { aspect-ratio: 4 / 5; min-height: 0; padding: 12px 13px 12px; border-radius: 18px; gap: 2px; }
  .sx .sx-oc-ic { width: 40px; height: 40px; border-radius: 12px; top: 12px; inset-inline-start: 12px; } .sx .sx-oc-ic svg { width: 22px; height: 22px; }
  .sx .sx-oc b { font-size: 16.5px; } .sx .sx-oc small { font-size: 11.5px; line-height: 1.45; }
  .sx .sx-oc-go { width: 30px; height: 30px; margin-top: 8px; } .sx .sx-oc-go svg { width: 14px; height: 14px; }
  .sx .sx-story { padding: 28px 20px; }
  .sx .sx-reasons { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sx .sx-rs { padding: 14px; } .sx .sx-rs b { font-size: 14.5px; } .sx .sx-rs p { font-size: 13px; } .sx .sx-rs i { width: 38px; height: 38px; }
  .sx .sx-b2b { margin-top: 48px; } .sx .sx-b2b-in { padding: 40px 16px; gap: 24px; }
  .sx .sx-tiers { gap: 8px; } .sx .sx-tier { padding: 14px 6px; } .sx .sx-tier b { font-size: 27px; } .sx .sx-tier small { font-size: 12px; }
}

/* ---------- A8. Fixes after first preview (14 Oct) ---------- */
.s-slider-block__title-right h2 { font-family: 'El Messiri', serif !important; font-weight: 700 !important; font-size: 34px !important; line-height: 1.25 !important; }
.s-block--best-offers .s-slider-block__title-right h2 { color: var(--sx-wine) !important; }
.s-block--slider-with-bg { background: transparent !important; }
body.index .store-footer { margin-top: 0 !important; }
.sx .sx-h1 em { white-space: nowrap; }
@media (max-width: 760px) { .s-slider-block__title-right h2 { font-size: 26px !important; } }

/* ---------- C. Category / shop pages (body.product-index) — 14 Oct ---------- */
.sx-cat-ban { margin-top: 4px !important; }
.sx-cat-in { position: relative; border-radius: 26px; background: var(--sx-wine); color: #fff; padding: 32px 40px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 180px; }
.sx-cat-k { color: #f4b8cf; font-weight: 600; font-size: 13.5px; }
.sx-cat-h h1, .sx-cat-h { font-family: 'El Messiri', serif !important; font-size: 40px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #fff !important; margin: 4px 0 8px !important; padding: 0 !important; }
.sx-cat-txt p { margin: 0; color: #f1d5df; max-width: 560px; font-size: 15.5px; line-height: 1.7; }
.sx-cat-meta { display: flex; gap: 18px; margin-top: 14px; font-size: 13.5px; color: #f4cfdc; flex-wrap: wrap; }
.sx-cat-meta span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sx-pink); margin-inline-end: 8px; vertical-align: middle; }
.sx-cat-tiers { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; background: rgba(255,255,255,.1); border-radius: 12px; padding: 8px 14px; font-size: 13.5px; color: #f1d5df; }
.sx-cat-tiers b { color: #fff; font-family: 'El Messiri', serif; font-size: 18px; }
.sx-cat-tiers i { width: 1px; height: 16px; background: rgba(255,255,255,.3); }
.sx-cat-ban .sx-cat-art { position: relative; width: 180px; height: 180px; flex: none; margin: -32px 0 -32px -10px; }
.sx-cat-ban .sx-cat-art span { position: absolute; inset: 14px; border-radius: 50%; background: var(--sx-berry); }
.sx-cat-ban .sx-cat-art img { position: absolute; width: 124px; left: 28px; top: 20px; filter: drop-shadow(0 16px 20px rgba(20,0,10,.45)); transform: rotate(-6deg); }
.sx-chips { display: flex; gap: 8px; overflow-x: auto; padding: 18px 0 2px; scrollbar-width: none; }
.sx-chips::-webkit-scrollbar { display: none; }
.sx-chips a { flex: none; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--sx-line); background: #fff; font-size: 14.5px; font-weight: 500; color: var(--sx-ink) !important; display: flex; align-items: center; transition: border-color .2s; }
.sx-chips a:hover { border-color: var(--sx-pink); }
.sx-chips a.on { background: var(--sx-wine); border-color: var(--sx-wine); color: #fff !important; }
body.product-index .container--products-list .main-content > .flex.justify-between { justify-content: flex-end; }
body.product-index #product-filter { border-radius: 12px !important; border: 1px solid var(--sx-line) !important; background-color: #fff !important; height: 44px; padding-inline: 12px !important; font-size: 14px; }
body.product-index salla-products-list .s-products-list-vertical-cards { gap: 20px !important; }
@media (max-width: 760px) {
  .sx-cat-in { padding: 22px 20px; border-radius: 20px; min-height: 0; }
  .sx-cat-h h1, .sx-cat-h { font-size: 28px !important; }
  .sx-cat-txt p { font-size: 13.5px; }
  .sx-cat-meta { gap: 10px; font-size: 12px; margin-top: 10px; }
  .sx-cat-ban .sx-cat-art { width: 96px; height: 116px; margin: -22px -8px -22px -12px; }
  .sx-cat-ban .sx-cat-art span { inset: 10px; }
  .sx-cat-ban .sx-cat-art img { width: 74px; left: 12px; top: 16px; }
  .sx-chips { padding-top: 14px; }
  .sx-chips a { height: 38px; padding: 0 14px; font-size: 13.5px; }
  body.product-index salla-products-list .s-products-list-vertical-cards { gap: 12px !important; }
}
body.product-index .sx-cat-ban + .container--products-list { margin-top: 22px !important; }
body.product-index #page-main-title { font-size: 15px !important; font-weight: 600 !important; color: var(--sx-muted) !important; }

/* =====================================================================
   D. BRAND GUIDE v1.0 (Oct 2026) — colour alignment. Appended LAST so it
   overrides earlier tokens. Remove this whole block to revert.
   Magenta #B5156A · Pink #E4448A · Cream #FAF6F0 · Gold #C9A45C
   Olive #6E7A1F (pouch stripe only) · Dark text #3A2430
   ===================================================================== */
:root, body {
  --color-primary: #B5156A !important;
  --color-primary-dark: #8C0F52 !important;
  --color-primary-light: #FBE7F0 !important;
  --color-primary-reverse: #ffffff !important;
  --sx-wine: #B5156A;   /* headings + strong backgrounds = brand magenta */
  --sx-berry: #B5156A;  /* buttons, icons, kickers */
  --sx-deep: #8C0F52;   /* darker magenta: hovers + shapes on magenta bg */
  --sx-pink: #E4448A;   /* accent touches only */
  --sx-blush: #FBE7F0;
  --sx-cream: #FAF6F0;
  --sx-paper: #FFFFFF;
  --sx-ink: #3A2430;
  --sx-muted: #6E5763;
  --sx-line: #EFDDE5;
  --sx-gold: #C9A45C;
  --sx-leaf: #6E7A1F;
}
body.theme-raed { background: var(--sx-paper); color: var(--sx-ink); }

/* shapes that sat "berry on wine" now need the darker magenta */
.sx .sx-arc { background: var(--sx-deep); }
.sx .sx-btn-p:hover { background: var(--sx-deep); }
.sx .sx-tier.top { background: var(--sx-deep); border-color: var(--sx-gold); }
.sx-cat-ban .sx-cat-art span { background: var(--sx-deep); }
.sx .sx-b2b .sx-tier { border-color: rgba(255,255,255,.3); }

/* gold = premium touches (boxes, coupon) */
.sx .sx-boxban .sx-kick, .sx .sx-b2b .sx-kick, .sx-cat-k { color: #F3DDB0 !important; }
.sx .sx-code { border-color: var(--sx-gold); }
.sx .sx-boxban { background: var(--sx-wine); }
.sx .sx-boxart rect { fill: var(--sx-deep); stroke: var(--sx-gold); }
.sx .sx-boxart path { stroke: var(--sx-gold); }

/* light text on magenta backgrounds */
.sx .sx-boxban p, .sx-cat-txt p, .sx .sx-b2b p, .sx .sx-tier small { color: #FBE3EE !important; }

/* product cards + sale badge */
.s-product-card-entry:hover { box-shadow: 0 18px 40px rgba(181,21,106,.14) !important; }
.s-product-card-sale-price h4, .s-product-card-price { color: var(--sx-wine) !important; }

/* footer: dark brand text colour instead of near-black wine */
.store-footer, .store-footer .store-footer__inner { background: #3A2430 !important; color: #EADBE2 !important; }
.store-footer a, .store-footer p, .store-footer span { color: #EADBE2 !important; }
.store-footer .copyright-text, .store-footer__copyright { color: #C7AEBA !important; }

/* occasion cards: magenta-based gradient */
.sx .sx-oc { background: var(--sx-wine); box-shadow: 0 10px 30px -14px rgba(181,21,106,.45); }
.sx .sx-oc::after { background: linear-gradient(to top, rgba(74,10,44,.92) 0%, rgba(140,15,82,.55) 40%, rgba(140,15,82,0) 68%); }

/* ---------- E. Occasion cards — own section + animated text (15 Oct) ---------- */
.sx .sx-occ-sec { padding-bottom: 8px; }
.sx .sx-oc-tx { position: relative; }
.sx .sx-oc b { position: relative; display: inline-block; padding-bottom: 6px; }
.sx .sx-oc b::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 0; border-radius: 3px; background: var(--sx-gold, #C9A45C); transition: width .6s cubic-bezier(.2,.7,.2,1) .45s; }
.sx .sx-oc.sx-in b::after, .sx .sx-oc:hover b::after { width: 46px; }
.sx .sx-oc:hover b::after { width: 70%; transition-delay: 0s; }

/* entrance animation — only when JS adds .sx-anim (text stays visible without JS) */
.sx .sx-occ.sx-anim .sx-oc-ic,
.sx .sx-occ.sx-anim .sx-oc b,
.sx .sx-occ.sx-anim .sx-oc small,
.sx .sx-occ.sx-anim .sx-oc-go { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.sx .sx-occ.sx-anim .sx-oc-ic { transform: translateY(-14px) scale(.85); }
.sx .sx-occ.sx-anim .sx-oc.sx-in .sx-oc-ic,
.sx .sx-occ.sx-anim .sx-oc.sx-in b,
.sx .sx-occ.sx-anim .sx-oc.sx-in small,
.sx .sx-occ.sx-anim .sx-oc.sx-in .sx-oc-go { opacity: 1; transform: none; }
.sx .sx-occ.sx-anim .sx-oc.sx-in .sx-oc-ic { transition-delay: calc(var(--d, 0s) + .05s); }
.sx .sx-occ.sx-anim .sx-oc.sx-in b { transition-delay: calc(var(--d, 0s) + .15s); }
.sx .sx-occ.sx-anim .sx-oc.sx-in small { transition-delay: calc(var(--d, 0s) + .3s); }
.sx .sx-occ.sx-anim .sx-oc.sx-in .sx-oc-go { transition-delay: calc(var(--d, 0s) + .45s); }
/* after the entrance, hover moves must be instant again */
.sx .sx-occ.sx-done .sx-oc * { transition-delay: 0s !important; }

/* gentle float of the icon tile + text lift on hover */
@keyframes sxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.sx .sx-occ.sx-done .sx-oc-ic { animation: sxFloat 4s ease-in-out infinite; }
.sx .sx-occ.sx-done .sx-oc:nth-child(2) .sx-oc-ic { animation-delay: .6s; }
.sx .sx-occ.sx-done .sx-oc:nth-child(3) .sx-oc-ic { animation-delay: 1.2s; }
.sx .sx-occ.sx-done .sx-oc:nth-child(4) .sx-oc-ic { animation-delay: 1.8s; }
.sx .sx-oc .sx-oc-tx { transition: transform .35s ease; }
.sx .sx-oc:hover .sx-oc-tx { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .sx .sx-occ.sx-anim .sx-oc * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}
/* ---------- F. Hero stage v2 — clean pouch + motion (15 Oct) ---------- */
.sx .sx-stage { background: radial-gradient(120% 90% at 50% 28%, #CB2A80 0%, var(--sx-wine) 46%, var(--sx-deep) 100%); isolation: isolate; }
.sx .sx-glow { position: absolute; width: 440px; height: 440px; border-radius: 50%; top: 50%; left: 50%; background: radial-gradient(circle, rgba(255,214,234,.42) 0%, rgba(255,214,234,0) 64%); transform: translate(-50%,-56%); animation: sxPulse 5s ease-in-out infinite; z-index: 0; pointer-events: none; }
@keyframes sxPulse { 0%,100% { opacity: .7; transform: translate(-50%,-56%) scale(.94); } 50% { opacity: 1; transform: translate(-50%,-56%) scale(1.06); } }
.sx .sx-ring2 { position: absolute; width: 540px; height: 540px; border-radius: 50%; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.14); transform: translate(-50%,-50%); animation: sxSpinR 55s linear infinite; z-index: 0; pointer-events: none; }
.sx .sx-ring2::before, .sx .sx-ring2::after { content: ""; position: absolute; border-radius: 50%; left: 50%; }
.sx .sx-ring2::before { width: 10px; height: 10px; top: -5px; margin-left: -5px; background: var(--sx-gold, #C9A45C); box-shadow: 0 0 14px rgba(201,164,92,.9); }
.sx .sx-ring2::after { width: 7px; height: 7px; bottom: -4px; margin-left: -4px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.8); }
@keyframes sxSpinR { to { transform: translate(-50%,-50%) rotate(-360deg); } }
.sx .sx-arc, .sx .sx-ring { z-index: 0; }

/* pouch: drop-in, then a slow float; ground shadow breathes with it */
.sx .sx-pouch { width: 300px; max-width: 64%; z-index: 2; transform: rotate(-4deg); filter: drop-shadow(0 26px 28px rgba(40,0,20,.42)); animation: sxPouchIn 1s cubic-bezier(.2,.8,.2,1) both, sxBob 6s ease-in-out 1s infinite; }
.sx .sx-stage:hover .sx-pouch { transform: rotate(-4deg); animation-play-state: running, paused; }
@keyframes sxPouchIn { from { opacity: 0; transform: translateY(46px) scale(.9) rotate(-9deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(-4deg); } }
@keyframes sxBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(-1.5deg); } }
.sx .sx-shadow { position: absolute; left: 50%; bottom: 34px; width: 230px; height: 28px; margin-left: -115px; border-radius: 50%; background: radial-gradient(closest-side, rgba(40,0,20,.55), rgba(40,0,20,0)); z-index: 1; animation: sxShadow 6s ease-in-out 1s infinite; pointer-events: none; }
@keyframes sxShadow { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(.8); opacity: .5; } }

/* floating nuts with mouse parallax (--mx/--my set by JS) */
.sx .sx-nut { position: absolute; z-index: 3; width: 46px; height: 46px; display: block; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(30,0,15,.35));
  translate: calc(var(--mx, 0) * var(--k, 12px)) calc(var(--my, 0) * var(--k, 12px)); transition: translate .35s ease-out;
  animation: sxNutIn .9s cubic-bezier(.2,.8,.2,1) both, sxDrift 7s ease-in-out infinite; }
.sx .sx-nut svg { width: 100%; height: 100%; display: block; }
@keyframes sxNutIn { from { opacity: 0; transform: scale(.4) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes sxDrift { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(16deg); } }
.sx .sx-nut.n1 { top: 17%; left: 13%; --k: 18px; animation-delay: .4s, 1.3s; }
.sx .sx-nut.n2 { top: 56%; left: 6%; width: 56px; height: 56px; --k: 26px; animation-delay: .6s, 1.5s; animation-duration: .9s, 8s; }
.sx .sx-nut.n3 { top: 7%; left: 42%; width: 36px; height: 36px; --k: 10px; animation-delay: .8s, 1.7s; animation-duration: .9s, 6s; }
.sx .sx-nut.n4 { bottom: 20%; right: 9%; width: 52px; height: 52px; --k: 22px; animation-delay: 1s, 1.9s; animation-duration: .9s, 7.5s; }
.sx .sx-nut.n5 { top: 41%; right: 5%; width: 32px; height: 32px; --k: 8px; opacity: .85; filter: blur(.6px) drop-shadow(0 6px 8px rgba(30,0,15,.3)); animation-delay: 1.2s, 2.1s; animation-duration: .9s, 9s; }

/* gold sparkles */
.sx .sx-spark { position: absolute; z-index: 3; width: 14px; height: 14px; background: #F3DDB0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sxTwinkle 2.8s ease-in-out infinite; pointer-events: none; }
.sx .sx-spark.s1 { top: 26%; right: 30%; }
.sx .sx-spark.s2 { top: 70%; left: 27%; width: 10px; height: 10px; animation-delay: 1s; }
.sx .sx-spark.s3 { top: 14%; left: 26%; width: 9px; height: 9px; animation-delay: 1.8s; }
@keyframes sxTwinkle { 0%,100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* chips slide in, then float gently */
.sx .sx-chip { z-index: 4; animation: sxChipIn .8s cubic-bezier(.2,.8,.2,1) both, sxChipFloat 5s ease-in-out infinite; }
.sx .sx-chip-a { animation-delay: .5s, 1.4s; }
.sx .sx-chip-b { animation-delay: .8s, 2.6s; }
@keyframes sxChipIn { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sxChipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.sx .sx-chip i { animation: sxIconPulse 2.6s ease-in-out infinite; }
@keyframes sxIconPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(181,21,106,.25); } 50% { box-shadow: 0 0 0 6px rgba(181,21,106,0); } }

@media (max-width: 760px) {
  .sx .sx-pouch { width: 190px; }
  .sx .sx-glow { width: 300px; height: 300px; }
  .sx .sx-ring2 { width: 340px; height: 340px; }
  .sx .sx-shadow { width: 150px; margin-left: -75px; bottom: 22px; height: 20px; }
  .sx .sx-nut { width: 32px; height: 32px; }
  .sx .sx-nut.n2 { width: 38px; height: 38px; top: 50%; left: 4%; }
  .sx .sx-nut.n4 { width: 36px; height: 36px; bottom: 28%; right: 5%; }
  .sx .sx-nut.n3 { top: 4%; left: 40%; width: 26px; height: 26px; }
  .sx .sx-nut.n5, .sx .sx-spark.s3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sx .sx-stage *, .sx .sx-stage *::before, .sx .sx-stage *::after { animation: none !important; transition: none !important; }
}
/* ---------- G. Offers section motion (boxes banner, coupon, shipping) - 15 Oct ---------- */
.sx .sx-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.sx .sx-rv.sx-in { opacity: 1; transform: none; }
.sx .sx-side .sx-rv:nth-child(1) { transition-delay: .15s; }
.sx .sx-side .sx-rv:nth-child(2) { transition-delay: .3s; }
.sx .sx-coupon, .sx .sx-ship { transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.sx .sx-coupon.sx-in:hover, .sx .sx-ship.sx-in:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -18px rgba(181,21,106,.45); }

/* boxes banner: light sweep + floating gift + lid lift + sparkles */
.sx .sx-boxban { isolation: isolate; }
.sx .sx-boxban::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -40%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: sxSweep 6s ease-in-out 1.5s infinite; }
@keyframes sxSweep { 0% { left: -40%; } 45%, 100% { left: 120%; } }
.sx .sx-boxban > *:not(.sx-boxart) { z-index: 1; }
.sx .sx-boxart { animation: sxGift 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sxGift { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.sx .sx-boxart path:nth-of-type(1), .sx .sx-boxart path:nth-of-type(3) { transform-box: view-box; animation: sxLid 5s ease-in-out infinite; }
@keyframes sxLid { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 68% { transform: translateY(-14px) rotate(-3deg); } 80% { transform: translateY(-6px) rotate(1deg); } }
.sx .sx-gspark { position: absolute; z-index: 1; width: 14px; height: 14px; background: #F3DDB0; pointer-events: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sxTwinkle 2.6s ease-in-out infinite; }
.sx .sx-gspark.g1 { left: 26%; top: 34%; }
.sx .sx-gspark.g2 { left: 9%; top: 52%; width: 10px; height: 10px; animation-delay: .9s; }
.sx .sx-gspark.g3 { left: 31%; top: 66%; width: 8px; height: 8px; animation-delay: 1.7s; }
html[dir="ltr"] .sx .sx-gspark.g1 { left: auto; right: 26%; }
html[dir="ltr"] .sx .sx-gspark.g2 { left: auto; right: 9%; }
html[dir="ltr"] .sx .sx-gspark.g3 { left: auto; right: 31%; }
@keyframes sxTwinkle { 0%,100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.sx .sx-boxban .sx-btn svg { transition: transform .25s; }
.sx .sx-boxban .sx-btn:hover svg { transform: translateX(-4px); }
html[dir="ltr"] .sx .sx-boxban .sx-btn:hover svg { transform: scaleX(-1) translateX(-4px); }

/* coupon: marching dashed border, shimmering code, soft pulse */
.sx .sx-code { position: relative; border-color: transparent !important; animation: sxCodePulse 2.8s ease-in-out infinite; }
.sx .sx-code::before { content: ""; position: absolute; inset: -2px; border-radius: 12px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--sx-gold, #C9A45C) 50%, transparent 0) repeat-x 0 0 / 14px 2px,
    linear-gradient(90deg, var(--sx-gold, #C9A45C) 50%, transparent 0) repeat-x 0 100% / 14px 2px,
    linear-gradient(0deg, var(--sx-gold, #C9A45C) 50%, transparent 0) repeat-y 0 0 / 2px 14px,
    linear-gradient(0deg, var(--sx-gold, #C9A45C) 50%, transparent 0) repeat-y 100% 0 / 2px 14px;
  animation: sxMarch 1.2s linear infinite; }
@keyframes sxMarch { to { background-position: 14px 0, -14px 100%, 0 -14px, 100% 14px; } }
@keyframes sxCodePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(181,21,106,.0); } 50% { box-shadow: 0 0 0 7px rgba(181,21,106,.08); } }
.sx .sx-codetxt { background: linear-gradient(90deg, var(--sx-berry) 0%, var(--sx-berry) 40%, #E4448A 50%, var(--sx-berry) 60%, var(--sx-berry) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sxShine 3.2s linear infinite; }
@keyframes sxShine { from { background-position: 125% 0; } to { background-position: -125% 0; } }
.sx .sx-copybtn { transition: transform .15s, background .2s; }
.sx .sx-copybtn:hover { transform: scale(1.06); background: var(--sx-deep, #8C0F52); }
.sx .sx-coupon .sx-big { display: inline-block; }
.sx .sx-coupon.sx-in .sx-big { animation: sxPop .7s cubic-bezier(.2,1.4,.4,1) .5s both; }
@keyframes sxPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* shipping: truck drives on a moving road */
.sx .sx-ship i { position: relative; overflow: hidden; }
.sx .sx-ship i svg { animation: sxTruck 2.4s ease-in-out infinite; position: relative; z-index: 1; }
@keyframes sxTruck { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-4px) translateY(-1px); } }
html[dir="ltr"] .sx .sx-ship i svg { animation-name: sxTruckL; }
@keyframes sxTruckL { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px) translateY(-1px); } }
.sx .sx-ship i::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 12px; height: 2px; border-radius: 2px; opacity: .55;
  background: linear-gradient(90deg, var(--sx-berry) 50%, transparent 0) 0 0 / 10px 2px repeat-x; animation: sxRoad .6s linear infinite; }
@keyframes sxRoad { to { background-position: 10px 0; } }
html[dir="ltr"] .sx .sx-ship i::after { animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  .sx .sx-rv { opacity: 1 !important; transform: none !important; }
  .sx .sx-offers *, .sx .sx-offers *::before, .sx .sx-offers *::after, .sx .sx-boxban::before { animation: none !important; }
}

/* ---------- H. Free-shipping side tab (all pages) ---------- */
.sx-shiptab { position: fixed; left: 0; top: 46%; z-index: 55; display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 14px;
  background: rgba(58,36,48,.9); color: #fff; border-radius: 0 16px 16px 0; box-shadow: 0 10px 24px rgba(0,0,0,.18); cursor: pointer;
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; border: 0;
  transform: translateX(-110%); transition: transform .6s cubic-bezier(.2,.8,.2,1), background .2s; backdrop-filter: blur(4px); }
.sx-shiptab.sx-show { transform: none; }
.sx-shiptab:hover { background: var(--sx-wine, #B5156A); }
.sx-shiptab .sx-st-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.14); }
.sx-shiptab .sx-st-ic svg { animation: sxTruckL 2.2s ease-in-out infinite; }
.sx-shiptab small { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 12.5px; font-weight: 400; color: #F3DDB0; transition: max-height .35s, opacity .35s; white-space: nowrap; }
.sx-shiptab:hover small, .sx-shiptab.sx-open small { max-height: 20px; opacity: 1; }
.sx-shiptab.sx-show { animation: sxNudge 6s ease-in-out 3s infinite; }
@keyframes sxNudge { 0%, 88%, 100% { transform: translateX(0); } 92% { transform: translateX(6px); } 96% { transform: translateX(0); } }
@media (max-width: 760px) { .sx-shiptab { top: auto; bottom: 150px; font-size: 13.5px; padding: 8px 12px 8px 10px; } .sx-shiptab .sx-st-ic { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .sx-shiptab, .sx-shiptab * { animation: none !important; transition: none !important; } }

/* ---------- I. Welcome popup ---------- */
.sx-pop { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(30,10,20,.55);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; }
.sx-pop.sx-open { opacity: 1; visibility: visible; }
.sx-pop-card { position: relative; width: min(460px, 100%); background: #fff; border-radius: 24px; padding: 34px 30px 28px; text-align: center; color: #3A2430;
  box-shadow: 0 30px 80px rgba(40,0,20,.35); transform: translateY(24px) scale(.94); transition: transform .5s cubic-bezier(.2,1.2,.4,1); overflow: hidden; }
.sx-pop.sx-open .sx-pop-card { transform: none; }
.sx-pop-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, #B5156A, #E4448A, #C9A45C); }
.sx-pop-x { position: absolute; top: 14px; inset-inline-start: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #FAF6F0; color: #3A2430;
  display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; }
.sx-pop-x:hover { background: #FBE7F0; transform: rotate(90deg); }
.sx-pop-logo { height: 64px; width: auto; margin: 4px auto 14px; display: block; }
.sx-pop-logo-txt { font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: 2px; color: #B5156A; font-size: 26px; margin-bottom: 12px; }
.sx-pop h3 { font-family: 'El Messiri', serif; font-size: 27px; line-height: 1.3; color: #B5156A; margin: 0 0 10px; }
.sx-pop p { margin: 0 auto 18px; max-width: 360px; font-size: 15.5px; line-height: 1.8; color: #6E5763; }
.sx-pop-code { display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 18px; border: 2px dashed #C9A45C; border-radius: 14px; background: #FAF6F0;
  font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: 2px; font-size: 21px; color: #B5156A; }
html[dir="ltr"] .sx-pop-code { padding: 8px 18px 8px 10px; }
.sx-pop-code button { border: 0; border-radius: 9px; background: #B5156A; color: #fff; padding: 7px 12px; font-size: 13px; letter-spacing: 0; cursor: pointer;
  font-family: 'IBM Plex Sans Arabic', sans-serif; }
.sx-pop-go { display: flex; align-items: center; justify-content: center; margin: 18px auto 0; height: 50px; border-radius: 14px; background: #B5156A; color: #fff !important;
  font-weight: 600; font-size: 16px; text-decoration: none; transition: background .2s; }
.sx-pop-go:hover { background: #8C0F52; }
.sx-pop small { display: block; margin-top: 12px; color: #9a8590; font-size: 12.5px; }
.sx-pop .sx-pop-spark { position: absolute; width: 12px; height: 12px; background: #C9A45C; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sxTwinkle 2.6s ease-in-out infinite; }
.sx-pop .sx-pop-spark.p1 { top: 30px; inset-inline-end: 34px; }
.sx-pop .sx-pop-spark.p2 { top: 92px; inset-inline-end: 72px; width: 8px; height: 8px; animation-delay: 1s; }
.sx-pop .sx-pop-spark.p3 { top: 70px; inset-inline-start: 60px; width: 9px; height: 9px; animation-delay: 1.8s; }
@media (max-width: 480px) { .sx-pop-card { padding: 30px 20px 22px; border-radius: 20px; } .sx-pop h3 { font-size: 23px; } .sx-pop-code { font-size: 18px; } }
/* ---------- J. Corporate & wholesale page (page-1696612442) with quote form - 15 Oct ---------- */
body.sx-b2bpage .content--single-page { width: 100% !important; max-width: 1180px; margin-inline: auto; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
body.sx-b2bpage .content--single-page > :not(.sxb) { display: none !important; }
.sxb { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; color: #3A2430; line-height: 1.7; }
.sxb * { box-sizing: border-box; }
.sxb h1, .sxb h2, .sxb h3 { font-family: 'El Messiri', serif; margin: 0; line-height: 1.25; }
.sxb-hero { position: relative; overflow: hidden; border-radius: 28px; background: radial-gradient(120% 120% at 85% 0%, #CB2A80 0%, #B5156A 45%, #8C0F52 100%); color: #fff; padding: 52px 48px; display: grid; grid-template-columns: 1.3fr .9fr; gap: 32px; align-items: center; isolation: isolate; }
.sxb-hero::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.22); inset-inline-end: -120px; top: -140px; animation: sxbSpin 50s linear infinite; z-index: -1; }
@keyframes sxbSpin { to { transform: rotate(360deg); } }
.sxb-kick { display: inline-flex; align-items: center; gap: 8px; color: #F3DDB0; font-weight: 600; font-size: 14px; background: rgba(255,255,255,.1); border-radius: 999px; padding: 6px 14px; }
.sxb-hero h1 { font-size: 44px; margin: 16px 0 14px; color: #fff; }
.sxb-hero p { margin: 0 0 24px; color: #FBE3EE; font-size: 17px; max-width: 560px; }
.sxb-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.sxb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 14px; font-weight: 600; font-size: 16px; text-decoration: none !important; border: 0; cursor: pointer; transition: transform .15s, background .2s; font-family: inherit; }
.sxb-btn:hover { transform: translateY(-2px); }
.sxb-btn-w { background: #fff; color: #B5156A !important; }
.sxb-btn-o { border: 1.5px solid rgba(255,255,255,.6); color: #fff !important; background: transparent; }
.sxb-btn-p { background: #B5156A; color: #fff !important; width: 100%; height: 56px; font-size: 17px; }
.sxb-btn-p:hover { background: #8C0F52; }
.sxb-perks { display: grid; gap: 12px; }
.sxb-perk { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 14px 16px; animation: sxbIn .7s cubic-bezier(.2,.8,.2,1) both; }
.sxb-perk:nth-child(2) { animation-delay: .15s; } .sxb-perk:nth-child(3) { animation-delay: .3s; } .sxb-perk:nth-child(4) { animation-delay: .45s; }
@keyframes sxbIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sxb-perk i { width: 44px; height: 44px; flex: none; border-radius: 12px; background: #fff; color: #B5156A; display: grid; place-items: center; }
.sxb-perk b { display: block; font-size: 15.5px; } .sxb-perk small { color: #FBE3EE; font-size: 13px; }

.sxb-sec { margin-top: 56px; }
.sxb-head { text-align: center; margin-bottom: 26px; }
.sxb-head .k { color: #B5156A; font-weight: 600; font-size: 14px; }
.sxb-head h2 { font-size: 34px; color: #B5156A; margin-top: 4px; }
.sxb-head p { color: #6E5763; margin: 8px auto 0; max-width: 620px; }

.sxb-tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.sxb-tier { position: relative; border-radius: 22px; padding: 28px 20px; text-align: center; background: #FAF6F0; border: 1px solid #EFDDE5; transition: transform .2s, box-shadow .2s; }
.sxb-tier:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(181,21,106,.5); }
.sxb-tier b { display: block; font-family: 'El Messiri', serif; font-size: 46px; color: #B5156A; line-height: 1.1; }
.sxb-tier span { color: #3A2430; font-weight: 600; } .sxb-tier small { display: block; color: #6E5763; margin-top: 4px; }
.sxb-tier.top { background: #B5156A; border-color: #B5156A; } .sxb-tier.top b, .sxb-tier.top span { color: #fff; } .sxb-tier.top small { color: #F3DDB0; }
.sxb-tier.top::before { content: attr(data-badge); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #C9A45C; color: #fff; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }

.sxb-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.sxb-card { border: 1px solid #EFDDE5; border-radius: 22px; padding: 24px; background: #fff; transition: transform .2s, border-color .2s; }
.sxb-card:hover { transform: translateY(-3px); border-color: #E4448A; }
.sxb-card i { width: 50px; height: 50px; border-radius: 14px; background: #FBE7F0; color: #B5156A; display: grid; place-items: center; margin-bottom: 12px; }
.sxb-card b { display: block; font-size: 17px; margin-bottom: 4px; } .sxb-card p { margin: 0; color: #6E5763; font-size: 14.5px; }
.sxb-occ { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.sxb-occ span { background: #FAF6F0; border: 1px solid #EFDDE5; border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500; }

.sxb-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; counter-reset: st; }
.sxb-step { position: relative; padding: 24px 22px 22px; border-radius: 22px; background: #FAF6F0; }
.sxb-step::before { counter-increment: st; content: counter(st); width: 40px; height: 40px; border-radius: 50%; background: #B5156A; color: #fff; display: grid; place-items: center; font-weight: 700; font-family: 'Montserrat', sans-serif; margin-bottom: 10px; }
.sxb-step b { display: block; font-size: 16.5px; } .sxb-step p { margin: 4px 0 0; color: #6E5763; font-size: 14.5px; }

.sxb-formwrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: start; }
.sxb-aside { border-radius: 26px; background: #3A2430; color: #EADBE2; padding: 34px 30px; position: sticky; top: 110px; }
.sxb-aside h3 { color: #fff; font-size: 26px; margin-bottom: 10px; }
.sxb-aside ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.sxb-aside li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.sxb-aside li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: #C9A45C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.sxb-aside a { color: #F3DDB0 !important; }
.sxb-form { border-radius: 26px; background: #fff; border: 1px solid #EFDDE5; padding: 32px 30px; box-shadow: 0 24px 50px -30px rgba(181,21,106,.45); }
.sxb-form h3 { font-size: 26px; color: #B5156A; } .sxb-form > p { margin: 6px 0 20px; color: #6E5763; }
.sxb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sxb-f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sxb-f label { font-size: 14px; font-weight: 600; } .sxb-f label em { color: #B5156A; font-style: normal; }
.sxb-f input, .sxb-f select, .sxb-f textarea { width: 100%; height: 50px; border: 1.5px solid #EFDDE5; border-radius: 12px; padding: 0 14px; font-size: 15px; font-family: inherit; color: #3A2430; background: #FFFDFB; transition: border-color .2s, box-shadow .2s; outline: none; }
.sxb-f textarea { height: 96px; padding: 12px 14px; resize: vertical; }
.sxb-f input:focus, .sxb-f select:focus, .sxb-f textarea:focus { border-color: #B5156A; box-shadow: 0 0 0 4px rgba(181,21,106,.1); }
.sxb-f.bad input, .sxb-f.bad select { border-color: #D93A3A; }
.sxb-f .err { display: none; color: #D93A3A; font-size: 12.5px; } .sxb-f.bad .err { display: block; }
.sxb-qty { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.sxb-note { font-size: 12.5px; color: #9a8590; margin-top: 10px; text-align: center; }
.sxb-ok { display: none; text-align: center; padding: 24px 6px; }
.sxb-ok i { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 50%; background: #FBE7F0; color: #B5156A; display: grid; place-items: center; animation: sxbPop .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes sxbPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.sxb-ok h3 { color: #B5156A; } .sxb-ok p { color: #6E5763; }
.sxb-form.done .sxb-fields { display: none; } .sxb-form.done .sxb-ok { display: block; }

@media (max-width: 1000px) {
  .sxb-hero, .sxb-formwrap { grid-template-columns: 1fr; }
  .sxb-aside { position: static; }
  .sxb-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sxb-hero { padding: 30px 20px; border-radius: 22px; } .sxb-hero h1 { font-size: 30px; } .sxb-hero p { font-size: 15px; }
  .sxb-sec { margin-top: 40px; } .sxb-head h2 { font-size: 26px; }
  .sxb-tiers { gap: 10px; } .sxb-tier { padding: 20px 8px; } .sxb-tier b { font-size: 32px; } .sxb-tier span { font-size: 13px; }
  .sxb-grid, .sxb-steps, .sxb-row { grid-template-columns: 1fr; }
  .sxb-form, .sxb-aside { padding: 24px 18px; border-radius: 22px; }
}
/* homepage: wholesale band now sits above "about"; give the about block bottom room */
.sx .sx-b2b + .sx-sec, .sx .sx-b2b ~ .sx-sec:last-child { padding-bottom: 72px; }
@media (max-width: 760px) { .sx .sx-b2b ~ .sx-sec:last-child { padding-bottom: 48px; } }
/* ---------- K. Wholesale shop (category c820758621): carton price list + add to cart - 15 Oct ---------- */
.sxb-aside a[href*="wa.me"], .sx a[href*="wa.me"] bdi { direction: ltr; unicode-bidi: isolate; display: inline-block; }
body.sx-wpage .container--products-list { display: none !important; }
.sxw { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; color: #3A2430; margin: 26px auto 64px; }
.sxw * { box-sizing: border-box; }
.sxw-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.sxw-top h2 { font-family: 'El Messiri', serif; font-size: 30px; color: #B5156A; margin: 0; line-height: 1.25; }
.sxw-top p { margin: 4px 0 0; color: #6E5763; font-size: 14.5px; }
.sxw-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sxw-pills span { display: inline-flex; align-items: center; gap: 8px; background: #FAF6F0; border: 1px solid #EFDDE5; border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 500; }
.sxw-pills span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #C9A45C; }
.sxw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.sxw-chips, .sxw-view { display: flex; gap: 6px; background: #FAF6F0; border-radius: 14px; padding: 4px; }
.sxw-chips button, .sxw-view button { border: 0; background: transparent; border-radius: 10px; padding: 8px 16px; font: 600 14px 'IBM Plex Sans Arabic', sans-serif; color: #6E5763; cursor: pointer; transition: background .2s, color .2s; }
.sxw-chips button.on, .sxw-view button.on { background: #B5156A; color: #fff; }

/* table view */
.sxw-tablewrap { overflow-x: auto; border: 1px solid #EFDDE5; border-radius: 20px; background: #fff; }
.sxw table { width: 100%; border-collapse: collapse; min-width: 980px; font-size: 14.5px; }
.sxw th { background: #B5156A; color: #fff; font-weight: 600; padding: 14px 12px; text-align: start; white-space: nowrap; font-size: 13.5px; }
.sxw th.n, .sxw td.n { text-align: center; }
.sxw td { padding: 12px; border-top: 1px solid #F3E7EC; vertical-align: middle; }
.sxw tbody tr { transition: background .2s; }
.sxw tbody tr:hover { background: #FFF8FB; }
.sxw-prod { display: flex; align-items: center; gap: 12px; min-width: 250px; }
.sxw-prod img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #FAF6F0; flex: none; }
.sxw-prod a { color: #3A2430 !important; font-weight: 600; text-decoration: none; line-height: 1.45; }
.sxw-prod a:hover { color: #B5156A !important; }
.sxw-prod small { display: block; color: #9a8590; font-size: 12.5px; font-weight: 400; }
.sxw .mut { color: #6E5763; white-space: nowrap; }
.sxw .ws { font-family: 'El Messiri', serif; font-size: 21px; font-weight: 700; color: #B5156A; white-space: nowrap; }
.sxw .pr { display: inline-flex; flex-direction: column; align-items: center; background: #EEF5E3; color: #4C6A16; border-radius: 10px; padding: 4px 10px; font-weight: 700; white-space: nowrap; line-height: 1.3; }
.sxw .pr small { font-weight: 500; font-size: 11.5px; color: #6E7A1F; }
.sxw-buy { display: flex; align-items: center; gap: 8px; justify-content: center; }
.sxw-qty { display: inline-flex; align-items: center; border: 1.5px solid #EFDDE5; border-radius: 12px; overflow: hidden; height: 42px; background: #fff; }
.sxw-qty button { width: 34px; height: 100%; border: 0; background: #FAF6F0; color: #B5156A; font-size: 18px; font-weight: 700; cursor: pointer; }
.sxw-qty input { width: 42px; height: 100%; border: 0; text-align: center; font: 600 15px 'IBM Plex Sans Arabic', sans-serif; color: #3A2430; -moz-appearance: textfield; }
.sxw-qty input::-webkit-outer-spin-button, .sxw-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sxw-add { height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: #B5156A; color: #fff; font: 600 14px 'IBM Plex Sans Arabic', sans-serif; cursor: pointer; white-space: nowrap; transition: background .2s, transform .15s; display: inline-flex; align-items: center; gap: 6px; }
.sxw-add:hover { background: #8C0F52; transform: translateY(-1px); }
.sxw-add.ok { background: #4C6A16; }
.sxw-add[disabled] { opacity: .7; cursor: wait; }

/* card view */
.sxw-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.sxw-card { display: flex; flex-direction: column; border: 1px solid #EFDDE5; border-radius: 22px; background: #fff; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.sxw-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(181,21,106,.5); }
.sxw-card .img { position: relative; display: block; aspect-ratio: 1 / 1; background: #FAF6F0; }
.sxw-card .img img { width: 100%; height: 100%; object-fit: cover; }
.sxw-card .img span { position: absolute; top: 12px; inset-inline-start: 12px; background: #3A2430; color: #fff; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; }
.sxw-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sxw-card h3 { margin: 0; font-size: 15.5px; line-height: 1.45; } .sxw-card h3 a { color: #3A2430 !important; text-decoration: none; }
.sxw-card .row { display: flex; justify-content: space-between; font-size: 13px; color: #6E5763; }
.sxw-card .row b { color: #3A2430; font-weight: 600; }
.sxw-card .price { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px dashed #EFDDE5; }
.sxw-card .price small { display: block; color: #9a8590; font-size: 12px; }
.sxw-card .sxw-buy { justify-content: stretch; } .sxw-card .sxw-add { flex: 1; justify-content: center; }

.sxw-cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-radius: 22px; background: #3A2430; color: #EADBE2; padding: 24px 28px; }
.sxw-cta b { display: block; color: #fff; font-size: 18px; font-family: 'El Messiri', serif; }
.sxw-cta a { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 14px; background: #fff; color: #B5156A !important; font-weight: 600; text-decoration: none; }
.sxw-note { color: #9a8590; font-size: 12.5px; margin-top: 10px; }
.sxw-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 30px); opacity: 0; z-index: 9998; background: #3A2430; color: #fff; padding: 12px 20px; border-radius: 14px; font: 500 14.5px 'IBM Plex Sans Arabic', sans-serif; transition: opacity .3s, transform .3s; pointer-events: none; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.sxw-toast.on { opacity: 1; transform: translate(-50%, 0); }
.sxw [hidden] { display: none !important; }
@media (max-width: 1100px) { .sxw-cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px) {
  .sxw-top h2 { font-size: 24px; }
  .sxw-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sxw-card .body { padding: 10px 10px 12px; } .sxw-card h3 { font-size: 13.5px; } .sxw-card .row { font-size: 12px; }
  .sxw-card .sxw-buy { flex-wrap: wrap; } .sxw-card .sxw-qty { width: 100%; justify-content: space-between; } .sxw-card .sxw-qty input { flex: 1; }
  .sxw .ws { font-size: 18px; }
  .sxw-cta { padding: 20px 18px; }
}
.sxw td.ct { white-space: normal; min-width: 150px; max-width: 220px; font-size: 13.5px; line-height: 1.5; }
.sxw table { min-width: 1040px; }
.sxw th { white-space: normal; line-height: 1.35; }
.sxw-buy { flex-wrap: nowrap; }
.sxw-prod { min-width: 220px; }

/* K2. offers banner + slimmer table (no bag price / margin) */
.sxw table { min-width: 820px !important; }
.sxw s { text-decoration-color: rgba(110,87,99,.55); }
.sxw-offer { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin: 0 0 20px; padding: 24px 28px; border-radius: 24px; background: linear-gradient(120deg, #B5156A 0%, #8C0F52 60%, #6A0B3E 100%); color: #FBE9F1; box-shadow: 0 22px 44px -28px rgba(140,15,82,.8); animation: sxwUp .7s ease both; }
.sxw-offer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); transform: translateX(-120%); animation: sxwSweep 4.5s ease-in-out 1s infinite; pointer-events: none; }
.sxw-offer::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; inset-inline-end: -60px; top: -90px; background: radial-gradient(circle, rgba(201,164,92,.45), transparent 70%); pointer-events: none; }
.sxw-offer-tx { position: relative; flex: 1 1 420px; }
.sxw-offer-k { display: inline-flex; align-items: center; gap: 6px; background: #C9A45C; color: #3A2430; font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 4px 12px; animation: sxwPulse 2.4s ease-in-out infinite; }
.sxw-offer-k::before { content: "★"; }
.sxw-offer h3 { margin: 10px 0 6px; font-family: 'El Messiri', serif; font-size: 24px; color: #fff; line-height: 1.35; }
.sxw-offer p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: #F6D9E6; }
.sxw-offer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sxw-offer li { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: #fff; }
.sxw-offer li::before { content: "✓"; color: #E9CF95; margin-inline-end: 6px; font-weight: 700; }
.sxw-offer-btns { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 210px; }
.sxw-offer-btns a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .15s, box-shadow .2s; }
.sxw-offer-btns a:hover { transform: translateY(-2px); }
.sxw-offer-btns .wa { background: #25D366; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(37,211,102,.9); }
.sxw-offer-btns .wa::before { content: ""; width: 18px; height: 18px; 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 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-3.3-.8-2.8-1.1-4.5-3.9-4.7-4.1-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.7 1.2 1.6 1.9 1.1.9 2 1.2 2.3 1.4.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.7-.1 1.2z'/%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 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-3.3-.8-2.8-1.1-4.5-3.9-4.7-4.1-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.7 1.2 1.6 1.9 1.1.9 2 1.2 2.3 1.4.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.7-.1 1.2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.sxw-offer-btns .fm { background: #fff; color: #B5156A !important; }
@keyframes sxwUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sxwSweep { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@keyframes sxwPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .sxw-offer, .sxw-offer::before, .sxw-offer-k { animation: none; } }
@media (max-width: 760px) { .sxw-offer { padding: 20px 18px; } .sxw-offer h3 { font-size: 20px; } .sxw-offer-btns { width: 100%; } }


/* ---------- L. Moving announcement bar - 15 Oct ---------- */
.sx-ann { position: relative; z-index: 60; height: 38px; overflow: hidden; background: linear-gradient(90deg, #8C0F52, #B5156A 50%, #8C0F52); color: #FFF4F8; font: 500 13.5px/38px 'IBM Plex Sans Arabic', system-ui, sans-serif; direction: ltr; }
.sx-ann::before, .sx-ann::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none; }
.sx-ann::before { left: 0; background: linear-gradient(90deg, #8C0F52, rgba(140,15,82,0)); }
.sx-ann::after { right: 0; background: linear-gradient(270deg, #8C0F52, rgba(140,15,82,0)); }
.sx-ann-track { display: flex; width: max-content; will-change: transform; animation: sxAnnRtl 40s linear infinite; }
.sx-ann-en .sx-ann-track { animation-name: sxAnnLtr; }
.sx-ann:hover .sx-ann-track, .sx-ann:focus-within .sx-ann-track { animation-play-state: paused; }
.sx-ann-g { display: flex; align-items: center; flex: none; }
.sx-ann-i { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; white-space: nowrap; direction: rtl; }
.sx-ann-en .sx-ann-i { direction: ltr; }
.sx-ann-i svg { color: #E9CF95; flex: none; }
.sx-ann-dot { width: 5px; height: 5px; border-radius: 50%; background: #C9A45C; flex: none; opacity: .9; }
.sx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes sxAnnRtl { from { transform: translateX(calc(-1 * var(--sx-ann-w, 50%))); } to { transform: translateX(0); } }
@keyframes sxAnnLtr { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--sx-ann-w, 50%))); } }
@media (max-width: 760px) { .sx-ann { height: 34px; line-height: 34px; font-size: 12.5px; } .sx-ann-i { padding: 0 14px; } .sx-ann::before, .sx-ann::after { width: 24px; } }
@media (prefers-reduced-motion: reduce) { .sx-ann-track { animation: none; } .sx-ann { overflow-x: auto; scrollbar-width: none; } }


/* ---------- M. Weight option buttons - 15 Oct ---------- */
select.sx-wsel { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; }
.sx-wsel + .s-form-control-arrow, .sx-wsel ~ svg { display: none !important; }
.sx-wpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.sx-wpill { min-width: 74px; height: 42px; padding: 0 16px; border: 1.5px solid #EFDDE5; border-radius: 12px; background: #fff; color: #3A2430; font: 600 14.5px 'IBM Plex Sans Arabic', system-ui, sans-serif; cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .15s; }
.sx-wpill:hover { border-color: #B5156A; transform: translateY(-1px); }
.sx-wpill.on { background: #B5156A; border-color: #B5156A; color: #fff; box-shadow: 0 8px 18px -10px rgba(181,21,106,.8); }
.sx-wpill:focus-visible { outline: 2px solid #C9A45C; outline-offset: 2px; }
body.product-single .sx-shiptab { top: auto; bottom: 96px; padding: 8px; }
body.product-single .sx-shiptab > :not(.sx-st-ic) { display: none; }
body.product-single .sx-shiptab:hover { padding: 11px 16px 11px 14px; }
body.product-single .sx-shiptab:hover > :not(.sx-st-ic) { display: block; }

/* ---------- N. «يبدأ من» label on multi-weight product cards - 15 Oct ---------- */
.s-product-card-entry .s-product-card-content-sub:has(.sx-from) { flex-wrap: wrap; }
.s-product-card-entry .sx-from { display: block; flex: 0 0 100%; width: 100%; margin: 0 0 1px; font: 500 12px/1.3 "IBM Plex Sans Arabic", system-ui, sans-serif; color: #8A6B78; }

/* ---------- O. Type tiles: 9 categories on desktop - 16 Oct ---------- */
@media (min-width: 1101px) {
  .sx .sx-cats { grid-template-columns: repeat(9, minmax(0,1fr)); gap: 12px; }
  .sx .sx-cat { padding: 18px 8px 16px; gap: 8px; }
  .sx .sx-cat-art { width: 76px; height: 76px; }
  .sx .sx-cat-art svg { width: 44px; height: 44px; }
  .sx .sx-cat b { font-size: 14.5px; }
  .sx .sx-cat small { font-size: 12px; }
}

/* ---------- P. Speed: stop layout shift on load - 16 Oct ----------
   1) Reserve the moving bar height until JS block 12 inserts it (JS adds body.sx-ann-ready in the same frame).
   2) The homepage hero (HTML component 204290850) is drawn by script after the page appears, so the space is
      reserved with a min-height slightly below its real height. If the hero content gets much shorter, lower these values. */
body:not(.sx-ann-ready) { padding-top: 38px; }
section[component-id="204290850"] { min-height: 1000px; }
@media (max-width: 1279px) { section[component-id="204290850"] { min-height: 1040px; } }
@media (max-width: 1100px) { section[component-id="204290850"] { min-height: 1500px; } }
@media (max-width: 767px) { section[component-id="204290850"] { min-height: 1380px; } body:not(.sx-ann-ready) { padding-top: 34px; } }
@media (max-width: 599px) { section[component-id="204290850"] { min-height: 1500px; } }

/* Q) Multi-weight cards: weight chips + «اختر الوزن» button (JS block 16) */
.s-product-card-entry .sx-hasw salla-add-product-button { display: none !important; }
.s-product-card-entry .sx-pickw { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.s-product-card-entry .sx-cardw { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 10px; }
.s-product-card-entry .sx-cardw a { font: 500 11.5px/1 "IBM Plex Sans Arabic", system-ui, sans-serif; color: #8A6B78; border: 1px solid #EAD9E0; border-radius: 999px; padding: 5px 9px; background: #FFF; text-decoration: none; white-space: nowrap; transition: .15s; }
.s-product-card-entry .sx-cardw a:hover { color: #B5156A; border-color: #B5156A; }

/* R) Volume pricing badges (JS block 17) */
.sx-wpill { position: relative; }
.sx-wpill .sx-save { position: absolute; top: -9px; inset-inline-end: -6px; font: 600 10px/1 "IBM Plex Sans Arabic", system-ui, sans-serif; font-style: normal; color: #fff; background: #1F8A5B; border-radius: 999px; padding: 4px 6px; box-shadow: 0 1px 3px rgba(0,0,0,.15); white-space: nowrap; pointer-events: none; }
.sx-wnote { flex: 0 0 100%; width: 100%; margin-top: 8px; font: 500 12px/1.4 "IBM Plex Sans Arabic", system-ui, sans-serif; color: #1F8A5B; }
.s-product-card-entry .sx-cardw a .sx-csave { font-style: normal; font-weight: 600; color: #1F8A5B; margin-inline-start: 4px; }

/* S) Product page: related grid + section tiles (JS block 18) */
.sx-pdp-more { max-width: 1280px; width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; margin: 8px auto 40px; padding: 0 16px; font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
.sx-pdp-sec { margin-top: 28px; }
.sx-pdp-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sx-pdp-hd h2 { margin: 0; font-size: 20px; font-weight: 700; color: #2E1A24; }
.sx-pdp-hd h2::after { content: ""; display: block; width: 36px; height: 3px; border-radius: 3px; background: #B5156A; margin-top: 6px; }
.sx-pdp-hd a { font-size: 13px; font-weight: 600; color: #B5156A; text-decoration: none; }
.sx-rps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.sx-rp { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #fff; border: 1px solid #F0E3E9; border-radius: 16px; text-decoration: none; color: #2E1A24; transition: transform .15s, box-shadow .15s; }
.sx-rp:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(46,26,36,.08); }
.sx-rp-img { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #FAF6F8; }
.sx-rp-img img { width: 100%; height: 100%; object-fit: cover; }
.sx-rp-img i { position: absolute; inset-inline-start: 6px; top: 6px; font: 600 10px/1 inherit; font-style: normal; background: rgba(46,26,36,.75); color: #fff; padding: 4px 7px; border-radius: 999px; }
.sx-rp.is-out .sx-rp-img img { opacity: .55; }
.sx-rp b { font-size: 13px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.sx-rp-pr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.sx-rp-pr small { flex: 0 0 100%; font-size: 11px; color: #8A6B78; }
.sx-rp-pr strong { font-size: 14px; font-weight: 700; color: #B5156A; }
.sx-rp-pr s { font-size: 11.5px; color: #A8959E; }
.sx-pc { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.sx-pc-i { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 16px; background: #FBF4F7; border: 1px solid transparent; text-decoration: none; color: #2E1A24; text-align: center; transition: .15s; }
.sx-pc-i:hover, .sx-pc-i.on { border-color: #B5156A; background: #fff; }
.sx-pc-i span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #B5156A; box-shadow: 0 2px 8px rgba(181,21,106,.10); }
.sx-pc-i span svg { width: 30px; height: 30px; }
.sx-pc-i b { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
@media (max-width: 1100px) { .sx-rps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sx-pc { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sx-pdp-hd h2 { font-size: 18px; }
  .sx-rps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .sx-rps::-webkit-scrollbar, .sx-pc::-webkit-scrollbar { display: none; }
  .sx-rp { flex: 0 0 148px; width: 148px; scroll-snap-align: start; }
  .sx-pc { display: flex; overflow-x: auto; gap: 8px; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .sx-pc-i { flex: 0 0 84px; padding: 12px 4px 10px; }
  .sx-pc-i span { width: 46px; height: 46px; } .sx-pc-i span svg { width: 26px; height: 26px; }
}

/* T) Social band above the footer (JS block 19) */
.sx-soc { background: linear-gradient(135deg, #FBF1F6 0%, #FFF8F2 100%); border-top: 1px solid #F3E4EC; font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
.sx-soc-in { max-width: 1280px; margin: 0 auto; padding: 34px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 28px; }
.sx-soc-tx small { display: inline-block; font-size: 12px; font-weight: 600; color: #B5156A; background: #fff; border: 1px solid #F0DCE6; border-radius: 999px; padding: 3px 10px; }
.sx-soc-tx h2 { margin: 8px 0 4px; font-size: 22px; font-weight: 700; color: #2E1A24; }
.sx-soc-tx p { margin: 0; font-size: 14px; color: #6E5763; }
.sx-soc-ic { display: flex; flex-wrap: wrap; gap: 10px; }
.sx-soc-ic a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #B5156A; box-shadow: 0 3px 10px rgba(181,21,106,.12); transition: transform .18s, background .18s, color .18s; }
.sx-soc-ic a svg { width: 20px; height: 20px; fill: currentColor; }
.sx-soc-ic a:hover, .sx-soc-ic a:focus-visible { transform: translateY(-3px); background: var(--b); color: #fff; }
.sx-soc-ic a[title="Snapchat"]:hover { color: #111; }
.sx-soc-h { grid-column: 2; justify-self: center; font-size: 12.5px; font-weight: 600; color: #8A6B78; letter-spacing: .3px; }
@media (max-width: 767px) {
  .sx-soc-in { grid-template-columns: 1fr; text-align: center; padding: 28px 16px; }
  .sx-soc-tx h2 { font-size: 19px; }
  .sx-soc-ic { justify-content: center; }
  .sx-soc-ic a { width: 44px; height: 44px; }
  .sx-soc-h { grid-column: 1; }
}