/* ========================================================================== */
/* RubyRose V10.12 — Soft UI feedback fix: logo, decor, category mobile, hover */
/* ========================================================================== */

/* تقليل الأشكال العشوائية داخل كل سيكشن حتى تكون ناعمة وغير مزعجة بصريًا. */
html body .rr-bg-section > .rr-section-decor{
  --rr-decor-opacity:.075!important;
  opacity:.55!important;
  mix-blend-mode:normal!important;
}

/* إظهار عدد أقل من الأشكال بدل الزحمة، مع الاحتفاظ بإمكانية التحكم من الإدارة لاحقًا. */
html body .rr-section-decor .rr-decor-shape:nth-child(n+7){
  display:none!important;
}

/* جعل الأشكال أصغر وأنعم، خصوصًا في أقسام المنتجات والتصنيفات. */
html body .rr-decor-shape{
  max-width:132px!important;
  max-height:132px!important;
  filter:blur(1.8px) saturate(.88)!important;
}

/* إخفاء الزخارف تمامًا فوق السلايدر حتى لا تغطي الصور أو الكتابة. */
html body .rr-home-image-slider .rr-section-decor,
html body .rr-home-pro-slider .rr-section-decor{
  display:none!important;
}

/* تقليل السواتشات/الطرطشة القديمة في الأقسام العامة. */
html body .rr-sec-swatch{
  opacity:0!important;
  --rr-op:.12!important;
  filter:blur(.4px) saturate(.9)!important;
}

/* إخفاء السواتشات داخل أقسام المنتجات والتصنيفات لأنها كانت تزحم الكروت. */
html body .shopping-section .rr-sec-swatch,
html body .rr-home-category-showcase .rr-sec-swatch,
html body .categories-showcase .rr-sec-swatch{
  display:none!important;
}

/* تصغير كلمة RubyRose في الهيدر حتى لا تسيطر على المساحة. */
html header.site-header.biagiotti-header .brand-logo-text,
html header.site-header.biagiotti-header.is-scrolled .brand-logo-text,
body:not(.page-index) header.site-header.biagiotti-header .brand-logo-text{
  font-size:clamp(19px,1.75vw,28px)!important;
  line-height:1.05!important;
  letter-spacing:-.55px!important;
  font-weight:800!important;
}

/* تصغير صورة اللوجو في الهيدر لو المستخدم رفع صورة بدل النص. */
html header.site-header.biagiotti-header .rr-logo-header,
html header.site-header.biagiotti-header .centered-brand .rr-site-logo{
  max-height:36px!important;
  width:auto!important;
  object-fit:contain!important;
}

/* الحفاظ على مسافات مريحة حول اللوجو بعد تصغيره. */
html header.site-header.biagiotti-header .centered-brand{
  padding-inline:clamp(10px,1.35vw,20px)!important;
}

/* جعل تصنيفات الصفحة الرئيسية أقصر وأكثر وضوحًا مثل المرجع، بدل كارت كبير جدًا. */
html body .rr-home-category-showcase{
  padding:26px 0 34px!important;
}

/* ضبط حاوية التصنيفات وتخفيف المسافة بين الكروت. */
html body .rr-home-category-rail{
  gap:12px!important;
}

/* حجم أنيق للتصنيف على الديسكتوب. */
html body .rr-home-category-card{
  max-width:196px!important;
}

/* صورة التصنيف تكون واضحة وقصيرة نسبيًا. */
html body .rr-home-category-media{
  aspect-ratio:1.55/1!important;
  border-radius:18px!important;
}

/* اسم التصنيف واضح ومختصر. */
html body .rr-home-category-content b{
  font-size:10.5px!important;
  letter-spacing:.035em!important;
}

/* حركة التصنيف على الهوفر أخف وأنعم. */
html body .rr-home-category-card:hover .rr-home-category-media img,
html body .rr-home-category-card:focus-visible .rr-home-category-media img{
  transform:scale(1.025)!important;
  filter:saturate(1.02)!important;
}

/* إصلاح خطأ flex القديم على التابلت والموبايل وجعل أكثر من تصنيف ظاهر على الشاشة. */
@media(max-width:1024px){
  html body .rr-home-category-rail{
    justify-content:flex-start!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    padding-inline:18px!important;
    scroll-padding-inline:18px!important;
  }
  html body .rr-home-category-card{
    flex:0 0 clamp(170px,28vw,218px)!important;
    max-width:none!important;
  }
}

/* الموبايل: ظهور تصنيفين وجزء من الثالث بدل كارت واحد ضخم. */
@media(max-width:640px){
  html body .rr-home-category-inner{
    width:100%!important;
  }
  html body .rr-home-category-rail{
    gap:10px!important;
    padding-inline:14px!important;
    scroll-padding-inline:14px!important;
  }
  html body .rr-home-category-card{
    flex:0 0 clamp(136px,42vw,172px)!important;
  }
  html body .rr-home-category-media{
    aspect-ratio:1.12/1!important;
    border-radius:16px!important;
  }
  html body .rr-home-category-content{
    min-height:38px!important;
    padding-top:7px!important;
  }
  html body .rr-home-category-content b{
    font-size:9.8px!important;
  }
  html body .rr-home-category-content small{
    display:none!important;
  }
}

/* كارت المنتج: حركة دخول وهوفر ناعمة بلا قفز. */
html body .shop-product-card{
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease!important;
}

/* رفع بسيط للكارت فقط عند الوقوف. */
html body .shop-product-card:hover{
  transform:translateY(-4px)!important;
}

/* منطقة الصورة تصبح أهدأ وتسمح بتبديل الصورة بسلاسة. */
html body .shop-card-media{
  border-radius:22px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#fff 0%,#fff8fb 100%)!important;
}

/* الصورة الأساسية لا تختفي بعنف، بل تصبح خفيفة أثناء ظهور صورة الهوفر. */
html body .shop-product-card:hover .shop-card-img-main{
  opacity:.16!important;
  transform:scale(.985)!important;
}

/* صورة الهوفر تظهر بنعومة من أسفل بسيط، مثل showcase هادئ. */
html body .shop-card-img-hover{
  opacity:0!important;
  transform:translateY(10px) scale(.985)!important;
}

/* تفعيل صورة الهوفر عند الوقوف فقط. */
html body .shop-product-card:hover .shop-card-img-hover{
  opacity:1!important;
  transform:translateY(0) scale(1.015)!important;
}

/* تقليل صورة الموديل الصغيرة حتى لا تزحم كارت المنتج. */
html body .shop-model-peek{
  width:58px!important;
  height:74px!important;
  border-radius:16px!important;
  opacity:0!important;
}

/* على الموبايل لا يوجد hover حقيقي، لذلك نثبت الصورة الأساسية ونخفي صور الهوفر والموديل لتجنب اللخبطة. */
@media(hover:none), (max-width:760px){
  html body .shop-product-card:hover{
    transform:none!important;
  }
  html body .shop-product-card:hover .shop-card-img-main,
  html body .shop-card-img-main{
    opacity:1!important;
    transform:none!important;
  }
  html body .shop-card-img-hover,
  html body .shop-model-peek,
  html body .product-share-row{
    display:none!important;
  }
}

/* الفيديوهات داخل أي قسم مخصص تكون متجاوبة ولا تخرج من الشاشة. */
html body .rr-dyn-section iframe,
html body .rr-dyn-section video,
html body .rr-dyn-section .rr-video-frame{
  max-width:100%!important;
  width:100%!important;
  border-radius:24px!important;
  overflow:hidden!important;
  box-shadow:0 20px 60px rgba(50,18,34,.10)!important;
}

/* الموبايل: تقليل الزخارف لأقصى درجة داخل الأقسام. */
@media(max-width:760px){
  html body .rr-bg-section > .rr-section-decor{
    --rr-decor-opacity:.035!important;
    opacity:.32!important;
  }
  html body .rr-section-decor .rr-decor-shape:nth-child(n+3){
    display:none!important;
  }
  html body .rr-decor-shape{
    max-width:82px!important;
    max-height:82px!important;
  }
  html header.site-header.biagiotti-header .brand-logo-text,
  html header.site-header.biagiotti-header.is-scrolled .brand-logo-text,
  body:not(.page-index) header.site-header.biagiotti-header .brand-logo-text{
    font-size:19px!important;
    letter-spacing:-.35px!important;
  }
  html header.site-header.biagiotti-header .rr-logo-header,
  html header.site-header.biagiotti-header .centered-brand .rr-site-logo{
    max-height:30px!important;
  }
}

/* احترام المستخدم الذي يفضل تقليل الحركة. */
@media(prefers-reduced-motion:reduce){
  html body .rr-decor-shape,
  html body .rr-sec-swatch,
  html body .shop-card-img,
  html body .rr-home-category-media img{
    animation:none!important;
    transition:none!important;
  }
}