/* إسرعة شريط الاعلانات */
.promotion-banner__inner ul li {
  animation-duration: 25000ms !important;   
  animation-timing-function: linear !important; 
}


/*out of stock*/
custom-salla-product-card.out-of-stock .product-card__out-label {
  display: none !important;
}

custom-salla-product-card.out-of-stock .product-card__image img {
  filter: brightness(0.90);
}








/* مميزات المنتج */
salla-product-options > *:not(label):not(legend):not(h3):not(h4) {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
}

salla-product-options > *:not(label):not(legend):not(h3):not(h4) * {
  font-size: 16px !important;
}


/* مميزات المنتج */
.product-single__info::before {
  content: "\ef2b  أصلي 100%   \ef31  شحن سريع   \ed70  سعر تنافسي";

  font-family: sallaicons, Alexandria, "Baloo Bhaijaan 2", sans-serif;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  white-space: pre-wrap;
  text-align: center;

  margin-top: 14px;
  padding: 11px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.9;
  color: #2A2C31;
  background: #fff;
  border: 1px #fff;
  border-radius: 4px;
}


html[lang^="en"] .product-single__info::before {
  content: "\ef2b  100% Original   \ef31  Fast Shipping   \ed70  Competitive Price";
}


/* التوصيل المتوقع */
.product-single__info::after {
  content: "التوصيل المتوقع من 1-3 يوم";

  display: block;
  text-align: center;

  margin-top: -2px !important;
  padding: 0 10px 4px !important;

  font-family: Alexandria, "Baloo Bhaijaan 2", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;

  color: #2A2C31;
  background: #fff;
  border-radius: 4px;
}

html[lang^="en"] .product-single__info::after {
  content: "Estimated delivery in 1-3 days";
}

/* الجوال */
@media (max-width: 480px) {
  .product-single__info::after {
    margin-top: -2px !important;
    padding: 0 8px 4px !important;
    font-size: 13px;
    }
  }










/*+++++++++++++لون الفوتر *****************/
.store-footer__inner {
  background: linear-gradient(to bottom,
              #c51561 0,
              #c51561 64px,
              #732d69 100%) !important;
}

.store-footer__inner {
  background: linear-gradient(to top,
              #732d69 0,
              #732d69 64px,
              #c51561 100%) !important;
}

.store-footer__curve {
  color: #c51561 !important;
}












/* ═══ ① نموذج الشراء فوق الوصف ═══ */
.product-single__info{
  display:flex;
  flex-direction:column;
}
.product-single__info > *{ order:6 }
.product-single__info > .product-single__brand-box{ order:1 }
.product-single__info > .product-single__title{ order:2 }
.product-single__info > .product-single__stock-info{ order:3 }
.product-single__info > .product-form{ order:4 }
.product-single__info > .product-single-top-description{ order:20 }

/* ═══ ② الخيارات: بارزة ومتوسّطة ═══ */
salla-product-options{
  display:block;
  margin:4px 0 20px;
  padding:16px;
  background:#FAFAFB;
  border:1px solid #EDEDF1;
  border-radius:14px;
}
salla-product-options label,
salla-product-options .s-product-options-option-label{
  display:block;
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:#16171B;
  margin-bottom:12px;
}
salla-product-options > div,
salla-product-options .s-product-options-option-container{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
salla-product-options button{
  min-width:88px;
  padding:12px 20px;
  font-size:16px;
  font-weight:600;
  line-height:1;
  color:#16171B;
  background:#fff;
  border:1.5px solid #E3E3E8;
  border-radius:12px;
  transition:all .15s ease;
}
salla-product-options button:hover{
  border-color:#8A6D1D;
  transform:translateY(-1px);
}
salla-product-options button.selected,
salla-product-options button.s-button-primary,
salla-product-options button[aria-selected="true"]{
  background:#8A6D1D;
  border-color:#8A6D1D;
  color:#fff;
  box-shadow:0 2px 10px rgba(138,109,29,.28);
}
salla-product-options button[disabled]{
  opacity:.4;
  text-decoration:line-through;
  cursor:not-allowed;
}

.product-single__info {
  display: flex;
  flex-direction: column;
}
.product-single__info > salla-payments {
  order: 9999;
  margin-top: 24px;
}








/*===============السعر في مربع الحجم=================*/

.pa-opt-grid,
.s-product-options-grid-mode[data-pa-opt-priced]{
  --pa-radius: 14px;
  --pa-border: #E6E6EC;
  --pa-border-hover: #CBB6C6;
  --pa-border-on: #732d69;      /* اللون الأساسي للمتجر */
  --pa-bg: #ffffff;
  --pa-bg-on: #FAF4F9;
  --pa-text: #16171B;
  --pa-muted: #8A8F9A;
  --pa-now: #B4241F;            /* السعر بعد الخصم */
  --pa-save-bg: #EAF5EF;
  --pa-save-fg: #2F6B4F;
  --pa-out-bg: #FDECEB;
  --pa-out-fg: #B4241F;

  /* صفّ واحد لا يلتفّ: تزيد الخيارات فيظهر سكرول أفقي */
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  width: 100%;
  /* بدون هذين، عناصر flex الأب تمنع الانكماش فيتمدّد الشريط
     ويصير التمرير للصفحة كلها بدل داخل الشريط */
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 0 6px;      /* مساحة لشريط التمرير */
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: #D8D8E0 transparent;
}

/* نفس السبب: أي أب لا ينكمش يُفشل التمرير الداخلي */
.s-product-options-option-container:has(.pa-opt-grid),
.s-product-options-option:has(.pa-opt-grid),
.s-product-options-option-content:has(.pa-opt-grid){
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.pa-opt-grid::-webkit-scrollbar{ height: 5px; }
.pa-opt-grid::-webkit-scrollbar-track{ background: transparent; }
.pa-opt-grid::-webkit-scrollbar-thumb{
  background: #D8D8E0;
  border-radius: 99px;
}

/* ----- الحاوية القابلة للنقر ----- */
.pa-opt-grid > .pa-opt-label,
.pa-opt-grid > label{
  position: relative;
  display: block;
  flex: 1 0 128px;       /* تتمدّد لملء العرض عند قلّة الخيارات، ولا تنكمش عند كثرتها */
  margin: 0;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: start;
}

/* الراديو مخفي بصرياً فقط — لا display:none، لأن الحقل required
   وإخفاؤه كلياً يجعل المتصفح يرفض إرسال الفورم (not focusable) */
.pa-opt-grid input[type="radio"],
.pa-opt-grid input[type="checkbox"]{
  position: absolute;
  inset-inline-start: 12px;
  top: 12px;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

/* ----- المربّع: عمود، الاسم فوق والسعر تحته ----- */
.pa-opt-box{
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 74px;
  margin: 0;
  padding: 9px 8px !important;
  text-align: center;
  line-height: 1.35;
  color: var(--pa-text);
  background: var(--pa-bg);
  border: 1.5px solid var(--pa-border);
  border-radius: var(--pa-radius);
  transition: border-color .18s ease, background-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}

.pa-opt-label:hover > .pa-opt-box{
  border-color: var(--pa-border-hover);
  transform: translateY(-1px);
}

/* الحجم المختار — القالب يلوّن النص أبيض هنا، لذلك نفرض لون النص */
.pa-opt-grid input:checked + .pa-opt-box{
  color: var(--pa-text) !important;
  background: var(--pa-bg-on) !important;
  border-color: var(--pa-border-on);
  box-shadow: inset 0 0 0 1px var(--pa-border-on);
  transform: none;
}

.pa-opt-grid input:focus-visible + .pa-opt-box{
  outline: 2px solid var(--pa-border-on);
  outline-offset: 2px;
}

/* ----- اسم الحجم ----- */
.pa-opt-name{
  display: block;
  font-size: 14px;
  font-weight: 700;
  unicode-bidi: isolate;   /* يمنع اختلاط الأرقام بالعربية */
}

/* ----- سطر السعر ----- */
.pa-opt-prices{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;     /* السعران في سطر واحد دائماً مهما ضاق المربع */
}
.pa-opt-now{
  font-size: 14px;
  font-weight: 700;
  color: var(--pa-now);
  white-space: nowrap;
  unicode-bidi: isolate;
}
/* التخصيص مرفوع هنا (.pa-opt-box + !important) لأن قواعد القالب على
   عنصر del داخل بطاقة الخيار كانت تكسب على .pa-opt-was وحدها */
.pa-opt-box .pa-opt-was{
  font-size: 11px !important;   /* ← غيّر هذا الرقم وحده */
  font-weight: 500;
  opacity: .9;
  color: var(--pa-muted);
  text-decoration: line-through;
  white-space: nowrap;
  unicode-bidi: isolate;
}
/* بدون خصم: السعر بلون النص العادي بدل الأحمر */
.pa-opt-box:not(.pa-opt-box--sale) .pa-opt-now{ color: var(--pa-text); }

/* salla.money() تلفّ السعر داخل عنصر له حجم خط خاص من القالب، فلا يرث
   حجم الأب. نجبر كل ما بالداخل على وراثة حجم بطاقتنا. */
.pa-opt-box .pa-opt-now *,
.pa-opt-box .pa-opt-was *,
.pa-opt-box .pa-opt-save *{
  font-size: 1em !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* رمز الريال يبقى أصغر قليلاً من الرقم المجاور له */
.pa-opt-box .pa-opt-now .sicon-sar,
.pa-opt-box .pa-opt-was .sicon-sar,
.pa-opt-box .pa-opt-save .sicon-sar{
  font-size: .85em !important;
  margin-inline-start: 2px;
}

/* ----- هيكل مؤقّت أثناء جلب السعر ----- */
.pa-opt-skeleton{
  display: block;
  width: 54px;
  height: 13px;
  border-radius: 6px;
  background: linear-gradient(90deg, #EFEFF3 25%, #F7F7FA 50%, #EFEFF3 75%);
  background-size: 200% 100%;
  animation: pa-opt-shimmer 1.2s linear infinite;
}
@keyframes pa-opt-shimmer{
  from{ background-position: 200% 0; }
  to{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .pa-opt-skeleton{ animation: none; }
}

/* ----- شارة التوفير ----- */
.pa-opt-save{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;   /* لا ينزل رمز الريال لسطر ثانٍ مع الأسعار الطويلة */
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--pa-save-bg);
  color: var(--pa-save-fg);
  unicode-bidi: isolate;
}

/* ----- نفدت الكمية ----- */
.pa-opt-out{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--pa-out-bg);
  color: var(--pa-out-fg);
  unicode-bidi: isolate;
}
.pa-opt-label--out{ cursor: not-allowed; }
.pa-opt-label--out > .pa-opt-box{
  background: #F7F7F9;
  border-style: dashed;
  border-color: #DEDEE5;
  color: var(--pa-muted);
}
.pa-opt-label--out:hover > .pa-opt-box{
  transform: none;
  border-color: #DEDEE5;
}
.pa-opt-label--out .pa-opt-name{
  text-decoration: line-through;
  text-decoration-color: #C7C7D1;
}

/* ----- الجوال ----- */
@media (max-width: 480px){
  .pa-opt-grid,
  .s-product-options-grid-mode[data-pa-opt-priced]{
    gap: 7px;
  }
  .pa-opt-grid > .pa-opt-label,
  .pa-opt-grid > label{ flex-basis: 112px; }
  .pa-opt-box{
    min-height: 70px;
    padding: 8px 7px !important;
  }
  .pa-opt-name{ font-size: 13px; }
  .pa-opt-now{ font-size: 13px; }
}













/* لون أيقونات الهيدر */
#mainnav .header-btn__icon,
#mainnav .sicon-search,
#mainnav .sicon-user,
#mainnav .sicon-cart,
#mainnav .sicon-menu {
    color: #732d69 !important;
}

/* لون نص القائمة الرئيسية */
#mainnav .main-menu__desktop-item > a,
#mainnav .main-menu__desktop-item > a span {
    color: #732d69 !important;
}



/* ==========================================================================
   PARIS AVENUES —
   ======================================================================= */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@200;300;400;500;600;700&family=Lato:wght@300;400;700;900&display=swap");


body :has(> .pa-hero),
body :has(> * > .pa-hero) {
  margin-top: 0 !important;
}


/* ---------- 0. المتغيّرات — محصورة داخل القسم ----------------------------- */

.pa-hero {
  --pa-pink:   #e61a74;
  --pa-purple: #732d69;

  --pa-gradient:     linear-gradient(90deg,  var(--pa-pink) 0%, var(--pa-purple) 100%);
  --pa-gradient-135: linear-gradient(135deg, var(--pa-pink) 0%, var(--pa-purple) 100%);
  --pa-gradient-bar: linear-gradient(to bottom, var(--pa-pink) 0%, var(--pa-purple) 100%);

  --paper:    #ffffff;
  --rose-50:  #fdf1f7;
  --rose-100: #fae0ed;
  --plum-50:  #f6f0f5;

  --fg:       #231f20;
  --fg-body:  #55494f;
  --fg-muted: #7d7079;

  --line:        #ece7ea;
  --line-strong: #cfcfce;
  --line-brand:  rgba(230, 26, 116, .22);

  --font-ar:  "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-lat: "Lato", "Segoe UI", Arial, sans-serif;

  --t-xs:   clamp(.68rem, .66rem + .1vw,  .74rem);
  --t-sm:   clamp(.78rem, .75rem + .15vw, .86rem);
  --t-base: clamp(.92rem, .88rem + .2vw,  1rem);
  --t-md:   clamp(1.05rem, 1rem + .3vw,   1.18rem);
  --t-lg:   clamp(1.3rem, 1.15rem + .6vw, 1.6rem);

  --track-wide: .18em;

  --pattern-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-dasharray='1.5 6' stroke-linecap='round'%3E%3Ccircle cx='0' cy='0' r='66'/%3E%3Ccircle cx='132' cy='0' r='66'/%3E%3Ccircle cx='0' cy='132' r='66'/%3E%3Ccircle cx='132' cy='132' r='66'/%3E%3Ccircle cx='66' cy='66' r='66'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-size: 132px;

  --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 2.5rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1360px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --shadow-md: 0 14px 34px -14px rgba(80, 32, 72, .22);
  --shadow-lg: 0 34px 74px -28px rgba(80, 32, 72, .34);

  --ease:        cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur:      .38s;
  --dur-slow: .7s;
}


/* ---------- 0b. تهيئة محصورة — لا تمسّ باقي صفحة المتجر ------------------- */

.pa-hero,
.pa-hero *,
.pa-hero *::before,
.pa-hero *::after { box-sizing: border-box; }

.pa-hero {
  display: block;
  direction: rtl;
  font-family: var(--font-ar);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.75;
  color: var(--fg-body);
  -webkit-font-smoothing: antialiased;
}
.pa-hero h1,
.pa-hero p,
.pa-hero ul { margin: 0; }
.pa-hero ul { padding: 0; list-style: none; }
.pa-hero a  { color: inherit; text-decoration: none; }
.pa-hero img,
.pa-hero svg { display: block; max-width: 100%; }
.pa-hero :focus-visible { outline: 2px solid var(--pa-pink); outline-offset: 3px; }


/* ---------- 1. المسرح العام ---------------------------------------------- */

.pa-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block: 0 !important;

  /* --- إزاحة تحت ترويسة المتجر ------------------------------------------
     الترويسة تعلو القسم، فلولا هذه الإزاحة لجلست الروابط فوق القوس
     الوردي ولصار القسم غير مقروء. عدّل --pa-head وحده لا غير.
     ---------------------------------------------------------------------- */
  --pa-head: 200px;
  padding-block: var(--pa-head) clamp(3rem, 6vw, 5.5rem);

  background:
    radial-gradient(105% 70% at 78% 2%, var(--rose-50) 0%, transparent 60%),
    radial-gradient(75% 55% at 6% 98%,  var(--plum-50) 0%, transparent 65%),
    var(--paper);
}

.pa-hero .pa-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--pa-pink);
  background-color: currentColor;
  -webkit-mask-image: var(--pattern-url);
          mask-image: var(--pattern-url);
  -webkit-mask-size: var(--pattern-size) var(--pattern-size);
          mask-size: var(--pattern-size) var(--pattern-size);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  opacity: .3;
}
.pa-hero .pa-pattern--fade {
  -webkit-mask-image: var(--pattern-url), linear-gradient(180deg, #000 0%, transparent 78%);
          mask-image: var(--pattern-url), linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-size: var(--pattern-size) var(--pattern-size), 100% 100%;
          mask-size: var(--pattern-size) var(--pattern-size), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
          mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.pa-hero > .pa-pattern { opacity: .13; }

.pa-hero .pa-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px); }
.pa-hero .pa-glow--a { inset-inline-end: -6%; top: -16%; width: 44vw; height: 44vw; background: var(--rose-100); opacity: .8; }
.pa-hero .pa-glow--b { inset-inline-start: 10%; bottom: -22%; width: 30vw; height: 30vw; background: var(--plum-50); opacity: .95; }

.pa-hero .pa-hairline {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--pa-pink) 28%, var(--pa-purple) 72%, transparent 100%);
  opacity: .55;
}

.pa-hero .pa-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pa-hero .pa-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}


/* ---------- 2. عمود النص -------------------------------------------------- */

.pa-hero .pa-title { line-height: 0; }
.pa-hero .pa-logo  { width: clamp(250px, 31vw, 420px); height: auto; }

.pa-hero .pa-lead {
  margin-top: var(--s-6);
  max-width: 44ch;
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.55;
  color: var(--fg-body);
}


/* ---------- 3. الأزرار ---------------------------------------------------- */

.pa-hero .pa-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.pa-hero .pa-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  height: 54px;
  padding-inline: var(--s-6);
  border: 0;
  border-radius: 2px;
  font-family: var(--font-ar);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  visibility: visible !important;
  text-decoration: none;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.pa-hero .pa-btn:hover  { transform: translateY(-2px); }
.pa-hero .pa-btn:active { transform: translateY(0); }
.pa-hero .pa-btn svg    { width: 18px; height: 18px; flex: none; }

.pa-hero .pa-btn--primary {
  color: #fff !important;
  background: var(--pa-gradient);
  background-size: 200% 100%;
  background-position: 0% 0;
  box-shadow: 0 10px 26px -12px rgba(230, 26, 116, .7);
  transition: background-position var(--dur-slow) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.pa-hero .pa-btn--primary:hover {
  background-position: 100% 0;
  box-shadow: 0 16px 38px -14px rgba(230, 26, 116, .85);
}

.pa-hero .pa-btn--ghost {
  color: var(--fg) !important;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.pa-hero .pa-btn--ghost:hover {
  border-color: var(--pa-pink);
  color: var(--pa-pink) !important;
  background: var(--rose-50);
}


/* ---------- 4. مزايا المتجر ---------------------------------------------- */

.pa-hero .pa-feats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.pa-hero .pa-feat { display: grid; justify-items: start; gap: 2px; }

.pa-hero .pa-feat__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--s-3);
  border: 1px solid var(--line-brand);
  border-radius: var(--r-md);
  background: var(--rose-50);
  color: var(--pa-pink);
}
.pa-hero .pa-feat__icon svg { width: 21px; height: 21px; }

/* بلا ‎:hover‎: المزايا نصٌّ لا روابط، وأيّ استجابة للفأر تَعِد بنقرةٍ
   لا وجهة لها. وبزوالها يزول انتقالٌ يعمل على أربع أيقونات */

.pa-hero .pa-feat__label { font-size: var(--t-sm); font-weight: 600; color: var(--fg); line-height: 1.4; }
.pa-hero .pa-feat__sub   { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.5; }


/* ---------- 5. شارتا الدفع المجزّأ ---------------------------------------- */

.pa-hero .pa-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
/* شعاران للعلم لا للنقر — فلا ‎:hover‎ ولا انتقال. والظلّ ثابت:
   انتقال ‎filter‎ يعيد رسم الظلّ في كل إطار وهو من أغلى ما يُحرَّك */
.pa-hero .pa-paylogo {
  height: 30px;
  width: auto;
  filter: drop-shadow(0 3px 8px rgba(35, 31, 32, .26));
}
.pa-hero .pa-paylogo--tamara { height: 28px; }


/* ---------- 6. المسرح البصري — القارورة داخل قوس متدرّج ------------------- */

.pa-hero .pa-visual { position: relative; display: grid; place-items: center; }

/* ارتفاع صريح لا aspect-ratio — قوالب سلة تتدخّل في النسبة فينبطح القوس */
.pa-hero .pa-stage {
  position: relative;
  width: min(100%, 540px);
  height: clamp(420px, 38vw, 560px);
}

.pa-hero .pa-arch {
  position: absolute;
  z-index: 1;
  inset-block: 3% 8%;
  inset-inline: 15%;
  overflow: hidden;
  border-radius: 999px 999px var(--r-md) var(--r-md);
  background: var(--pa-gradient-135);
  box-shadow: var(--shadow-lg);
  transform-origin: bottom center;
  animation: pa-arch-in 1.05s var(--ease) both;
}
.pa-hero .pa-arch .pa-pattern { color: #fff; opacity: .17; }
.pa-hero .pa-arch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 42%);
}

.pa-hero .pa-ring {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: auto;
  width: 94%;
  aspect-ratio: 1;
  border: 1px solid var(--line-brand);
  border-radius: 50%;
}
.pa-hero .pa-ring--2 { width: 76%; border-style: dashed; opacity: .7; }

.pa-hero .pa-shadow {
  position: absolute;
  z-index: 2;
  bottom: 8.4%;
  left: 50%;
  width: 46%;
  height: 5.5%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(48, 14, 44, .55) 0%, rgba(48, 14, 44, 0) 72%);
  filter: blur(9px);
}

/* المقاس محكوم بالارتفاع لا بالعرض — يصحّ مع أي نسبة للصورة المرفوعة */
.pa-hero .pa-bottle-link {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  bottom: 8.5%;
  left: 50%;
  height: 78%;
  width: auto;
  max-width: 88%;
  border-radius: var(--r-lg);
  animation: pa-bottle-in 1.15s var(--ease) both,
             pa-bottle-float 9s var(--ease-in-out) 1.15s infinite;
}
.pa-hero .pa-bottle {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 34px 44px rgba(35, 10, 32, .40));
  transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}
.pa-hero .pa-bottle-link:hover .pa-bottle {
  transform: scale(1.035);
  filter: drop-shadow(0 42px 54px rgba(35, 10, 32, .48));
}
.pa-hero .pa-bottle-link:focus-visible { outline-offset: 8px; }


/* ---------- 7. البطاقات الزجاجية ----------------------------------------- */

.pa-hero .pa-chip {
  position: absolute;
  z-index: 4;
  margin: 0;
  display: grid;
  gap: 3px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-md);
  animation: pa-rise .95s var(--ease) both;
}
.pa-hero .pa-chip::before {
  content: "";
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--pa-gradient-bar);
}
.pa-hero .pa-chip--top    { top: 9%;     inset-inline-end: -6%;   animation-delay: .55s; }
.pa-hero .pa-chip--bottom { bottom: 12%; inset-inline-start: -3%; animation-delay: .7s; }

.pa-hero .pa-chip__en {
  font-family: var(--font-lat);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--pa-pink);
  direction: ltr;
}
.pa-hero .pa-chip__ar    { font-size: var(--t-base); font-weight: 600; color: var(--fg); line-height: 1.35; }
.pa-hero .pa-chip__notes { font-size: var(--t-xs); color: var(--fg-muted); }

.pa-hero .pa-chip__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  color: var(--fg-muted);
}
.pa-hero .pa-chip__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pa-gradient);
}
.pa-hero .pa-chip__price {
  font-family: var(--font-lat);
  font-size: var(--t-lg);
  font-weight: 900;
  line-height: 1.1;
  direction: ltr;
  background: var(--pa-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.pa-hero .pa-cur { font-size: .46em; font-weight: 700; letter-spacing: .1em; }


/* ---------- 8. الحركة ----------------------------------------------------- */

.pa-hero .pa-rise { animation: pa-rise .95s var(--ease) both; animation-delay: var(--d, 0s); }

@keyframes pa-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pa-arch-in {
  from { opacity: 0; transform: scaleY(.86); }
  to   { opacity: 1; transform: scaleY(1); }
}
@keyframes pa-bottle-in {
  from { opacity: 0; transform: translate(-50%, 44px) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes pa-bottle-float {
  0%, 100% { transform: translate(-50%, 0) rotate(0deg); }
  50%      { transform: translate(-50%, -18px) rotate(-1.2deg); }
}


/* ---------- 9. الاستجابة -------------------------------------------------- */

@media (max-width: 1100px) {
  .pa-hero { --pa-head: 150px; }
  .pa-hero .pa-chip--top    { inset-inline-end: -2%; }
  .pa-hero .pa-chip--bottom { inset-inline-start: -1%; }
}

@media (max-width: 900px) {
  .pa-hero { --pa-head: 120px; }
  /* عمود واحد: الفجوة صارت رأسية بين القارورة والنص، فتُقلَّص */
  .pa-hero .pa-inner  { grid-template-columns: 1fr; gap: var(--s-5); }
  .pa-hero .pa-visual { order: -1; }
  .pa-hero .pa-stage  { width: min(100%, 420px); height: clamp(400px, 62vw, 500px); }
  .pa-hero .pa-lead   { max-width: none; }
}

@media (max-width: 620px) {
  .pa-hero { --pa-head: 92px; }
  .pa-hero .pa-inner { gap: var(--s-3); }
  .pa-hero .pa-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .pa-hero .pa-lead,
  .pa-hero .pa-cta,
  .pa-hero .pa-feats,
  .pa-hero .pa-pay { width: 100%; }

  /* الشعار يُخفى على الجوّال — ترويسة المتجر تعرضه أصلاً */
  .pa-hero .pa-title { display: none; }
  .pa-hero .pa-lead  { margin-top: 0; font-size: var(--t-md); }

  .pa-hero .pa-stage { width: min(100%, 330px); height: 380px; }
  .pa-hero .pa-chip  { padding: var(--s-3) var(--s-4); }
  .pa-hero .pa-chip--top    { top: 2%;    inset-inline-end: -4%; }
  .pa-hero .pa-chip--bottom { bottom: 8%; inset-inline-start: -4%; }
  .pa-hero .pa-chip__notes  { display: none; }
  .pa-hero .pa-chip__price  { font-size: var(--t-md); }

  /* المزايا تصير هامشاً جانبياً: أيقونة مجرّدة + كلمتان */
  .pa-hero .pa-feats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    margin-top: var(--s-5);
    padding-top: var(--s-5);
  }
  .pa-hero .pa-feat { display: inline-flex; align-items: center; gap: 5px; }
  .pa-hero .pa-feat__icon {
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .pa-hero .pa-feat__icon svg { width: 15px; height: 15px; }
  .pa-hero .pa-feat__label {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fg);
    white-space: nowrap;
  }
  .pa-hero .pa-feat__sub { display: none; }
  .pa-hero .pa-cta .pa-btn { flex: 1 1 100%; }
  .pa-hero .pa-pay { margin-top: var(--s-4); }
  .pa-hero .pa-paylogo { height: 26px; }
  .pa-hero .pa-paylogo--tamara { height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-hero *,
  .pa-hero *::before,
  .pa-hero *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


html:lang(en) .pa-hero {
  direction: ltr;
  font-family: var(--font-lat);
}

html:lang(en) .pa-hero .pa-btn svg { transform: scaleX(-1); }

.pa-en               { display: none; }
html:lang(en) .pa-en { display: contents; }
html:lang(en) .pa-ar { display: none; }




























/* ===== Brand index and single-brand page styles ===== */
/* ══════════════════════════════════════════════════════════════════════════
   باريس أفنيوز — صفحة الماركات
   بطاقة لكل ماركة باسمها · شريط أحرف أفقي يثبت أعلى الصفحة · بحث فوري

   كل القواعد محصورة في ‎.brands-index‎ — صنف ‎.brand-item‎ نفسه مستعمل في
   شريط الماركات بالصفحة الرئيسية، ولا يجوز أن يتأثّر.
   ══════════════════════════════════════════════════════════════════════════ */

.brands-index {
  --pa-b-purple: #732d69;
  --pa-b-pink:   #e61a74;
  --pa-b-fg:     #231f20;
  --pa-b-muted:  #7d7079;
  --pa-b-line:   #ece7ea;
  --pa-b-bar:    56px;    /* ارتفاع شريط الأحرف */
  --pa-b-top:    106px;   /* أسفل الترويسة الثابتة — يصحّحه السكربت بالقياس */
}

.brands-index .pa-b-off { display: none !important; }


/* ---------- 1. العنوان والعدّاد والبحث ------------------------------------ */

.brands-index .pa-b-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-bottom: 14px;
}

.brands-index .pa-b-head h1,
.brands-index .pa-b-head h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  color: var(--pa-b-fg);
}

.brands-index .pa-b-total {
  font-size: .85rem;
  font-weight: 500;
  color: var(--pa-b-muted);
}

.brands-index .pa-b-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px;
}

.brands-index .pa-b-search__input {
  width: 100%;
  height: 46px;
  padding: 0 46px;
  border: 1px solid var(--pa-b-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pa-b-fg);
  font-size: 16px;            /* أقلّ من 16 يجعل آيفون يكبّر الصفحة عند الكتابة */
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
          appearance: none;
}
.brands-index .pa-b-search__input::placeholder { color: var(--pa-b-muted); font-size: 14px; }
.brands-index .pa-b-search__input::-webkit-search-cancel-button { display: none; }
.brands-index .pa-b-search__input:focus {
  border-color: var(--pa-b-purple);
  box-shadow: 0 0 0 3px rgba(115, 45, 105, .12);
}

.brands-index .pa-b-search__icon,
.brands-index .pa-b-search__clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pa-b-muted);
}
.brands-index .pa-b-search__icon {
  inset-inline-start: 17px;
  font-size: 17px;
  pointer-events: none;
}
.brands-index .pa-b-search__clear {
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
}
.brands-index .pa-b-search__clear:hover { background: #f6f0f5; color: var(--pa-b-purple); }

.brands-index .pa-b-empty {
  grid-column: 1 / -1;
  padding: 56px 16px;
  text-align: center;
  color: var(--pa-b-muted);
}

/* وضع البحث: الأقسام تذوب في شبكة واحدة — انظر ‎apply()‎ في السكربت */
.brands-index .pa-b-searching {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  padding-top: 20px;
}
.brands-index .pa-b-searching > section,
.brands-index .pa-b-searching > section > .grid { display: contents; }
.brands-index .pa-b-searching > section > .flex { display: none; }


/* ---------- 2. شريط الأحرف: صفّ واحد يُسحب أفقياً -------------------------- */

/* القالب يثبّت ارتفاع الحاوية بالقياس مرّة واحدة عند التحميل، فنلزمه بارتفاع
   الشريط حتى لا تقفز الصفحة حين ينفصل الشريط ويثبت أعلاها */
.brands-index .brands-nav-wrap {
  height: var(--pa-b-bar) !important;
  margin-bottom: 4px;
}

.brands-index .brands-nav {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  height: var(--pa-b-bar);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.brands-index .brands-nav::-webkit-scrollbar { display: none; }

/* يتوسّط الشريط حين يتّسع له العرض، ويبدأ من أوّله حين يضيق — التوسيط
   بـ‎justify-content‎ يقصّ أوّل الأحرف خارج منطقة السحب */
.brands-index .brands-nav::before,
.brands-index .brands-nav::after {
  content: "";
  flex: 1 0 0px;
}

.brands-index .brands-nav > li { flex: none; margin: 0 !important; }
.brands-index .brands-nav > li:empty { display: none; }

.brands-index .brands-nav .brands-nav__item {
  width: auto;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--pa-b-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pa-b-fg);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.brands-index .brands-nav .brands-nav__item:hover {
  border-color: var(--pa-b-purple);
  color: var(--pa-b-purple);
  box-shadow: none;
}
.brands-index .brands-nav .brands-nav__item.is-selected { border-color: var(--pa-b-purple); }

/* بعد التمرير: القالب يحوّله عموداً جانبياً يُقصّ أسفل الشاشة — نبقيه شريطاً
   أفقياً تحت الترويسة مباشرة */
.brands-index .brands-nav.is-sticky {
  position: fixed;
  top: var(--pa-b-top);
  right: 0;
  left: 0;
  z-index: 20;
  flex-direction: row;
  flex-wrap: nowrap;
  height: var(--pa-b-bar);
  padding: 0 12px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
          backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--pa-b-line);
  box-shadow: 0 12px 24px -20px rgba(80, 32, 72, .55);
}


/* ---------- 3. رأس كل حرف -------------------------------------------------- */

.brands-index section[id^="brand-section-"] {
  padding-top: 34px;
  /* النقر على حرف يُنزل قسمه تحت الترويسة والشريط لا خلفهما */
  scroll-margin-top: calc(var(--pa-b-top) + var(--pa-b-bar) - 14px);
}

.brands-index section[id^="brand-section-"] > .flex {
  gap: 12px;
  margin-bottom: 16px;
}

.brands-index .brand-char {
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pa-b-pink) 0%, var(--pa-b-purple) 100%);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}
.brands-index .brand-char:hover { box-shadow: none; }

.brands-index .pa-b-count {
  font-size: 13px;
  color: var(--pa-b-muted);
  white-space: nowrap;
}


/* ---------- 4. شبكة البطاقات ---------------------------------------------- */

/* القالب يُدخل الشبكة 32px عن العنوان والبحث تحت 1280px — تُحاذى معهما */
.brands-index .brands-nav-wrap ~ div {
  padding-right: 0;
  padding-left: 0;
}

.brands-index section[id^="brand-section-"] > .grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.brands-index a.brand-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
  padding: 0;
  border: 1px solid var(--pa-b-line);
  border-radius: 14px;
  background: #fff;
  color: var(--pa-b-fg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.brands-index a.brand-item:hover {
  opacity: 1;
  border-color: rgba(115, 45, 105, .45);
  box-shadow: 0 16px 28px -20px rgba(80, 32, 72, .6);
  transform: translateY(-2px);
}
.brands-index a.brand-item:focus-visible {
  outline: 2px solid var(--pa-b-purple);
  outline-offset: 2px;
}

.brands-index a.brand-item img {
  display: block;
  width: 100%;
  max-height: none;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 6px 12px;
}

/* سطران محجوزان دائماً حتى تتساوى البطاقات، والاسم القصير يتوسّطهما */
.brands-index .pa-b-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(3em + 17px);
  margin: 0 10px;
  padding: 8px 0 9px;
  border-top: 1px solid var(--pa-b-line);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.brands-index .pa-b-name > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* الصفحة الإنجليزية: أحرف كبيرة متباعدة، فالاسم المشتقّ من الرابط بلا حالة أحرف */
.brands-index .pa-b-name--latin {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}


/* ---------- 5. الجوال ------------------------------------------------------ */

@media (max-width: 639px) {
  .brands-index { --pa-b-bar: 52px; }

  .brands-index .pa-b-search { flex-basis: 100%; max-width: none; }

  .brands-index .brands-nav .brands-nav__item {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
  }

  .brands-index section[id^="brand-section-"] { padding-top: 26px; }
  .brands-index section[id^="brand-section-"] > .flex { margin-bottom: 12px; }
  .brands-index .brand-char { width: 38px; height: 38px; border-radius: 10px; font-size: 17px; }

  .brands-index .pa-b-searching,
  .brands-index section[id^="brand-section-"] > .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .brands-index a.brand-item { border-radius: 12px; }
  .brands-index a.brand-item img { padding: 4px 6px; }
  .brands-index .pa-b-name {
    margin: 0 6px;
    padding: 6px 0 7px;
    min-height: calc(3em + 13px);
    font-size: 11.5px;
  }
  .brands-index .pa-b-name--latin { font-size: 10px; letter-spacing: .02em; }
}

@media (prefers-reduced-motion: reduce) {
  .brands-index a.brand-item,
  .brands-index .pa-b-search__input { transition: none; }
  .brands-index a.brand-item:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   باريس أفنيوز — صفحة الماركة الواحدة
   شريط الترتيب والتصفية. القالب يضعه في صفحات التصنيف والبحث
   دون صفحة الماركة، فيُبنى هنا بأصناف القالب نفسها ما أمكن.
   ══════════════════════════════════════════════════════════════════════════ */

.brands-single .pa-bs-off { display: none !important; }

.brands-single {
  --pa-purple: #732d69;
  --pa-line: #ece7ea;
  --pa-dark: #231f20;
  --pa-muted: #7d7079;
}

.brands-single .pa-bs-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 24px !important;
  width: 100% !important;
}

.brands-single .pa-bs-filters {
  display: block !important;
  flex: 0 0 280px !important;
  width: 280px !important;
  max-width: 100% !important;
}

.brands-single .pa-bs-content {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .brands-single .pa-bs-row { flex-direction: column !important; gap: 0 !important; }
  .brands-single .pa-bs-filters { flex: 1 1 auto !important; width: 100% !important; }
}

.brands-single .pa-bs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

.brands-single .pa-bs-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brands-single .pa-bs-sort-label {
  font-size: 14px;
  white-space: nowrap;
}

.brands-single .pa-bs-sort {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.brands-single .pa-bs-search {
  flex: 1 1 220px;
  width: 100%;
  max-width: 360px;
  min-width: 180px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--pa-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pa-dark);
  font-size: 16px;
}

.brands-single .pa-bs-search:focus {
  outline: 2px solid rgba(115,45,105,.25);
  border-color: var(--pa-purple);
}

.brands-single .pa-bs-search-empty {
  padding: 24px 12px;
  color: var(--pa-muted);
  text-align: center;
}

.brands-single .pa-bs-search-hidden { display: none !important; }

/* زرّ التصفية يظهر حين تنتقل اللوحة إلى الدرج الجانبي — حدّ القالب نفسه */
.brands-single .pa-bs-filter {
  display: none;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #ece7ea;
  border-radius: 999px;
  background: #fff;
  color: #231f20;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.brands-single .pa-bs-filter:hover { border-color: #732d69; color: #732d69; }
.brands-single .pa-bs-filter i { font-size: 17px; }

@media (max-width: 1024px) {
  .brands-single .pa-bs-filter { display: inline-flex; }

  /* بلا درج القالب (‎MmenuLight‎): اللوحة تُطوى فوق المنتجات — انظر السكربت.
     تُخفى بالارتفاع لا بـ‎display‎: المكوّن يقيس ارتفاع أقسامه عند الرسم،
     والمخفيّ بـ‎display‎ يُقاس صفراً فتبقى أقسامه مطويّة بعد فتحه */
  .brands-single .pa-bs-inline { width: 100%; margin-bottom: 16px; }
  .brands-single .pa-bs-inline:not(.pa-bs-open) {
    height: 0;
    margin: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

@media (max-width: 639px) {
  .brands-single .pa-bs-toolbar { justify-content: space-between; }
  .brands-single .pa-bs-actions { width: 100%; }
  .brands-single .pa-bs-sort-label { display: none; }
  .brands-single .pa-bs-sort { flex: 1 1 0%; }
  .brands-single .pa-bs-search { flex-basis: 100%; max-width: none; }
}