/* ═══════════ SKINEORA · صفحةٌ داخل موقع أودو ═══════════
   ماءٌ وضوء: أزرقُ السماء من الشعار، وأبيضُ اللؤلؤ، ولمساتُ ورديّ وذهبيّ من حملات المنتجات.
   كلُّ قاعدةٍ تحت .skin-home وكلُّ صنفٍ ببادئة sk-. */
.skin-home{
  --sk-ink:#2a1a24; --sk-ink2:#5a4452; --sk-muted:#7a6470; --sk-line:rgba(42,26,36,.12);
  --sk-sky:#e27ba3; --sk-sky-d:#b03a6c; --sk-sky-l:#fde8f0; --sk-deep:#3a1230; --sk-deep2:#5a1d47;
  --sk-green:#24504a; --sk-pink:#e86a98; --sk-pink-l:#fde3ec; --sk-gold:#c9a25a; --sk-pearl:#fff8fb;
  --sk-f:'Almarai',system-ui,sans-serif;
  --sk-r:28px; --sk-wrapw:1220px; --sk-ease:cubic-bezier(.2,.7,.2,1); --sk-sh:0 34px 60px -32px rgba(90,20,60,.45);
  font-family:var(--sk-f); font-size:17px; line-height:1.8; color:var(--sk-ink); background:var(--sk-pearl); overflow-x:clip; -webkit-font-smoothing:antialiased;
}
.skin-home *{box-sizing:border-box}
.skin-home img{max-width:100%;height:auto;display:block}
.skin-home a{color:inherit;text-decoration:none}
.skin-home h1,.skin-home h2,.skin-home h3{margin:0;font-family:var(--sk-f);font-weight:800;color:inherit;line-height:1.3}
.skin-home p{margin:0}
.skin-home ol,.skin-home ul{margin:0;padding:0;list-style:none}
.skin-home em{font-style:normal}
.skin-home figure{margin:0}
.skin-home .sk-wrap{max-width:var(--sk-wrapw);margin-inline:auto;padding-inline:clamp(16px,4vw,40px);width:100%}
.skin-home :focus-visible{outline:2px solid var(--sk-sky-d);outline-offset:3px;border-radius:8px}

.skin-home .sk-btn{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 30px;border-radius:999px;font:700 1rem var(--sk-f);
  border:2px solid transparent;overflow:hidden;white-space:nowrap;cursor:pointer;transition:transform .3s var(--sk-ease),box-shadow .3s}
.skin-home .sk-btn:hover{transform:translateY(-3px)}
.skin-home .sk-btn-main{background:linear-gradient(135deg,#b03a6c,#c2457a);color:#fff;box-shadow:0 16px 30px -14px rgba(176,58,108,.8)}
.skin-home .sk-btn-soft{background:#fff;color:var(--sk-sky-d);box-shadow:inset 0 0 0 2px #f5cfdd}
.skin-home .sk-btn-light{background:#fff;color:var(--sk-deep)}
.skin-home .sk-btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.skin-home .sk-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:skShine 3.8s var(--sk-ease) infinite}
@keyframes skShine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.skin-home .sk-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 1px 0 var(--sk-line),0 10px 20px -14px rgba(90,20,60,.35);font:700 .86rem var(--sk-f);color:var(--sk-ink2)}
.skin-home .sk-eyebrow--dark{background:rgba(255,255,255,.12);color:#fbe4ee;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.skin-home .sk-spark{width:12px;height:12px;background:conic-gradient(from 45deg,#fff,#f7b6cc,#f7b6cc,#fff);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:skTwinkle 2.6s ease-in-out infinite}
@keyframes skTwinkle{50%{transform:scale(.6) rotate(45deg);opacity:.6}}

.skin-home .sk-seq{opacity:0;transform:translateY(28px);animation:skIn 1s var(--sk-ease) forwards;animation-delay:calc(.12s + var(--i,0) * .11s)}
@keyframes skIn{to{opacity:1;transform:none}}
.skin-home .sk-rv{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .9s var(--sk-ease),transform .9s var(--sk-ease);transition-delay:calc(var(--i,0) * .1s)}
.skin-home .sk-rv.sk-in{opacity:1;transform:none}

/* ─── البطل ─── */
.skin-home .sk-hero{position:relative;overflow:hidden;min-height:calc(100svh - var(--sk-head,80px));display:flex;align-items:center;padding:clamp(40px,6vw,90px) 0;
  background:linear-gradient(180deg,#fcecf3 0%,#fff8fb 70%)}
.skin-home .sk-water i{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;animation:skDrift 18s ease-in-out infinite alternate}
.skin-home .sk-w1{width:560px;height:560px;background:#f7b6cc;top:-200px;inset-inline-start:-120px}
.skin-home .sk-w2{width:420px;height:420px;background:#f9c9da;bottom:-160px;inset-inline-start:34%;animation-delay:-6s !important}
.skin-home .sk-w3{width:360px;height:360px;background:#e9d3f0;top:10%;inset-inline-end:-120px;animation-delay:-11s !important}
@keyframes skDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(40px,30px,0) scale(1.12)}100%{transform:translate3d(-30px,-20px,0) scale(.95)}}
.skin-home .sk-bubbles i{position:absolute;bottom:-60px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(255,255,255,.2) 45%,rgba(226,123,163,.25) 70%,rgba(255,255,255,.6) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);animation:skRise var(--t) linear infinite;animation-delay:var(--d)}
@keyframes skRise{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:1}100%{transform:translate3d(30px,-110vh,0);opacity:0}}
.skin-home .sk-hero-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.skin-home .sk-hero h1{font-size:clamp(38px,5vw,74px);margin:22px 0 20px;line-height:1.25}
.skin-home .sk-hero h1 > span{display:block}
.skin-home .sk-shimmer{display:inline-block;padding:.08em .03em .26em;margin:-.08em -.03em -.26em;background:linear-gradient(100deg,#9e3262 0%,#bd4376 30%,#b8416f 60%,#8f6d2a 85%,#9e3262 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:skIn 1s var(--sk-ease) forwards,skFlow 7s linear infinite}
@keyframes skFlow{to{background-position:220% 0}}
.skin-home .sk-lead{font-size:clamp(17px,1.3vw,20px);color:var(--sk-ink2);max-width:34em}
.skin-home .sk-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.skin-home .sk-count{display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:14px 22px;border-radius:20px;background:rgba(255,255,255,.75);box-shadow:0 1px 0 var(--sk-line)}
.skin-home .sk-count b{font-size:2.2rem;line-height:1;background:linear-gradient(135deg,#b03a6c,#e86a98);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.skin-home .sk-count span{color:var(--sk-ink2);font-size:.95rem;line-height:1.45}
.skin-home .sk-hero-art{position:relative;aspect-ratio:1;max-width:600px;width:100%;justify-self:center}
.skin-home .sk-drop{position:absolute;inset:8%;border-radius:50%;overflow:hidden;box-shadow:0 50px 80px -40px rgba(100,24,66,.6),inset 0 0 0 6px rgba(255,255,255,.6);
  transform:translate3d(calc(var(--mx,0) * -12px),calc(var(--my,0) * -12px),0);animation:skBreath 8s ease-in-out infinite alternate}
@keyframes skBreath{from{border-radius:50% 48% 52% 50%/50% 52% 48% 50%}to{border-radius:47% 53% 48% 52%/53% 47% 53% 47%}}
.skin-home .sk-drop img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.skin-home .sk-drop-gloss{position:absolute;inset:0;background:radial-gradient(40% 30% at 30% 22%,rgba(255,255,255,.7),transparent 70%),radial-gradient(60% 60% at 70% 80%,rgba(255,255,255,.18),transparent 70%)}
.skin-home .sk-float{position:absolute;left:var(--x);top:var(--y);width:32%;border-radius:24px;overflow:hidden;box-shadow:0 30px 40px -24px rgba(70,16,48,.55),inset 0 0 0 1px rgba(255,255,255,.5);
  transform:rotate(var(--r)) translate3d(calc(var(--mx,0) * 18px),calc(var(--my,0) * 18px),0);animation:skBob 6s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -2s)}
@keyframes skBob{from{translate:0 -10px}to{translate:0 10px}}
.skin-home .sk-float img{width:100%;aspect-ratio:1;object-fit:cover}

/* ─── الأقسام ─── */
.skin-home .sk-sec{position:relative;padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.skin-home .sk-shead{max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.skin-home .sk-shead h2{font-size:clamp(32px,4.2vw,58px);margin:18px 0 0}
.skin-home .sk-shead h2 em{color:var(--sk-sky-d)}
.skin-home .sk-shead p:not(.sk-eyebrow){color:var(--sk-ink2);margin-top:16px;font-size:1.08rem}
.skin-home .sk-shead--center{margin-inline:auto;text-align:center}

/* الفئات */
.skin-home .sk-cats{background:#fff}
.skin-home .sk-orbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 30px;max-width:1000px;margin-inline:auto}
.skin-home .sk-orb--prod img{object-fit:contain;padding:14%;mix-blend-mode:multiply}
.skin-home .sk-orb{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.skin-home .sk-orb span{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--c);
  box-shadow:0 26px 40px -26px rgba(90,20,60,.55),inset 0 0 0 5px rgba(255,255,255,.7);animation:skBob 5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1s);transition:transform .5s var(--sk-ease)}
.skin-home .sk-orb span::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(35% 25% at 30% 22%,rgba(255,255,255,.75),transparent 70%)}
.skin-home .sk-orb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--sk-ease)}
.skin-home .sk-orb:hover span{transform:scale(1.06)}
.skin-home .sk-orb:hover img{transform:scale(1.1)}
.skin-home .sk-orb b{font-size:1.15rem}

/* المروحة */
.skin-home .sk-fan{position:relative;height:320vh;background:linear-gradient(180deg,#3a1230,#5a1d47)}
.skin-home .sk-fan-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:10px;color:#fff;
  background:radial-gradient(50% 50% at 50% 60%,rgba(226,123,163,.25),transparent 70%),radial-gradient(40% 40% at 20% 20%,rgba(232,106,152,.18),transparent 70%)}
.skin-home .sk-fan .sk-shead{margin-bottom:0}
.skin-home .sk-fan .sk-shead h2 em{color:#f7b6cc}
.skin-home .sk-deck{position:relative;height:min(52vh,460px);width:100%}
.skin-home .sk-cardx{position:absolute;left:50%;top:50%;width:min(26vw,300px);aspect-ratio:.8;border-radius:26px;overflow:hidden;background:#fff;
  box-shadow:0 40px 60px -30px rgba(0,0,0,.65);transform-origin:50% 160%;
  transform:translate(-50%,-50%) rotate(calc((var(--n) - 3) * var(--fan,0) * 11deg)) translateY(calc(var(--fan,0) * -10px));transition:transform .12s linear}
.skin-home .sk-cardx img{width:100%;height:82%;object-fit:cover}
.skin-home .sk-cardx figcaption{height:18%;display:grid;place-items:center;font:800 1rem var(--sk-f);color:var(--sk-ink)}

/* الشفاه */
.skin-home .sk-lips{background:linear-gradient(160deg,#fff 0%,color-mix(in srgb,var(--shade) 16%,#fff) 100%);transition:background .6s}
.skin-home .sk-lips-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.skin-home .sk-lips-stage{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center;display:grid;place-items:center}
.skin-home .sk-lips-halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--shade) 55%,#fff) 0%,color-mix(in srgb,var(--shade) 20%,transparent) 55%,transparent 72%);transition:background .6s;animation:skBreath 7s ease-in-out infinite alternate}
.skin-home .sk-lips-stage img{position:relative;width:78%;border-radius:32px;box-shadow:0 40px 60px -30px color-mix(in srgb,var(--shade) 60%,#000);transition:opacity .35s,transform .5s var(--sk-ease)}
.skin-home .sk-lips-stage img.sk-swap{opacity:0;transform:scale(.94) rotate(-3deg)}
.skin-home .sk-shades{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px}
.skin-home .sk-shades button{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),var(--c) 45%,color-mix(in srgb,var(--c) 70%,#000) 100%);
  box-shadow:0 12px 18px -10px rgba(0,0,0,.45);transition:transform .25s}
.skin-home .sk-shades button:hover{transform:translateY(-4px) scale(1.05)}
.skin-home .sk-shades button.sk-on{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--c),0 12px 18px -10px rgba(0,0,0,.45)}
.skin-home .sk-shade-name{font:800 1.2rem var(--sk-f);margin-bottom:26px;color:color-mix(in srgb,var(--shade) 80%,#000)}

/* الروتين */
.skin-home .sk-routine{background:#fff}
.skin-home .sk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.skin-home .sk-step{position:relative;padding:18px 18px 26px;border-radius:30px;background:linear-gradient(180deg,var(--sk-sky-l),#fff);box-shadow:0 1px 0 var(--sk-line)}
.skin-home .sk-step-img{border-radius:22px;overflow:hidden;aspect-ratio:1}
.skin-home .sk-step-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--sk-ease)}
.skin-home .sk-step:hover .sk-step-img img{transform:scale(1.06)}
.skin-home .sk-step-n{position:absolute;top:30px;inset-inline-start:30px;padding:4px 12px;border-radius:999px;background:#fff;font:800 .9rem var(--sk-f);color:var(--sk-sky-d)}
.skin-home .sk-step h3{font-size:1.5rem;margin:18px 6px 6px;color:var(--sk-sky-d)}
.skin-home .sk-step p{color:var(--sk-ink2);font-size:.98rem;margin:0 6px}

/* الشريط */
.skin-home .sk-marquee{background:linear-gradient(90deg,#b03a6c,#e86a98);color:#fff;overflow:hidden;padding:18px 0}
.skin-home .sk-mq{display:inline-flex;align-items:center;gap:26px;white-space:nowrap;animation:skMarq 34s linear infinite}
@keyframes skMarq{to{transform:translateX(-50%)}}
.skin-home .sk-mq span{font:800 clamp(22px,2.6vw,34px)/1.3 var(--sk-f)}
.skin-home .sk-mq i{width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);flex:none}

/* أين تجدينها */
.skin-home .sk-find{background:linear-gradient(150deg,#3a1230,#6a2352);color:#fff}
.skin-home .sk-find-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.skin-home .sk-find .sk-shead{margin-bottom:0}
.skin-home .sk-find .sk-shead h2 em{color:#f7b6cc}
.skin-home .sk-find .sk-shead p:not(.sk-eyebrow){color:#f0d3df}
.skin-home .sk-find-art{position:relative;height:420px}
.skin-home .sk-find-art img{position:absolute;width:52%;border-radius:26px;box-shadow:0 30px 50px -26px rgba(0,0,0,.7);animation:skBob 6s ease-in-out infinite alternate}
.skin-home .sk-find-art img:nth-child(1){top:0;inset-inline-start:0;transform:rotate(-7deg)}
.skin-home .sk-find-art img:nth-child(2){top:18%;inset-inline-end:0;transform:rotate(6deg);animation-delay:-2s}
.skin-home .sk-find-art img:nth-child(3){bottom:0;inset-inline-start:22%;transform:rotate(-2deg);animation-delay:-4s}
.skin-home .sk-legal{margin-top:50px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:#d9a9bd;font-size:.85rem}

/* ─── ناتورا وأفون: abas com produtos reais ─── */
.skin-home .sk-care{background:linear-gradient(180deg,#fff8fb,#fdf0f5)}
.skin-home .sk-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto clamp(28px,4vw,44px)}
.skin-home .sk-tabs button{min-height:48px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;font:700 1rem var(--sk-f);color:var(--sk-ink2);
  background:#fff;box-shadow:inset 0 0 0 1px var(--sk-line);transition:background .25s,color .25s,box-shadow .25s}
.skin-home .sk-tabs button:hover{color:var(--sk-sky-d);box-shadow:inset 0 0 0 1px var(--sk-sky)}
.skin-home .sk-tabs button.sk-on{background:linear-gradient(135deg,#b03a6c,#c2457a);color:#fff;box-shadow:0 14px 26px -16px rgba(176,58,108,.9)}
.skin-home .sk-pane[hidden]{display:none}
.skin-home .sk-pane{animation:skIn .6s var(--sk-ease)}
.skin-home .sk-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.skin-home .sk-pcard{display:flex;flex-direction:column;gap:10px;padding:14px 14px 18px;border-radius:24px;background:#fff;
  box-shadow:0 1px 0 rgba(42,26,36,.04),0 24px 40px -30px rgba(90,20,60,.5);transition:transform .45s var(--sk-ease),box-shadow .45s var(--sk-ease)}
.skin-home .sk-pcard:hover{transform:translateY(-6px);box-shadow:0 36px 56px -34px rgba(90,20,60,.6),inset 0 0 0 1px rgba(226,123,163,.45)}
.skin-home .sk-pcard-img{position:relative;display:block;aspect-ratio:1;border-radius:18px;overflow:hidden;background:radial-gradient(70% 70% at 50% 40%,#ffffff,#fdf0f5)}
.skin-home .sk-pcard-img img{position:absolute;inset:9%;width:82%;height:82% !important;max-width:none;object-fit:contain;mix-blend-mode:multiply;transition:transform .8s var(--sk-ease)}
.skin-home .sk-pcard:hover .sk-pcard-img img{transform:scale(1.06)}
/* se a foto falhar, nada de texto alternativo espalhado no cartão */
.skin-home .sk-pcard-img img,.skin-home .sk-orb img{color:transparent;font-size:0}
.skin-home .sk-pcard b{font-size:.95rem;font-weight:700;line-height:1.6;color:var(--sk-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.2em}
.skin-home .sk-pcard-price{font-weight:800;color:var(--sk-sky-d)}
.skin-home .sk-care-more{margin-top:clamp(26px,4vw,40px);text-align:center}

@media (max-width:1080px){
  .skin-home .sk-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .skin-home .sk-hero-grid,.skin-home .sk-lips-grid,.skin-home .sk-find-grid{grid-template-columns:1fr}
  .skin-home .sk-hero-art{max-width:480px}
  .skin-home .sk-orbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
  .skin-home .sk-steps{grid-template-columns:1fr 1fr}
  .skin-home .sk-cardx{width:min(40vw,260px)}
}
@media (max-width:700px){
  .skin-home{font-size:16px}
  .skin-home .sk-orbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .skin-home .sk-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .skin-home .sk-pcard{padding:10px 10px 14px;border-radius:20px}
  .skin-home .sk-steps{grid-template-columns:1fr}
  .skin-home .sk-cardx{width:52vw}
  .skin-home .sk-find-art{height:300px}
  .skin-home .sk-btn{min-height:50px;padding:0 22px}
}
@media (prefers-reduced-motion:reduce){
  .skin-home *,.skin-home *::before,.skin-home *::after{animation:none !important;transition:none !important}
  .skin-home .sk-seq,.skin-home .sk-rv{opacity:1 !important;transform:none !important}
}