/* RippleWash — Custom Storefront Styling v3 (paste into Settings -> Advanced -> Custom Code -> CSS) */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root{
  --rw-ink:#12161C;
  --rw-cream:#F6F2EA;
  --rw-panel-line:#E7DFCE;
  --rw-ink-soft:#5B6670;
  --rw-gold:#D9B873;
  --rw-gold-2:#C9A05C;
  --rw-gold-soft:rgba(217,184,115,.16);
  --rw-border:rgba(217,184,115,.26);
  --rw-text-soft:rgba(255,255,255,.82);
  --rw-shadow:0 20px 50px -24px rgba(0,0,0,.5);
}

html, body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea, small, strong, b, div{
  font-family:'Tajawal', sans-serif !important;
}
body{ background:var(--rw-cream) !important; color:#17191C !important; }

/* top loyalty bar */
.rw-top-loyalty{
  background:var(--rw-gold) !important; color:#17191C !important; text-align:center !important;
  padding:11px 14px !important; font-size:14px !important; font-weight:800 !important; line-height:1.5 !important;
}

/* ================= HERO (full-bleed) ================= */
.rw-hero{
  position:relative !important; width:100% !important; min-height:78vh !important;
  display:flex !important; align-items:flex-end !important; overflow:hidden !important;
  color:#fff !important; background:var(--rw-ink) !important; margin:0 0 0 !important;
}
@media (min-width:880px){ .rw-hero{ min-height:92vh !important; } }
.rw-hero__poster{
  position:absolute !important; inset:0 !important; z-index:0 !important;
  background:var(--rw-hero-image) center 32% / cover no-repeat !important;
}
.rw-hero__scrim{
  position:absolute !important; inset:0 !important; z-index:1 !important;
  background:linear-gradient(0deg, rgba(10,13,18,.94) 4%, rgba(10,13,18,.55) 38%, rgba(10,13,18,.18) 62%, rgba(10,13,18,.5) 100%) !important;
}
.rw-hero__body{
  position:relative !important; z-index:2 !important; width:100% !important; max-width:1180px !important;
  margin-inline:auto !important; padding:min(14vh,140px) clamp(20px,5vw,56px) 64px !important;
}
.rw-hero__badge{
  display:inline-flex !important; align-items:center !important; gap:.5em !important; padding:.5em 1.1em !important;
  border-radius:999px !important; background:rgba(16,21,28,.5) !important; border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important; font-size:.8rem !important; font-weight:700 !important; margin-bottom:1.1em !important;
}
.rw-hero__title{
  margin:0 !important; max-width:18ch !important; font-size:clamp(2.1rem,6vw,3.8rem) !important; line-height:1.14 !important;
  font-weight:800 !important; color:#fff !important; text-shadow:0 2px 24px rgba(0,0,0,.35) !important;
}
.rw-hero__title span{ color:var(--rw-gold) !important; }
.rw-hero__sub{ margin:1em 0 0 !important; max-width:48ch !important; font-size:clamp(1rem,1.6vw,1.15rem) !important; line-height:1.7 !important; color:var(--rw-text-soft) !important; }
.rw-hero__action{ display:flex !important; flex-wrap:wrap !important; gap:1em !important; margin-top:2em !important; }
.rw-hero__action a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:.95em 1.9em !important; border-radius:999px !important; text-decoration:none !important; font-weight:800 !important; font-size:1rem !important; }
.rw-hero__cta-gold{ background:linear-gradient(135deg,var(--rw-gold),var(--rw-gold-2)) !important; color:var(--rw-ink) !important; box-shadow:0 14px 30px -12px rgba(217,184,115,.5) !important; }
.rw-hero__cta-ghost{ background:transparent !important; border:1px solid rgba(255,255,255,.55) !important; color:#fff !important; }

/* ================= shared section bits ================= */
.rw-wrap{ max-width:1180px !important; margin-inline:auto !important; padding-inline:clamp(20px,5vw,48px) !important; }
.rw-kick{ display:flex !important; align-items:center !important; gap:.5em !important; font-size:.8rem !important; letter-spacing:.04em !important; color:#A9823F !important; font-weight:700 !important; margin-bottom:1em !important; }
.rw-kick::before{ content:"" !important; width:8px !important; height:11px !important; border-radius:50% 50% 50% 0 !important; background:var(--rw-gold) !important; transform:rotate(45deg) !important; display:inline-block !important; }

/* ================= why ================= */
.rw-why{ padding:64px 0 !important; background:var(--rw-cream) !important; }
.rw-why .rw-wrap{ display:grid !important; grid-template-columns:1.05fr .95fr !important; gap:clamp(28px,5vw,56px) !important; align-items:center !important; }
@media (max-width:860px){ .rw-why .rw-wrap{ grid-template-columns:1fr !important; } }
.rw-why__title{ font-size:clamp(1.7rem,4vw,2.3rem) !important; font-weight:800 !important; margin:0 0 .6em !important; color:#1C2026 !important; }
.rw-why__lede{ color:var(--rw-ink-soft) !important; font-size:1.02rem !important; line-height:1.8 !important; max-width:48ch !important; margin:0 0 1.3em !important; }
.rw-why__facts{ display:flex !important; flex-direction:column !important; gap:.7em !important; list-style:none !important; margin:0 !important; padding:0 !important; }
.rw-why__facts li{ display:flex !important; align-items:center !important; gap:.6em !important; font-size:.98rem !important; color:#1C2026 !important; }
.rw-why__facts li::before{ content:"" !important; width:8px !important; height:11px !important; border-radius:50% 50% 50% 0 !important; background:var(--rw-gold) !important; transform:rotate(45deg) !important; flex:none !important; }
.rw-why__media{ border-radius:22px !important; overflow:hidden !important; box-shadow:var(--rw-shadow) !important; aspect-ratio:4/5 !important; margin:0 !important; }
.rw-why__media img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }

/* ================= how it works ================= */
.rw-how{ padding:64px 0 !important; background:#fff !important; border-block:1px solid var(--rw-panel-line) !important; }
.rw-how__head{ text-align:center !important; max-width:640px !important; margin:0 auto 40px !important; }
.rw-how__head h2{ font-size:clamp(1.7rem,4vw,2.3rem) !important; font-weight:800 !important; margin:0 !important; color:#1C2026 !important; }
.rw-how__steps{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:clamp(18px,3vw,32px) !important; }
@media (max-width:760px){ .rw-how__steps{ grid-template-columns:1fr !important; } }
.rw-how__step{ position:relative !important; background:var(--rw-cream) !important; border:1px solid var(--rw-panel-line) !important; border-radius:18px !important; padding:30px 24px !important; }
.rw-how__step-icon{ width:42px !important; height:42px !important; display:grid !important; place-items:center !important; border-radius:50% !important; background:var(--rw-gold-soft) !important; border:1px solid var(--rw-border) !important; margin-bottom:14px !important; }
.rw-how__step-icon svg{ width:20px !important; height:20px !important; stroke:var(--rw-gold) !important; fill:none !important; }
.rw-how__step-num{ position:absolute !important; top:24px !important; inset-inline-end:24px !important; font-size:.78rem !important; color:var(--rw-ink-soft) !important; opacity:.6 !important; }
.rw-how__step h3{ font-size:1.12rem !important; font-weight:700 !important; margin:0 0 .4em !important; color:#1C2026 !important; }
.rw-how__step p{ color:var(--rw-ink-soft) !important; font-size:.95rem !important; line-height:1.6 !important; margin:0 !important; }

/* ================= gallery ================= */
.rw-gallery{ padding:64px 0 !important; background:var(--rw-cream) !important; }
.rw-gallery__head{ max-width:640px !important; margin-bottom:36px !important; }
.rw-gallery__head h2{ font-size:clamp(1.7rem,4vw,2.3rem) !important; font-weight:800 !important; margin:0 !important; color:#1C2026 !important; }
.rw-gallery__grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:clamp(16px,3vw,24px) !important; }
@media (max-width:860px){ .rw-gallery__grid{ grid-template-columns:1fr !important; } }
.rw-gallery__item{ border-radius:18px !important; overflow:hidden !important; background:#fff !important; box-shadow:var(--rw-shadow) !important; margin:0 !important; }
.rw-gallery__item img{ width:100% !important; aspect-ratio:4/3 !important; object-fit:cover !important; display:block !important; }
.rw-gallery__item figcaption{ padding:16px 18px 20px !important; font-size:.92rem !important; color:var(--rw-ink-soft) !important; line-height:1.5 !important; }

/* ================= book CTA ================= */
.rw-book{ background:var(--rw-ink) !important; padding:64px 0 !important; }
.rw-book .rw-wrap{ display:grid !important; grid-template-columns:.95fr 1.05fr !important; gap:clamp(28px,5vw,56px) !important; align-items:center !important; }
@media (max-width:860px){ .rw-book .rw-wrap{ grid-template-columns:1fr !important; } }
.rw-book__media{ border-radius:20px !important; overflow:hidden !important; aspect-ratio:4/5 !important; box-shadow:0 24px 60px -24px rgba(0,0,0,.6) !important; margin:0 !important; }
.rw-book__media img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.rw-book h2{ font-size:clamp(1.7rem,4vw,2.3rem) !important; font-weight:800 !important; margin:0 0 .5em !important; color:#fff !important; }
.rw-book p{ color:rgba(255,255,255,.75) !important; font-size:1rem !important; line-height:1.8 !important; margin:0 0 1.4em !important; max-width:48ch !important; }
.rw-book a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:.95em 1.8em !important; border-radius:999px !important; text-decoration:none !important; font-weight:800 !important; font-size:1rem !important; background:linear-gradient(135deg,var(--rw-gold),var(--rw-gold-2)) !important; color:var(--rw-ink) !important; }

/* ================= loyalty (restyled to the new softer gold) ================= */
.rw-loyalty{ direction:rtl !important; max-width:1180px !important; margin:0 12px 28px !important; padding:0 !important; border-radius:28px !important; background:var(--rw-ink) !important; border:1px solid var(--rw-border) !important; box-shadow:var(--rw-shadow) !important; position:relative !important; overflow:hidden !important; display:grid !important; grid-template-columns:1fr !important; }
@media (min-width:860px){ .rw-loyalty{ grid-template-columns:1.05fr .95fr !important; align-items:center !important; } }
.rw-loyalty__copy{ padding:40px clamp(24px,4vw,48px) !important; text-align:start !important; }
.rw-loyalty__badge{ display:inline-flex !important; align-items:center !important; padding:9px 16px !important; border-radius:999px !important; background:var(--rw-gold-soft) !important; border:1px solid var(--rw-border) !important; color:var(--rw-gold) !important; font-size:13px !important; font-weight:800 !important; margin-bottom:16px !important; }
.rw-loyalty h2{ margin:0 0 14px !important; color:#fff !important; font-size:clamp(26px,4.2vw,38px) !important; line-height:1.22 !important; font-weight:800 !important; }
.rw-loyalty h2 span{ color:var(--rw-gold) !important; }
.rw-loyalty p{ margin:0 0 22px !important; max-width:46ch !important; color:var(--rw-text-soft) !important; font-size:14px !important; line-height:1.9 !important; }
.rw-loyalty-tags{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-bottom:26px !important; }
.rw-loyalty-tags span{ padding:8px 12px !important; border-radius:999px !important; background:rgba(255,255,255,.04) !important; border:1px solid var(--rw-border) !important; color:rgba(255,255,255,.9) !important; font-size:11.5px !important; font-weight:600 !important; }
.rw-loyalty__cta{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:240px !important; height:48px !important; padding:0 22px !important; border-radius:999px !important; background:linear-gradient(135deg,var(--rw-gold),var(--rw-gold-2)) !important; color:var(--rw-ink) !important; font-size:14.5px !important; font-weight:800 !important; text-decoration:none !important; box-shadow:0 14px 28px rgba(217,184,115,.28) !important; }

/* punch-card visual */
.rw-loyalty__card{ background:rgba(255,255,255,.03) !important; border-inline-start:1px solid var(--rw-border) !important; padding:40px clamp(24px,4vw,48px) !important; }
@media (max-width:859px){ .rw-loyalty__card{ border-inline-start:0 !important; border-top:1px solid var(--rw-border) !important; } }
.rw-punch{ display:flex !important; align-items:center !important; justify-content:space-between !important; position:relative !important; }
.rw-punch::before{ content:"" !important; position:absolute !important; top:26px !important; inset-inline:4%; height:1px !important; background:repeating-linear-gradient(to left, var(--rw-border) 0 6px, transparent 6px 12px) !important; z-index:0 !important; }
.rw-punch__dot{ position:relative !important; z-index:1 !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:8px !important; }
.rw-punch__circle{ width:52px !important; height:52px !important; border-radius:50% !important; display:grid !important; place-items:center !important; background:var(--rw-ink) !important; border:1.5px solid var(--rw-border) !important; color:var(--rw-gold) !important; font-size:17px !important; font-weight:800 !important; }
.rw-punch__dot--gift .rw-punch__circle{ background:linear-gradient(135deg,var(--rw-gold),var(--rw-gold-2)) !important; color:var(--rw-ink) !important; border-color:transparent !important; box-shadow:0 10px 24px -8px rgba(217,184,115,.6) !important; }
.rw-punch__dot small{ font-size:10.5px !important; color:rgba(255,255,255,.55) !important; font-weight:600 !important; }
.rw-punch__caption{ margin-top:28px !important; text-align:center !important; font-size:12.5px !important; color:rgba(255,255,255,.6) !important; line-height:1.7 !important; }
.rw-punch__caption b{ color:var(--rw-gold) !important; font-weight:800 !important; }

.rw-best-badge{ position:absolute !important; top:10px !important; right:10px !important; z-index:20 !important; padding:6px 10px !important; border-radius:999px !important; background:linear-gradient(135deg,var(--rw-gold),var(--rw-gold-2)) !important; color:var(--rw-ink) !important; font-size:10px !important; font-weight:900 !important; box-shadow:0 8px 20px rgba(217,184,115,.3) !important; }
.rw-hide-loyalty-text{ display:none !important; }

/* floating whatsapp */
.rw-whatsapp{ position:fixed !important; left:16px !important; bottom:16px !important; width:56px !important; height:56px !important; border-radius:50% !important; background:var(--rw-ink) !important; color:var(--rw-gold) !important; border:2px solid var(--rw-gold) !important; display:grid !important; place-items:center !important; text-decoration:none !important; font-size:22px !important; box-shadow:0 16px 35px rgba(0,0,0,.3) !important; z-index:9999 !important; }

/* logo sizing on mobile */
@media (max-width:768px){
  body .navbar-brand, body header .navbar-brand, body .s-header .navbar-brand, body .store-header .navbar-brand{
    width:110px !important; min-width:110px !important; max-width:110px !important; height:68px !important; min-height:68px !important; max-height:68px !important;
    padding:5px !important; margin:0 8px !important; border-radius:16px !important; display:flex !important; align-items:center !important;
    justify-content:center !important; flex:0 0 auto !important; overflow:hidden !important; box-sizing:border-box !important;
  }
  body .navbar-brand img, body header .navbar-brand img, body .s-header .navbar-brand img, body .store-header .navbar-brand img{
    width:100% !important; height:100% !important; max-width:100px !important; max-height:60px !important; object-fit:contain !important; margin:0 !important; padding:0 !important;
  }
}

/* footer */
footer, .store-footer, .s-footer{ background:transparent !important; border-top:0 !important; margin-top:24px !important; padding:0 12px 18px !important; direction:rtl !important; }
footer > *, .store-footer > *, .s-footer > *{ max-width:1180px !important; margin-inline:auto !important; }
footer > *:first-child, .store-footer > *:first-child, .s-footer > *:first-child{ background:var(--rw-ink) !important; border:1px solid var(--rw-border) !important; border-radius:24px !important; box-shadow:var(--rw-shadow) !important; padding:24px 18px !important; margin-bottom:14px !important; }
footer > *:first-child h2, footer > *:first-child h3, footer > *:first-child h4, footer > *:first-child .title,
.store-footer > *:first-child h2, .store-footer > *:first-child h3, .store-footer > *:first-child h4,
.s-footer > *:first-child h2, .s-footer > *:first-child h3, .s-footer > *:first-child h4{ color:var(--rw-gold) !important; font-size:18px !important; font-weight:800 !important; margin-bottom:10px !important; }
footer > *:first-child p, footer > *:first-child span, footer > *:first-child a, footer > *:first-child li, footer > *:first-child small,
.store-footer > *:first-child p, .store-footer > *:first-child span, .store-footer > *:first-child a,
.s-footer > *:first-child p, .s-footer > *:first-child span, .s-footer > *:first-child a{ color:rgba(255,255,255,.85) !important; font-size:13px !important; line-height:1.9 !important; text-decoration:none !important; }
footer > *:first-child a:hover, .store-footer > *:first-child a:hover, .s-footer > *:first-child a:hover{ color:var(--rw-gold) !important; }
footer > *:last-child, .store-footer > *:last-child, .s-footer > *:last-child{ background:var(--rw-ink) !important; border:1px solid var(--rw-border) !important; border-radius:20px !important; padding:16px !important; }
footer [class*="payment"] img, .store-footer [class*="payment"] img, .s-footer [class*="payment"] img{ background:#fff !important; border-radius:10px !important; padding:6px 9px !important; max-height:32px !important; }

/* mobile */
@media (max-width:768px){
  .rw-top-loyalty{ font-size:12.5px !important; padding:10px 12px !important; }
  .rw-hero__body{ padding:min(10vh,90px) 18px 40px !important; }
  .rw-why, .rw-how, .rw-gallery, .rw-book{ padding:40px 0 !important; }
  .rw-loyalty{ margin:0 12px 24px !important; }
  .rw-loyalty__copy{ padding:28px 20px 8px !important; }
  .rw-loyalty__card{ padding:28px 20px !important; }
  .rw-punch__circle{ width:42px !important; height:42px !important; font-size:14px !important; }
  .rw-loyalty__cta{ width:100% !important; min-width:100% !important; }
  .rw-whatsapp{ width:50px !important; height:50px !important; left:14px !important; bottom:14px !important; font-size:20px !important; }
}