.ua-store-page,
.ua-detail-page {
  background: var(--ua-paper);
}

.ua-section-heading h2 {
  margin: .65rem 0 0;
  color: var(--ua-ink);
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1.12;
}

.ua-section-heading--split {
  display: grid;
  grid-template-columns: 1fr minmax(17rem, .62fr);
  align-items: end;
  gap: 2.5rem;
}

.ua-section-heading--split > p {
  margin: 0;
  color: var(--ua-muted);
  line-height: 1.9;
}

.ua-mobile-dock { display: none; }

.ua-store-hero,
.ua-detail-shell {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 20%, rgb(53 86 216 / 22%), transparent 32rem),
    radial-gradient(circle at 82% 68%, rgb(190 141 62 / 18%), transparent 30rem),
    linear-gradient(135deg, #030914 0%, #071326 54%, #0b1424 100%);
  color: #fff;
}

.ua-detail-shell::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
  background-size: 4rem 4rem;
  content: "";
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

/* The hero art shows the shelves, the product hologram and the robot, which ends at 80% of its width.
   It keeps its whole frame and rests on the bottom of the hero, so the feature row sits on its floor
   and its top fades into the night sky. */
.ua-store-hero {
  --ua-art-text: 32rem;
  --ua-art-subject: .8;
  /* The art hangs from the top like every other hero, so there is no dark band under the header;
     its bottom edge fades into the hero behind the strip */
}

.ua-store-hero__grid {
  position: relative;
  display: grid;
  min-height: clamp(26rem, 36vw, 38rem);
  align-content: center;
  grid-template-columns: minmax(0, var(--ua-art-text));
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.ua-store-hero__copy h1 {
  max-width: 13ch;
  margin: 1rem 0 1.25rem;
  color: #fff;
  font-size: var(--ua-text-display);
  line-height: 1.25;
}

.ua-store-hero__copy h1 span,
.ua-detail-summary h1 span {
  color: var(--ua-gold-400);
}

.ua-store-hero__copy > p {
  max-width: 39rem;
  color: #c9d3e2;
  font-size: var(--ua-text-lg);
  line-height: 2;
}

.ua-store-hero__actions,
.ua-store-bridge__inner > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.7rem;
}

.ua-store-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.25rem;
  margin-top: 1.6rem;
  color: #d5deea;
  font-size: .82rem;
  font-weight: 700;
}

.ua-store-trust span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.ua-store-trust .ua-icon {
  width: 1rem;
  height: 1rem;
  color: var(--ua-gold-400);
}

/* Feature row at the foot of the hero, on the art, matching the stats row of the courses hero */
.ua-store-strip { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(255 255 255 / 9%); }
.ua-store-strip div { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1.35rem 1rem; border-inline-start: 1px solid rgb(255 255 255 / 8%); }
.ua-store-strip div:first-child { border-inline-start: 0; }
.ua-store-strip b { color: var(--ua-gold-300); font: 800 1.15rem var(--ua-font-latin); }
.ua-store-strip span { color: #b8c3d3; font-size: .82rem; font-weight: 700; }

.ua-store-catalog { padding-top: 6.5rem; }
.ua-store-toolbar { display: grid; grid-template-columns: minmax(16rem, 1fr) auto auto; gap: .8rem; margin-top: 2rem; padding: .75rem; border: 1px solid var(--ua-line); border-radius: 1.1rem; background: #fff; box-shadow: var(--ua-shadow-sm); }
.ua-store-search { display: flex; align-items: center; gap: .65rem; padding-inline: .8rem; border: 1px solid transparent; border-radius: .75rem; background: var(--ua-surface-soft); }
.ua-store-search:focus-within { border-color: var(--ua-gold-500); box-shadow: var(--ua-focus); }
.ua-store-search .ua-icon { width: 1.1rem; height: 1.1rem; color: var(--ua-muted); }
.ua-store-search input { width: 100%; min-height: 3rem; border: 0; outline: 0; background: transparent; color: var(--ua-ink); font: inherit; }
.ua-store-sort { display: flex; align-items: center; gap: .6rem; padding-inline: .9rem; border-inline-start: 1px solid var(--ua-line); color: var(--ua-muted); font-size: .78rem; font-weight: 800; }
.ua-store-sort select { border: 0; outline: 0; background: #fff; color: var(--ua-ink); font: inherit; font-weight: 800; }
.ua-store-view { display: flex; gap: .25rem; padding: .25rem; border-radius: .75rem; background: var(--ua-surface-soft); }
.ua-store-view button { padding: .55rem .8rem; border: 0; border-radius: .55rem; background: transparent; color: var(--ua-muted); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 800; }
.ua-store-view button[aria-pressed="true"] { background: #fff; color: var(--ua-ink); box-shadow: 0 3px 12px rgb(9 24 49 / 9%); }
.ua-store-status { display: flex; justify-content: space-between; gap: 1rem; margin: 1.1rem 0; color: var(--ua-muted); font-size: .78rem; }
.ua-store-status p { margin: 0; color: var(--ua-ink); font-weight: 800; }
.ua-store-status .is-preview { color: var(--ua-gold-700); }
.ua-store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

.ua-product-card { overflow: hidden; border: 1px solid var(--ua-line); border-radius: 1.25rem; background: #fff; box-shadow: var(--ua-shadow-sm); transition: transform var(--ua-normal) var(--ua-ease), box-shadow var(--ua-normal) var(--ua-ease), border-color var(--ua-normal); }
.ua-product-card:hover { transform: translateY(-6px); border-color: rgb(190 141 62 / 40%); box-shadow: var(--ua-shadow-md); }
.ua-product-card__cover { position: relative; display: grid; height: 14rem; place-items: center; overflow: hidden; background: radial-gradient(circle at 35% 20%, #234273, #07111f 70%); }
.ua-product-card__cover::before { width: 8rem; height: 8rem; border: 1px solid rgb(240 210 143 / 30%); border-radius: 50%; box-shadow: 0 0 4rem rgb(53 86 216 / 35%), inset 0 0 2rem rgb(240 210 143 / 10%); content: ""; }
.ua-product-card__cover::after { position: absolute; width: 3rem; height: 3rem; border: .4rem solid var(--ua-gold-400); border-inline-start-color: transparent; border-radius: 50%; content: ""; transform: rotate(-25deg); }
.ua-product-card__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ua-product-card__badges { position: absolute; z-index: 2; inset: .8rem .8rem auto; display: flex; justify-content: space-between; }
.ua-product-card__badges span { padding: .3rem .6rem; border: 1px solid rgb(255 255 255 / 16%); border-radius: 99px; background: rgb(4 12 24 / 74%); color: #fff; font-size: .65rem; font-weight: 800; backdrop-filter: blur(.5rem); }
.ua-product-card__badges .is-owned { color: var(--ua-gold-300); }
.ua-product-card__body { padding: 1.25rem; }
.ua-product-card__body > small { color: var(--ua-gold-700); font-size: .69rem; font-weight: 900; }
.ua-product-card h3 { min-height: 3.3rem; margin: .45rem 0 .5rem; color: var(--ua-ink); font-size: 1.05rem; line-height: 1.65; }
.ua-product-card p { display: -webkit-box; min-height: 4.8rem; overflow: hidden; color: var(--ua-muted); font-size: .82rem; line-height: 1.9; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ua-product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ua-line); }
.ua-product-card__footer strong { color: var(--ua-ink); font: 900 1.1rem var(--ua-font-latin); }
.ua-product-card__footer a { color: var(--ua-blue-600); font-size: .78rem; font-weight: 900; }
.ua-store-grid.is-list { grid-template-columns: 1fr; }
.ua-store-grid.is-list .ua-product-card { display: grid; grid-template-columns: 16rem 1fr; }
.ua-store-grid.is-list .ua-product-card__cover { height: 100%; min-height: 12rem; }
.ua-store-grid.is-list .ua-product-card h3,
.ua-store-grid.is-list .ua-product-card p { min-height: auto; }

.ua-store-skeleton { overflow: hidden; border: 1px solid var(--ua-line); border-radius: 1.25rem; background: #fff; }
.ua-store-skeleton i { display: block; height: 14rem; background: var(--ua-surface-soft); }
.ua-store-skeleton span { display: block; height: .8rem; margin: 1rem 1.2rem; border-radius: 99px; background: var(--ua-surface-soft); }
.ua-store-skeleton span:nth-child(3) { width: 70%; }
.ua-store-skeleton span:nth-child(4) { width: 45%; }
.ua-store-skeleton i,
.ua-store-skeleton span { background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 70%), transparent); background-size: 200% 100%; animation: ua-store-shimmer 1.4s infinite; }
@keyframes ua-store-shimmer { to { background-position: -200% 0; } }

.ua-store-empty { padding: 4rem 1rem; border: 1px dashed var(--ua-line); border-radius: 1.2rem; background: #fff; text-align: center; }
.ua-store-empty strong { color: var(--ua-ink); font-size: 1.2rem; }
.ua-store-empty p { margin: .5rem 0 1.2rem; color: var(--ua-muted); }
.ua-store-steps { background: #fff; }
.ua-store-steps__grid,
.ua-detail-process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.ua-store-steps__grid article,
.ua-detail-process__grid article { position: relative; padding: 1.7rem; border: 1px solid var(--ua-line); border-radius: 1.2rem; background: var(--ua-paper); }
.ua-store-steps__grid b,
.ua-detail-process__grid b { color: var(--ua-gold-700); font: 900 .75rem var(--ua-font-latin); }
.ua-store-steps__grid h3,
.ua-detail-process__grid h3 { margin: .8rem 0 .45rem; color: var(--ua-ink); }
.ua-store-steps__grid p,
.ua-detail-process__grid p { margin: 0; color: var(--ua-muted); font-size: .85rem; line-height: 1.9; }
.ua-store-bridge { padding: 1.5rem 0 5rem; background: #fff; }
.ua-store-bridge__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.5rem; border-radius: 1.6rem; background: linear-gradient(125deg, #07111f, #10213c); color: #fff; }
.ua-store-bridge h2 { margin: .65rem 0; color: #fff; }
.ua-store-bridge p { max-width: 44rem; margin: 0; color: #b8c4d5; }

/* Detail pages */
.ua-detail-shell { padding: 2rem 0 5rem; }
.ua-breadcrumb { position: relative; display: flex; align-items: center; gap: .55rem; margin-bottom: 2rem; color: #8f9db1; font-size: .76rem; }
.ua-breadcrumb a { color: #c7d1df; }
.ua-breadcrumb b { max-width: 24rem; overflow: hidden; color: var(--ua-gold-300); text-overflow: ellipsis; white-space: nowrap; }
.ua-detail-grid { position: relative; display: grid; grid-template-columns: minmax(22rem, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ua-detail-media { position: relative; min-height: 31rem; overflow: hidden; border: 1px solid rgb(255 255 255 / 14%); border-radius: 1.8rem; background: radial-gradient(circle at 30% 22%, #264b80, #07111f 66%); box-shadow: 0 2rem 5rem rgb(0 0 0 / 38%); }
.ua-detail-media::before { position: absolute; inset: 0; background: linear-gradient(135deg, rgb(255 255 255 / 7%), transparent 42%); content: ""; }
.ua-detail-media img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ua-detail-media__badge { position: absolute; z-index: 3; top: 1rem; right: 1rem; padding: .4rem .7rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: 99px; background: rgb(4 11 22 / 68%); color: #fff; font-size: .7rem; font-weight: 800; backdrop-filter: blur(.6rem); }
.ua-detail-media__art { position: absolute; inset: 0; display: grid; place-items: center; }
.ua-detail-media__art::before,
.ua-detail-media__art::after { position: absolute; width: 19rem; height: 19rem; border: 1px solid rgb(240 210 143 / 24%); border-radius: 50%; content: ""; }
.ua-detail-media__art::after { width: 12rem; height: 12rem; border-color: rgb(88 128 255 / 32%); box-shadow: 0 0 5rem rgb(53 86 216 / 34%); }
.ua-detail-media__art .ua-icon { z-index: 1; width: 4rem; height: 4rem; color: var(--ua-gold-300); filter: drop-shadow(0 0 1.4rem rgb(240 210 143 / 40%)); }
.ua-detail-media__signal { position: absolute; z-index: 3; right: 1.2rem; bottom: 1rem; left: 1.2rem; display: flex; align-items: center; gap: .8rem; direction: ltr; color: #c3cedd; font: 700 .62rem var(--ua-font-latin); letter-spacing: .09em; }
.ua-detail-media__signal span { width: 2.8rem; height: .25rem; border-radius: 99px; background: linear-gradient(90deg, var(--ua-gold-500), var(--ua-blue-600)); }
.ua-detail-summary__eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--ua-gold-300); font-size: .72rem; font-weight: 900; }
.ua-detail-summary__eyebrow b { padding: .28rem .55rem; border-radius: 99px; background: rgb(240 210 143 / 13%); color: var(--ua-gold-300); }
.ua-detail-summary h1 { margin: 1rem 0; color: #fff; font-size: clamp(2rem, 4vw, 3.65rem); line-height: 1.35; }
.ua-detail-summary__lead { max-width: 48rem; color: #bdc8d8; font-size: 1rem; line-height: 2; }
.ua-detail-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 1.5rem 0; }
.ua-detail-facts div { display: grid; gap: .25rem; padding: .85rem 1rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: .9rem; background: rgb(255 255 255 / 4%); }
.ua-detail-facts small { color: #8493a8; font-size: .65rem; }
.ua-detail-facts strong { overflow: hidden; color: #fff; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.ua-detail-purchase { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 1.2rem; padding: 1.15rem; border: 1px solid rgb(240 210 143 / 24%); border-radius: 1.15rem; background: rgb(255 255 255 / 5%); }
.ua-detail-purchase > div { display: grid; }
.ua-detail-purchase small { color: #91a0b5; font-size: .68rem; }
.ua-detail-purchase strong { color: var(--ua-gold-300); font-size: 1.65rem; }
.ua-detail-purchase span { color: #8795a9; font-size: .65rem; }
.ua-detail-samples { display: inline-flex; align-items: center; gap: .45rem; margin: .25rem 0 1rem; color: var(--ua-gold-400); font-weight: 700; text-decoration: underline; text-underline-offset: .35em; }
.ua-detail-samples .ua-icon { width: 1rem; height: 1rem; }
.ua-detail-samples[hidden] { display: none; }
.ua-detail-note { display: flex; align-items: flex-start; gap: .45rem; margin: 1rem 0 0; color: #8f9cb0; font-size: .7rem; line-height: 1.7; }
.ua-detail-note .ua-icon { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--ua-gold-400); }
.ua-detail-content { background: #fff; }
.ua-detail-content__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.2rem; }
.ua-detail-content article,
.ua-detail-content aside { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--ua-line); border-radius: 1.4rem; background: var(--ua-paper); }
.ua-detail-content h2 { margin: .7rem 0 1.4rem; color: var(--ua-ink); }
.ua-check-list,
.ua-requirements { display: grid; gap: .8rem; padding: 0; list-style: none; }
.ua-check-list li,
.ua-requirements li { position: relative; padding: .8rem 2.8rem .8rem 1rem; border-radius: .85rem; background: #fff; color: var(--ua-text); font-size: .85rem; line-height: 1.8; }
.ua-check-list li::before { position: absolute; top: .78rem; right: .8rem; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: #e6f7f1; color: #0b7250; content: "✓"; font-weight: 900; }
.ua-requirements li::before { position: absolute; top: .95rem; right: 1rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ua-gold-500); content: ""; }
.ua-detail-content aside > a { display: inline-block; margin-top: 1rem; color: var(--ua-blue-600); font-size: .78rem; font-weight: 900; }
.ua-curriculum { background: var(--ua-paper); }
.ua-curriculum-list { display: grid; gap: .6rem; margin-top: 2rem; }
.ua-curriculum-row { display: grid; grid-template-columns: 3rem 1fr auto auto; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--ua-line); border-radius: .9rem; background: #fff; }
.ua-curriculum-row b { color: var(--ua-gold-700); font: 900 .7rem var(--ua-font-latin); }
.ua-curriculum-row span { color: var(--ua-ink); font-size: .86rem; font-weight: 800; }
.ua-curriculum-row small { color: var(--ua-muted); font-size: .72rem; }
.ua-curriculum-row em { padding: .25rem .5rem; border-radius: 99px; background: #e6f7f1; color: #0b7250; font-size: .62rem; font-style: normal; font-weight: 900; }
.ua-detail-process { padding: 5rem 0; background: #fff; }
.ua-detail-more { padding: 0 0 5rem; background: #fff; }
.ua-detail-more .ua-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem; border: 1px solid var(--ua-line); border-radius: 1.4rem; background: var(--ua-paper); }
.ua-detail-more h2 { margin: .55rem 0 0; color: var(--ua-ink); }

@media (max-width: 68rem) {
  .ua-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua-detail-grid { grid-template-columns: .85fr 1.15fr; gap: 2rem; }
  .ua-detail-media { min-height: 27rem; }
}

/* The art stacks above the text here (see .ua-hero-art), so the text starts right under it */
@media (max-width: 62rem) {
  .ua-store-hero__grid { grid-template-columns: 1fr; min-height: 0; padding-top: 1.25rem; }
}

@media (max-width: 52rem) {
  .ua-detail-grid { grid-template-columns: 1fr; }
  .ua-store-hero__grid { padding-bottom: 3rem; }
  .ua-store-strip { grid-template-columns: repeat(2, 1fr); }
  .ua-store-strip div:nth-child(3) { border-inline-start: 0; }
  .ua-store-toolbar { grid-template-columns: 1fr auto; }
  .ua-store-search { grid-column: 1 / -1; }
  .ua-store-steps__grid,
  .ua-detail-process__grid { grid-template-columns: 1fr; }
  .ua-store-bridge__inner { align-items: flex-start; flex-direction: column; }
  .ua-detail-media { width: min(100%, 36rem); margin-inline: auto; }
  .ua-detail-content__grid { grid-template-columns: 1fr; }
  .ua-section-heading--split { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 38rem) {
  .ua-store-hero__copy > p { font-size: .95rem; }
  .ua-store-hero__actions .ua-btn { width: 100%; }
  .ua-store-strip div { display: block; padding: 1rem .8rem; text-align: center; }
  .ua-store-strip b,
  .ua-store-strip span { display: block; }
  .ua-store-strip span { margin-top: .3rem; }
  .ua-store-toolbar { grid-template-columns: 1fr; }
  .ua-store-search { grid-column: auto; }
  .ua-store-sort { justify-content: space-between; min-height: 2.8rem; border: 0; }
  .ua-store-view { display: none; }
  .ua-store-status { align-items: flex-start; flex-direction: column; }
  .ua-store-grid { grid-template-columns: 1fr; }
  .ua-store-grid.is-list .ua-product-card { display: block; }
  .ua-product-card__cover { height: 13rem; }
  .ua-store-bridge__inner { padding: 1.6rem; }
  .ua-detail-shell { padding-top: 1rem; }
  .ua-breadcrumb { margin-bottom: 1.2rem; }
  .ua-detail-media { min-height: 21rem; border-radius: 1.3rem; }
  .ua-detail-media__art::before { width: 14rem; height: 14rem; }
  .ua-detail-media__art::after { width: 9rem; height: 9rem; }
  .ua-detail-summary h1 { font-size: 2rem; }
  .ua-detail-facts { grid-template-columns: 1fr; }
  .ua-detail-purchase { align-items: stretch; flex-direction: column; }
  .ua-detail-purchase .ua-btn { width: 100%; }
  .ua-curriculum-row { grid-template-columns: 2rem 1fr auto; gap: .55rem; padding: .9rem; }
  .ua-curriculum-row em { grid-column: 2 / -1; justify-self: start; }
  .ua-detail-more .ua-container { align-items: stretch; flex-direction: column; }
  .ua-mobile-dock { position: fixed; z-index: 80; right: .75rem; bottom: .75rem; left: .75rem; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid rgb(255 255 255 / 12%); border-radius: 1rem; background: rgb(5 11 22 / 94%); box-shadow: 0 1rem 3rem rgb(0 0 0 / 35%); backdrop-filter: blur(1rem); }
  .ua-mobile-dock a,
  .ua-mobile-dock span { display: grid; min-height: 3.25rem; place-items: center; color: #fff; font-size: .75rem; font-weight: 900; }
  .ua-mobile-dock a:last-child { background: linear-gradient(120deg, var(--ua-gold-300), var(--ua-gold-500)); color: var(--ua-navy-950); }
  .ua-site-footer { padding-bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ua-product-card,
  .ua-store-skeleton i,
  .ua-store-skeleton span { animation: none; transition: none; }
}


/* أهداف اللمس على الهاتف: لا يقل ارتفاع أي زر أو حقل عن 44 بكسل */
@media (max-width: 48rem) {
  .ua-store-sort { min-height: 44px; }
  .ua-store-sort select { min-height: 44px; }
  .ua-store-view button { min-height: 44px; }
  .ua-product-card__footer a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* الكلمة الذهبية فوق العنوان على الخلفية الداكنة */
.ua-store-bridge .ua-kicker { color: var(--ua-gold-400); }

/* الشريط السفلي يظهر على التابلت أيضاً، مثل باقي الصفحات */
@media (max-width: 48rem) {
  .ua-mobile-dock { position: fixed; z-index: 80; right: .75rem; bottom: .75rem; left: .75rem; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid rgb(255 255 255 / 12%); border-radius: 1rem; background: rgb(5 11 22 / 94%); box-shadow: 0 1rem 3rem rgb(0 0 0 / 35%); backdrop-filter: blur(1rem); }
  .ua-mobile-dock a,
  .ua-mobile-dock span { display: grid; min-height: 3.25rem; place-items: center; color: #fff; font-size: .75rem; font-weight: 900; }
  .ua-mobile-dock a:last-child { background: linear-gradient(120deg, var(--ua-gold-300), var(--ua-gold-500)); color: var(--ua-navy-950); }
  .ua-site-footer { padding-bottom: 5rem; }
}

/* Service and course images of any shape: the whole image shows, a blurred copy of it fills the rest,
   and the decorative rings that stand in for a missing image are hidden */
.ua-product-card__cover.has-image::before,
.ua-product-card__cover.has-image::after { display: none; }
.ua-product-card__cover img { z-index: 1; object-fit: contain; }
.ua-product-card__cover img.is-backdrop,
.ua-detail-media img.is-backdrop { z-index: 0; object-fit: cover; filter: blur(1.4rem) brightness(.5) saturate(1.2); transform: scale(1.15); }
.ua-detail-media.has-image::before,
.ua-detail-media.has-image .ua-detail-media__art,
.ua-detail-media.has-image .ua-detail-media__signal,
.ua-detail-media.has-image .ua-detail-media__badge { display: none; }
.ua-detail-media img { object-fit: contain; }
.ua-detail-media.has-image { min-height: 0; align-self: center; }

/* فيديو معاينة الكورس: إطار 16:9 بصورة الفيديو وزر تشغيل ذهبي، والمشغّل يُحمَّل عند الضغط */
.ua-detail-intro[hidden] { display: none; }
.ua-detail-intro .ua-section-heading { text-align: center; }
.ua-detail-intro__frame { position: relative; width: min(100%, 48rem); margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--ua-line); border-radius: 1.4rem; background: var(--ua-navy-900); box-shadow: var(--ua-shadow-md); }
.ua-detail-intro__frame img,
.ua-detail-intro__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ua-detail-intro__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: linear-gradient(180deg, rgb(5 11 22 / 10%), rgb(5 11 22 / 45%)); cursor: pointer; }
.ua-detail-intro__play span { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--ua-gold-400); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 35%); transition: transform var(--ua-fast) var(--ua-ease); }
.ua-detail-intro__play svg { width: 2rem; height: 2rem; margin-left: .25rem; fill: #21170a; }
.ua-detail-intro__play:hover span,
.ua-detail-intro__play:focus-visible span { transform: scale(1.08); }
.ua-detail-intro__play:focus-visible { outline: none; box-shadow: inset var(--ua-focus); }
@media (max-width: 48rem) { .ua-detail-intro__frame { border-radius: 1rem; } .ua-detail-intro__play span { width: 3.6rem; height: 3.6rem; } }

/* المدرب في صفحة الكورس: صورة مربعة بجانب الاسم، وقسم «عن المدرب» */
.ua-trainer-avatar { display: grid; flex-shrink: 0; place-items: center; overflow: hidden; width: 2.9rem; height: 2.9rem; border: 1px solid rgb(240 210 143 / 60%); border-radius: .8rem; background: linear-gradient(145deg, var(--ua-gold-400), var(--ua-gold-600)); color: #0c1729; font-family: var(--ua-font-ar); font-size: 1.15rem; font-weight: 900; line-height: 1; }
.ua-trainer-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ua-trainer-avatar.has-image { background: #08111f; }
.ua-detail-trainer { display: flex; align-items: center; gap: .85rem; width: fit-content; max-width: 100%; margin: 1.5rem 0 0; padding: .6rem 1.1rem .6rem .6rem; border: 1px solid rgb(240 210 143 / 22%); border-radius: 1.1rem; background: rgb(255 255 255 / 4%); color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
a.ua-detail-trainer[href]:hover { border-color: rgb(240 210 143 / 50%); background: rgb(255 255 255 / 7%); }
.ua-detail-trainer > span:last-child { display: grid; gap: .1rem; min-width: 0; }
.ua-detail-trainer small { color: #8493a8; font-size: .65rem; }
.ua-detail-trainer strong { overflow: hidden; color: #fff; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.ua-detail-trainer em { color: var(--ua-gold-300); font-size: .64rem; font-style: normal; font-weight: 800; }
.ua-detail-facts--two { grid-template-columns: repeat(2, 1fr); margin-top: .85rem; }
.ua-trainer-about { background: var(--ua-paper); }
.ua-trainer-about__card { display: flex; align-items: flex-start; gap: clamp(1.2rem, 3vw, 2.2rem); padding: clamp(1.5rem, 4vw, 2.6rem); border: 1px solid rgb(240 210 143 / 25%); border-radius: 1.6rem; background: radial-gradient(ellipse at 100% 0%, rgb(34 68 106 / 55%), transparent 60%), #08111f; color: #dbe3ee; box-shadow: 0 24px 60px rgb(5 11 22 / 18%); }
.ua-trainer-avatar--lg { width: clamp(6rem, 12vw, 8.5rem); height: clamp(6rem, 12vw, 8.5rem); border-radius: 1.3rem; font-size: 2.4rem; box-shadow: 0 0 0 4px #08111f, 0 0 0 5px rgb(240 210 143 / 45%); }
.ua-trainer-about__card h2 { margin: .35rem 0 .3rem; color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.ua-trainer-about__badge { display: inline-flex; padding: .25rem .7rem; border-radius: 99px; background: rgb(240 210 143 / 13%); color: var(--ua-gold-300); font-size: .7rem; font-style: normal; font-weight: 800; }
.ua-trainer-about__card p { max-width: 52rem; margin: 1rem 0 0; color: #c3cedd; font-size: .95rem; line-height: 2; white-space: pre-line; }
@media (max-width: 38rem) {
  .ua-trainer-about__card { flex-direction: column; align-items: center; text-align: center; }
  .ua-trainer-about__card p { text-align: right; }
  .ua-detail-trainer { width: 100%; }
}