@import url("./main.css?v=0c0ef537402e74141d8dddf0b728ff9ad6dbdda6");

body.s-page--store {
  --s-store-frame-height: 100dvh;
  /* The shared page content already owns the X safe-area inset. Store content
     must size from that inner box so cards do not receive a second inset. */
  --s-store-card-width: min(100%, 420px);
  --s-store-surface: rgba(255, 255, 255, .12);
  --s-store-surface-strong: rgba(255, 255, 255, .16);
  --s-store-muted: rgba(255, 255, 255, .58);
  --s-store-image: rgba(255, 255, 255, .055);
  overscroll-behavior-y: none;
}

body.s-page--store .s-page__major-section,
body.s-page--store .s-page__major-section--transition-frame > .s-page__group {
  height: var(--s-store-frame-height);
  min-height: var(--s-store-frame-height);
  max-height: var(--s-store-frame-height);
}

body.s-page--store .s-page__store-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  padding: calc(var(--s-x) * 4) 0 calc(var(--s-x) * 3);
  overflow: clip;
}

/* Section 2's carousel is the one Store surface that intentionally leaves the
   shared content column. Its viewport is clipped by the browser viewport,
   not by the padded Top Bar/content column. */
body.s-page--store .s-page__major-section:nth-child(2),
body.s-page--store .s-page__major-section:nth-child(2) > .s-page__group,
body.s-page--store .s-page__store-section--products {
  overflow: visible;
}
body.s-page--store .s-page__store-section--products { position: relative; }
body.s-page--store .s-page__store-section--products .s-page__store-layout--products {
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--s-store-safe-bottom-gap, var(--s-x)) + var(--s-store-nav-height, 48px) + (var(--s-x) * 3));
  align-content: start;
  gap: calc(var(--s-x) * 1.25);
  height: auto;
  padding: 0;
}

body.s-page--store .s-page__store-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Match the shared first-group bottom baseline. The Store frame already
     reserves 3X below this layout, so only the variable baseline delta is
     added here (zero in the settled closed-keyboard state). */
  align-content: end;
  justify-items: center;
  gap: var(--s-x);
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  padding-bottom: calc(var(--s-first-group-bottom-baseline) - var(--s-x));
  justify-self: stretch;
}

body.s-page--store .s-page__store-section-title {
  width: var(--s-store-card-width);
  margin: 0;
  color: #FFFFFF;
  font: 500 16px/1.2 OOXMEScript, Arial, sans-serif;
  text-align: start;
}

html[lang="ar"] body.s-page--store .s-page__store-section-title,
html[lang="ar"] body.s-page--store :is(.s-page__store-card-title, .s-page__store-card-description, .s-page__store-eyebrow, .s-page__store-price, .s-page__store-action, .s-page__store-custom-title, .s-page__store-carousel-status) {
  font-family: OOXMETosh, OOXMEScript, Arial, sans-serif;
}

body.s-page--store .s-page__store-card {
  border: 1px solid var(--s-glass-stroke);
  border-radius: var(--s-composer-radius);
  background: var(--s-store-surface);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .045), 0 1px 1px rgba(0, 0, 0, .025);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
}

body.s-page--store .s-page__store-featured-card {
  display: grid;
  grid-template-rows: auto auto;
  width: var(--s-store-card-width);
  height: auto;
  min-height: 390px;
  padding: calc(var(--s-x) * .75);
  min-width: 0;
  overflow: hidden;
}

body.s-page--store .s-page__store-image-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.5 / 1;
  min-height: 0;
  border: 1px solid var(--s-glass-stroke);
  border-radius: calc(var(--s-composer-radius) * .72);
  background: var(--s-store-image);
  object-fit: cover;
}

body.s-page--store .s-page__store-hero-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0;
  background: #f1f3f7;
  color: #111111;
  text-align: center;
}

body.s-page--store .s-page__store-hero-number {
  font: 700 clamp(84px, 20vw, 126px)/.82 OOXMESFPro, Arial, sans-serif;
  letter-spacing: -.045em;
}

body.s-page--store .s-page__store-hero-word {
  font: 700 clamp(36px, 7vw, 48px)/1 OOXMEScript, Arial, sans-serif;
}

html[lang="ar"] body.s-page--store .s-page__store-hero-panel {
  direction: rtl;
}

html[lang="ar"] body.s-page--store .s-page__store-hero-word {
  font-family: OOXMETosh, OOXMEScript, Arial, sans-serif;
}

body.s-page--store .s-page__store-image-placeholder--featured {
  min-height: 0;
}

body.s-page--store .s-page__store-card-copy {
  display: grid;
  align-content: start;
  gap: calc(var(--s-x) * .42);
  padding: var(--s-x) calc(var(--s-x) * .45) calc(var(--s-x) * .35);
  min-width: 0;
}

body.s-page--store :is(.s-page__store-eyebrow, .s-page__store-card-title, .s-page__store-card-description, .s-page__store-price) {
  margin: 0;
}

body.s-page--store .s-page__store-eyebrow {
  color: var(--s-store-muted);
  font: 500 11px/1.25 OOXMEScript, Arial, sans-serif;
}

body.s-page--store .s-page__store-card-title {
  color: #FFFFFF;
  font: 500 16px/1.2 OOXMEScript, Arial, sans-serif;
}

body.s-page--store .s-page__store-card-description {
  min-height: 16px;
  color: var(--s-store-muted);
  font: 500 12px/1.35 OOXMEScript, Arial, sans-serif;
}

body.s-page--store .s-page__store-price {
  color: #FFFFFF;
  font: 500 12px/1.2 OOXMEScript, Arial, sans-serif;
}

body.s-page--store .s-page__store-layout--products {
  gap: calc(var(--s-x) * 1.25);
}

body.s-page--store .s-page__store-carousel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
  justify-self: stretch;
  direction: ltr;
}

body.s-page--store .s-page__store-carousel-viewport {
  width: 100vw;
  max-width: none;
  margin-inline: calc(var(--s-x) * -1);
  min-width: 0;
  overflow: hidden;
  touch-action: manipulation;
}

body.s-page--store .s-page__store-carousel-track {
  display: flex;
  direction: ltr;
  align-items: stretch;
  gap: var(--s-x);
  width: max-content;
  will-change: transform;
  transition: transform .52s cubic-bezier(.22, .61, .36, 1);
}

body.s-page--store .s-page__store-carousel-track.is-dragging {
  transition: none;
}

body.s-page--store .s-page__store-product-card {
  display: grid;
  grid-template-rows: auto auto;
  width: min(76vw, 340px);
  height: auto;
  min-height: 393px;
  padding: calc(var(--s-x) * .65);
  opacity: .46;
  transform: scale(.94);
  transition: opacity .38s ease, transform .52s cubic-bezier(.22, .61, .36, 1), background-color .28s ease;
  min-width: 0;
  overflow: hidden;
}

body.s-page--store .s-page__store-product-card.is-active {
  opacity: 1;
  transform: scale(1);
  background: var(--s-store-surface-strong);
}

body.s-page--store .s-page__store-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-x);
  margin-top: calc(var(--s-x) * .5);
}

body.s-page--store .s-page__store-price-group {
  display: flex;
  align-items: baseline;
  gap: calc(var(--s-x) * .45);
}

body.s-page--store .s-page__store-price--previous {
  color: var(--s-store-muted);
  opacity: .72;
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}

body.s-page--store .s-page__store-featured-footer {
  margin-top: calc(var(--s-x) * .5);
}

body.s-page--store .s-page__store-action,
body.s-page--store .s-page__store-carousel-arrow {
  border: 1px solid var(--s-glass-stroke);
  background: rgba(255, 255, 255, .11);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, opacity .18s ease;
}

body.s-page--store .s-page__store-action {
  min-height: 36px;
  padding: 0 calc(var(--s-x) * .8);
  border-radius: calc(var(--s-composer-radius) * .65);
  font: 500 12px/1 OOXMEScript, Arial, sans-serif;
}

body.s-page--store .s-page__store-view {
  background: #0A84FF;
  border-color: transparent;
  color: #FFFFFF;
}

body.s-page--store .s-page__store-action:active,
body.s-page--store .s-page__store-carousel-arrow:active {
  transform: scale(.96);
}

body.s-page--store { --s-store-safe-bottom-gap: var(--s-x); --s-store-nav-height: 48px; --s-store-nav-width: 162px; --s-store-nav-arrow-size: 32px; --s-store-nav-gap: 8px; }
body.s-page--store .s-page__rpn-carousel-nav {
  position: absolute;
  z-index: 20;
  left: calc(50vw - var(--s-x));
  /* The carousel controls are content in Section 2, so their lowest edge
     uses the same baseline contract as the Section 1 card and Section 3 card. */
  bottom: calc(var(--s-store-safe-bottom-gap) + (var(--s-x) * 2));
  display: grid;
  grid-template-columns: var(--s-store-nav-arrow-size) minmax(0, 1fr) var(--s-store-nav-arrow-size);
  column-gap: var(--s-store-nav-gap);
  align-items: center;
  width: var(--s-store-nav-width);
  height: var(--s-store-nav-height);
  margin: 0 0 0 calc(var(--s-store-nav-width) / -2);
  padding: 0 8px;
  box-sizing: border-box;
  border: 0;
  border-radius: 28px;
  background: rgba(255,255,255,.16);
  box-shadow: 0 2px 7px rgba(0,0,0,.045),0 1px 1px rgba(0,0,0,.025),inset 0 0 0 1px var(--s-glass-stroke);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
  direction: ltr;
}
body.s-page--store .s-page__store-section--products > .s-page__rpn-carousel-nav { margin-top: 0; }
body.s-page--store .s-page__rpn-carousel-nav > button { position: relative; display: grid; width: var(--s-store-nav-arrow-size); height: var(--s-store-nav-arrow-size); place-items: center; padding: 0; border: 1px solid var(--s-glass-stroke); border-radius: 50%; background: #0A84FF; color: #fff; cursor: pointer; }
body.s-page--store .s-page__rpn-carousel-nav > button:disabled { opacity: .4; cursor: default; }
body.s-page--store .s-page__rpn-carousel-nav > button svg { width: 13.7px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.12; stroke-linecap: round; stroke-linejoin: round; }
body.s-page--store .s-page__rpn-carousel-nav > span { width: 54px; justify-self: center; color: var(--s-store-muted); font: 500 11px/1 OOXMEScript,Arial,sans-serif; text-align: center; }
html[lang="ar"] body.s-page--store .s-page__rpn-carousel-nav > span { font-family: OOXMETosh,OOXMEScript,Arial,sans-serif; }
html[dir="rtl"] body.s-page--store .s-page__rpn-carousel-nav { direction: rtl; }
html[dir="rtl"] body.s-page--store .s-page__rpn-carousel-nav > button svg { transform: scaleX(-1); }
html[dir="rtl"] body.s-page--store .s-page__store-carousel-track { direction: rtl; }

body.s-page--store .s-page__store-custom-card {
  display: grid;
  align-content: space-between;
  width: var(--s-store-card-width);
  height: 260px;
  padding: calc(var(--s-x) * 1.25);
}

body.s-page--store .s-page__store-custom-copy {
  display: grid;
  gap: calc(var(--s-x) * .65);
}

body.s-page--store .s-page__store-custom-title {
  margin: 0;
  color: #FFFFFF;
  font: 500 24px/1.15 OOXMEScript, Arial, sans-serif;
}

body.s-page--store .s-page__store-custom-action {
  width: 100%;
  margin-top: calc(var(--s-x) * 2);
  background: #0A84FF;
  border-color: transparent;
}

html.s-route.is-day-mode body.s-page--store {
  --s-store-surface: rgba(255, 255, 255, .48);
  --s-store-surface-strong: rgba(255, 255, 255, .68);
  --s-store-muted: rgba(17, 17, 17, .58);
  --s-store-image: rgba(17, 17, 17, .035);
}

html.s-route.is-day-mode body.s-page--store :is(.s-page__store-section-title, .s-page__store-card-title, .s-page__store-price, .s-page__store-custom-title) {
  color: #111111;
}

html.s-route.is-day-mode body.s-page--store :is(.s-page__store-action, .s-page__store-carousel-arrow) {
  background: rgba(255, 255, 255, .58);
  color: #111111;
}

html.s-route.is-day-mode body.s-page--store .s-page__store-view {
  background: #0A84FF;
  color: #FFFFFF;
}

html.s-route.is-day-mode body.s-page--store .s-page__store-custom-action {
  background: #0A84FF;
  color: #FFFFFF;
}

@media (max-width: 520px) {
  body.s-page--store .s-page__store-featured-card {
    height: auto;
    min-height: 360px;
  }

  body.s-page--store .s-page__store-product-card {
    grid-template-rows: auto auto;
    height: auto;
    min-height: 393px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.s-page--store .s-page__store-carousel-track,
  body.s-page--store .s-page__store-product-card {
    transition: none;
  }
}