@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700;800&family=Amiri:wght@400;700&family=Bodoni+Moda:wght@500&display=swap');
/* MML Line · design layer for Salla's Raed theme · v11 (draft, 2026-11-07)
   Paste into: تصميم المتجر ← (the draft version) ← تخصيص ← تخصيص متقدم ← CSS
   Pages are white; the brand colours stay on the header (cream + wine wordmark), the promo strip and the footer (wine). */

:root{
  --mml-cream:#F8EDD8; --mml-surface:#fff; --mml-ink:#241A1B; --mml-ink2:#4A3B3A; --mml-muted:#6B5E58;
  --mml-wine:#65101F; --mml-wine-deep:#4A0B17; --mml-tape:#EBD6AA; --mml-err:#9B1C2E; --mml-line:rgba(36,26,27,.1);
  --mml-green:#16A34A; --mml-soft:#F6F3EE;
  --mml-body:'Almarai','PingARLT',Tahoma,sans-serif;
  --mml-display:'Amiri','Traditional Arabic',serif;
  --mml-mark:'Bodoni Moda',Didot,'Times New Roman',serif;
}

/* ---------- Site-wide ---------- */
body.theme-raed{background:#fff;color:var(--mml-ink)}
body.theme-raed,body.theme-raed .font-pingarlt,body.theme-raed button,body.theme-raed input,
body.theme-raed select,body.theme-raed textarea,body.theme-raed h1,body.theme-raed h2,body.theme-raed h3{font-family:var(--mml-body)}

/* Header (brand cream) */
body.theme-raed .store-header .top-navbar,body.theme-raed #mainnav,body.theme-raed #mainnav .inner{background:var(--mml-cream)!important}
body.theme-raed #mainnav{box-shadow:0 1px 0 rgba(36,26,27,.08)!important}
#mainnav .navbar-brand{display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;line-height:1;direction:ltr;color:var(--mml-wine)!important;text-decoration:none}
#mainnav .navbar-brand img{display:none!important}
#mainnav .navbar-brand::before{content:"By MML";font-family:var(--mml-mark);font-size:22px;font-weight:500;letter-spacing:.01em}
#mainnav .navbar-brand::after{content:"Line";margin-top:4px;padding:0 24px 0 calc(24px + .4em);font-family:var(--mml-mark);font-size:10px;letter-spacing:.4em;
  background:linear-gradient(currentColor,currentColor) left center/16px 1px no-repeat,linear-gradient(currentColor,currentColor) right center/16px 1px no-repeat}

/* Footer (brand wine) */
body.theme-raed .store-footer,body.theme-raed .store-footer .store-footer__inner{background:var(--mml-wine)!important;color:var(--mml-cream)!important}
body.theme-raed .store-footer :is(a,p,h3,span,li,b,small,.s-contacts-title,.s-contacts-item){color:var(--mml-cream)!important}
body.theme-raed .store-footer h3{font-family:var(--mml-display)!important;font-weight:700}
body.theme-raed .store-footer .s-payments-list-item{background:#fff;border-radius:4px}
body.theme-raed .store-footer :is(.s-social-link,.s-contacts-icon){border-color:rgba(248,237,216,.35)!important;color:var(--mml-cream)!important}

/* WhatsApp, floating at the bottom corner on every page (lifts above the phone bottom bar on product pages) */
.mml-wa-float{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:bottom .3s cubic-bezier(.4,0,.2,1),transform .2s;-webkit-tap-highlight-color:transparent}
.mml-wa-float svg{width:30px;height:30px}
.mml-wa-float:active{transform:scale(.94)}
.mml-wa-float:focus-visible{outline:2px solid var(--mml-wine);outline-offset:3px}
body.mml-has-bar .mml-wa-float{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
html:has(.mml-sheet:not([hidden])) .mml-wa-float{display:none}
@media (min-width:768px){.mml-wa-float{left:24px;bottom:24px}}

/* ---------- Home page ---------- */
/* Banners («صور متحركة»): one full-width banner at a time; before Salla's script runs, only the first shows */
.s-block--photos-slider.mml-banner{margin-top:0!important;padding:14px 16px 0!important}
@media (min-width:768px){.s-block--photos-slider.mml-banner{padding:24px 0 0!important}}
.mml-banner salla-slider.photos-slider .swiper{padding-left:0!important;padding-right:0!important;padding-bottom:22px!important}
.mml-banner salla-slider.photos-slider .swiper-slide{width:100%!important;margin:0!important;border-radius:0!important}
.mml-banner salla-slider.photos-slider .swiper-slide img{width:100%;height:auto;display:block;border-radius:14px!important}
.mml-banner salla-slider.photos-slider .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:4px!important}
.mml-banner salla-slider .swiper-pagination-bullet{width:16px;height:4px;border-radius:2px}
.mml-banner salla-slider .swiper-pagination-bullet-active{background:var(--mml-wine)!important}
.s-block--photos-slider salla-slider:not(.hydrated) [slot="items"]>:not(:first-child){display:none!important}

/* Headline + value line */
.mml-hero{padding-top:28px;padding-bottom:4px;text-align:center}
.mml-hero .mml-h1{margin:0;font-family:var(--mml-display)!important;font-size:26px;line-height:1.55;font-weight:700;color:var(--mml-ink)}
.mml-hero .mml-value{margin:8px auto 0;max-width:34em;font-size:14px;line-height:1.9;color:var(--mml-muted)}
@media (min-width:768px){.mml-hero{padding-top:44px}.mml-hero .mml-h1{font-size:36px}.mml-hero .mml-value{font-size:16px}}

/* Section titles (ours and Raed's): display font, arrows on the same line */
body.theme-raed :is(.s-slider-block__title-right h2,.similar-products__title,.s-block__title h2,.s-comments-header h2,.s-reviews-header){font-family:var(--mml-display)!important;font-weight:700!important;font-size:24px!important;color:var(--mml-ink)!important}
.mml-home .s-slider-block__title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mml-home .s-slider-block__title-nav{display:flex!important;gap:8px}
.mml-home .s-slider-nav-arrow{width:36px;height:36px;border-radius:50%;border:1px solid rgba(36,26,27,.18);background:#fff;color:var(--mml-ink);display:flex;align-items:center;justify-content:center}
.mml-home .s-slider-nav-arrow.swiper-button-disabled{opacity:.35}
.mml-home .s-slider-nav-arrow svg{width:14px;height:14px;fill:currentColor}
/* Raed pads carousels unevenly (48px / 5px) for its product rows; ours bleed evenly to the screen edges */
.mml-best salla-slider .swiper{padding-left:0!important;padding-right:0!important}
.mml-latest salla-slider .swiper{padding-left:0!important;padding-right:10px!important}

/* «أحدث المنتجات»: shoppable reels. Phones: one reel, the next peeking in by 10–20% */
.mml-latest .mml-clip-slide{width:84%!important}
@media (min-width:768px){.mml-latest .mml-clip-slide{width:31%!important}}
@media (min-width:1200px){.mml-latest .mml-clip-slide{width:23%!important}}
.mml-clip,.mml-best-card{display:block;text-decoration:none!important;color:var(--mml-ink)!important}
.mml-clip{position:relative}
.mml-clip-media{position:relative;display:block;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--mml-soft)}
.mml-clip-media video,.mml-video video{width:100%;height:100%;object-fit:cover;display:block}
.mml-clip-hit{position:absolute;inset:0;z-index:1}
/* the shop card on each clip: frosted glass, the piece's photo, name, price and a round bag button */
.mml-shop{position:absolute;inset-inline:10px;bottom:10px;z-index:2;display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;
  background:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 8px 24px -10px rgba(20,14,15,.45);text-decoration:none!important;color:var(--mml-ink)!important}
.mml-shop .th{flex:0 0 auto;width:44px;height:58px;border-radius:9px;object-fit:cover;background:var(--mml-soft)}
.mml-shop .tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mml-shop .tx b{font-size:13px;font-weight:700;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mml-shop .mml-p{font-size:13px}
.mml-shop .mml-made{font-size:12px;font-weight:700;color:var(--color-primary,var(--mml-wine))}
.mml-shop .go{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--color-primary,var(--mml-wine));color:#fff;transition:transform .2s}
@media (hover:hover){.mml-clip:hover .mml-shop .go{transform:scale(1.07)}}
/* pause / play on each clip (above the links) */
.mml-pp{position:absolute;top:8px;inset-inline-end:8px;z-index:3;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(20,14,15,.38);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mml-pp:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mml-pp .i-play,.is-paused>.mml-pp .i-pause{display:none}
.is-paused>.mml-pp .i-play{display:block}
/* the phone would not start the clip by itself (iPhone Low Power Mode): a big play button in the middle */
.is-blocked>.mml-pp{top:50%;left:50%;inset-inline-end:auto;transform:translate(-50%,-50%);width:64px;height:64px;background:rgba(20,14,15,.45)}
.is-blocked>.mml-pp svg{width:24px;height:24px}
.mml-hide{display:none!important}
/* a line under our section titles */
.mml-home .s-slider-block__title-right{flex:1 1 auto;min-width:0}
.mml-home .mml-sub{margin:4px 0 0;font-size:13px;line-height:1.7;font-weight:400;color:var(--mml-muted)}
.mml-p{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--mml-wine)}
.mml-p s{font-weight:400;color:var(--mml-muted)}
.mml-p .sicon-sar{font-size:.9em}

/* «الأكثر مبيعاً»: one hero card in the middle (tag, name, price and a round button on the photo), neighbours small and faded */
.mml-best{margin-top:30px}
.mml-home .mml-best .s-slider-block__title{justify-content:center!important;text-align:center}
.mml-home .mml-best .s-slider-block__title-right{flex:0 1 auto}
.mml-home .mml-best .s-slider-block__title-nav{display:none!important}
/* the slider's coverflow effect sets each card's position, size and stacking; we only fade the neighbours */
.mml-best .mml-best-slide{width:74%!important;padding-bottom:32px;transition:opacity .35s,filter .35s}
.mml-best .mml-best-slide:not(.swiper-slide-active){opacity:.6;filter:saturate(.6)}
@media (min-width:768px){.mml-best .mml-best-slide{width:40%!important}}
@media (min-width:1200px){.mml-best .mml-best-slide{width:30%!important}}
.mml-best-card{position:relative}
.mml-best-img{display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--mml-soft);box-shadow:0 22px 40px -18px rgba(36,26,27,.45)}
.mml-best-img img{width:100%;height:100%;object-fit:cover;display:block}
.mml-best-tag{position:absolute;top:12px;inset-inline-start:12px;padding:5px 11px;border-radius:999px;background:#EBD6AA;color:var(--mml-wine);font-size:11px;font-weight:800;line-height:1.4}
.mml-best-info{position:absolute;inset-inline:12px;bottom:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.68);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mml-best-info b{min-width:0;font-size:14px;font-weight:800;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mml-best-info .mml-p{flex:0 0 auto}
.mml-best-go{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--color-primary,var(--mml-wine));color:#fff;box-shadow:0 0 0 5px #fff,0 12px 22px -8px rgba(101,16,31,.6)}
.mml-best-go svg{width:22px;height:22px}
.mml-best :is(.mml-best-tag,.mml-best-info,.mml-best-go){transition:opacity .25s}
.mml-best .mml-best-slide:not(.swiper-slide-active) :is(.mml-best-tag,.mml-best-info,.mml-best-go){opacity:0}

/* Reviews: hidden until Salla has at least one */
.mml-reviews:not(:has(.s-reviews-container)){display:none!important}

/* Three checks */
/* «آراء العملاء»: customers' own words (samples only on the preview link), one card and a peek of the next */
.mml-testi{margin-top:30px}
.mml-home .mml-testi .s-slider-block__title{justify-content:center!important;text-align:center}
.mml-home .mml-testi .s-slider-block__title-right{flex:0 1 auto}
.mml-home .mml-testi .s-slider-block__title-nav{display:none!important}
.mml-testi salla-slider .swiper{padding-left:0!important;padding-right:10px!important}
.mml-testi .swiper-wrapper{align-items:stretch}
.mml-testi .mml-testi-slide{width:84%!important;height:auto!important}
@media (min-width:768px){.mml-testi .mml-testi-slide{width:44%!important}}
@media (min-width:1200px){.mml-testi .mml-testi-slide{width:31%!important}}
.mml-testi-card{position:relative;height:100%;margin:0;padding:22px 20px 18px;border-radius:18px;background:var(--mml-soft);display:flex;flex-direction:column;gap:12px}
.mml-testi-card::before{content:"\201D";position:absolute;top:8px;inset-inline-end:18px;font-family:var(--mml-display);font-size:64px;line-height:1;color:#E3CB98}
.mml-testi-card blockquote{margin:0;padding-inline-end:28px;font-size:14px;line-height:1.9;color:var(--mml-ink)}
.mml-testi-card figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.mml-testi-card figcaption b{font-size:14px;font-weight:800;color:var(--mml-ink)}
.mml-testi-card figcaption span{font-size:12px;color:var(--mml-muted)}
.mml-sample{align-self:flex-start;padding:2px 10px;border-radius:999px;background:#fff;color:var(--mml-muted);font-size:11px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(36,26,27,.12)}

/* «جميع العبايات» at the end of the home page: the first two pieces; its «عرض الكل» link opens the full list */
.mml-all custom-salla-product-card:nth-of-type(n+3),
body.index section.s-block:has(a.s-block__display-all[href*="latest-products"]) custom-salla-product-card:nth-of-type(n+3){display:none!important}

.mml-usps ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-radius:18px;background:#fff;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(36,26,27,.10),0 18px 36px -28px rgba(36,26,27,.35)}
.mml-usps li{display:flex;align-items:center;gap:14px;padding:16px 16px 16px 18px}
.mml-usps li+li{box-shadow:inset 0 1px 0 rgba(36,26,27,.08)}
.mml-usps .ic{position:relative;flex:0 0 auto;width:50px;height:50px;border-radius:15px;background:linear-gradient(145deg,#FBF4E6,#F1E3C6);color:var(--mml-wine);
  display:flex;align-items:center;justify-content:center}
.mml-usps .ic>svg{width:24px;height:24px}
.mml-usps .ck{position:absolute;bottom:-5px;inset-inline-end:-5px;width:21px;height:21px;border-radius:50%;background:var(--mml-green);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2.5px #fff}
.mml-usps .ck svg{width:11px;height:11px}
.mml-usps .tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.mml-usps .tx b{font-size:15px;font-weight:800;line-height:1.5;color:var(--mml-ink)}
.mml-usps .tx span{font-size:13px;line-height:1.75;color:var(--mml-muted)}
@media (min-width:768px){
  .mml-usps ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mml-usps li{flex-direction:column;justify-content:flex-start;text-align:center;gap:12px;padding:28px 22px}
  .mml-usps li+li{box-shadow:inset -1px 0 0 rgba(36,26,27,.08)}
  .mml-usps .tx{align-items:center}
}

/* ---------- Product cards (home, categories, related) ---------- */
body.theme-raed custom-salla-product-card.s-product-card-entry{background:#fff!important}
/* product cards: the photo keeps its 3:4 shape and the text area takes any spare height, so photos line up across a row */
custom-salla-product-card.s-product-card-vertical .s-product-card-image{flex:0 0 auto!important;aspect-ratio:3/4;height:auto!important}
custom-salla-product-card.s-product-card-vertical .s-product-card-image img{height:100%!important}
custom-salla-product-card.s-product-card-vertical .s-product-card-content{flex:1 1 auto;display:flex;flex-direction:column}
custom-salla-product-card.s-product-card-vertical .s-product-card-content-footer{margin-top:auto}
/* products here are sized to order, so the card button opens the product page to pick a size */
html.mml-cards custom-salla-product-card salla-add-product-button[product-status="sale"] .s-button-text{overflow:visible!important}
html.mml-cards custom-salla-product-card salla-add-product-button[product-status="sale"] .s-button-text>span{font-size:0!important}
html.mml-cards custom-salla-product-card salla-add-product-button[product-status="sale"] .s-button-text>span::after{content:"اختاري المقاس";font-size:14px;font-weight:700}
/* sold-out pieces look like the rest: no grey photo, no «نفدت الكمية»; the button opens the page, where she can ask for her size */
custom-salla-product-card.s-product-card-out-of-stock img{filter:none!important;opacity:1!important}
custom-salla-product-card .s-product-card-out-badge{display:none!important}
html.mml-cards custom-salla-product-card.s-product-card-out-of-stock .s-product-card-content-footer{cursor:pointer}
html.mml-cards custom-salla-product-card.s-product-card-out-of-stock .s-product-card-content-footer>*{display:none!important}
html.mml-cards custom-salla-product-card.s-product-card-out-of-stock .s-product-card-content-footer::before{content:"اطلبيها بمقاسكِ";flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  min-height:40px;border-radius:.375rem;border:1px solid var(--color-primary,var(--mml-wine));color:var(--color-primary,var(--mml-wine));font-size:14px;font-weight:700;background:#fff}

/* ---------- Product page ---------- */
.product-single .store-header .top-navbar{display:none!important}
.product-single .main-content :is(.bg-white,section.bg-white){background:transparent!important}
.product-single .product-form salla-product-options{background:transparent!important;padding:0!important;margin:0!important;box-shadow:none!important}
.product-single .main-content h1{font-family:var(--mml-display)!important;font-weight:700!important;font-size:28px!important;line-height:1.35!important;color:var(--mml-ink)!important;margin-bottom:6px!important}
.product-single .main-content .product-entry__sub-title{font-size:14px!important;line-height:1.7!important;color:var(--mml-muted)!important}
.product-single .main-content .mml-price p{color:var(--mml-wine)!important;font-size:28px!important;font-weight:800!important}
.product-single .main-content salla-social-share{display:none!important}
.product-single .sticky-product-bar__quantity{display:none!important}
.product-single .mml-hidden{display:none!important}
.product-single .sticky-product-bar{padding:20px 0 0!important;background:transparent!important;box-shadow:none!important}
.product-single salla-add-product-button .s-button-element{min-height:48px;border-radius:12px!important;font-size:16px!important;font-weight:800!important}

.product-single .main-content > .product__description{padding:0!important;margin:12px 0 0!important;font-size:15px;line-height:1.9;color:var(--mml-ink2)}

/* Promo strip: a rolling line in Arabic reading direction; tap copies the code.
   The placeholder (.app-inner::before) shows the same offer, still, until the script swaps in the rolling strip.
   Changing the offer? Update PROMO in the JS and the placeholder text here. */
body.theme-raed .app-inner::before{content:"خصم ١٠٪ على طلبكِ الأول بكود FRST10";display:flex;align-items:center;justify-content:center;height:36px;
  background:linear-gradient(90deg,var(--mml-wine-deep),var(--mml-wine) 50%,var(--mml-wine-deep));color:var(--mml-cream);font:700 13px/1 var(--mml-body)}
html.mml-promo-on body.theme-raed .app-inner::before,html.mml-promo-off body.theme-raed .app-inner::before{display:none}
.mml-promo{position:relative;overflow:hidden;height:36px;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  background:linear-gradient(90deg,var(--mml-wine-deep),var(--mml-wine) 50%,var(--mml-wine-deep));color:var(--mml-cream);font-family:var(--mml-body);font-size:13px;box-shadow:inset 0 -1px 0 rgba(235,214,170,.25)}
.mml-promo-track{display:flex;flex:0 0 auto;width:max-content;animation:mml-roll var(--mml-roll,40s) linear infinite;will-change:transform}
.mml-promo-group{display:flex;flex:0 0 auto}
.mml-promo-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mml-promo-item .off{color:var(--mml-tape);font-weight:800;letter-spacing:.02em}
.mml-promo-item .code{background:var(--mml-tape);color:var(--mml-wine);font-weight:800;border-radius:4px;padding:4px 8px;letter-spacing:.08em;direction:ltr;font-size:12px}
.mml-promo-item i{font-style:normal;color:var(--mml-tape);opacity:.7;font-size:10px;margin:0 22px}
@keyframes mml-roll{from{transform:translateX(0)}to{transform:translateX(50%)}}
.mml-promo:hover .mml-promo-track,.mml-promo:focus-visible .mml-promo-track{animation-play-state:paused}
.mml-promo.copied::after{content:"تم نسخ الكود ✦ FRST10";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--mml-wine);color:var(--mml-tape);font-weight:800}
@media (prefers-reduced-motion:reduce){.mml-promo-track{animation:none}}
/* 11/11 countdown at the left end of the top bar, where the rolling line comes in (home + the winter five; the JS adds it only
   inside the offer window). The line slides out from under its faded right edge; the time sits in the same gold chip as a code. */
.mml-cd{position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;align-items:center;gap:7px;padding:0 34px 0 10px;
  background:linear-gradient(270deg,rgba(74,11,23,0) 0,var(--mml-wine-deep) 22px);direction:rtl;pointer-events:none}
.mml-cd::after{content:"";position:absolute;right:24px;top:11px;bottom:11px;width:1px;background:rgba(235,214,170,.4)}
.mml-cd .lbl{color:var(--mml-tape);font-weight:800;font-size:12px;white-space:nowrap}
.mml-cd .t{min-width:70px;box-sizing:border-box;text-align:center;background:var(--mml-tape);color:var(--mml-wine);border-radius:4px;padding:5px 7px 4px;
  font:800 12.5px/1 var(--mml-body);letter-spacing:.06em;direction:ltr;font-variant-numeric:tabular-nums}
@media (min-width:768px){.mml-cd{padding:0 44px 0 16px;gap:9px;background:linear-gradient(270deg,rgba(74,11,23,0) 0,var(--mml-wine-deep) 28px)}.mml-cd::after{right:32px}
  .mml-cd .lbl{font-size:13px}.mml-cd .t{min-width:78px;font-size:13.5px}}

/* Buttons: "أضف إلى السلة" + our "إتمام الطلب" side by side, equal size.
   Hidden: "اشترِ الآن" (Salla's fast-checkout popup) and the Apple Pay express button (its sheet takes the address from Apple Wallet).
   Apple Pay is still offered at the payment step of checkout (Salla passes has_apple_pay=true to checkout on Apple devices). */
.product-single .product-form salla-add-product-button .s-add-product-button-main>:not(:first-child),
.product-single .product-form salla-quick-buy{display:none!important}
.product-single .product-form salla-add-product-button .s-add-product-button-main{flex:1 1 auto!important;width:auto!important}
.product-single .product-form salla-add-product-button .s-add-product-button-main>:first-child{flex:1 1 auto!important;width:100%!important}
.product-single .product-form salla-add-product-button .s-add-product-button-main .s-button-text span{display:inline!important}
.product-single .product-form salla-add-product-button .s-button-element{height:48px!important;min-height:48px!important;border-radius:12px!important}
.product-single .product-form .s-add-product-button-sr-only{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;white-space:nowrap!important;margin:0!important;padding:0!important;font-size:16px;font-weight:800}
/* icon and label side by side (Tailwind makes svg a block, which stacked the icon above the words on iPhone) */
.product-single .product-form salla-add-product-button .s-add-product-button-main .s-button-text{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.product-single .product-form salla-add-product-button .s-add-product-button-main .s-button-text svg{display:inline-block!important;width:20px!important;height:20px!important;flex:0 0 auto!important;fill:currentColor}
.product-single .product-form salla-add-product-button.s-add-product-button-with-apple-pay{display:flex!important}
.product-single .product-form .sticky-product-bar{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:8px;align-items:flex-start!important}
.product-single .product-form .sticky-product-bar>salla-add-product-button,
.product-single .product-form .sticky-product-bar>.mml-checkout{flex:1 1 0!important;min-width:0!important;max-width:none!important;width:auto!important;margin:0!important}
.product-single .product-form .sticky-product-bar>.mml-checkout{height:48px!important;min-height:48px!important;padding:0!important;border:0!important;border-radius:12px!important;
  background:#000!important;color:#fff!important;font-family:inherit;font-size:16px!important;font-weight:800!important;line-height:1!important;white-space:nowrap;cursor:pointer}
/* the usual pair: add to cart white with a black outline, checkout solid black */
.product-single .product-form salla-add-product-button .s-add-product-button-main .s-button-element.s-button-solid.s-button-primary,
.product-single .product-form salla-add-product-button .s-add-product-button-main .s-button-element.s-button-solid.s-button-primary:hover,
.product-single .product-form salla-add-product-button .s-add-product-button-main .s-button-element.s-button-solid.s-button-primary:focus{background:#fff!important;color:#000!important;border:0!important;box-shadow:inset 0 0 0 1.5px #000!important}
.product-single .product-form .sticky-product-bar>.mml-checkout:active{transform:scale(.98)}
.product-single .product-form .sticky-product-bar>.mml-checkout[aria-busy="true"]{opacity:.65;cursor:progress}

/* One suggestions section ("منتجات قد تعجبك"): hide Salla's "منتجات مشابهة" block, and close the empty gaps below the product */
.product-single .s-blocks-wrapper.s-before-related{display:none!important}
.product-single main>:not(.container--product-details):not(.container--breadcrumbs){margin-top:0!important}
.product-single main>salla-comments .s-comments{margin-top:24px}
.product-single salla-comments .s-comments:not(:has(.s-comments-header>*)){padding:0!important;margin:0!important}
.product-single salla-comments .s-comments:not(:has(.s-comments-header>*)) :is(salla-reviews-summary,.s-comments-header){margin:0!important}
.product-single .main-content>:is(.s-block--bundle-out-of-stock-alternative,salla-quick-order){margin-top:0!important}
.product-single main>.container.mb-5{padding-top:28px}

/* Gallery before Salla's slider script runs: show only the first photo (no stacked-photos flash) */
.product-single salla-slider.details-slider:not(.hydrated) [slot="items"]>:not(:first-child),
.product-single salla-slider.details-slider:not(.hydrated) [slot="thumbs"],
.product-single salla-slider.details-slider:not(.hydrated)>salla-button{display:none!important}
.product-single salla-slider.details-slider:not(.hydrated){display:block;overflow:hidden;border-radius:8px}
.product-single salla-slider.details-slider:not(.hydrated) [slot="items"]>:first-child{display:block}
.product-single salla-slider.details-slider:not(.hydrated) [slot="items"]>:first-child img{width:100%;height:100%;object-fit:cover}

/* Gallery */
.product-single .details-slider .s-slider-container .swiper-slide img{object-fit:cover!important}

/* Size: Salla's own dropdown; «دليل المقاسات» on the label row, a line under it */
.product-single .s-product-options-option-container:has(.mml-size-box){display:block!important;width:100%}
.product-single .mml-size-box{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;width:100%;padding-top:12px}
.product-single .mml-size-box>.s-product-options-option-content,.product-single .mml-size-box>.s-product-options-option-content>div{width:100%}
.product-single .mml-size-box>.s-product-options-option-label{grid-row:1;grid-column:1;margin:0!important}
.product-single .mml-size-box>.s-product-options-option-label b{font-size:16px;font-weight:800;color:var(--mml-ink)}
.product-single .mml-size-box>.s-product-options-option-label :is(small,b>span){display:none!important}
.product-single .mml-size-box>.mml-open-guide{grid-row:1;grid-column:2}
.product-single .mml-size-box>.s-product-options-option-content{grid-row:2;grid-column:1/-1}
.product-single .mml-size-box>.mml-hint{grid-row:3;grid-column:1/-1}
.product-single .mml-size-box select.s-form-control{width:100%;height:48px;padding:0 14px;border-radius:12px!important;border:1px solid rgba(36,26,27,.28)!important;background-color:#fff!important;
  font-size:16px!important;font-weight:700;color:var(--mml-ink);box-shadow:none!important}
.product-single .mml-size-box select.s-form-control:focus{border-color:var(--mml-ink)!important;outline:none}
.product-single .mml-size-box.err select.s-form-control{border-color:var(--mml-err)!important;box-shadow:0 0 0 1px var(--mml-err)!important}
.mml-link{min-height:44px;border:0;background:transparent;color:var(--mml-wine);font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:4px;padding:0;cursor:pointer}
.mml-hint{margin:8px 0 0;font-size:14px;line-height:1.7;color:var(--mml-muted)}
.mml-hint.err{color:var(--mml-err);font-weight:700}

/* Sold-out piece: invitation to have it made to her size, under the price */
.mml-custom{margin:12px 0 4px;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 10px 10px 14px;border-radius:12px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(101,16,31,.28);text-decoration:none!important;color:var(--mml-ink)!important}
.mml-custom .dot{flex:0 0 auto;width:36px;height:36px;border-radius:18px;background:#25D366;display:flex;align-items:center;justify-content:center}
.mml-custom .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mml-custom .txt b{font-size:14px;font-weight:800;line-height:1.6}
.mml-custom .txt span{font-size:12px;line-height:1.7;color:var(--mml-muted)}
.mml-custom .chev{flex:0 0 auto;color:var(--mml-wine)}

/* The piece in motion, under the buttons */
.mml-video{position:relative;margin:20px auto 0;width:min(100%,300px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--mml-soft)}

/* Fabric + stitching cards (under the steps, after the buttons) */
.mml-callouts{margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mml-callout{display:flex;flex-direction:column;gap:6px;padding:14px 12px;border-radius:12px;background:var(--mml-surface);box-shadow:inset 0 0 0 1px rgba(36,26,27,.1)}
.mml-callout .ic{width:40px;height:40px;border-radius:20px;background:rgba(235,214,170,.55);color:var(--mml-wine);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.mml-callout b{font-size:14px;font-weight:800;color:var(--mml-ink);line-height:1.5}
.mml-callout>span:last-child{font-size:12px;line-height:1.7;color:var(--mml-muted)}

/* Steps */
.mml-steps{margin:20px 0 0;padding:18px 0;border-top:1px solid var(--mml-line);border-bottom:1px solid var(--mml-line)}
.mml-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mml-steps li{display:flex;flex-direction:column;gap:4px}
.mml-steps .n{font-family:var(--mml-mark);font-size:24px;line-height:1;color:var(--mml-wine)}
.mml-steps .t{font-size:14px;font-weight:700;margin-top:4px;color:var(--mml-ink)}
.mml-steps .d{font-size:12px;line-height:1.6;color:var(--mml-muted)}
.mml-follow{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:rgba(235,214,170,.35);display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.6;color:var(--mml-ink2)}
.mml-follow svg{flex:0 0 auto;color:var(--mml-wine)}
.mml-care{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.mml-care li{position:relative;padding-right:16px}
.mml-care li::before{content:"";position:absolute;right:0;top:.8em;width:6px;height:6px;border-radius:3px;background:var(--mml-tape);box-shadow:0 0 0 1px rgba(101,16,31,.35)}

/* WhatsApp card (end of the product page) */
.mml-wa{margin-top:20px;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 8px 8px 16px;border-radius:12px;background:var(--mml-surface);box-shadow:inset 0 0 0 1px rgba(36,26,27,.1);text-decoration:none!important;color:var(--mml-ink)!important}
.mml-wa .dot{flex:0 0 auto;width:40px;height:40px;border-radius:20px;background:#25D366;display:flex;align-items:center;justify-content:center}
.mml-wa .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mml-wa .txt b{font-size:14px}
.mml-wa .txt span{font-size:12px;line-height:1.6;color:var(--mml-muted)}
.mml-wa .chev{flex:0 0 auto;color:var(--mml-wine)}

/* Accordions */
.mml-acc{padding:28px 0 0}
.mml-acc-item{border-top:1px solid var(--mml-line)}
.mml-acc-item:last-child{border-bottom:1px solid var(--mml-line)}
.mml-acc-btn{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0;border:0;background:transparent;color:var(--mml-ink);font-size:16px;font-weight:700;text-align:right;cursor:pointer}
.mml-plus{position:relative;width:14px;height:14px;color:var(--mml-wine);flex:0 0 auto}
.mml-plus::before,.mml-plus::after{content:"";position:absolute;background:currentColor}
.mml-plus::before{top:6px;right:0;width:14px;height:1.5px}
.mml-plus::after{top:0;right:6px;width:1.5px;height:14px;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.mml-acc-btn[aria-expanded="true"] .mml-plus::after{transform:scaleY(0)}
.mml-acc-panel{padding:0 0 20px;font-size:14px;line-height:1.9;color:var(--mml-ink2)}
.mml-acc-panel[hidden]{display:none!important}
.mml-acc-panel p{margin:0}
.mml-acc-panel a{color:var(--mml-wine);font-weight:700}

/* Stock left, in red under the price */
.mml-stock{margin:4px 0 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;line-height:1.6;color:#C81E1E}
.mml-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* Tabby / Tamara: their own logos beside the price, small to match it; tapping them opens their boxes just below */
.mml-bnpl{display:inline-flex;align-items:center;gap:6px;padding:6px 0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mml-bnpl .tabby svg{display:block;width:46px;height:18px}
.mml-bnpl .tamara{display:block;width:56px;height:19px}
.main-content:has(.mml-bnpl-panel salla-installment.hydrated:empty) .mml-bnpl{display:none}
.mml-bnpl-panel{max-height:0;overflow:hidden;visibility:hidden}
.mml-bnpl-panel.open{max-height:none;overflow:visible;visibility:visible;padding-top:12px}
.mml-bnpl-panel salla-installment>*{margin:0 0 10px!important}

/* Reviews + related */
.product-single salla-comments :is(.s-comments,.s-comments-container){background:transparent!important}

/* Size guide sheet */
.mml-sheet{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.mml-sheet[hidden]{display:none!important}
.mml-sheet .backdrop{position:absolute;inset:0;border:0;background:rgba(36,26,27,.45);cursor:pointer}
.mml-sheet .panel{position:relative;width:100%;max-width:480px;background:#fff;border-radius:24px 24px 0 0;padding:8px 20px calc(24px + env(safe-area-inset-bottom,0px));max-height:86vh;overflow-y:auto;box-shadow:0 -16px 40px rgba(36,26,27,.2);font-family:var(--mml-body);color:var(--mml-ink)}
.mml-grip{width:36px;height:4px;border-radius:2px;background:rgba(36,26,27,.18);margin:0 auto 8px}
.mml-sheet-head{display:flex;align-items:center;justify-content:space-between}
.mml-sheet-head h2{margin:0;font-family:var(--mml-display);font-size:24px;font-weight:700}
.mml-x{width:44px;height:44px;border:0;border-radius:22px;background:rgba(36,26,27,.05);color:var(--mml-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.mml-how{display:flex;align-items:center;gap:16px;margin-top:8px}
.mml-how p{margin:0;font-size:14px;line-height:1.9;color:var(--mml-ink2)}
.mml-how b{color:var(--mml-ink)}
.mml-table{margin-top:20px}
.mml-thead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 12px 8px;font-size:12px;color:var(--mml-muted);border-bottom:1px solid var(--mml-ink)}
.mml-row{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;min-height:48px;padding:0 12px;border:0;border-bottom:1px solid rgba(36,26,27,.08);background:transparent;color:var(--mml-ink);font-size:16px;text-align:right;cursor:pointer}
.mml-row.on{background:rgba(235,214,170,.6)}
.mml-row b{font-weight:800}
.mml-row span{font-size:14px;color:var(--mml-ink2)}
.mml-row em{font-style:normal;font-size:12px;font-weight:700;color:var(--mml-wine);text-align:left}
.mml-note{margin:16px 0 0;font-size:14px;line-height:1.8;color:var(--mml-muted)}
.mml-note a{color:var(--mml-wine);font-weight:800}

/* Bottom bar (phones) */
.mml-bar{display:none}

/* ---------- Phones ---------- */
@media (max-width:767px){
  .product-single .container--breadcrumbs{display:none!important}
  /* the photo at its own 3:4 shape (2026-11-11: the old half-screen cap made the box near-square on iPhones and cut the
     studio shots' faces and hems); the sticky bottom bar keeps price + add-to-cart in view */
  .product-single .details-slider .s-slider-container .swiper-slide{height:auto!important;aspect-ratio:3/4}
  .product-single salla-slider.details-slider:not(.hydrated) [slot="items"]>:first-child{height:auto;aspect-ratio:3/4}
  .product-single salla-slider.details-slider:not(.hydrated){padding-bottom:84px}
  .product-single .details-slider .s-slider-container .swiper-slide img{height:100%!important;width:100%!important;border-radius:8px}
  .product-single .details-slider .s-slider-thumbs{margin-top:8px}
  .product-single .details-slider .s-slider-thumbs .swiper-slide{height:76px!important}
  .product-single .details-slider .s-slider-thumbs .swiper-slide img{height:100%!important;object-fit:cover!important}

  .mml-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 -1px 0 rgba(36,26,27,.08),0 -8px 24px rgba(36,26,27,.06);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));align-items:center;gap:16px;
    transform:translateY(110%);transition:transform .3s cubic-bezier(.4,0,.2,1);font-family:var(--mml-body)}
  .mml-bar.on{transform:none}
  .mml-bar .p{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;min-width:88px}
  .mml-bar .p b{font-size:16px;font-weight:800;line-height:1;color:var(--mml-ink)}
  .mml-bar .mml-bar-label{font-size:12px;color:var(--mml-muted);line-height:1}
  .mml-bar .mml-bar-label.err{color:var(--mml-err)}
  .mml-bar .cta{flex:1 1 auto;height:48px;border:0;border-radius:12px;background:#fff;color:#000;font-size:16px;font-weight:800;box-shadow:inset 0 0 0 1.5px #000;cursor:pointer}
  .mml-bar .cta:active{transform:scale(.98)}
  body.mml-has-bar{padding-bottom:76px}
  /* Raed's own sticky bar would duplicate ours */
  .is-sticky-product-bar .sticky-product-bar{position:static!important;transform:none!important;opacity:1!important;box-shadow:none!important}
}

@media (prefers-reduced-motion:reduce){.mml-bar,.mml-plus::after,.mml-best .mml-best-slide,.mml-wa-float{transition:none}}