/* ═══════════ SKINEORA · الصفحة الرئيسية «فخامة ناعمة» — نظام واحد للصفحة كلّها ═══════════
   امتداد صورة التصميم إلى آخر الصفحة: سطح وردي واحد مربّع، عناوين بالخطّ المزخرف (Markazi Text)،
   نصّ بخطّ Almarai بمقاسين فقط (15 و13)، لون واحد للأفعال (#7d3146 = نصّ زرّ الصورة الرئيسية)،
   شبكة واحدة من أربعة أعمدة تتكرّر في كلّ قسم بالعرض نفسه، وسطح داكن واحد هو التذييل.
   كلّ قاعدة تحت .skin-home وكلّ صنف ببادئة sk- أو skc-. لا يمرّ هذا الملفّ عبر rtlcss: خصائص منطقية فقط. */

/* ─── الرموز ─── */
.skin-home{
  /* الأسطح */
  --sk-bg:#fff9f8; --sk-blush:#fdeded; --sk-blush-h:#f9e3e3; --sk-band:#fdefee; --sk-band-gut:#fff7f5;
  --sk-line:#efd9d8; --sk-line-2:#e3c4c0; --sk-gold:#b5827b;
  /* الحبر */
  --sk-wine:#4b1320; --sk-ink:#4b1320; --sk-ink2:#735659; --sk-muted:#7a5f69;
  --sk-accent:#7d3146; --sk-accent-d:#5f1a2d; --sk-cream:#fef6f4;
  --sk-on-dark:#f4d9de; --sk-on-dark-2:#d9b3bb; --sk-on-dark-line:rgba(244,217,222,.18);
  /* الخطّ */
  --sk-f:'Almarai',system-ui,sans-serif; --sk-fs:'Markazi Text','Amiri',serif;
  --sk-t2:clamp(30px,26.3px + .95vw,40px);   /* عنوان القسم: 40 على 1440 و30 على الهاتف */
  --sk-t3:clamp(23px,2vw,30px);              /* عنوان البطاقة: 28.8 على 1440 و23 على الهاتف */
  --sk-tx:15px;                              /* النصّ والأفعال والأسعار */
  --sk-tk:13px;                              /* التسميات الصغيرة */
  /* المسافات */
  --sk-max:1680px; --sk-gut:clamp(16px,1.95vw,40px); --sk-gap:clamp(10px,8.5px + .4vw,14px);
  --sk-sec:clamp(40px,31px + 2.29vw,64px); --sk-head-gap:clamp(16px,13px + .76vw,24px); --sk-pad:clamp(24px,16.6px + 1.9vw,44px);
  --sk-ctl:44px; --sk-r:0px; --sk-rb:2px; --sk-ease:cubic-bezier(.2,.7,.2,1);
  --sk-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M15 6H1M6 1L1 6l5 5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  font-family:var(--sk-f); font-size:var(--sk-tx); line-height:1.8; color:var(--sk-wine); background:var(--sk-bg); overflow-x:clip; -webkit-font-smoothing:antialiased;
}
@media (max-width:767.98px){.skin-home{--sk-ctl:40px}}

/* ─── الأساس ─── */
.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:500;color:inherit;line-height:1.25}
.skin-home .sk-serif{font-family:var(--sk-fs);font-weight:500;letter-spacing:0}
.skin-home p{margin:0}
.skin-home ul,.skin-home ol{margin:0;padding:0;list-style:none}
.skin-home em{font-style:normal}
.skin-home small{font-size:inherit}
.skin-home form{margin:0}
.skin-home .sk-wrap{width:100%;max-width:calc(var(--sk-max) + 2 * var(--sk-gut));margin-inline:auto;padding-inline:var(--sk-gut)}
.skin-home :focus-visible{outline:2px solid var(--sk-accent);outline-offset:3px;border-radius:var(--sk-rb)}
.skin-home .sk-visually{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skin-home svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* إيقاع واحد: كلّ قسمين يفصل بينهما --sk-sec */
.skin-home .sk-sec,.skin-home .sk-sec--tight{padding-block:calc(var(--sk-sec) / 2)}
.skin-home :is(.sk-ritual,.sk-lux) + .sk-sec{padding-block-start:var(--sk-sec)}
.skin-home #sk-about{padding-block-end:var(--sk-sec);scroll-margin-top:calc(var(--skh-h,84px) + 16px)}
.skin-home .sk-kicker{font:700 var(--sk-tk)/1.5 var(--sk-f);letter-spacing:0;color:var(--sk-accent);opacity:1}

/* ─── صفّ العنوان + «عرض الكلّ» وسهم واحد لكلّ الروابط ─── */
.skin-home .sk-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 var(--sk-head-gap)}
.skin-home :is(.sk-head h2,.sk-day-intro h2,.sk-about h2){position:relative;min-width:0;margin:0;padding-block-end:12px;font-family:var(--sk-fs);
  font-size:var(--sk-t2);font-weight:500;line-height:1.25;color:var(--sk-wine);text-shadow:none;text-wrap:balance}
.skin-home :is(.sk-head h2,.sk-day-intro h2,.sk-about h2)::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:40px;height:1px;background:var(--sk-gold)}
.skin-home .sk-about h2::after{inset-inline-end:0;margin-inline:auto}
.skin-home :is(.sk-more,.sk-tile-panel i,.sk-ban-copy i){display:inline-flex;align-items:center;gap:8px;margin:0;padding:0;border:0;border-radius:0;background:none;
  font:700 var(--sk-tx)/1 var(--sk-f);font-style:normal;color:var(--sk-accent);white-space:nowrap;text-decoration:none}
.skin-home .sk-more{flex:none;min-height:44px}
.skin-home :is(.sk-tile-panel i,.sk-ban-copy i){min-height:32px;margin-block-start:6px}
.skin-home :is(.sk-more,.sk-tile-panel i,.sk-ban-copy i)::after{content:"";flex:none;width:16px;height:12px;border:0;transform:none;background:currentColor;
  -webkit-mask:var(--sk-arrow) center/contain no-repeat;mask:var(--sk-arrow) center/contain no-repeat;transition:translate .25s var(--sk-ease)}
.skin-home .sk-more:hover,.skin-home a:hover :is(.sk-tile-panel i,.sk-ban-copy i){color:var(--sk-accent-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.skin-home .sk-more:hover::after,.skin-home a:hover :is(.sk-tile-panel i,.sk-ban-copy i)::after{translate:-3px 0}

/* ─── الأزرار ─── */
.skin-home .sk-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border:1px solid var(--sk-accent);border-radius:var(--sk-rb);
  background:var(--sk-accent);color:#fff9f8;font:700 var(--sk-tx)/1 var(--sk-f);cursor:pointer;transition:background-color .2s,border-color .2s}
.skin-home .sk-btn:hover{background:var(--sk-accent-d);border-color:var(--sk-accent-d)}
.skin-home .sk-btn--ghost{background:transparent;color:var(--sk-accent)}
.skin-home .sk-btn--ghost:hover{background:var(--sk-accent);color:#fff9f8}
.skin-home .sk-btn--light,.skin-home .sk-toast a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border:0;border-radius:var(--sk-rb);
  background:var(--sk-cream);color:var(--sk-accent);font:700 var(--sk-tx)/1 var(--sk-f);text-decoration:none}
.skin-home :is(.sk-btn--light,.sk-toast a):hover{background:#fff;color:var(--sk-accent-d)}

/* ─── الفئات: بطاقات ملوّنة (وردي، بنفسجي، مرجاني)، الاسم في شريط أبيض فوق، والمنتج واقف على رفّ أغمق ─── */
.skin-home .sk-cats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--sk-gap)}
.skin-home .sk-cat{--c1:#f7cbd6;--c2:#e58aa4;position:relative;display:flex;flex-direction:column;aspect-ratio:.86;padding:10px 10px 0;border-radius:14px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--c1),var(--c2));transition:transform .3s var(--sk-ease),box-shadow .3s}
.skin-home .sk-cat:nth-child(4n+2){--c1:#ecd2ef;--c2:#b98bcb}
.skin-home .sk-cat:nth-child(4n+3){--c1:#fcd9cb;--c2:#ee9a84}
.skin-home .sk-cat:nth-child(4n+4){--c1:#f5c0d0;--c2:#c75a80}
/* أوجه ضوء مائلة كالصورة، ورفّ أغمق في الأسفل */
.skin-home .sk-cat::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(118deg,rgba(255,255,255,.4) 0 32%,rgba(255,255,255,0) 32% 57%,rgba(255,255,255,.17) 57% 71%,rgba(255,255,255,0) 71%)}
.skin-home .sk-cat::after{content:"";position:absolute;inset-inline:0;bottom:0;height:23%;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.45) 0 1px,rgba(90,20,50,.16) 1px,rgba(90,20,50,.3))}
.skin-home .sk-cat b{display:block;margin:0;padding:6px 8px;border-radius:6px;background:#fff;font:700 var(--sk-tk)/1.35 var(--sk-f);color:var(--sk-wine);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 3px 8px -4px rgba(75,19,32,.35)}
.skin-home .sk-cat span{display:block;flex:1}
.skin-home .sk-cat img{position:absolute;bottom:11%;inset-inline:0;margin-inline:auto;width:auto;height:auto;max-width:74%;max-height:62%;object-fit:contain;
  filter:drop-shadow(0 10px 9px rgba(60,10,30,.3));transition:transform .45s var(--sk-ease)}
.skin-home .sk-cat:hover{transform:translateY(-4px);box-shadow:0 20px 32px -22px rgba(110,30,60,.6)}
.skin-home .sk-cat:hover img{transform:translateY(-3px) scale(1.05)}
.skin-home .sk-cat:hover b{color:var(--sk-accent)}

/* ─── المجموعات: صورة على السطح الوردي والنصّ على الصفحة ─── */
.skin-home .sk-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sk-gap)}
.skin-home .sk-tile{display:flex;flex-direction:column;border-radius:0;overflow:visible;background:none;color:var(--sk-wine);box-shadow:none}
.skin-home .sk-tile-img{display:block;aspect-ratio:1;overflow:hidden;border-radius:0;background:var(--sk-blush)}
.skin-home .sk-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--sk-ease)}
.skin-home .sk-tile:hover .sk-tile-img img{transform:scale(1.04)}
.skin-home .sk-tile--prod .sk-tile-img img{object-fit:contain;padding:10%;mix-blend-mode:multiply}
.skin-home .sk-tile-panel{position:static;flex:1;display:grid;align-content:start;justify-items:start;gap:6px;margin:0;padding:16px 4px 0;border-radius:0;background:none}
.skin-home .sk-tile-panel small{font:700 var(--sk-tk)/1.5 var(--sk-f);color:var(--sk-accent)}
.skin-home .sk-tile-panel b{font-family:var(--sk-fs);font-size:var(--sk-t3);font-weight:500;line-height:1.25;color:var(--sk-wine);transition:color .2s}
.skin-home .sk-tile:hover .sk-tile-panel b{color:var(--sk-accent)}
.skin-home .sk-tile-panel span{font:400 var(--sk-tx)/1.6 var(--sk-f);color:var(--sk-ink2)}

/* ─── اختيار اليوم: شريط وردي بعرض الصفحة وأعمدته على الشبكة نفسها ─── */
.skin-home .sk-sec.sk-band{margin-block:calc(var(--sk-sec) / 2);padding-block:calc(var(--sk-sec) * .75);background:var(--sk-blush)}
.skin-home .sk-day{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sk-gap);align-items:center;padding:0;border-radius:0;background:none;color:var(--sk-wine);overflow:visible}
.skin-home .sk-day-intro{display:grid;gap:14px;align-content:center;justify-items:start;padding-inline-end:clamp(0px,2vw,32px)}
.skin-home .sk-day-intro > p:not(.sk-kicker){font:400 var(--sk-tx)/1.8 var(--sk-f);color:var(--sk-ink2)}
.skin-home .sk-day-cards{grid-column:span 3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sk-gap)}
.skin-home .sk-clock{display:inline-flex;align-items:center;gap:10px;min-height:40px;margin-top:4px;padding:0 14px;border:1px solid var(--sk-gold);border-radius:var(--sk-rb);
  background:transparent;font:400 var(--sk-tk)/1 var(--sk-f);color:var(--sk-ink2)}
.skin-home .sk-clock b{display:inline-flex;align-items:center;font:700 var(--sk-tx)/1 var(--sk-f);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--sk-wine)}
.skin-home .sk-clock i{display:inline-flex;font-style:normal}
/* العدّاد يتدحرج: كلّ رقمٍ يتغيّر ينزل من فوق (منقول من React Bits Counter بلا مكتبة) */
.skin-home .sk-dg{display:inline-block;min-width:.62em;text-align:center;overflow:hidden;height:1.05em;line-height:1.05em}
.skin-home .sk-dg > span{display:block}
.skin-home .sk-dg > span::after{content:attr(data-old);display:block}
.skin-home .sk-dg.sk-roll > span{animation:skRoll .45s var(--sk-ease) both}
@keyframes skRoll{from{transform:translateY(-50%)}to{transform:none}}

/* ─── الرفوف ─── */
.skin-home .sk-railbox{position:relative}
.skin-home .sk-rail{--sk-n:4;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--sk-n) - 1) * var(--sk-gap)) / var(--sk-n));gap:var(--sk-gap);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:4px 0 8px;scrollbar-width:none;overscroll-behavior-x:contain}
.skin-home .sk-rail::-webkit-scrollbar{display:none}
.skin-home .sk-rail > .skc{scroll-snap-align:start}
.skin-home .sk-rail-nav{position:absolute;top:33%;translate:0 -50%;z-index:3;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--sk-line);border-radius:50%;
  background:var(--sk-bg);color:var(--sk-wine);box-shadow:none;cursor:pointer;transition:opacity .2s,border-color .2s,color .2s}
.skin-home .sk-rail-nav svg{width:16px;height:16px;stroke-width:1.5}
.skin-home .sk-rail-nav:hover{border-color:var(--sk-gold);color:var(--sk-accent)}
.skin-home .sk-rail-nav--prev{inset-inline-start:calc(var(--sk-gut) * -.7)}
.skin-home .sk-rail-nav--next{inset-inline-end:calc(var(--sk-gut) * -.7)}
.skin-home .sk-rail-nav[disabled]{opacity:0;pointer-events:none}

/* ─── بطاقة المنتج: مربّعة بلا إطار، الصورة على السطح الوردي ─── */
.skin-home .skc{position:relative;display:flex;flex-direction:column;gap:0;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.skin-home .skc-img{display:block;aspect-ratio:1;margin:0;border-radius:0;overflow:hidden;background:var(--sk-blush);transition:background-color .25s}
.skin-home .skc-img img{width:100%;height:100%;object-fit:contain;padding:10%;mix-blend-mode:multiply;transition:transform .5s var(--sk-ease)}
.skin-home .skc:hover .skc-img{background:var(--sk-blush-h)}
.skin-home .skc:hover .skc-img img{transform:scale(1.04)}
.skin-home .skc-wish{position:absolute;top:6px;inset-inline-end:6px;z-index:1;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;
  background:none;box-shadow:none;color:var(--sk-wine);cursor:pointer;transition:color .2s}
.skin-home .skc-wish svg{width:20px;height:20px;stroke-width:1.4}
.skin-home .skc-wish:hover,.skin-home .skc-wish.skc-on{color:var(--sk-accent)}
.skin-home .skc-wish.skc-on svg{fill:currentColor}
.skin-home .skc-wish.skc-pop svg{animation:skcPop .45s var(--sk-ease)}
@keyframes skcPop{40%{transform:scale(1.3)}}
.skin-home .skc-brand{display:block;margin-top:14px;min-height:1.5em;padding-inline:4px;font:400 var(--sk-tk)/1.5 var(--sk-f);color:var(--sk-muted)}
.skin-home .skc-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;min-height:3.2em;padding-inline:4px;
  font:400 var(--sk-tx)/1.6 var(--sk-f);color:var(--sk-wine)}
.skin-home .skc-name:hover{color:var(--sk-accent)}
.skin-home .skc-price{margin-top:6px;padding-inline:4px;font:700 var(--sk-tx)/1.2 var(--sk-f);font-variant-numeric:tabular-nums;color:var(--sk-wine);direction:ltr;text-align:end;align-self:flex-start}
.skin-home .skc-buy{margin-top:auto;padding-top:14px}
.skin-home .skc-add{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--sk-ctl);margin:0;padding:0 8px;border:1px solid var(--sk-accent);
  border-radius:var(--sk-rb);background:transparent;color:var(--sk-accent);font:700 var(--sk-tx)/1 var(--sk-f);white-space:nowrap;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s}
.skin-home .skc-add svg{width:18px;height:18px;stroke-width:1.5}
.skin-home .skc-add:hover{background:var(--sk-accent);color:#fff9f8}
.skin-home .skc-add[aria-busy="true"]{opacity:.7;pointer-events:none}
.skin-home .skc-add.skc-done{background:var(--sk-wine);border-color:var(--sk-wine);color:#fff9f8}
.skin-home .sk-band .skc-img{background:var(--sk-bg)}
.skin-home .sk-band .skc:hover .skc-img{background:#fff}

/* ─── اللافتتان: زوجٌ فاتح بلغة البطاقات الأربع ─── */
.skin-home .sk-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sk-gap)}
.skin-home .sk-ban{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;aspect-ratio:2.4;min-height:0;border-radius:0;overflow:hidden;
  color:var(--sk-wine);background:radial-gradient(circle closest-side at 25% 50%,rgba(255,255,255,.85),rgba(255,255,255,0)),var(--sk-blush);transition:background-color .25s}
.skin-home .sk-ban:hover{background-color:var(--sk-blush-h)}
.skin-home .sk-ban img{width:100%;height:100%;min-height:0;align-self:stretch;object-fit:contain;padding:7%;mix-blend-mode:multiply;transition:transform .6s var(--sk-ease)}
.skin-home .sk-ban:hover img{transform:scale(1.04)}
.skin-home .sk-ban-copy{display:grid;gap:8px;justify-items:start;padding-block:24px;padding-inline:var(--sk-pad) 8px}
.skin-home .sk-ban-copy small{font:700 var(--sk-tk)/1.5 var(--sk-f);color:var(--sk-accent);opacity:1}
.skin-home .sk-ban-copy b{font-family:var(--sk-fs);font-size:var(--sk-t3);font-weight:500;line-height:1.25;color:var(--sk-wine);text-wrap:balance}

/* ─── العلامات ─── */
.skin-home .sk-brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sk-gap)}
.skin-home .sk-brand{display:grid;gap:8px;align-content:center;justify-items:center;text-align:center;min-height:168px;padding:24px;border:0;border-radius:0;
  background:var(--sk-blush);color:var(--sk-wine);transition:background-color .25s}
.skin-home .sk-brand:hover{background:var(--sk-blush-h)}
.skin-home .sk-brand b{font-family:var(--sk-fs);font-size:var(--sk-t3);font-weight:500;line-height:1.2;letter-spacing:0;color:var(--sk-wine)}
.skin-home .sk-brand span{font:400 var(--sk-tx)/1.6 var(--sk-f);color:var(--sk-ink2)}
.skin-home :is(.sk-brand span,.sk-tile-panel span,.sk-day-intro p,.sk-ban-copy b){text-wrap:pretty}
.skin-home .sk-brand small{display:inline-flex;align-items:center;min-height:28px;margin-top:4px;padding:0 10px;border:1px solid var(--sk-line-2);border-radius:var(--sk-rb);
  background:transparent;font:400 var(--sk-tk)/1 var(--sk-f);color:var(--sk-muted);white-space:nowrap}

/* ─── تبويبات العناية: نصّ وخطّ تحت النشط ─── */
.skin-home .sk-tabs{display:flex;gap:clamp(22px,19.8px + .57vw,28px);margin:0 0 var(--sk-head-gap);padding:0;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--sk-line)}
.skin-home .sk-tabs::-webkit-scrollbar{display:none}
.skin-home .sk-tabs button{flex:none;min-height:44px;padding:0 2px;border:0;border-block-end:2px solid transparent;border-radius:0;background:none;
  font:700 var(--sk-tx)/1 var(--sk-f);color:var(--sk-muted);cursor:pointer;transition:color .2s,border-color .2s}
.skin-home .sk-tabs button:hover{color:var(--sk-wine);border-block-end-color:var(--sk-line-2)}
.skin-home .sk-tabs button.sk-on{color:var(--sk-wine);border-block-end-color:var(--sk-accent)}
.skin-home .sk-tabs button:focus-visible{outline:2px solid var(--sk-accent);outline-offset:-2px}
.skin-home .sk-pane[hidden]{display:none}

/* ─── عن المتجر ─── */
.skin-home .sk-about{padding:var(--sk-pad);border-radius:0;background:var(--sk-blush);color:var(--sk-wine);text-align:center}
.skin-home .sk-about h2{margin:0 0 var(--sk-head-gap)}
.skin-home .sk-about-text{display:grid;gap:12px;max-width:46em;margin-inline:auto;text-align:start;font:400 var(--sk-tx)/1.8 var(--sk-f);color:var(--sk-ink2);
  max-height:5.4em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.skin-home .sk-about-text.sk-open{max-height:none;-webkit-mask-image:none;mask-image:none}
.skin-home .sk-about-text:not(.sk-open){max-height:none;-webkit-mask-image:none;mask-image:none}
.skin-home .sk-about-text:not(.sk-open) > p:not(:first-child){display:none}
.skin-home .sk-about-text:not(.sk-open) > p:first-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.skin-home .sk-about-more{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:0 8px;border:0;background:none;font:700 var(--sk-tx)/1 var(--sk-f);
  color:var(--sk-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;cursor:pointer}
.skin-home .sk-legal{margin-top:16px;text-align:center;font:400 var(--sk-tk)/1.5 var(--sk-f);color:var(--sk-muted)}

/* ─── إشعار السلّة (السطح الداكن الوحيد مع التذييل) ─── */
.skin-home .sk-toast{position:fixed;bottom:22px;inset-inline:16px;margin-inline:auto;width:max-content;z-index:1070;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);
  padding:12px 14px 12px 18px;border-radius:var(--sk-rb);background:var(--sk-wine);color:var(--sk-on-dark);box-shadow:0 16px 32px -20px rgba(75,19,32,.6);
  animation:skToast .35s var(--sk-ease) both}
.skin-home .sk-toast[hidden]{display:none}
.skin-home .sk-toast span{font:400 var(--sk-tx)/1.5 var(--sk-f)}
.skin-home .sk-toast a{min-height:36px;padding:0 14px;flex:none;white-space:nowrap}
@keyframes skToast{from{opacity:0;margin-bottom:-16px}to{opacity:1;margin-bottom:0}}

/* ─── herói = a própria maqueta (ampliada, sem o texto pintado) + título e botão verdadeiros por cima.
   A caixa tem a proporção da imagem, por isso tudo se mede em vw e fica no sítio em qualquer largura;
   o telemóvel (e o tablete ao alto) usa uma placa ao alto com o mesmo logótipo pintado ao centro. ─── */
.skin-home .sk-lux{position:relative;width:100%;overflow:hidden;isolation:isolate;aspect-ratio:2.2529;background:#d9607d}
.skin-home .sk-lux picture{position:absolute;inset:0;display:block}
.skin-home .sk-lux-art{display:block;width:100%;height:100% !important;max-width:none;object-fit:cover}
/* uma orla clara de 4px no fundo da imagem, como na maqueta, antes da faixa dos cartões */
.skin-home .sk-lux::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,240,243,0),rgba(255,240,243,.9))}
.skin-home .sk-lux-copy{position:absolute;z-index:2;inset-inline:0;top:77.3%;display:flex;flex-direction:column;align-items:center;
  /*rtl:ignore*/translate:-1.3vw 0}
.skin-home .sk-lux .sk-lux-title{margin:0;font-size:4.3vw;font-weight:500;line-height:1.1;letter-spacing:0;color:#fff3f6;text-align:center;
  text-shadow:0 2px 22px rgba(110,28,58,.22)}
.skin-home .sk-lux-btn{margin-top:0;display:inline-flex;align-items:center;justify-content:center;gap:clamp(8px,.9vw,18px);
  min-height:clamp(42px,3.8vw,80px);min-width:clamp(190px,19.7vw,420px);padding:0 clamp(18px,2.6vw,56px);
  background:var(--sk-cream);color:var(--sk-accent);font:700 clamp(13px,1.12vw,24px) var(--sk-f);word-spacing:.06em;border-radius:2px;text-decoration:none;
  box-shadow:0 8px 20px -14px rgba(110,28,58,.45);transition:background .2s,color .2s}
.skin-home .sk-lux-btn:hover{background:#fff;color:var(--sk-accent-d)}
.skin-home .sk-lux-arrow{width:clamp(13px,1.05vw,22px);height:auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:767px),(max-width:991px) and (orientation:portrait){
  .skin-home .sk-lux{aspect-ratio:900/1274}
  .skin-home .sk-lux-copy{top:65.6%;translate:none}
  .skin-home .sk-lux .sk-lux-title{font-size:10.4vw;line-height:1.12}
  .skin-home .sk-lux-btn{margin-top:0;min-height:12.6vw;min-width:62vw;padding:0 6vw;gap:2.4vw;font-size:3.9vw}
  .skin-home .sk-lux-arrow{width:3.6vw}
}

/* portáteis baixos: a imagem corta-se igual em cima e em baixo (o logótipo pintado e o título não se separam)
   para os cartões aparecerem na primeira vista */
@media (min-width:768px) and (orientation:landscape){
  .skin-home .sk-lux{max-height:max(440px,calc(100svh - 200px))}
}

/* ─── أربعة أقسام كما في التصميم: شريط بعرض الصفحة، بلاطات وردية بلا إطار وفواصل أفتح منها،
   الصورة نصف البلاطة وتذوب في جهة النص. الآن على الشبكة نفسها (حافة --sk-gut). ─── */
.skin-home .sk-ritual{background:var(--sk-band);padding:clamp(10px,.9vw,16px) var(--sk-gut) clamp(12px,1.2vw,20px)}
.skin-home .sk-ritual-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sk-gap);max-width:var(--sk-max);margin-inline:auto;background:var(--sk-band-gut)}
.skin-home .sk-ritual-card{position:relative;display:flex;align-items:stretch;aspect-ratio:1.73;min-height:150px;background:var(--sk-blush);
  text-decoration:none !important;overflow:hidden;transition:background-color .35s var(--sk-ease)}
.skin-home .sk-ritual-card:hover{background:var(--sk-blush-h)}
.skin-home .sk-ritual-txt{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,.5vw,8px);padding-inline:clamp(14px,1.5vw,24px) clamp(8px,.8vw,12px);min-width:0}
.skin-home .sk-ritual .sk-ritual-txt b{font-size:var(--sk-t3);font-weight:500;line-height:1.15;color:var(--sk-wine);white-space:nowrap}
.skin-home .sk-ritual-txt small{font-size:var(--sk-tk);line-height:1.5;color:var(--sk-ink2)}
.skin-home .sk-ritual-txt small span{display:block}
.skin-home .sk-ritual-txt i{display:block;margin-top:clamp(4px,.45vw,8px);color:var(--sk-accent-d)}
.skin-home .sk-ritual-txt i svg{display:block;width:16px;height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.skin-home .sk-ritual-img{position:relative;flex:none;width:55%;background:var(--sk-blush)}
.skin-home .sk-ritual-img img{position:absolute;inset:0;width:100%;height:100% !important;max-width:none;object-fit:cover;transition:transform .6s var(--sk-ease);
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 12%);mask-image:linear-gradient(to left,transparent 0,#000 12%)}
.skin-home .sk-ritual-card:hover .sk-ritual-img img{transform:scale(1.04)}
/* حركة 1 — ظهور البطاقات الأربع مرّةً واحدة عند فتح الصفحة (منقول من React Bits FadeContent، CSS فقط) */
.skin-home .sk-ritual-card{animation:skRise .7s var(--sk-ease) both}
.skin-home .sk-ritual-card:nth-child(2){animation-delay:.09s}
.skin-home .sk-ritual-card:nth-child(3){animation-delay:.18s}
.skin-home .sk-ritual-card:nth-child(4){animation-delay:.27s}
@keyframes skRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* حركة 3 — ضوءٌ ناعم يتبع المؤشّر على البطاقات الأربع فقط (منقول من React Bits SpotlightCard) */
.skin-home .sk-ritual-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle 220px at var(--sk-mx,50%) var(--sk-my,50%),rgba(255,255,255,.5),rgba(255,255,255,0) 70%)}
@media (hover:hover){.skin-home .sk-ritual-card:hover::after{opacity:1}}

/* ─── الشاشات ─── */
@media (max-width:1199.98px){
  .skin-home .sk-cats{grid-template-columns:repeat(8,minmax(132px,1fr));overflow-x:auto;scrollbar-width:none;padding-block:4px 8px}
  .skin-home .sk-cats::-webkit-scrollbar{display:none}
}
@media (max-width:991.98px){
  .skin-home .sk-rail{--sk-n:3}
  .skin-home .sk-rail-nav{display:none}
  .skin-home .sk-cats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:140px;scroll-snap-type:x mandatory}
  .skin-home .sk-cat{scroll-snap-align:start}
  .skin-home .sk-tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,44%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .skin-home .sk-tiles::-webkit-scrollbar{display:none}
  .skin-home .sk-tile{scroll-snap-align:start}
  .skin-home .sk-day{grid-template-columns:minmax(0,1fr);gap:var(--sk-head-gap)}
  .skin-home .sk-day-cards{grid-column:auto}
  .skin-home :is(.sk-cats,.sk-tiles){margin-inline:calc(-1 * var(--sk-gut));padding-inline:var(--sk-gut);scroll-padding-inline:var(--sk-gut)}
}
@media (min-width:768px) and (max-width:991.98px){
  .skin-home .sk-ban{aspect-ratio:auto;min-height:200px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .skin-home .sk-ban-copy{padding:20px 16px}
}
@media (min-width:768px) and (max-width:991px){
  .skin-home .sk-ritual{padding:12px var(--sk-gut) 20px}
  .skin-home .sk-ritual-card{aspect-ratio:auto;min-height:0;flex-direction:column-reverse}
  .skin-home .sk-ritual-img{width:100%;aspect-ratio:1/1}
  .skin-home .sk-ritual-img img{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 12%);mask-image:linear-gradient(to top,transparent 0,#000 12%);object-position:50% 20%}
  .skin-home .sk-ritual-txt{padding:10px 12px 14px;gap:4px}
  .skin-home .sk-ritual-txt small span{display:inline}
}
@media (max-width:767.98px){
  .skin-home .sk-head{gap:12px}
  .skin-home .sk-btn{min-height:44px;padding:0 22px}
  .skin-home .sk-ritual{padding:12px var(--sk-gut) 20px}
  .skin-home .sk-ritual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skin-home .sk-ritual-card{aspect-ratio:auto;min-height:0;flex-direction:column-reverse}
  .skin-home .sk-ritual-img{width:100%;aspect-ratio:436/430}
  .skin-home .sk-ritual-img img{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 12%);mask-image:linear-gradient(to top,transparent 0,#000 12%);object-position:50% 12%}
  .skin-home .sk-ritual-txt{padding:10px 14px 14px;gap:4px}
  .skin-home .sk-ritual-txt small span{display:inline}
  .skin-home .sk-rail{--sk-n:2.2;margin-inline:calc(-1 * var(--sk-gut));padding-inline:var(--sk-gut);scroll-padding-inline:var(--sk-gut)}
  .skin-home .sk-cats{grid-auto-columns:124px;margin-inline:calc(-1 * var(--sk-gut));padding-inline:var(--sk-gut);scroll-padding-inline:var(--sk-gut)}
  .skin-home .sk-tiles{grid-auto-columns:68%;margin-inline:calc(-1 * var(--sk-gut));padding-inline:var(--sk-gut);scroll-padding-inline:var(--sk-gut)}
  .skin-home .sk-day-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 1.2 * var(--sk-gap)) / 2.2);overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(-1 * var(--sk-gut));padding-inline:var(--sk-gut);scroll-padding-inline:var(--sk-gut)}
  .skin-home .sk-day-cards::-webkit-scrollbar{display:none}
  .skin-home .sk-day-cards .skc{scroll-snap-align:start}
  .skin-home .sk-duo{grid-template-columns:minmax(0,1fr)}
  .skin-home .sk-ban{aspect-ratio:auto;min-height:200px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .skin-home .sk-ban-copy{padding:20px 16px}
  .skin-home .sk-ban img{padding:10%}
  .skin-home .sk-brand{min-height:112px}
  .skin-home .sk-brands{grid-template-columns:minmax(0,1fr)}
  .skin-home .sk-brand{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;justify-items:start;text-align:start;min-height:0;padding:16px 18px}
  .skin-home .sk-brand b{grid-column:1;grid-row:1}
  .skin-home .sk-brand span{grid-column:1;grid-row:2}
  .skin-home .sk-brand small{grid-column:2;grid-row:1 / 3;align-self:center;margin:0}
  .skin-home .skc-brand{margin-top:10px}
  .skin-home .skc-buy{padding-top:12px}
  .skin-home .skc-add{gap:0}
  .skin-home .skc-add svg{display:none}
  .skin-home .skc-wish{top:4px;inset-inline-end:4px;width:36px;height:36px}
  .skin-home .skc-wish svg{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){
  .skin-home *,.skin-home *::before,.skin-home *::after{animation:none !important;transition:none !important}
}