/* Add custom CSS styles below */ 
/* ═══════════════════════════════════════════════════════════════
   Purella — CSS شامل v3.0
   ① تبويبات صفحة المنتج
   ② هيرو كاروسيل
   ③ قسم الطقس اليومي
   ④ إخفاء السلايدرين الفارغين
   ⑤ فواصل بصرية بين الأقسام
   ⑥ بطاقات المنتجات
   ⑦ الفوتر الداكن
   ⑧ تحسينات عامة
   ═══════════════════════════════════════════════════════════════ */

/* ══════════ ① تبويبات صفحة المنتج ══════════ */

.purella-sections{margin-top:24px;display:flex;flex-direction:column;gap:8px;font-family:'Tajawal',sans-serif;direction:rtl}
.purella-section{border-radius:16px;overflow:hidden;border:1px solid #EFE6DC;background:#FFF}
.purella-section-title{display:flex;align-items:center;gap:10px;padding:16px 20px;cursor:pointer;background:#FFF9F4;transition:background .2s;user-select:none}
.purella-section-title:hover{background:#FFF0E6}
.purella-section-title.p-open{background:#1A1A2E}
.purella-section-title.p-open h3{color:#FFF}
.purella-section-title.p-open .p-arrow{color:#FFF;transform:rotate(180deg)}
.purella-section-title h3{flex:1;font-size:15px;font-weight:800;color:#1A1A2E;margin:0;line-height:1.5}
.p-arrow{font-size:12px;color:#8B8B9E;transition:transform .3s ease,color .2s}
.purella-section-body{display:none;padding:20px;line-height:2;color:#1A1A2E;font-size:14px;animation:pSectionFade .3s ease}
.purella-section-body.p-open{display:block}
@keyframes pSectionFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:768px){
  .purella-section-title{padding:14px 16px;gap:8px}
  .purella-section-title h3{font-size:14px}
  .purella-section-body{padding:16px;font-size:13px}
}


/* ══════════ ② هيرو كاروسيل ══════════ */

.purella-hero-wrap{padding:24px 32px 0;background:#FFF9F4}
.hero{position:relative;overflow:hidden}
.hero-carousel{position:relative;max-width:1400px;margin:0 auto;aspect-ratio:1000/500;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(26,26,46,.1)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;overflow:hidden}
.hero-slide.active{opacity:1;z-index:2}

.slide-scrub{background:#EFE97A}
.slide-scrub .blob{position:absolute;inset:0;background:radial-gradient(ellipse 55% 80% at 55% 50%,#FFFA8C 0%,#EFE97A 45%,transparent 70%)}
.slide-scrub .bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#F5F5A8);opacity:.55;animation:float 6s ease-in-out infinite}
.slide-scrub .b1{width:50px;height:50px;top:18%;left:5%}
.slide-scrub .b2{width:30px;height:30px;top:70%;left:12%;animation-delay:.8s}
.slide-scrub .b3{width:22px;height:22px;top:30%;left:22%;animation-delay:1.6s}
.slide-scrub .b4{width:40px;height:40px;top:78%;left:28%;animation-delay:2.4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.slide-ritual{background:linear-gradient(180deg,#F8ABC5 0%,#F48EB5 100%)}
.slide-ritual .tile-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.08) 2px,transparent 2px);background-size:80px 80px}
.slide-ritual .jar{position:absolute;width:140px;height:160px;border-radius:20px 20px 14px 14px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.slide-ritual .jar::before{content:'';position:absolute;top:-10px;left:8%;right:8%;height:12px;background:#1A1A2E;border-radius:4px 4px 2px 2px}
.slide-ritual .jar-label{position:absolute;top:28%;left:12%;right:12%;background:rgba(255,255,255,.85);border-radius:8px;padding:8px 6px;text-align:center;font-family:'Tajawal',sans-serif;font-size:9px;letter-spacing:2px;font-weight:600;color:#2a1a3a;line-height:1.4}
.slide-ritual .jar1{left:20%;top:32%;background:linear-gradient(180deg,#D4B8F0,#B89BE0);transform:rotate(-6deg)}
.slide-ritual .jar2{left:42%;top:22%;background:linear-gradient(180deg,#F5E890,#E0D075);width:160px;height:180px;transform:rotate(3deg)}
.slide-ritual .jar3{left:30%;top:58%;background:linear-gradient(180deg,#FFB5D5,#F48EB5);width:120px;height:140px;transform:rotate(8deg)}
.bubble-dot{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.3));opacity:.6;animation:float 5s ease-in-out infinite}

.slide-lux{background:linear-gradient(180deg,#E8408A 0%,#C22675 100%)}
.slide-lux .stripes{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 24px,transparent 24px 48px)}
.slide-lux .curve{position:absolute;width:50%;height:55%;left:8%;top:18%;border:24px solid #EFE97A;border-radius:50%;border-bottom:none;border-left:none;transform:rotate(-30deg);z-index:2}
.slide-lux .scrub-cup{position:absolute;left:8%;bottom:8%;width:220px;height:240px;background:radial-gradient(circle at 50% 30%,#F57BAA 0%,#D43B7E 60%,#A01860 100%);border-radius:50% 50% 12% 12% / 20% 20% 12% 12%;box-shadow:0 20px 50px rgba(0,0,0,.25);z-index:3}
.slide-lux .scrub-cup::before{content:'';position:absolute;top:-8%;left:5%;right:5%;height:30%;background:radial-gradient(ellipse at 50% 30%,#F8A0C5 0%,#E060A0 60%,transparent 100%);border-radius:50%;filter:blur(2px)}
.slide-lux .hand{position:absolute;left:22%;bottom:-5%;width:100px;height:140px;background:linear-gradient(180deg,#F5D4B8,#E8B595);border-radius:40% 40% 10% 10%;transform:rotate(-15deg);box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:2}

.slide-nourish{background:#E8408A}
.slide-nourish .pedestal{position:absolute;left:26%;top:32%;width:150px;height:200px;background:linear-gradient(180deg,#D4B8F0,#B89BE0);border-radius:16px 16px 8px 8px;box-shadow:0 15px 40px rgba(0,0,0,.25);z-index:2}
.slide-nourish .pedestal::before{content:'';position:absolute;top:-24px;left:-10%;right:-10%;height:30px;background:linear-gradient(180deg,#FFC5E0,#F48EB5);border-radius:50%}
.slide-nourish .tub{position:absolute;left:10%;bottom:10%;width:120px;height:70px;background:linear-gradient(180deg,#F48EB5,#D85A95);border-radius:60% 60% 20% 20% / 40% 40% 20% 20%;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:2}
.slide-nourish .tub-foam{position:absolute;top:-12px;left:10%;right:10%;height:24px;background:radial-gradient(ellipse at 50% 100%,#fff 0%,rgba(255,255,255,.3) 70%);border-radius:50% 50% 0 0}
.slide-nourish .bubble-big,.bubble-big{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(255,255,255,.2));border:1px solid rgba(255,255,255,.4);animation:float 5s ease-in-out infinite}

.slide-glow{background:linear-gradient(180deg,#FFCAD4,#F8ABC5)}
.slide-glow .curtain-l,.slide-glow .curtain-r{position:absolute;top:0;bottom:0;width:14%;background:linear-gradient(180deg,#FF8FAF 0%,#E8558A 50%,#F59BBD 100%)}
.slide-glow .curtain-l{left:0;border-radius:0 20px 20px 0}
.slide-glow .curtain-r{right:0;border-radius:20px 0 0 20px}
.slide-glow .squiggle{position:absolute;top:30%;left:22%;width:35%;height:50%;border:24px solid #E8408A;border-radius:50%;border-bottom:none;border-left:none;transform:rotate(30deg);opacity:.9;z-index:2}
.slide-glow .jar-green{position:absolute;left:12%;bottom:18%;width:110px;height:130px;background:linear-gradient(180deg,#B5E895,#7ECC5F);border-radius:20px 20px 10px 10px;box-shadow:0 18px 40px rgba(0,0,0,.2);transform:rotate(-8deg);z-index:3}
.slide-glow .jar-green::before{content:'';position:absolute;top:-10px;left:8%;right:8%;height:12px;background:#1A1A2E;border-radius:4px}
.slide-glow .shelf{position:absolute;right:28%;bottom:30%;width:100px;height:6px;background:rgba(255,255,255,.6);border-radius:3px}

.sparkle{position:absolute;pointer-events:none;animation:float 4s ease-in-out infinite}

.hero-copy-abs{position:absolute;right:6%;top:50%;transform:translateY(-50%);z-index:20;max-width:46%}
.hero-copy-abs::before{content:'';position:absolute;inset:-20px -30px;background:radial-gradient(ellipse at center,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 70%);z-index:0;pointer-events:none}
.hero-copy-abs h2,.hero-copy-abs .kick,.hero-copy-abs .sub,.hero-copy-abs .cta{position:relative;z-index:21}
.hero-copy-abs h2{font-family:'Tajawal',sans-serif;font-weight:900;font-size:clamp(28px,4.2vw,56px);line-height:1.15;letter-spacing:-1px}
.hero-copy-abs .kick{font-size:clamp(18px,1.8vw,24px);font-weight:700;margin-bottom:10px}
.hero-copy-abs .sub{font-size:clamp(13px,1.2vw,15px);line-height:1.9;margin-top:14px;max-width:400px;font-weight:500}
.hero-copy-abs .cta{display:inline-flex;align-items:center;gap:8px;background:#1A1A2E;color:#FFF9F4;padding:14px 26px;border-radius:100px;font-weight:800;font-size:14px;margin-top:22px;text-decoration:none;cursor:pointer;transition:transform .2s}
.hero-copy-abs .cta:hover{transform:translateY(-2px)}

.hero-dots{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:10}
.hero-dot{width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.5);border:none;cursor:pointer;transition:all .3s;padding:0}
.hero-dot.active{background:#1A1A2E;width:44px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.9);border:none;cursor:pointer;font-size:20px;color:#1A1A2E;z-index:10;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.15);transition:transform .2s}
.hero-arrow:hover{transform:translateY(-50%) scale(1.1)}
.hero-arrow.prev{right:20px}
.hero-arrow.next{left:20px}

@media(max-width:900px){
  .purella-hero-wrap{padding:16px 16px 0}
  .hero-carousel{aspect-ratio:1000/600;border-radius:20px}
  .hero-arrow{width:36px;height:36px;font-size:14px}
  .hero-copy-abs{max-width:58%;right:5%}
}


/* ══════════ ③ قسم الطقس اليومي ══════════ */

.p-ritual{padding:32px 20px;background:#FFF9F4;text-align:center;border-top:1px solid #EFE6DC;border-bottom:1px solid #EFE6DC}
.p-ritual-inner{max-width:1100px;margin:0 auto}
.p-ritual-label{font-size:12px;font-weight:700;color:#E8638A;letter-spacing:3px;margin-bottom:4px}
.p-ritual-title{font-size:clamp(24px,3.5vw,34px);font-weight:900;color:#1A1A2E;margin-bottom:4px}
.p-ritual-sub{font-size:13px;color:#8B8B9E;margin-bottom:28px}
.p-ritual-steps{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;position:relative;margin-bottom:24px}
.p-ritual-line{display:none}
.p-step{text-decoration:none;color:#1A1A2E;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .2s;min-width:130px}
.p-step:hover{transform:translateY(-4px)}
.p-step-circle{width:68px;height:68px;border-radius:50%;border:3px solid;display:flex;align-items:center;justify-content:center;font-family:'Tajawal',sans-serif;font-size:22px;font-weight:900;background:#FFF;transition:all .2s}
.p-step:hover .p-step-circle{transform:scale(1.08)}
.p-step-name{font-size:18px;font-weight:800;color:#1A1A2E}
.p-step-desc{font-size:14px;color:#8B8B9E}
.p-step-en{font-size:11px;color:#EFE6DC;letter-spacing:1.5px;font-weight:600}
.p-ritual-cta{display:inline-flex;align-items:center;gap:8px;background:#1A1A2E;color:#FFF9F4;padding:14px 28px;border-radius:100px;font-weight:800;font-size:14px;text-decoration:none;transition:all .2s}
.p-ritual-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(26,26,46,.25)}

@media(max-width:600px){
  .p-ritual-steps{gap:24px}
  .p-step{min-width:80px}
  .p-step-circle{width:54px;height:54px;font-size:17px}
  .p-step-name{font-size:15px}
  .p-step-desc{font-size:12px}
}


/* ══════════ ④ إخفاء السلايدرين الفارغين ══════════ */

.s-block--hero-slider{display:none!important}


/* ══════════ ⑤ فواصل بصرية بين الأقسام ══════════ */

main .s-block{padding-top:48px!important;padding-bottom:48px!important}
main .s-block+.s-block{border-top:1px solid #EFE6DC}
.s-block--bundle-statistics{border-top:none!important}

body.index{background-color:#FFF9F4!important}


/* ══════════ ⑥ بطاقات المنتجات ══════════ */

/* البطاقة */
.s-product-card-entry{border-radius:16px!important;border:1px solid #EFE6DC!important;overflow:hidden!important;transition:transform .2s ease!important;background:#FFF9F4!important;box-shadow:none!important}
.s-product-card-entry:hover{transform:translateY(-4px)!important}

/* الصورة — من الحافة للحافة */
.s-product-card-image{border-radius:0!important;overflow:hidden!important}
.s-product-card-image a{display:block!important}
.s-product-card-image-cover{width:100%!important;aspect-ratio:1/1!important;object-fit:cover!important;border-radius:0!important;display:block!important}

/* بادج الترويج */
.s-product-card-promotion-title{background:#E8638A!important;color:#FFF!important;font-size:10px!important;font-weight:800!important;border-radius:100px!important;padding:4px 10px!important}

/* المحتوى */
.s-product-card-content{padding:12px 14px!important}
.s-product-card-content-title a{font-size:14px!important;font-weight:800!important;color:#1A1A2E!important;line-height:1.5!important}
.s-product-card-content-subtitle{font-size:11px!important;color:#8B8B9E!important}

/* السعر */
.s-product-card-price{color:#1A1A2E!important;font-weight:900!important;font-size:22px!important}

/* زر السلة — دائري + hover وردي */
.s-product-card-content-footer .s-button-primary-outline{width:36px!important;height:36px!important;min-width:36px!important;border-radius:50%!important;padding:0!important;background:#1A1A2E!important;border-color:#1A1A2E!important;color:#FFF9F4!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:background .25s!important}
.s-product-card-content-footer .s-button-primary-outline:hover{background:#E8638A!important;border-color:#E8638A!important;color:#FFF!important}
.s-product-card-content-footer .s-button-primary-outline .s-button-text span{display:none!important}
.s-product-card-content-footer .s-button-primary-outline .s-button-text i{font-size:16px!important}
.s-product-card-content-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-direction:row-reverse!important;padding-top:8px!important}

/* المفضلة */
.s-product-card-wishlist-btn{color:#E8638A!important}

/* بطاقات أفقية */
.s-product-card-horizontal{border-radius:16px!important;margin-bottom:12px!important;background:#FFF9F4!important}
.s-product-card-horizontal .s-product-card-image-cover{aspect-ratio:auto!important}


/* ══════════ ⑦ الفوتر الداكن ══════════ */

.store-footer{background:#1A1A2E!important;color:#FFF9F4!important}
.store-footer__inner{background:#1A1A2E!important}
.store-footer h3{color:#FFF9F4!important}
.s-menu-footer-item{color:rgba(255,249,244,.7)!important;transition:color .2s!important}
.s-menu-footer-item:hover{color:#FFF9F4!important}
.s-contacts-title{color:#FFF9F4!important}
.s-contacts-item{color:rgba(255,249,244,.7)!important}
.s-contacts-item:hover{color:#FFF9F4!important}
.s-contacts-icon svg{fill:rgba(255,249,244,.5)!important}
.copyright-text,.copyright-text p,.copyright-text a{color:rgba(255,249,244,.5)!important}
.s-trust-badges-label,.s-trust-badges-number{color:rgba(255,249,244,.7)!important}
.s-social-link a{background:rgba(255,255,255,.08)!important;border-radius:50%!important;width:40px!important;height:40px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;transition:background .2s!important}
.s-social-link a:hover{background:#E8638A!important}
.s-social-link a svg{fill:#FFF9F4!important;width:18px!important;height:18px!important}


/* ══════════ ⑧ تحسينات عامة ══════════ */

.main-nav-container{background:rgba(255,249,244,.97)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;border-bottom:1px solid #EFE6DC!important;box-shadow:none!important}

.s-block--slider-with-bg{padding-top:0!important;border-top:none!important}

.s-block--bundle-statistics{padding:0!important}

.s-block--tabs-produtcs{background:#FFF9F4!important}