/* AZ TV · custom CSS for the Salla theme ملاك (ANGEL by AfterAds)
   ------------------------------------------------------------------
   The ONE file to paste into the store's custom CSS. Everything else is theme settings and block content (05-design/SALLA-SETUP.md).
   Before this file: in the theme settings turn dark mode on and set the colours from SALLA-SETUP.md (gold #EACF69, black #0D0D0D,
   surface #1A1A1A). Those settings already make the page black and gold; this file only refines what settings cannot reach.
   Selectors use the theme's own classes and the order of the blocks, never block ids, so re-adding a block keeps its look. */

:root {
  --az-gold: #EACF69;
  --az-ink: #0D0D0D;
  --az-surface: #1A1A1A;
  --az-surface-2: #23221F;
  --az-text: #F3F0E6;
  --az-muted: #B9B4A6;
  --az-line: rgba(243, 240, 230, .1);
  --az-gold-wash: rgba(234, 207, 105, .1);
  /* page grid: one content width, one gutter, one card gap and one section rhythm for the whole page */
  --az-page: 1200px;
  --az-gutter: clamp(16px, 3vw, 32px);
  --az-gap: 20px;
  --az-section: clamp(56px, 6.5vw, 96px);
  --az-title-gap: clamp(22px, 2.4vw, 34px);
}
@media (max-width: 767px) { :root { --az-gap: 12px; } }

/* ---------- Page grid ----------
   The theme container runs to 1480px with a 10px edge, so every block ended up with its own width. One column for all of them
   (header and footer too), so every section starts and ends on the same two lines. */
.container { max-width: calc(var(--az-page) + 2 * var(--az-gutter)) !important; padding-inline: var(--az-gutter) !important; }
/* homepage (body.index): one vertical rhythm, the same space before every section and a shorter one between a title block and
   the block it introduces (the theme already merges them: .merge-bottom + .s-block). Other pages keep the theme spacing. */
.index .app-inner > section.s-block { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: var(--az-section) !important; }
.index .app-inner > section.s-block:first-of-type { margin-top: 0 !important; }
.index .app-inner > .s-angel--divider.merge-bottom + section.s-block { margin-top: var(--az-title-gap) !important; }

/* ---------- Section titles (block «عنوان القسم» / s-angel--divider) ----------
   Long Arabic titles wrap instead of running off the screen; the button becomes a pill.
   Every section title has the same size, colour and spacing, whichever block prints it (title block, store features, FAQ, testimonials).
   «xl» titles are the same size too: only the hero (01) and the final call to action (17) are larger. The side lines are off. */
.s-angel--divider .divider-title h2, .s-block--features .s-block__title h2, .s-block--faqs .s-block__title h2, .s-block--testimonials .s-slider-block__title h2 {
  white-space: normal !important; margin: 0; font-size: clamp(24px, 2.5vw, 34px) !important; font-weight: 700; line-height: 1.4; color: var(--az-text) !important; text-align: center; text-wrap: balance;
}
.s-angel--divider .divider-title p, .s-block--features .s-block__title p, .s-block--faqs .s-block__title p {
  white-space: normal !important; margin: 8px auto 0 !important; font-size: 16px; line-height: 1.8; color: var(--az-muted) !important; max-width: 56ch; text-align: center;
}
.s-block--features .s-block__title, .s-block--faqs .s-block__title { margin: 0 0 var(--az-title-gap) !important; }
.s-angel--divider .vertical-lines { display: none !important; }
.s-angel--divider .divider-title .flex-center > div.flex-center { width: 100%; padding-inline: 0 !important; }
.s-angel--divider .divider-container { padding-block: 0 !important; }
/* title icons (07, 11, 15 only): animated gold icons from malak/head-*.svg, motion inside the file (antennas and signal, crown and
   sparkles, renew arrows and check). The theme also spins and bobs the icon box (spinning-obj, flying-obj): off, the icon moves itself. */
.s-angel--divider .divider-icon img { width: 84px; height: 84px; max-height: none !important; }
.s-angel--divider .divider-icon .img-container { animation: none !important; }
@media (max-width: 767px) { .s-angel--divider .divider-icon img { width: 68px; height: 68px; } }
/* a title block set to «full width» in the theme (14) still sits in the column */
.s-angel--divider .divider-container:not(.container) { max-width: calc(var(--az-page) + 2 * var(--az-gutter)); margin-inline: auto; padding-inline: var(--az-gutter); }
.s-angel--divider a.divider-url {
  margin-top: 16px; min-height: 44px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--az-gold); color: var(--az-gold) !important; background: transparent;
  font-weight: 700; text-decoration: none; transition: background-color .2s, color .2s;
}
.s-angel--divider a.divider-url::after { display: none; } /* the theme underline under the button text */
.s-angel--divider a.divider-url:hover { background: var(--az-gold); color: var(--az-ink) !important; }

/* ---------- 01 Hero: the first slider of the page + the title block right after it ----------
   The slider holds the black-and-white poster (later the video). The title block is pulled up over its lower part. */
.app-inner > section.s-block--hero-slider:first-of-type .swiper-slide { position: relative; }
.app-inner > section.s-block--hero-slider:first-of-type .swiper-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--az-ink) 0%, rgba(13, 13, 13, .85) 22%, rgba(13, 13, 13, 0) 55%);
}
.app-inner > section.s-block--hero-slider:first-of-type img { filter: grayscale(1) contrast(1.05); }
/* hero video: fills the slide like a background (wide on desktop, the 3:4 phone file on phones) */
.app-inner > section.s-block--hero-slider:first-of-type video {
  display: block; width: 100% !important; height: clamp(520px, 80vh, 820px) !important; max-width: none !important;
  object-fit: cover; background: var(--az-ink);
}
.app-inner > section.s-block--hero-slider:first-of-type .video-swiper { height: auto !important; display: block !important; }
@media (max-width: 767px) { .app-inner > section.s-block--hero-slider:first-of-type video { height: 82svh !important; } }
.app-inner > section.s-block--hero-slider:first-of-type + .s-angel--divider { position: relative; z-index: 2; margin-top: clamp(-260px, -16vw, -120px) !important; }
.app-inner > section.s-block--hero-slider:first-of-type + .s-angel--divider .vertical-lines { display: none; }
.app-inner > section.s-block--hero-slider:first-of-type + .s-angel--divider .divider-title h2 { font-size: clamp(30px, 4.6vw, 60px) !important; line-height: 1.25; }
.app-inner > section.s-block--hero-slider:first-of-type + .s-angel--divider .divider-title p { font-size: clamp(15px, 1.4vw, 19px); color: var(--az-text) !important; opacity: .85; max-width: 60ch; }
.app-inner > section.s-block--hero-slider:first-of-type + .s-angel--divider a.divider-url {
  min-height: 54px; padding: 0 34px; font-size: 17px; background: var(--az-gold); color: var(--az-ink) !important;
}
.app-inner > section.s-block--hero-slider:first-of-type + .s-angel--divider a.divider-url:hover { background: var(--az-text); border-color: var(--az-text); }

/* ---------- Other full-width sliders (13 comparison, 14 second store): framed to the page width ---------- */
.app-inner > section.s-block--hero-slider:not(:first-of-type) .s-slider-container {
  width: calc(100% - 2 * var(--az-gutter)); max-width: var(--az-page); margin-inline: auto; border-radius: 24px; overflow: hidden; border: 1px solid var(--az-line);
}

/* ---------- 02 Moving strip (angel-ad): platform logos, all in white, on dark tiles ---------- */
.angel-ad__container {
  width: calc(100% - 2 * var(--az-gutter)); max-width: var(--az-page); margin-inline: auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.angel-ad__slider { gap: 14px; }
.angel-ad__item {
  flex: none; display: grid !important; place-items: center; width: 180px; height: 84px; border-radius: 16px;
  background: var(--az-surface); border: 1px solid var(--az-line);
}
/* the logo files are already white, each on the same 400x160 canvas with its visual size baked in (assets/img/malak/logo-*.png) */
.angel-ad__img { height: 64px !important; width: auto; opacity: .8; }
.angel-ad__item:hover .angel-ad__img { opacity: 1; }
@media (max-width: 767px) { .angel-ad__item { width: 132px; height: 64px; } .angel-ad__img { height: 46px !important; } }
@media (prefers-reduced-motion: reduce) { .angel-ad__slider { animation: none !important; flex-wrap: wrap; justify-content: center; } }

/* ---------- Categories (block «روابط / تصنيفات»): one tile style for 03, 04, 08 and 12 ----------
   The round avatar becomes a square tile; photos fill it, transparent icons sit on the dark surface. */
/* tablet and desktop: the theme's slider has six slots, so a row of four or five sat in the middle at its own width. All items share the
   column instead, in equal columns on the page grid (no sliding is needed when they all fit). Phones keep the theme's swipe. */
@media (min-width: 768px) {
  .s-block--categories .swiper-wrapper { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--az-gap); transform: none !important; }
  .s-block--categories .swiper { margin: 0 !important; padding: 0 !important; } /* the theme's swipe peek (48px) and -10px edges */
  .s-block--categories .swiper-slide { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .s-block--categories .slide--cat-entry { padding-inline: 0; }
  .s-block--categories .swiper-slide-duplicate { display: none !important; }
}
/* the theme gives the link a fixed 144px height with overflow hidden, which cuts the square tile and its label */
.s-block--categories .slide--cat-entry { height: auto !important; overflow: visible !important; background: transparent !important; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px; text-decoration: none; }
.s-block--categories .slide--cat-entry .lazy__bg {
  width: 100% !important; height: auto !important; aspect-ratio: 1; margin: 0 !important;
  border-radius: 18px !important; background-color: var(--az-surface) !important; background-size: cover; background-position: center;
  border: 1px solid var(--az-line); transition: border-color .25s, transform .25s !important;
}
.s-block--categories .slide--cat-entry:hover .lazy__bg { border-color: rgba(234, 207, 105, .6); transform: translateY(-3px) !important; }
.s-block--categories .slide--cat-entry span { font-size: 15.5px; line-height: 1.4 !important; color: var(--az-text); text-align: center; }
.s-block--categories .slide--cat-entry:hover span { color: var(--az-gold); }
@media (max-width: 767px) { .s-block--categories .slide--cat-entry span { font-size: 13.5px; } }

/* ---------- 08 and 12 Apps and devices (2nd and 3rd categories blocks): icon + name side by side ----------
   Four square tiles of 285px would be heavy for an icon; a low card keeps them on the page grid without the height.
   Tablets keep the square tile with the name under it (the names do not fit beside the icon there). Phones use the low card too, two by two. */
@media (min-width: 1024px), (max-width: 767px) {
  .app-inner > section:nth-child(n+2 of .s-block--categories) .slide--cat-entry {
    flex-direction: row; justify-content: flex-start; gap: 16px; padding: 16px 18px; border-radius: 18px;
    background: var(--az-surface) !important; border: 1px solid var(--az-line); transition: border-color .25s;
  }
  .app-inner > section:nth-child(n+2 of .s-block--categories) .slide--cat-entry:hover { border-color: rgba(234, 207, 105, .55); }
  .app-inner > section:nth-child(n+2 of .s-block--categories) .slide--cat-entry .lazy__bg {
    flex: none; width: 56px !important; height: 56px !important; border-radius: 14px !important; border: 0;
    background-color: var(--az-gold-wash) !important; background-size: 100% !important; background-repeat: no-repeat; background-position: center;
  }
  .app-inner > section:nth-child(n+2 of .s-block--categories) .slide--cat-entry:hover .lazy__bg { transform: none !important; }
  .app-inner > section:nth-child(n+2 of .s-block--categories) .slide--cat-entry span { font-size: 16px; font-weight: 700; text-align: start; }
}
@media (max-width: 767px) {
  .app-inner > section:nth-child(n+2 of .s-block--categories) .slide--cat-entry { gap: 10px; padding: 10px 12px; border-radius: 14px; }
  .app-inner > section:nth-child(n+2 of .s-block--categories) .slide--cat-entry .lazy__bg { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
  .app-inner > section:nth-child(n+2 of .s-block--categories) .slide--cat-entry span { font-size: 14px; }
}

/* ---------- 03 Main categories: 3D artwork that rises out of its card ----------
   Only the first categories block of the page (03). Upload the transparent 3D renders (cat-*-3d) as the category images:
   the card is drawn behind the lower part of the tile, so the object stands taller than the card. */
.app-inner > section:nth-child(1 of .s-block--categories) .swiper { padding-top: 14px; }
.app-inner > section:nth-child(1 of .s-block--categories) .slide--cat-entry { position: relative; padding: 0 0 18px; gap: 4px; }
.app-inner > section:nth-child(1 of .s-block--categories) .slide--cat-entry::before {
  content: ""; position: absolute; inset: 34% 0 0; z-index: 0; border-radius: 22px;
  background: radial-gradient(90% 60% at 50% 0%, rgba(234, 207, 105, .16), transparent 70%), var(--az-surface);
  border: 1px solid var(--az-line); transition: border-color .3s, box-shadow .3s;
}
.app-inner > section:nth-child(1 of .s-block--categories) .slide--cat-entry .lazy__bg {
  position: relative; z-index: 1; width: 92% !important; aspect-ratio: 1; margin: 0 auto -4px !important;
  background-color: transparent !important; background-size: contain !important; background-repeat: no-repeat; background-position: center bottom;
  border: 0 !important; border-radius: 0 !important;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .55));
  animation: az-cat-float 6s ease-in-out infinite;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s !important;
}
.app-inner > section:nth-child(1 of .s-block--categories) .swiper-slide:nth-child(2n) .lazy__bg { animation-delay: -1.5s; }
.app-inner > section:nth-child(1 of .s-block--categories) .swiper-slide:nth-child(3n) .lazy__bg { animation-delay: -3s; }
.app-inner > section:nth-child(1 of .s-block--categories) .slide--cat-entry span { position: relative; z-index: 1; font-size: 16px; font-weight: 700; }
.app-inner > section:nth-child(1 of .s-block--categories) .slide--cat-entry:hover::before {
  border-color: rgba(234, 207, 105, .55); box-shadow: 0 18px 40px -18px rgba(234, 207, 105, .35);
}
.app-inner > section:nth-child(1 of .s-block--categories) .slide--cat-entry:hover .lazy__bg {
  animation-play-state: paused; transform: translateY(-12px) scale(1.06) !important;
  filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(234, 207, 105, .22));
}
@keyframes az-cat-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 767px) {
  .app-inner > section:nth-child(1 of .s-block--categories) .slide--cat-entry span { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-inner > section:nth-child(1 of .s-block--categories) .slide--cat-entry .lazy__bg { animation: none; transition: none !important; }
}

/* ---------- Banners (04 beIN devices) ---------- */
.s-block--banners .square-grid { gap: var(--az-gap) !important; }
/* phones: a row of three cards (04 beIN world) stays one centred row of three, like on desktop */
@media (max-width: 767px) {
  .s-block--banners .square-grid:has(> :nth-child(3)) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-block--banners .square-grid:has(> :nth-child(3)) .box-img { border-radius: 14px !important; }
}
.s-block--banners .box-img { border-radius: 20px !important; overflow: hidden; border: 1px solid var(--az-line); }
.s-block--banners .grayscaled-img img { filter: none !important; }

/* ---------- Product card (custom-salla-product-card): one look everywhere products appear ---------- */
/* the theme stretches the content to the card height inside a block layout, which pushed «أضف للسلة» below the card; a column keeps it inside */
.s-product-card-entry {
  display: flex !important; flex-direction: column;
  background: var(--az-surface) !important; border: 1px solid var(--az-line) !important; border-radius: 18px !important; overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.s-product-card-entry:hover { border-color: rgba(234, 207, 105, .55) !important; transform: translateY(-3px); }
.s-product-card-content { flex: 1 1 auto; height: auto !important; }
.s-product-card-discount { background: var(--az-gold) !important; color: var(--az-ink) !important; border-radius: 999px !important; font-weight: 800; }
.s-product-card-rating i { color: var(--az-gold); }
.s-product-card-category { padding: 2px 9px; border-radius: 6px; background: var(--az-gold-wash); color: var(--az-gold) !important; font-size: 13px; }
.s-product-card-content-title, .s-product-card-content-title a { color: var(--az-text) !important; font-size: 16.5px; line-height: 1.55; }
.s-product-card-content-title { -webkit-line-clamp: 2 !important; }
.s-product-card-price { color: var(--az-gold) !important; font-size: 22px !important; font-weight: 800 !important; }
.s-product-card-price-before { color: var(--az-muted) !important; }
.s-product-card-content-footer .s-button-element {
  background: var(--az-gold) !important; color: var(--az-ink) !important; border-color: var(--az-gold) !important;
  border-radius: 12px !important; min-height: 46px; font-weight: 700;
}
.s-product-card-content-footer .s-button-element:hover { background: var(--az-text) !important; border-color: var(--az-text) !important; }
/* product sliders (07, 11): four cards to the row on the page grid. The theme slider has six slots (16.66%), so four products
   filled two thirds of the row and left a hole on one side; its «large cards» option is 25% too. Swiper still slides a fifth product in. */
.s-products-list-wrapper { gap: var(--az-gap) !important; }
@media (min-width: 768px) {
  .s-block--best-offers .s-slider-container { margin-inline: calc(var(--az-gap) / -2) !important; padding-inline: 0 !important; }
  .s-block--best-offers .s-products-slider-card { width: 25% !important; padding-inline: calc(var(--az-gap) / 2) !important; margin: 0 !important; }
}
/* phones: the theme swipes products (07, 11) and categories (03, 08, 12), starting at the right edge with a cut card on the left.
   Four or five items need no swiping, so they wrap into a centred grid instead: products two by two, 03 three then two
   (the short row centred), apps and devices two by two as low cards. */
@media (max-width: 767px) {
  .s-block--best-offers .s-slider-container, .s-block--categories .swiper { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  .s-block--best-offers .swiper-wrapper, .s-block--categories .swiper-wrapper {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: var(--az-gap); transform: none !important; height: auto !important;
  }
  .s-block--best-offers .swiper-slide-duplicate, .s-block--categories .swiper-slide-duplicate { display: none !important; }
  .s-block--best-offers .s-products-slider-card { flex: none; width: calc((100% - var(--az-gap)) / 2) !important; margin: 0 !important; padding: 0 !important; }
  .s-block--categories .swiper-slide { flex: none; width: calc((100% - 2 * var(--az-gap)) / 3) !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; }
  .app-inner > section:nth-child(n+2 of .s-block--categories) .swiper-slide { width: calc((100% - var(--az-gap)) / 2) !important; }
  .s-block--categories .slide--cat-entry { padding-inline: 0; }
}
/* a row of only two products (06 offers, 15 renewals): two wide cards, picture beside the details, across the full column,
   instead of two tall cards in the middle of the page */
.s-products-list-wrapper:has(> custom-salla-product-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 768px) {
  .s-products-list-wrapper:has(> custom-salla-product-card:nth-child(2):last-child) .s-product-card-entry { flex-direction: row !important; }
  .s-products-list-wrapper:has(> custom-salla-product-card:nth-child(2):last-child) .s-product-card-image { flex: 0 0 46%; width: 46% !important; max-width: 46%; }
  .s-products-list-wrapper:has(> custom-salla-product-card:nth-child(2):last-child) .s-product-card-content { display: flex; flex-direction: column; justify-content: center; padding: 20px 24px !important; }
  .s-products-list-wrapper:has(> custom-salla-product-card:nth-child(2):last-child) .s-product-card-content-footer { margin-top: 18px !important; }
}

/* ---------- 06 Season offers: the page's one special section (2026-10-27) ----------
   The title block with a countdown (the only one on the page) and the products block after it become one framed stage:
   warm gold light and faint rays from the top, the gold «خصم حتى 60٪» seal (the title block's icon field, malak/offer-badge.png)
   floating with a soft glow, gold countdown tiles, a solid gold button, the two offers inside the frame, and the vertical edge light
   of the approved product images on the frame (bright high on the right, softer low on the left). Theme classes only, no ids. */
.s-angel--divider:has(.divider-countdown) .divider-container > .divider-title {
  position: relative; padding: clamp(30px, 4vw, 52px) clamp(18px, 4vw, 56px) clamp(22px, 2.6vw, 34px);
  border: 1px solid rgba(234, 207, 105, .38); border-bottom: 0; border-radius: 28px 28px 0 0;
  background:
    radial-gradient(70% 85% at 50% 0%, rgba(234, 207, 105, .22), rgba(234, 207, 105, 0) 72%),
    linear-gradient(180deg, rgba(16, 15, 12, 0) 25%, #100F0C 92%),
    radial-gradient(90% 100% at 50% 0%, rgba(16, 15, 12, 0) 30%, #100F0C 85%),
    repeating-conic-gradient(from -90deg at 50% -10%, rgba(234, 207, 105, .045) 0deg 2.5deg, rgba(234, 207, 105, 0) 2.5deg 9deg),
    linear-gradient(180deg, #17150F, #100F0C);
}
.s-angel--divider:has(.divider-countdown) + section.s-block salla-products-list {
  position: relative; display: block; padding: 0 clamp(14px, 3vw, 40px) clamp(22px, 3vw, 40px);
  border: 1px solid rgba(234, 207, 105, .38); border-top: 0; border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, #100F0C, #0D0D0D);
}
.index .app-inner > .s-angel--divider.merge-bottom:has(.divider-countdown) + section.s-block { margin-top: 0 !important; }
/* the edge light on the frame: thin vertical lights with a gold glow */
.s-angel--divider:has(.divider-countdown) .divider-container > .divider-title::before,
.s-angel--divider:has(.divider-countdown) + section.s-block salla-products-list::after {
  content: ""; position: absolute; width: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0));
}
.s-angel--divider:has(.divider-countdown) .divider-container > .divider-title::before {
  right: -1.5px; top: 14%; height: 62%; box-shadow: 0 0 14px 3px rgba(234, 207, 105, .55), 0 0 40px 8px rgba(234, 207, 105, .22);
}
.s-angel--divider:has(.divider-countdown) + section.s-block salla-products-list::after {
  left: -1.5px; top: 22%; height: 52%; opacity: .75; box-shadow: 0 0 12px 3px rgba(234, 207, 105, .45), 0 0 34px 6px rgba(234, 207, 105, .16);
}
/* the seal */
.s-angel--divider:has(.divider-countdown) .divider-icon img {
  width: 132px; height: 132px; filter: drop-shadow(0 6px 22px rgba(234, 207, 105, .4));
  animation: az-seal 4.5s ease-in-out infinite;
}
@keyframes az-seal { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@media (max-width: 767px) { .s-angel--divider:has(.divider-countdown) .divider-icon img { width: 104px; height: 104px; } }
/* countdown: gold numbers on black tiles in a gold frame */
.s-angel--divider:has(.divider-countdown) .divider-countdown { margin-top: 18px !important; }
.s-angel--divider:has(.divider-countdown) .s-count-down-list { gap: 10px; }
.s-angel--divider:has(.divider-countdown) .s-count-down-item {
  min-width: 72px; height: auto !important; padding: 10px 6px 8px; display: flex !important; flex-direction: column; align-items: center; gap: 4px; background: var(--az-ink) !important; border: 1px solid rgba(234, 207, 105, .45) !important;
  border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(234, 207, 105, .2);
}
.s-angel--divider:has(.divider-countdown) .s-count-down-item-value { color: var(--az-gold) !important; font-size: 30px; font-weight: 800; line-height: 1.1; }
.s-angel--divider:has(.divider-countdown) .s-count-down-item-label { position: static !important; margin: 0 !important; color: var(--az-muted) !important; font-size: 13px; line-height: 1.3; }
@media (max-width: 767px) {
  .s-angel--divider:has(.divider-countdown) .s-count-down-list { gap: 6px; }
  .s-angel--divider:has(.divider-countdown) .s-count-down-item { min-width: 60px; }
  .s-angel--divider:has(.divider-countdown) .s-count-down-item-value { font-size: 24px; }
}
/* «كل العروض»: the one solid gold button among the section titles */
.s-angel--divider:has(.divider-countdown) a.divider-url { background: var(--az-gold) !important; color: var(--az-ink) !important; margin-top: 22px; }
.s-angel--divider:has(.divider-countdown) a.divider-url:hover { background: var(--az-text) !important; border-color: var(--az-text) !important; }
/* the two offers inside the stage: a warmer card with a gold edge */
.s-angel--divider:has(.divider-countdown) + section.s-block .s-product-card-entry { background: #16140F !important; border-color: rgba(234, 207, 105, .28) !important; }
.s-angel--divider:has(.divider-countdown) + section.s-block .s-products-list-wrapper { margin-bottom: 0 !important; }
@media (prefers-reduced-motion: reduce) { .s-angel--divider:has(.divider-countdown) .divider-icon img { animation: none; } }

/* ---------- 05 AZ TV Box (featured product) ----------
   Block image: the box on black, product on the left, right half empty (assets/img/aztv-box-dark.webp).
   From 1024px the image fills the card and the text sits on its dark half; below that, the theme's own two columns / stack. */
.s-block--special-product .container > div { position: relative; border-radius: 24px !important; border: 1px solid var(--az-line); background: var(--az-ink) !important; }
.s-block--special-product .p_image img { width: 100% !important; max-width: none !important; object-fit: cover; object-position: 30% 50%; aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .s-block--special-product .container > div { min-height: 560px; }
  .s-block--special-product .p_image { position: absolute; top: 0; bottom: 0; left: 0; width: 76% !important; }
  .s-block--special-product .p_image img { height: 100% !important; aspect-ratio: auto; object-position: left center; }
  .s-block--special-product .p_image::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to left, var(--az-ink) 0%, rgba(13, 13, 13, 0) 40%);
  }
  .s-block--special-product .p_image + div {
    position: relative; z-index: 1; width: 46% !important; margin-left: auto; justify-content: center; padding: 48px clamp(32px, 4vw, 64px) !important;
  }
}
.s-block--special-product h2 { color: var(--az-gold) !important; font-size: clamp(28px, 3.2vw, 42px) !important; line-height: 1.3; }
.s-block--special-product h2 + p { color: var(--az-text) !important; font-size: clamp(16px, 1.4vw, 19px) !important; line-height: 1.8; margin-bottom: 14px !important; text-wrap: balance; }
.s-block--special-product .special-price { align-items: baseline; gap: 10px; }
.s-block--special-product .special-price-current { color: var(--az-gold) !important; font-size: 34px; font-weight: 800; }
.s-block--special-product .special-price-instead { color: var(--az-muted) !important; font-size: 15px; }
/* the old price: Arabic zeros are dots that a normal strike line hides («٤٠٠» read as «٤»), so a thin slanted line replaces it */
.s-block--special-product .special-price-before { position: relative; color: var(--az-muted) !important; font-size: 20px; text-decoration: none !important; }
.s-block--special-product .special-price-before::after {
  content: ""; position: absolute; inset-inline: -2px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(-14deg); opacity: .8;
}
.s-block--special-product .sale-end { color: var(--az-gold) !important; }
/* a discount whose date has passed leaves the label with nothing under it: hide the whole countdown until a new date is set */
.s-block--special-product .special-product-countdown:has(.s-count-down-ended) { display: none; }
/* features: bigger icon tabs, the active one gold; the feature text in the theme's light and muted tones */
.s-block--special-product .tabs__special { gap: 10px; margin-top: 18px; }
.s-block--special-product .tab-trigger {
  width: 54px; height: 54px; border: 1px solid var(--az-line) !important; background: var(--az-surface) !important;
  color: var(--az-gold) !important; border-radius: 14px !important;
}
.s-block--special-product .tab-trigger i { font-size: 24px !important; }
.s-block--special-product .tab-trigger.is-active { background: var(--az-gold) !important; border-color: var(--az-gold) !important; color: var(--az-ink) !important; }
.s-block--special-product .tabs-wrapper { background: transparent !important; }
.s-block--special-product .tabs__item p:first-child { color: var(--az-text) !important; font-weight: 700; font-size: 19px; margin-top: 10px; }
.s-block--special-product .tabs__item p + p { color: var(--az-muted) !important; text-align: start !important; line-height: 1.85; }
/* buttons: «أضف للسلة» gold, «اطلب الآن» gold outline, so there is one main action */
.s-block--special-product .special-products-btn { gap: 12px; margin-top: 22px; }
.s-block--special-product .s-button-element { border-radius: 12px !important; min-height: 50px; font-weight: 700; }
.s-block--special-product .s-button-element:not(.s-button-outline) { background: var(--az-gold) !important; color: var(--az-ink) !important; border-color: var(--az-gold) !important; }
.s-block--special-product .s-button-element:not(.s-button-outline) * { color: inherit !important; }
.s-block--special-product .special-products-btn a.btn {
  min-height: 50px; border-radius: 12px; background: transparent !important; color: var(--az-gold) !important;
  border: 1.5px solid var(--az-gold) !important; font-weight: 700; transition: background-color .2s, color .2s;
}
.s-block--special-product .special-products-btn a.btn:hover { background: var(--az-gold) !important; color: var(--az-ink) !important; }

/* ---------- Countdown ---------- */
.s-count-down-item { background: var(--az-surface) !important; border: 1px solid var(--az-line); border-radius: 12px !important; }
.s-count-down-item-value { color: var(--az-text) !important; }

/* ---------- 09 Store features ---------- */
.s-block--features .grid { gap: var(--az-gap) !important; align-items: stretch !important; }
.s-block--features .angel-feature { padding: 22px 14px; border-radius: 18px; background: var(--az-surface); border: 1px solid var(--az-line); height: 100%; }
.s-block--features .angel-feature .lazy__bg { background-size: 78% !important; background-repeat: no-repeat; background-position: center; }
.s-block--features .angel-feature p:first-child { color: var(--az-text) !important; }

/* ---------- 10 Testimonials ---------- */
.s-block--testimonials .s-slider-block__title { position: relative; justify-content: center; margin-bottom: var(--az-title-gap) !important; }
.s-block--testimonials .s-slider-block__title-right { flex: 1 1 auto; justify-content: center; }
.s-block--testimonials .s-slider-block__title-left { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); }
.s-block--testimonials .swiper-slide > div { background: var(--az-surface) !important; border: 1px solid var(--az-line); border-radius: 18px !important; }
.s-block--testimonials .testimonial__avatar { box-shadow: 0 0 0 3px rgba(234, 207, 105, .35); }
.s-block--testimonials .s-rating-stars-selected svg { fill: var(--az-gold) !important; }

/* ---------- 16 FAQ (s-block--faqs) ---------- */
@media (min-width: 1024px) { .s-block--faqs .faqs-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px var(--az-gap) !important; } }
.s-block--faqs .faq-box { background: var(--az-surface); border-color: var(--az-line) !important; border-radius: 14px !important; transition: border-color .25s; }
.s-block--faqs .faq-question { padding: 18px 20px; font-size: 16.5px; color: var(--az-text); }
.s-block--faqs .open-badge {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--az-gold-wash); color: var(--az-gold); transition: transform .25s;
}
.s-block--faqs .open-badge::before { content: "+"; font-size: 20px; line-height: 1; }
.s-block--faqs input:checked + div .open-badge { color: var(--az-ink) !important; }
.s-block--faqs input:checked + div .open-badge::before { content: "−" !important; }
.s-block--faqs .faq-answer p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.9; color: var(--az-muted) !important; }

/* ---------- 17 Final call to action: the title block right after the FAQ, as a framed box over a living room at night ----------
   Background: a dark living room with a match on the TV (assets/img/malak/final-cta-bg.webp, 2000x661), the text on its dark middle.
   ON SALLA: upload the image (e.g. in a banner or the store files), then put its full https address in --az-cta-bg below. */
.s-block--faqs + .s-angel--divider { --az-cta-bg: url("../img/malak/final-cta-bg.webp"); }
.s-block--faqs + .s-angel--divider .divider-container {
  width: calc(100% - 2 * var(--az-gutter)); max-width: var(--az-page) !important; margin-inline: auto; border-radius: 28px; overflow: hidden;
  min-height: clamp(320px, 33vw, 400px); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 6vw, 80px) 20px !important;
  background:
    radial-gradient(48% 70% at 50% 50%, rgba(13, 13, 13, .62), rgba(13, 13, 13, 0) 100%),
    radial-gradient(60% 120% at 50% 125%, rgba(234, 207, 105, .22), transparent 70%),
    var(--az-cta-bg) center / cover no-repeat, var(--az-surface);
  border: 1px solid rgba(234, 207, 105, .28);
}
/* phones: the TV side of the room behind a darker veil, so the text stays readable over the bright screen */
@media (max-width: 767px) {
  .s-block--faqs + .s-angel--divider .divider-container {
    background: linear-gradient(rgba(13, 13, 13, .5), rgba(13, 13, 13, .72)), var(--az-cta-bg) 16% center / cover no-repeat, var(--az-surface);
  }
}
.s-block--faqs + .s-angel--divider .divider-title h2 { font-size: clamp(28px, 3.4vw, 44px) !important; }
.s-block--faqs + .s-angel--divider .divider-title h2, .s-block--faqs + .s-angel--divider .divider-title p { text-shadow: 0 2px 22px rgba(0, 0, 0, .75); }
.s-block--faqs + .s-angel--divider .divider-title p { color: var(--az-text) !important; opacity: .88; text-wrap: balance; }
.s-block--faqs + .s-angel--divider .vertical-lines { display: none; }
/* the page's last button, the one that moves (client 2026-10-27): a rich gold gradient, a soft light that sweeps across it,
   a thin light that runs round its outline, a gentle breathing glow and an arrow that nudges forward. Still for reduced motion. */
@property --az-cta-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.s-block--faqs + .s-angel--divider a.divider-url {
  position: relative; isolation: isolate; display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center;
  gap: 12px; min-height: 58px; padding: 0 30px 0 34px; margin-top: 24px; white-space: nowrap;
  border: 0 !important; font-size: 18px; font-weight: 800; letter-spacing: .2px; color: var(--az-ink) !important;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 62%) -160% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, #FFF1B8 0%, #EACF69 42%, #C9A548 100%) !important;
  box-shadow: 0 10px 30px rgba(234, 207, 105, .22), inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(120, 90, 20, .25);
  animation: az-cta-sweep 3.6s ease-in-out infinite, az-cta-breathe 3.6s ease-in-out infinite;
  transition: transform .25s ease;
}
/* the light that runs round the outline: a ring just outside the button, faint gold all round with one bright moving spot */
.s-block--faqs + .s-angel--divider a.divider-url::before {
  content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 999px; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--az-cta-angle), rgba(234, 207, 105, .3) 0deg, rgba(234, 207, 105, .3) 250deg, #FFF4CF 320deg, #fff 335deg, rgba(234, 207, 105, .3) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: az-cta-orbit 4.5s linear infinite;
}
/* the arrow: points the way in Arabic (left) and nudges forward */
.s-block--faqs + .s-angel--divider a.divider-url::after {
  content: "←"; display: block; width: auto; height: auto; background: none; border-radius: 0; color: var(--az-ink);
  font-size: 20px; line-height: 1; animation: az-cta-nudge 1.8s ease-in-out infinite;
}
.s-block--faqs + .s-angel--divider a.divider-url:hover { transform: translateY(-2px); }
.s-block--faqs + .s-angel--divider a.divider-url:hover::after { animation-duration: .9s; }
@keyframes az-cta-sweep { 0%, 30% { background-position: -160% 0, 0 0; } 70%, 100% { background-position: 260% 0, 0 0; } }
@keyframes az-cta-breathe {
  0%, 100% { box-shadow: 0 10px 30px rgba(234, 207, 105, .18), inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(120, 90, 20, .25); }
  50% { box-shadow: 0 10px 44px rgba(234, 207, 105, .42), inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(120, 90, 20, .25); }
}
@keyframes az-cta-orbit { to { --az-cta-angle: 360deg; } }
@keyframes az-cta-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .s-block--faqs + .s-angel--divider a.divider-url, .s-block--faqs + .s-angel--divider a.divider-url::before,
  .s-block--faqs + .s-angel--divider a.divider-url::after { animation: none !important; }
}

/* ---------- Main menu (side drawer) ---------- */
.mm-spn a:hover .menu_title, .mm-spn a:hover .font-primary { color: var(--az-gold); }
.mm-spn .display-all-category .font-primary { color: var(--az-gold); }

/* ---------- Footer: logo size and icon tiles ---------- */
.store-footer .logo-footer img { height: 2.5rem !important; }
.store-footer .s-social-link a, .store-footer .s-contacts-item { border: 1px solid var(--az-line); }
.store-footer .s-social-link svg, .store-footer .s-contacts-icon svg { fill: var(--az-gold) !important; }

@media (prefers-reduced-motion: reduce) {
  .s-product-card-entry, .s-block--categories .slide--cat-entry .lazy__bg { transition: none !important; }
  .s-product-card-entry:hover, .s-block--categories .slide--cat-entry:hover .lazy__bg { transform: none !important; }
}