/* =========================================================
   ONEWNOS — STYLE.CSS
   عالم المواسم، الهدايا، الأزياء والفرحة
   ========================================================= */


/* =========================================================
   01. ROOT
   ========================================================= */

:root {

  --navy: #071735;
  --navy-deep: #031026;
  --navy-soft: #102b58;

  --purple: #6d42ff;
  --purple-dark: #4e27db;
  --purple-soft: #9275ff;

  --pink: #ff4f9a;
  --pink-soft: #ff8abb;

  --coral: #ff705f;
  --orange: #ff9f43;

  --yellow: #ffd84d;
  --yellow-soft: #fff0a8;

  --sky: #47c9ff;
  --blue: #2878ff;

  --mint: #51e3b2;

  --cream: #fff8ee;
  --lavender: #f1edff;
  --page: #f7f4ff;

  --white: #ffffff;

  --text: #101934;
  --muted: #69728b;

  --border:
  rgba(24, 34, 68, .10);

  --shadow:
  0 25px 80px
  rgba(39, 27, 94, .14);

  --shadow-dark:
  0 30px 90px
  rgba(0, 0, 0, .25);

  --radius-xl: 48px;
  --radius-lg: 34px;
  --radius-md: 24px;
  --radius-sm: 17px;

  --container:
  min(1520px, calc(100% - 80px));

}


/* =========================================================
   02. RESET
   ========================================================= */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  scroll-behavior: smooth;

}


body {

  min-width: 320px;

  overflow-x: hidden;

  background:
  var(--page);

  color:
  var(--text);

  font-family:
  "Alexandria",
  sans-serif;

  direction: rtl;

  text-rendering:
  optimizeLegibility;

  -webkit-font-smoothing:
  antialiased;

}


body.menu-open {

  overflow: hidden;

}


img {

  display: block;

  max-width: 100%;

}


a {

  color: inherit;

  text-decoration: none;

}


button {

  border: 0;

  color: inherit;

  font: inherit;

  cursor: pointer;

}


main {

  overflow: hidden;

}


::selection {

  color:
  var(--white);

  background:
  var(--purple);

}


/* =========================================================
   03. GENERAL
   ========================================================= */

.section-shell {

  width:
  var(--container);

  margin-inline:
  auto;

}


.section-kicker {

  display:
  inline-flex;

  align-items:
  center;

  gap:
  11px;

  margin-bottom:
  24px;

  color:
  var(--sky);

  font-size:
  .76rem;

  font-weight:
  800;

  letter-spacing:
  .04em;

}


.section-kicker span {

  width:
  10px;

  height:
  10px;

  border-radius:
  50%;

  background:
  currentColor;

  box-shadow:
  0 0 0 8px
  rgba(71, 201, 255, .12);

}


.section-kicker--purple {

  color:
  var(--purple);

}


.section-kicker--purple span {

  box-shadow:
  0 0 0 8px
  rgba(109, 66, 255, .11);

}


.section-kicker--pink {

  color:
  var(--pink);

}


.section-kicker--pink span {

  box-shadow:
  0 0 0 8px
  rgba(255, 79, 154, .11);

}


.button {

  position:
  relative;

  display:
  inline-flex;

  align-items:
  center;

  justify-content:
  center;

  gap:
  20px;

  min-height:
  62px;

  padding:
  0 30px;

  overflow:
  hidden;

  border-radius:
  100px;

  font-size:
  .88rem;

  font-weight:
  800;

  transition:
  transform .3s ease,
  box-shadow .3s ease,
  background .3s ease;

}


.button:hover {

  transform:
  translateY(-4px);

}


.button span {

  font-size:
  1.15rem;

}


.button--primary {

  color:
  var(--white);

  background:
  linear-gradient(
  135deg,
  var(--purple),
  var(--pink)
  );

  box-shadow:
  0 18px 40px
  rgba(109, 66, 255, .27);

}


.button--primary:hover {

  box-shadow:
  0 25px 55px
  rgba(109, 66, 255, .36);

}


.button--glass {

  border:
  1px solid
  rgba(255, 255, 255, .28);

  color:
  var(--white);

  background:
  rgba(255, 255, 255, .08);

  backdrop-filter:
  blur(16px);

}


.button--glass:hover {

  background:
  rgba(255, 255, 255, .15);

}


.button--white {

  color:
  var(--navy);

  background:
  var(--white);

  box-shadow:
  0 20px 50px
  rgba(0, 0, 0, .15);

}


.text-link {

  display:
  inline-flex;

  align-items:
  center;

  gap:
  18px;

  padding-bottom:
  7px;

  border-bottom:
  2px solid
  var(--pink);

  color:
  var(--navy);

  font-size:
  .9rem;

  font-weight:
  800;

}


.text-link span {

  color:
  var(--pink);

  font-size:
  1.2rem;

}


/* =========================================================
   04. PAGE LOADER
   ========================================================= */

.page-loader {

  position:
  fixed;

  inset:
  0;

  z-index:
  99999;

  display:
  flex;

  flex-direction:
  column;

  align-items:
  center;

  justify-content:
  center;

  gap:
  25px;

  color:
  var(--white);

  background:

  radial-gradient(
  circle at 30% 30%,
  rgba(255, 79, 154, .35),
  transparent 35%
  ),

  radial-gradient(
  circle at 75% 70%,
  rgba(71, 201, 255, .25),
  transparent 35%
  ),

  var(--navy-deep);

  transition:
  opacity .6s ease,
  visibility .6s ease;

}


.page-loader.is-hidden {

  opacity: 0;

  visibility: hidden;

}


.loader-mark {

  display:
  flex;

  align-items:
  center;

  gap:
  9px;

}


.loader-mark span {

  width:
  16px;

  height:
  16px;

  border-radius:
  50%;

  animation:
  loaderJump 1s ease-in-out
  infinite;

}


.loader-mark span:nth-child(1) {

  background:
  var(--purple);

}


.loader-mark span:nth-child(2) {

  background:
  var(--pink);

  animation-delay:
  .13s;

}


.loader-mark span:nth-child(3) {

  background:
  var(--yellow);

  animation-delay:
  .26s;

}


.page-loader p {

  font-size:
  .78rem;

  font-weight:
  700;

  opacity:
  .8;

}


@keyframes loaderJump {

  0%,
  100% {

    transform:
    translateY(0);

  }

  50% {

    transform:
    translateY(-14px);

  }

}


/* =========================================================
   05. HEADER
   ========================================================= */

.site-header {

  position:
  absolute;

  top:
  20px;

  right:
  0;

  left:
  0;

  z-index:
  1000;

}


.header-shell {

  width:
  var(--container);

  min-height:
  76px;

  margin-inline:
  auto;

  padding:
  9px 13px 9px 18px;

  display:
  grid;

  grid-template-columns:
  auto 1fr auto;

  align-items:
  center;

  gap:
  32px;

  border:
  1px solid
  rgba(255, 255, 255, .14);

  border-radius:
  25px;

  background:
  rgba(5, 20, 52, .76);

  box-shadow:
  0 20px 50px
  rgba(0, 0, 0, .17);

  backdrop-filter:
  blur(22px);

}


.header-brands {

  display:
  flex;

  align-items:
  center;

  gap:
  22px;

}


.onewnos-brand {

  display:
  flex;

  align-items:
  center;

  justify-content:
  center;

  width:
  132px;

  height:
  56px;

  padding:
  7px 13px;

  border-radius:
  17px;

  background:
  var(--white);

}


.onewnos-brand img {

  width:
  100%;

  max-height:
  43px;

  object-fit:
  contain;

}


.header-divider {

  width:
  1px;

  height:
  38px;

  background:
  rgba(255, 255, 255, .25);

}


.parent-brand {

  display:
  flex;

  align-items:
  center;

}


.parent-brand img {

  width:
  105px;

  max-height:
  30px;

  object-fit:
  contain;

  filter:
  brightness(0)
  invert(1);

}


.desktop-nav {

  display:
  flex;

  align-items:
  center;

  justify-content:
  center;

  gap:
  clamp(22px, 2.5vw, 48px);

}


.desktop-nav a {

  position:
  relative;

  color:
  rgba(255, 255, 255, .72);

  font-size:
  .76rem;

  font-weight:
  700;

  transition:
  color .3s ease;

}


.desktop-nav a::after {

  position:
  absolute;

  right:
  0;

  bottom:
  -11px;

  width:
  0;

  height:
  3px;

  border-radius:
  20px;

  background:
  linear-gradient(
  90deg,
  var(--yellow),
  var(--pink)
  );

  content:
  "";

  transition:
  width .3s ease;

}


.desktop-nav a:hover {

  color:
  var(--white);

}


.desktop-nav a:hover::after {

  width:
  100%;

}


.header-actions {

  display:
  flex;

  align-items:
  center;

  gap:
  14px;

}


.back-worlds {

  display:
  flex;

  align-items:
  center;

  gap:
  11px;

  color:
  rgba(255, 255, 255, .68);

  font-size:
  .7rem;

  font-weight:
  700;

}


.back-worlds b {

  color:
  var(--sky);

  font-size:
  1rem;

}


.header-shop {

  display:
  flex;

  align-items:
  center;

  justify-content:
  center;

  gap:
  15px;

  min-height:
  52px;

  padding:
  0 23px;

  border-radius:
  16px;

  color:
  var(--navy);

  background:
  var(--white);

  font-size:
  .76rem;

  font-weight:
  900;

  transition:
  transform .3s ease;

}


.header-shop:hover {

  transform:
  translateY(-3px);

}


.header-shop span {

  color:
  var(--purple);

  font-size:
  1rem;

}


.nav-toggle {

  display:
  none;

  width:
  52px;

  height:
  52px;

  padding:
  15px;

  border-radius:
  16px;

  background:
  rgba(255, 255, 255, .1);

}


.nav-toggle span {

  display:
  block;

  width:
  100%;

  height:
  2px;

  margin:
  5px 0;

  border-radius:
  10px;

  background:
  var(--white);

}


/* =========================================================
   06. MOBILE NAV
   ========================================================= */

.mobile-nav {

  position:
  fixed;

  inset:
  0;

  z-index:
  5000;

  display:
  flex;

  flex-direction:
  column;

  padding:
  28px;

  overflow-y:
  auto;

  color:
  var(--white);

  background:

  radial-gradient(
  circle at 90% 5%,
  rgba(255, 79, 154, .22),
  transparent 28%
  ),

  radial-gradient(
  circle at 5% 80%,
  rgba(71, 201, 255, .20),
  transparent 32%
  ),

  linear-gradient(
  145deg,
  #061631,
  #251056
  );

  opacity: 0;

  visibility: hidden;

  transform:
  translateY(-30px);

  transition:
  .45s ease;

}


.mobile-nav.is-open {

  opacity: 1;

  visibility: visible;

  transform:
  translateY(0);

}


.mobile-nav__top {

  display:
  flex;

  align-items:
  center;

  justify-content:
  space-between;

}


.mobile-nav__brands {

  display:
  flex;

  align-items:
  center;

  gap:
  17px;

}


.mobile-nav__brands > span {

  width:
  1px;

  height:
  35px;

  background:
  rgba(255, 255, 255, .25);

}


.mobile-nav__onewnos-logo {

  width:
  88px;

  max-height:
  43px;

  object-fit:
  contain;

  padding:
  6px;

  border-radius:
  10px;

  background:
  var(--white);

}


.mobile-nav__parent-logo {

  width:
  90px;

  max-height:
  28px;

  object-fit:
  contain;

  filter:
  brightness(0)
  invert(1);

}


.mobile-nav__close {

  position:
  relative;

  width:
  55px;

  height:
  55px;

  border:
  1px solid
  rgba(255, 255, 255, .2);

  border-radius:
  17px;

  background:
  rgba(255, 255, 255, .08);

}


.mobile-nav__close span {

  position:
  absolute;

  top:
  26px;

  left:
  15px;

  width:
  25px;

  height:
  2px;

  background:
  var(--white);

}


.mobile-nav__close span:first-child {

  transform:
  rotate(45deg);

}


.mobile-nav__close span:last-child {

  transform:
  rotate(-45deg);

}


.mobile-nav__intro {

  margin:
  65px 0 35px;

}


.mobile-nav__intro > span {

  color:
  var(--sky);

  font-size:
  .67rem;

  font-weight:
  900;

  letter-spacing:
  .18em;

}


.mobile-nav__intro h2 {

  margin:
  16px 0;

  font-size:
  clamp(2.2rem, 11vw, 4rem);

  line-height:
  1.13;

}


.mobile-nav__intro p {

  max-width:
  500px;

  color:
  rgba(255, 255, 255, .6);

  font-size:
  .83rem;

  line-height:
  2;

}


.mobile-nav__links {

  display:
  grid;

  grid-template-columns:
  repeat(2, 1fr);

  gap:
  12px;

}


.mobile-nav__links a {

  display:
  flex;

  align-items:
  center;

  gap:
  15px;

  min-height:
  96px;

  padding:
  15px;

  border:
  1px solid
  rgba(255, 255, 255, .12);

  border-radius:
  20px;

  background:
  rgba(255, 255, 255, .06);

}


.mobile-nav__links b {

  display:
  grid;

  place-items:
  center;

  flex:
  0 0 48px;

  height:
  48px;

  border-radius:
  15px;

  color:
  var(--navy);

  background:
  var(--yellow);

  font-size:
  .72rem;

}


.mobile-nav__links span {

  display:
  flex;

  flex-direction:
  column;

  gap:
  7px;

}


.mobile-nav__links strong {

  font-size:
  .78rem;

}


.mobile-nav__links small {

  color:
  rgba(255, 255, 255, .45);

  font-size:
  .62rem;

}


.mobile-nav__bottom {

  display:
  flex;

  align-items:
  center;

  justify-content:
  space-between;

  gap:
  20px;

  margin-top:
  auto;

  padding-top:
  50px;

}


.mobile-nav__bottom > a:first-child {

  color:
  rgba(255, 255, 255, .65);

  font-size:
  .7rem;

  font-weight:
  700;

}


.mobile-shop-button {

  padding:
  18px 22px;

  border-radius:
  100px;

  color:
  var(--navy);

  background:
  var(--white);

  font-size:
  .72rem;

  font-weight:
  900;

}


/* =========================================================
   07. HERO
   ========================================================= */

.hero {

  position:
  relative;

  min-height:
  940px;

  padding:
  170px 0 80px;

  overflow:
  hidden;

  color:
  var(--white);

  background:

  radial-gradient(
  circle at 10% 20%,
  rgba(255, 79, 154, .32),
  transparent 27%
  ),

  radial-gradient(
  circle at 75% 35%,
  rgba(71, 201, 255, .23),
  transparent 30%
  ),

  radial-gradient(
  circle at 50% 110%,
  rgba(109, 66, 255, .42),
  transparent 38%
  ),

  linear-gradient(
  135deg,
  #06142f 0%,
  #151247 48%,
  #42176b 100%
  );

}


.hero::after {

  position:
  absolute;

  right:
  0;

  bottom:
  -1px;

  left:
  0;

  height:
  120px;

  background:
  linear-gradient(
  to bottom,
  transparent,
  rgba(247, 244, 255, .18)
  );

  content:
  "";

  pointer-events:
  none;

}


.hero-orb {

  position:
  absolute;

  border-radius:
  50%;

  filter:
  blur(5px);

  opacity:
  .7;

}


.hero-orb--one {

  top:
  180px;

  right:
  -100px;

  width:
  320px;

  height:
  320px;

  border:
  1px solid
  rgba(255, 255, 255, .1);

  background:
  rgba(255, 79, 154, .11);

}


.hero-orb--two {

  bottom:
  170px;

  left:
  -120px;

  width:
  420px;

  height:
  420px;

  border:
  1px solid
  rgba(255, 255, 255, .09);

  background:
  rgba(71, 201, 255, .08);

}


.hero-confetti i {

  position:
  absolute;

  z-index:
  1;

  display:
  block;

  width:
  10px;

  height:
  25px;

  border-radius:
  5px;

  animation:
  confettiFloat 6s ease-in-out
  infinite;

}


.hero-confetti i:nth-child(1) {

  top:
  20%;

  left:
  8%;

  background:
  var(--yellow);

  transform:
  rotate(25deg);

}


.hero-confetti i:nth-child(2) {

  top:
  31%;

  left:
  47%;

  background:
  var(--pink);

  animation-delay:
  1s;

}


.hero-confetti i:nth-child(3) {

  top:
  13%;

  right:
  35%;

  background:
  var(--sky);

  transform:
  rotate(55deg);

  animation-delay:
  2s;

}


.hero-confetti i:nth-child(4) {

  bottom:
  25%;

  right:
  6%;

  background:
  var(--orange);

  animation-delay:
  .5s;

}


.hero-confetti i:nth-child(5) {

  bottom:
  18%;

  left:
  30%;

  background:
  var(--mint);

  transform:
  rotate(40deg);

}


.hero-confetti i:nth-child(6) {

  top:
  50%;

  right:
  48%;

  background:
  var(--yellow);

  animation-delay:
  1.5s;

}


.hero-confetti i:nth-child(7) {

  top:
  70%;

  left:
  6%;

  background:
  var(--pink);

}


.hero-confetti i:nth-child(8) {

  top:
  12%;

  right:
  5%;

  background:
  var(--purple-soft);

  animation-delay:
  2.5s;

}


@keyframes confettiFloat {

  0%,
  100% {

    translate:
    0 0;

  }

  50% {

    translate:
    0 -20px;

  }

}


.hero-shell {

  position:
  relative;

  z-index:
  3;

  width:
  var(--container);

  margin-inline:
  auto;

  display:
  grid;

  grid-template-columns:
  .9fr 1.1fr;

  align-items:
  center;

  gap:
  clamp(45px, 7vw, 120px);

}


.hero-content {

  max-width:
  670px;

}


.hero-content h1 {

  margin-bottom:
  26px;

  font-size:
  clamp(3.4rem, 5.6vw, 6.7rem);

  font-weight:
  900;

  line-height:
  1.04;

  letter-spacing:
  -.055em;

}


.hero-content h1 > span {

  color:
  var(--yellow);

}


.hero-content h1 strong {

  display:
  block;

  margin-top:
  16px;

  color:
  var(--sky);

  font-size:
  .48em;

  line-height:
  1.45;

}


.hero-description {

  max-width:
  600px;

  color:
  rgba(255, 255, 255, .69);

  font-size:
  .96rem;

  line-height:
  2.15;

}


.hero-buttons {

  display:
  flex;

  flex-wrap:
  wrap;

  gap:
  13px;

  margin-top:
  37px;

}


.hero-mini-info {

  display:
  flex;

  align-items:
  center;

  gap:
  25px;

  margin-top:
  45px;

}


.hero-mini-info > div {

  display:
  flex;

  flex-direction:
  column;

  gap:
  7px;

}


.hero-mini-info b {

  color:
  var(--white);

  font-size:
  .76rem;

}


.hero-mini-info span {

  color:
  rgba(255, 255, 255, .42);

  font-size:
  .61rem;

}


.hero-mini-info > i {

  width:
  1px;

  height:
  37px;

  background:
  rgba(255, 255, 255, .15);

}


.hero-visual {

  position:
  relative;

  min-height:
  590px;

  display:
  flex;

  align-items:
  center;

  justify-content:
  center;

}


.hero-visual__glow {

  position:
  absolute;

  inset:
  10%;

  border-radius:
  50%;

  background:
  linear-gradient(
  135deg,
  rgba(255, 79, 154, .45),
  rgba(71, 201, 255, .38)
  );

  filter:
  blur(70px);

}


.hero-image {

  position:
  relative;

  z-index:
  2;

  width:
  min(100%, 720px);

  overflow:
  hidden;

  border:
  1px solid
  rgba(255, 255, 255, .17);

  border-radius:
  46px;

  box-shadow:
  0 40px 100px
  rgba(0, 0, 0, .35);

  transform:
  rotate(-2deg);

}


.hero-image::after {

  position:
  absolute;

  inset:
  0;

  background:
  linear-gradient(
  135deg,
  rgba(255, 255, 255, .12),
  transparent 38%
  );

  content:
  "";

  pointer-events:
  none;

}


.hero-image img {

  width:
  100%;

  aspect-ratio:
  1.1 / 1;

  object-fit:
  cover;

}


.floating-card {

  position:
  absolute;

  z-index:
  5;

  border:
  1px solid
  rgba(255, 255, 255, .22);

  box-shadow:
  0 20px 50px
  rgba(0, 0, 0, .22);

  backdrop-filter:
  blur(20px);

}


.floating-card--season {

  top:
  65px;

  right:
  -15px;

  width:
  205px;

  padding:
  21px;

  border-radius:
  22px;

  background:
  rgba(255, 255, 255, .12);

}


.floating-card--season span {

  display:
  block;

  color:
  rgba(255, 255, 255, .55);

  font-size:
  .62rem;

}


.floating-card--season strong {

  display:
  block;

  margin-top:
  8px;

  font-size:
  .91rem;

}


.floating-card--season i {

  position:
  absolute;

  top:
  18px;

  left:
  18px;

  width:
  11px;

  height:
  11px;

  border-radius:
  50%;

  background:
  var(--mint);

  box-shadow:
  0 0 0 8px
  rgba(81, 227, 178, .12);

}


.floating-card--delivery {

  bottom:
  50px;

  left:
  -20px;

  display:
  flex;

  align-items:
  center;

  gap:
  15px;

  min-width:
  245px;

  padding:
  17px;

  border-radius:
  22px;

  color:
  var(--navy);

  background:
  rgba(255, 255, 255, .94);

}


.floating-card--delivery > div {

  display:
  grid;

  place-items:
  center;

  width:
  47px;

  height:
  47px;

  border-radius:
  15px;

  color:
  var(--white);

  background:
  linear-gradient(
  135deg,
  var(--purple),
  var(--pink)
  );

}


.floating-card--delivery span {

  display:
  flex;

  flex-direction:
  column;

  gap:
  7px;

}


.floating-card--delivery strong {

  font-size:
  .76rem;

}


.floating-card--delivery small {

  color:
  var(--muted);

  font-size:
  .61rem;

}


.floating-gift {

  position:
  absolute;

  right:
  5px;

  bottom:
  80px;

  z-index:
  5;

  display:
  flex;

  align-items:
  center;

  gap:
  10px;

  padding:
  12px 17px;

  border-radius:
  100px;

  color:
  var(--navy);

  background:
  var(--yellow);

  box-shadow:
  0 15px 40px
  rgba(255, 216, 77, .25);

  transform:
  rotate(5deg);

}


.floating-gift span {

  font-size:
  1.2rem;

}


.floating-gift b {

  font-size:
  .68rem;

}


.shopping-journey {

  position:
  relative;

  z-index:
  4;

  width:
  var(--container);

  margin:
  65px auto 0;

  display:
  grid;

  grid-template-columns:
  repeat(5, 1fr);

}


.journey-line {

  position:
  absolute;

  top:
  23px;

  right:
  10%;

  left:
  10%;

  height:
  2px;

  background:
  linear-gradient(
  90deg,
  var(--sky),
  var(--pink),
  var(--yellow)
  );

  opacity:
  .75;

}


.journey-step {

  position:
  relative;

  z-index:
  2;

  display:
  flex;

  flex-direction:
  column;

  align-items:
  center;

  gap:
  12px;

  color:
  rgba(255, 255, 255, .5);

}


.journey-step b {

  display:
  grid;

  place-items:
  center;

  width:
  47px;

  height:
  47px;

  border:
  5px solid
  #16184b;

  border-radius:
  50%;

  color:
  var(--white);

  background:
  #263969;

  font-size:
  .62rem;

}


.journey-step span {

  font-size:
  .68rem;

  font-weight:
  700;

}


.journey-step.is-active {

  color:
  var(--white);

}


.journey-step.is-active b {

  color:
  var(--navy);

  background:
  var(--yellow);

  box-shadow:
  0 0 0 9px
  rgba(255, 216, 77, .14);

}


/* =========================================================
   08. SEASONS
   ========================================================= */

.seasons-section {

  padding:
  150px 0;

  background:

  radial-gradient(
  circle at 80% 15%,
  rgba(109, 66, 255, .11),
  transparent 25%
  ),

  var(--page);

}


.seasons-heading {

  max-width:
  830px;

  margin:
  0 auto 75px;

  text-align:
  center;

}


.seasons-heading h2 {

  font-size:
  clamp(2.8rem, 5vw, 5.5rem);

  line-height:
  1.13;

  letter-spacing:
  -.055em;

}


.seasons-heading h2 span {

  color:
  var(--purple);

}


.seasons-heading p {

  max-width:
  650px;

  margin:
  25px auto 0;

  color:
  var(--muted);

  font-size:
  .9rem;

  line-height:
  2.1;

}


.season-world {

  max-width:
  1420px;

  margin-inline:
  auto;

}


.season-stage {

  position:
  relative;

  min-height:
  640px;

  overflow:
  hidden;

  border-radius:
  var(--radius-xl);

  color:
  var(--white);

  background:
  var(--navy);

  box-shadow:
  var(--shadow);

}


.season-stage__background {

  position:
  absolute;

  inset:
  0;

  background:

  radial-gradient(
  circle at 20% 20%,
  rgba(255, 216, 77, .20),
  transparent 30%
  ),

  radial-gradient(
  circle at 75% 70%,
  rgba(109, 66, 255, .45),
  transparent 38%
  ),

  linear-gradient(
  135deg,
  #06142f,
  #2d1764
  );

  transition:
  background .6s ease;

}


.season-image {

  position:
  absolute;

  top:
  0;

  bottom:
  0;

  left:
  0;

  width:
  55%;

}


.season-image::after {

  position:
  absolute;

  inset:
  0;

  background:
  linear-gradient(
  90deg,
  transparent 40%,
  var(--navy)
  );

  content:
  "";

}


.season-image img {

  width:
  100%;

  height:
  100%;

  object-fit:
  cover;

  transition:
  opacity .35s ease,
  transform .8s ease;

}


.season-stage:hover
.season-image img {

  transform:
  scale(1.04);

}


.season-stage__content {

  position:
  relative;

  z-index:
  3;

  width:
  52%;

  padding:
  105px 75px;

}


.season-stage__content > span {

  color:
  var(--yellow);

  font-size:
  .7rem;

  font-weight:
  900;

  letter-spacing:
  .17em;

}


.season-stage__content h3 {

  margin:
  25px 0;

  font-size:
  clamp(2.7rem, 4.5vw, 5.3rem);

  line-height:
  1.14;

  letter-spacing:
  -.055em;

}


.season-stage__content p {

  max-width:
  520px;

  color:
  rgba(255, 255, 255, .62);

  font-size:
  .9rem;

  line-height:
  2.1;

}


.season-button {

  display:
  inline-flex;

  align-items:
  center;

  gap:
  20px;

  min-height:
  58px;

  margin-top:
  35px;

  padding:
  0 27px;

  border-radius:
  100px;

  color:
  var(--navy);

  background:
  var(--white);

  font-size:
  .78rem;

  font-weight:
  900;

}


.season-number {

  position:
  absolute;

  right:
  45px;

  bottom:
  35px;

  z-index:
  3;

  display:
  flex;

  align-items:
  flex-end;

  gap:
  13px;

  opacity:
  .22;

}


.season-number span {

  padding-bottom:
  13px;

  font-size:
  .65rem;

}


.season-number b {

  font-size:
  6rem;

  line-height:
  1;

}


.season-selector {

  display:
  grid;

  grid-template-columns:
  repeat(7, 1fr);

  gap:
  10px;

  margin-top:
  18px;

}


.season-tab {

  display:
  flex;

  flex-direction:
  column;

  align-items:
  center;

  justify-content:
  center;

  gap:
  10px;

  min-height:
  115px;

  border:
  1px solid
  var(--border);

  border-radius:
  23px;

  background:
  rgba(255, 255, 255, .7);

  transition:
  .3s ease;

}


.season-tab:hover {

  transform:
  translateY(-5px);

  background:
  var(--white);

}


.season-tab span {

  font-size:
  1.55rem;

}


.season-tab b {

  font-size:
  .68rem;

}


.season-tab.is-active {

  color:
  var(--white);

  border-color:
  transparent;

  background:
  linear-gradient(
  135deg,
  var(--purple),
  var(--pink)
  );

  box-shadow:
  0 20px 45px
  rgba(109, 66, 255, .22);

}


/* =========================================================/* =========================================================
   ONEWNOS — YEAR OF JOY TRACK
   ========================================================= */

.joy-track{

  position:relative;

  display:grid;

  grid-template-columns:
  minmax(240px,.72fr)
  minmax(0,2.4fr)
  auto;

  align-items:center;

  gap:28px;

  min-height:180px;

  padding:
  26px
  clamp(28px,5vw,88px);

  overflow:hidden;

  color:#fff;

  background:

  radial-gradient(
  circle at 8% 20%,
  rgba(66,205,255,.15),
  transparent 28%
  ),

  radial-gradient(
  circle at 92% 75%,
  rgba(247,67,158,.20),
  transparent 31%
  ),

  linear-gradient(
  110deg,
  #06152f 0%,
  #111a48 48%,
  #30135d 100%
  );

  border-top:
  1px solid
  rgba(255,255,255,.08);

  border-bottom:
  1px solid
  rgba(255,255,255,.08);

  isolation:isolate;

}


/* moving light */

.joy-track::before{

  content:"";

  position:absolute;

  width:420px;

  height:220%;

  top:-60%;

  left:-500px;

  pointer-events:none;

  transform:
  rotate(18deg);

  background:

  linear-gradient(

  90deg,

  transparent,

  rgba(255,255,255,.09),

  transparent

  );

  filter:
  blur(14px);

  animation:

  joyLightMove
  9s
  linear
  infinite;

}


@keyframes joyLightMove{

  to{

    left:
    calc(100% + 400px);

  }

}


/* soft lower glow */

.joy-track__glow{

  position:absolute;

  width:65%;

  height:2px;

  right:18%;

  bottom:0;

  opacity:.8;

  background:

  linear-gradient(

  90deg,

  transparent,

  #44d7ff,

  #9345ff,

  #ff4c9c,

  #ffcc46,

  transparent

  );

  box-shadow:

  0 0 28px

  rgba(159,75,255,.65);

}


/* intro */

.joy-track__intro{

  position:relative;

  z-index:2;

  min-width:0;

}


.joy-track__eyebrow{

  display:block;

  margin-bottom:10px;

  color:#4dd7ff;

  font-size:.59rem;

  font-weight:1000;

  letter-spacing:.2em;

}


.joy-track__intro strong{

  display:block;

  color:#fff;

  font-size:

  clamp(
  1.45rem,
  2vw,
  2.15rem
  );

  font-weight:1000;

  line-height:1.25;

}


.joy-track__intro em{

  display:block;

  color:#ffd54a;

  font-style:normal;

}


/* seasons viewport */

.joy-track__viewport{

  position:relative;

  z-index:2;

  min-width:0;

  overflow:hidden;

  mask-image:

  linear-gradient(

  90deg,

  transparent,

  #000 5%,

  #000 95%,

  transparent

  );

  -webkit-mask-image:

  linear-gradient(

  90deg,

  transparent,

  #000 5%,

  #000 95%,

  transparent

  );

}


.joy-track__rail{

  display:flex;

  align-items:stretch;

  gap:12px;

  width:max-content;

  direction:rtl;

  animation:

  joyRailMove
  32s
  linear
  infinite;

}


.joy-track__viewport:hover
.joy-track__rail{

  animation-play-state:
  paused;

}


/* الحركة معمولة للـRTL */

@keyframes joyRailMove{

  from{

    transform:
    translateX(4%);

  }

  to{

    transform:
    translateX(43%);

  }

}


/* season mini cards */

.joy-season{

  position:relative;

  display:flex;

  align-items:center;

  gap:11px;

  width:178px;

  min-height:92px;

  padding:13px;

  overflow:hidden;

  color:#fff;

  text-decoration:none;

  background:

  linear-gradient(

  145deg,

  rgba(255,255,255,.11),

  rgba(255,255,255,.045)

  );

  border:

  1px solid

  rgba(255,255,255,.13);

  border-radius:22px;

  box-shadow:

  inset 0 1px 0

  rgba(255,255,255,.08);

  backdrop-filter:

  blur(14px);

  -webkit-backdrop-filter:

  blur(14px);

  transition:

  transform .3s ease,

  border-color .3s ease,

  background .3s ease;

}


.joy-season::before{

  content:"";

  position:absolute;

  width:55px;

  height:55px;

  left:-15px;

  bottom:-22px;

  border-radius:50%;

  opacity:.34;

  background:#ff4fa3;

  filter:blur(19px);

}


.joy-season:hover{

  transform:

  translateY(-5px);

  border-color:

  rgba(255,255,255,.34);

  background:

  linear-gradient(

  145deg,

  rgba(255,255,255,.17),

  rgba(255,255,255,.075)

  );

}


/* icon */

.joy-season__icon{

  position:relative;

  z-index:1;

  display:grid;

  place-items:center;

  flex:0 0 50px;

  width:50px;

  height:58px;

  font-size:1.55rem;

  border-radius:17px;

  background:

  linear-gradient(

  145deg,

  rgba(255,255,255,.17),

  rgba(255,255,255,.06)

  );

  border:

  1px solid

  rgba(255,255,255,.12);

  box-shadow:

  0 12px 28px

  rgba(0,0,0,.16);

}


/* card text */

.joy-season__text{

  position:relative;

  z-index:1;

  display:grid;

  min-width:0;

}


.joy-season__text small{

  margin-bottom:2px;

  color:#53d8ff;

  font-size:.52rem;

  font-weight:1000;

  letter-spacing:.12em;

}


.joy-season__text strong{

  overflow:hidden;

  color:#fff;

  font-size:.91rem;

  font-weight:1000;

  white-space:nowrap;

  text-overflow:ellipsis;

}


.joy-season__text em{

  overflow:hidden;

  margin-top:3px;

  color:rgba(255,255,255,.55);

  font-size:.59rem;

  font-style:normal;

  font-weight:800;

  white-space:nowrap;

  text-overflow:ellipsis;

}


/* final hint */

.joy-track__hint{

  position:relative;

  z-index:2;

  display:grid;

  justify-items:center;

  gap:8px;

  max-width:82px;

  color:

  rgba(255,255,255,.57);

  font-size:.58rem;

  font-weight:900;

  line-height:1.6;

  text-align:center;

}


.joy-track__hint span{

  position:relative;

  width:30px;

  height:30px;

  border:

  1px solid

  rgba(255,255,255,.22);

  border-radius:50%;

}


.joy-track__hint span::before{

  content:"";

  position:absolute;

  width:7px;

  height:7px;

  top:50%;

  left:50%;

  border-radius:50%;

  transform:

  translate(-50%,-50%);

  background:#9cff3b;

  box-shadow:

  0 0 16px

  #9cff3b;

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .joy-track{

    grid-template-columns:
    220px
    minmax(0,1fr);

  }


  .joy-track__hint{

    display:none;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .joy-track{

    display:block;

    min-height:auto;

    padding:

    28px 0

    24px;

  }


  .joy-track__intro{

    padding:

    0 22px

    21px;

  }


  .joy-track__eyebrow{

    margin-bottom:7px;

  }


  .joy-track__intro strong{

    font-size:1.55rem;

  }


  .joy-track__viewport{

    overflow-x:auto;

    overflow-y:hidden;

    padding:

    0 20px

    7px;

    mask-image:none;

    -webkit-mask-image:none;

    scrollbar-width:none;

    -webkit-overflow-scrolling:
    touch;

  }


  .joy-track__viewport::-webkit-scrollbar{

    display:none;

  }


  .joy-track__rail{

    gap:10px;

    animation:none;

  }


  .joy-season{

    width:165px;

    min-height:86px;

    border-radius:20px;

  }


  .joy-season:hover{

    transform:none;

  }

}

/* =========================================================
   10. FASHION
   ========================================================= */

.fashion-section {

  padding:
  150px 0;

  color:
  var(--white);

  background:

  radial-gradient(
  circle at 80% 25%,
  rgba(71, 201, 255, .18),
  transparent 28%
  ),

  radial-gradient(
  circle at 15% 75%,
  rgba(255, 79, 154, .17),
  transparent 30%
  ),

  var(--navy-deep);

}


.fashion-shell {

  width:
  var(--container);

  margin-inline:
  auto;

  display:
  grid;

  grid-template-columns:
  .75fr 1.25fr;

  align-items:
  center;

  gap:
  80px;

}


.fashion-content h2 {

  font-size:
  clamp(2.7rem, 4.5vw, 5.2rem);

  line-height:
  1.12;

  letter-spacing:
  -.055em;

}


.fashion-content h2 span {

  color:
  var(--pink-soft);

}


.fashion-content > p {

  max-width:
  560px;

  margin:
  27px 0;

  color:
  rgba(255, 255, 255, .62);

  font-size:
  .9rem;

  line-height:
  2.1;

}


.fashion-tags {

  display:
  flex;

  flex-wrap:
  wrap;

  gap:
  9px;

  margin-bottom:
  35px;

}


.fashion-tags span {

  padding:
  11px 16px;

  border:
  1px solid
  rgba(255, 255, 255, .15);

  border-radius:
  100px;

  color:
  rgba(255, 255, 255, .7);

  background:
  rgba(255, 255, 255, .05);

  font-size:
  .63rem;

}


.fashion-gallery {

  display:
  grid;

  grid-template-columns:
  repeat(2, 1fr);

  gap:
  16px;

}


.fashion-card {

  position:
  relative;

  min-height:
  315px;

  overflow:
  hidden;

  border:
  1px solid
  rgba(255, 255, 255, .12);

  border-radius:
  30px;

}


.fashion-card--large {

  grid-row:
  span 2;

  min-height:
  650px;

}


.fashion-card::after {

  position:
  absolute;

  inset:
  0;

  background:
  linear-gradient(
  to top,
  rgba(2, 11, 30, .92),
  transparent 62%
  );

  content:
  "";

}


.fashion-card img {

  width:
  100%;

  height:
  100%;

  object-fit:
  cover;

  transition:
  transform .8s ease;

}


.fashion-card:hover img {

  transform:
  scale(1.06);

}


.fashion-card > div {

  position:
  absolute;

  right:
  28px;

  bottom:
  27px;

  left:
  28px;

  z-index:
  2;

}


.fashion-card span {

  color:
  var(--sky);

  font-size:
  .58rem;

  font-weight:
  900;

  letter-spacing:
  .12em;

}


.fashion-card h3 {

  margin-top:
  10px;

  font-size:
  1.25rem;

  line-height:
  1.5;

}


/* =========================================================
   11. ACCESSORIES
   ========================================================= */

.accessories-section {

  padding:
  130px 0;

  background:
  linear-gradient(
  135deg,
  #fff4f8,
  #f2edff
  );

}


.accessories-shell {

  width:
  var(--container);

  margin-inline:
  auto;

  display:
  grid;

  grid-template-columns:
  1.1fr .9fr;

  align-items:
  center;

  gap:
  100px;

}


.accessories-visual {

  position:
  relative;

  min-height:
  600px;

  display:
  grid;

  place-items:
  center;

}


.accessories-image {

  width:
  min(90%, 600px);

  overflow:
  hidden;

  border-radius:
  50% 50% 38% 62% /
  48% 35% 65% 52%;

  box-shadow:
  0 35px 90px
  rgba(109, 66, 255, .18);

}


.accessories-image img {

  width:
  100%;

  aspect-ratio:
  1 / 1;

  object-fit:
  cover;

}


.accessory-orbit {

  position:
  absolute;

  display:
  grid;

  place-items:
  center;

  border-radius:
  50%;

  color:
  var(--white);

  font-size:
  .66rem;

  font-weight:
  800;

  box-shadow:
  0 15px 35px
  rgba(0, 0, 0, .14);

  animation:
  orbitFloat 5s ease-in-out
  infinite;

}


.accessory-orbit--one {

  top:
  10%;

  right:
  7%;

  width:
  95px;

  height:
  95px;

  background:
  var(--pink);

}


.accessory-orbit--two {

  bottom:
  8%;

  right:
  18%;

  width:
  75px;

  height:
  75px;

  color:
  var(--navy);

  background:
  var(--yellow);

  animation-delay:
  1s;

}


.accessory-orbit--three {

  top:
  43%;

  left:
  3%;

  width:
  88px;

  height:
  88px;

  background:
  var(--purple);

  animation-delay:
  2s;

}


@keyframes orbitFloat {

  0%,
  100% {

    transform:
    translateY(0);

  }

  50% {

    transform:
    translateY(-18px);

  }

}


.accessories-content h2 {

  font-size:
  clamp(3rem, 5vw, 5.7rem);

  line-height:
  1.1;

  letter-spacing:
  -.06em;

}


.accessories-content h2 span {

  color:
  var(--pink);

}


.accessories-content p {

  max-width:
  470px;

  margin:
  25px 0 30px;

  color:
  var(--muted);

  font-size:
  .9rem;

  line-height:
  2.1;

}


/* =========================================================
   12. GIFTS
   ========================================================= */

.gifts-section {

  padding:
  150px 0;

  overflow:
  hidden;

  color:
  var(--white);

  background:

  radial-gradient(
  circle at 80% 50%,
  rgba(255, 216, 77, .18),
  transparent 28%
  ),

  radial-gradient(
  circle at 20% 20%,
  rgba(255, 79, 154, .24),
  transparent 30%
  ),

  linear-gradient(
  135deg,
  #471455,
  #6f246f 45%,
  #271454
  );

}


.gifts-shell {

  width:
  var(--container);

  margin-inline:
  auto;

  display:
  grid;

  grid-template-columns:
  .85fr 1.15fr;

  align-items:
  center;

  gap:
  90px;

}


.gifts-content h2 {

  font-size:
  clamp(2.8rem, 4.6vw, 5.4rem);

  line-height:
  1.13;

  letter-spacing:
  -.055em;

}


.gifts-content h2 span {

  display:
  block;

  margin-top:
  15px;

  color:
  var(--yellow);

  font-size:
  .63em;

  line-height:
  1.45;

}


.gifts-content > p {

  max-width:
  560px;

  margin:
  28px 0;

  color:
  rgba(255, 255, 255, .64);

  font-size:
  .88rem;

  line-height:
  2.1;

}


.gift-types {

  display:
  grid;

  gap:
  10px;

  margin-bottom:
  35px;

}


.gift-types > div {

  display:
  flex;

  align-items:
  center;

  gap:
  18px;

  padding:
  15px;

  border:
  1px solid
  rgba(255, 255, 255, .12);

  border-radius:
  17px;

  background:
  rgba(255, 255, 255, .06);

}


.gift-types b {

  display:
  grid;

  place-items:
  center;

  width:
  40px;

  height:
  40px;

  border-radius:
  13px;

  color:
  var(--navy);

  background:
  var(--yellow);

  font-size:
  .62rem;

}


.gift-types span {

  font-size:
  .74rem;

  font-weight:
  700;

}


.gift-visual {

  position:
  relative;

  min-height:
  650px;

  display:
  grid;

  place-items:
  center;

}


.gift-glow {

  position:
  absolute;

  width:
  75%;

  height:
  75%;

  border-radius:
  50%;

  background:
  rgba(255, 216, 77, .2);

  filter:
  blur(70px);

}


.gift-visual > img {

  position:
  relative;

  z-index:
  2;

  max-width:
  720px;

  max-height:
  630px;

  object-fit:
  contain;

  filter:
  drop-shadow(
  0 40px 50px
  rgba(0, 0, 0, .3)
  );

  animation:
  giftFloat 5s ease-in-out
  infinite;

}


@keyframes giftFloat {

  0%,
  100% {

    transform:
    translateY(0)
    rotate(-2deg);

  }

  50% {

    transform:
    translateY(-20px)
    rotate(1deg);

  }

}


.gift-note {

  position:
  absolute;

  right:
  3%;

  bottom:
  12%;

  z-index:
  4;

  display:
  flex;

  align-items:
  center;

  gap:
  15px;

  padding:
  18px 22px;

  border:
  1px solid
  rgba(255, 255, 255, .2);

  border-radius:
  20px;

  background:
  rgba(255, 255, 255, .11);

  box-shadow:
  0 20px 50px
  rgba(0, 0, 0, .2);

  backdrop-filter:
  blur(20px);

}


.gift-note span {

  display:
  grid;

  place-items:
  center;

  width:
  44px;

  height:
  44px;

  border-radius:
  50%;

  color:
  var(--white);

  background:
  var(--pink);

}


.gift-note p {

  font-size:
  .67rem;

  font-weight:
  700;

  line-height:
  1.8;

}


/* =========================================================
   13. SCHOOL + SUMMER
   ========================================================= */

.split-seasons {

  display:
  grid;

  grid-template-columns:
  repeat(2, 1fr);

}


.split-card {

  position:
  relative;

  min-height:
  620px;

  padding:
  90px;

  overflow:
  hidden;

  display:
  flex;

  align-items:
  center;

}


.split-card--school {

  color:
  var(--white);

  background:

  radial-gradient(
  circle at 15% 80%,
  rgba(71, 201, 255, .35),
  transparent 35%
  ),

  linear-gradient(
  135deg,
  #101c48,
  #2556b6
  );

}


.split-card--summer {

  color:
  var(--navy);

  background:

  radial-gradient(
  circle at 10% 20%,
  rgba(255, 255, 255, .55),
  transparent 30%
  ),

  linear-gradient(
  135deg,
  #ffd34d,
  #ff9d55
  );

}


.split-card__content {

  position:
  relative;

  z-index:
  3;

  max-width:
  560px;

}


.split-card__content > span {

  font-size:
  .65rem;

  font-weight:
  900;

  letter-spacing:
  .17em;

  opacity:
  .65;

}


.split-card h2 {

  margin:
  20px 0;

  font-size:
  clamp(2.7rem, 4vw, 5rem);

  line-height:
  1.12;

  letter-spacing:
  -.055em;

}


.split-card h2 strong {

  color:
  var(--sky);

}


.split-card--summer h2 strong {

  color:
  var(--purple);

}


.split-card p {

  max-width:
  450px;

  margin-bottom:
  30px;

  font-size:
  .86rem;

  line-height:
  2;

  opacity:
  .68;

}


.split-card a {

  display:
  inline-flex;

  align-items:
  center;

  gap:
  15px;

  padding-bottom:
  7px;

  border-bottom:
  2px solid
  currentColor;

  font-size:
  .75rem;

  font-weight:
  900;

}


.split-icon {

  position:
  absolute;

  left:
  7%;

  bottom:
  5%;

  font-size:
  clamp(9rem, 16vw, 17rem);

  line-height:
  1;

  opacity:
  .17;

  transform:
  rotate(-12deg);

}


/* =========================================================
   14. WORLD
   ========================================================= */

.world-section {

  padding:
  150px 0;

  background:

  radial-gradient(
  circle at 10% 30%,
  rgba(255, 79, 154, .12),
  transparent 25%
  ),

  var(--page);

}


.world-shell {

  width:
  var(--container);

  margin-inline:
  auto;

}


.world-heading {

  max-width:
  820px;

  margin:
  0 auto 75px;

  text-align:
  center;

}


.world-heading h2 {

  font-size:
  clamp(2.8rem, 5vw, 5.6rem);

  line-height:
  1.12;

  letter-spacing:
  -.055em;

}


.world-heading h2 span {

  color:
  var(--purple);

}


.world-heading p {

  max-width:
  580px;

  margin:
  25px auto 0;

  color:
  var(--muted);

  font-size:
  .9rem;

  line-height:
  2.1;

}


.new-things {

  display:
  grid;

  grid-template-columns:
  repeat(4, 1fr);

  gap:
  16px;

}


.new-card {

  position:
  relative;

  min-height:
  340px;

  padding:
  35px;

  overflow:
  hidden;

  border-radius:
  32px;

  box-shadow:
  var(--shadow);

  transition:
  transform .4s ease;

}


.new-card:hover {

  transform:
  translateY(-10px);

}


.new-card::after {

  position:
  absolute;

  left:
  -40px;

  bottom:
  -60px;

  width:
  180px;

  height:
  180px;

  border:
  35px solid
  rgba(255, 255, 255, .12);

  border-radius:
  50%;

  content:
  "";

}


.new-card > span {

  display:
  grid;

  place-items:
  center;

  width:
  50px;

  height:
  50px;

  border:
  1px solid
  rgba(255, 255, 255, .28);

  border-radius:
  15px;

  font-size:
  .67rem;

  font-weight:
  900;

}


.new-card h3 {

  margin:
  85px 0 15px;

  font-size:
  1.55rem;

}


.new-card p {

  max-width:
  210px;

  font-size:
  .72rem;

  line-height:
  1.9;

  opacity:
  .67;

}


.new-card--one {

  color:
  var(--white);

  background:
  linear-gradient(
  145deg,
  var(--purple),
  #9b57ff
  );

}


.new-card--two {

  color:
  var(--navy);

  background:
  linear-gradient(
  145deg,
  var(--yellow),
  #ffae4a
  );

}


.new-card--three {

  color:
  var(--white);

  background:
  linear-gradient(
  145deg,
  var(--pink),
  #ff7f79
  );

}


.new-card--four {

  color:
  var(--navy);

  background:
  linear-gradient(
  145deg,
  var(--sky),
  #61e5cc
  );

}


/* =========================================================
   15. FINAL SHOP
   ========================================================= */

.final-shop {

  position:
  relative;

  min-height:
  760px;

  padding:
  130px 30px;

  overflow:
  hidden;

  display:
  grid;

  place-items:
  center;

  color:
  var(--white);

  text-align:
  center;

  background:

  radial-gradient(
  circle at 50% 50%,
  rgba(255, 79, 154, .25),
  transparent 33%
  ),

  radial-gradient(
  circle at 15% 30%,
  rgba(71, 201, 255, .18),
  transparent 25%
  ),

  linear-gradient(
  135deg,
  #06142f,
  #31145f
  );

}


.final-shop::before {

  position:
  absolute;

  inset:
  45px;

  border:
  1px solid
  rgba(255, 255, 255, .1);

  border-radius:
  55px;

  content:
  "";

}


.final-shop__decor span {

  position:
  absolute;

  font-size:
  2rem;

  animation:
  finalFloat 5s ease-in-out
  infinite;

}


.final-shop__decor span:nth-child(1) {

  top:
  20%;

  right:
  12%;

  color:
  var(--pink);

}


.final-shop__decor span:nth-child(2) {

  top:
  12%;

  left:
  20%;

  color:
  var(--yellow);

  animation-delay:
  1s;

}


.final-shop__decor span:nth-child(3) {

  bottom:
  18%;

  right:
  20%;

  color:
  var(--sky);

  animation-delay:
  2s;

}


.final-shop__decor span:nth-child(4) {

  bottom:
  25%;

  left:
  10%;

  color:
  var(--pink);

}


.final-shop__decor span:nth-child(5) {

  top:
  50%;

  left:
  25%;

  color:
  var(--yellow);

  animation-delay:
  1.5s;

}


@keyframes finalFloat {

  0%,
  100% {

    transform:
    translateY(0)
    rotate(0);

  }

  50% {

    transform:
    translateY(-20px)
    rotate(12deg);

  }

}


.final-shop__content {

  position:
  relative;

  z-index:
  3;

  max-width:
  900px;

}


.final-label {

  color:
  var(--sky);

  font-size:
  .7rem;

  font-weight:
  900;

  letter-spacing:
  .18em;

}


.final-shop h2 {

  margin:
  25px 0;

  font-size:
  clamp(3rem, 5.5vw, 6.5rem);

  line-height:
  1.08;

  letter-spacing:
  -.06em;

}


.final-shop h2 strong {

  color:
  var(--yellow);

}


.final-shop p {

  max-width:
  650px;

  margin-inline:
  auto;

  color:
  rgba(255, 255, 255, .62);

  font-size:
  .9rem;

  line-height:
  2.1;

}


.final-buttons {

  display:
  flex;

  justify-content:
  center;

  flex-wrap:
  wrap;

  gap:
  13px;

  margin-top:
  40px;

}


/* =========================================================
   16. FOOTER
   ========================================================= */

.site-footer {

  padding:
  100px 0 25px;

  color:
  var(--white);

  background:
  #020c20;

}


.footer-shell {

  width:
  var(--container);

  margin-inline:
  auto;

  display:
  grid;

  grid-template-columns:
  1.25fr .7fr .7fr 1.25fr;

  gap:
  80px;

}


.footer-brand > img {

  width:
  150px;

  max-height:
  70px;

  object-fit:
  contain;

  padding:
  10px;

  border-radius:
  15px;

  background:
  var(--white);

}


.footer-brand p,
.footer-parent p {

  max-width:
  350px;

  margin:
  25px 0;

  color:
  rgba(255, 255, 255, .45);

  font-size:
  .7rem;

  line-height:
  2;

}


.footer-brand > a {

  display:
  inline-flex;

  align-items:
  center;

  gap:
  15px;

  color:
  var(--yellow);

  font-size:
  .74rem;

  font-weight:
  900;

}


.footer-links,
.footer-contact {

  display:
  flex;

  flex-direction:
  column;

  gap:
  18px;

}


.footer-links > span,
.footer-contact > span,
.footer-parent > span {

  margin-bottom:
  8px;

  color:
  var(--sky);

  font-size:
  .68rem;

  font-weight:
  900;

}


.footer-links a,
.footer-contact a {

  color:
  rgba(255, 255, 255, .58);

  font-size:
  .72rem;

  font-weight:
  600;

  transition:
  color .3s ease;

}


.footer-links a:hover,
.footer-contact a:hover {

  color:
  var(--white);

}


.footer-parent > img {

  width:
  150px;

  max-height:
  50px;

  margin-top:
  20px;

  object-fit:
  contain;

  filter:
  brightness(0)
  invert(1);

}


.footer-parent > a {

  color:
  var(--yellow);

  font-size:
  .72rem;

  font-weight:
  800;

}


.footer-bottom {

  width:
  var(--container);

  margin:
  70px auto 0;

  padding-top:
  25px;

  display:
  flex;

  align-items:
  center;

  justify-content:
  space-between;

  border-top:
  1px solid
  rgba(255, 255, 255, .1);

  color:
  rgba(255, 255, 255, .28);

  font-size:
  .6rem;

  font-weight:
  700;

}


/* =========================================================
   17. REVEAL
   ========================================================= */

[data-reveal] {

  opacity: 0;

  transform:
  translateY(45px);

  transition:
  opacity .9s ease,
  transform .9s
  cubic-bezier(.2, .8, .2, 1);

}


[data-reveal].is-visible {

  opacity: 1;

  transform:
  translateY(0);

}


/* =========================================================
   18. TABLET
   ========================================================= */

@media
(max-width: 1250px) {

  :root {

    --container:
    min(100% - 45px, 1180px);

  }


  .desktop-nav {

    gap:
    22px;

  }


  .back-worlds {

    display:
    none;

  }


  .hero-shell {

    gap:
    45px;

  }


  .hero-content h1 {

    font-size:
    clamp(3.3rem, 6vw, 5rem);

  }


  .fashion-shell,
  .gifts-shell {

    gap:
    45px;

  }


  .split-card {

    padding:
    65px;

  }


  .footer-shell {

    gap:
    40px;

  }

}


/* =========================================================
   19. MOBILE
   ========================================================= */

@media
(max-width: 980px) {

  :root {

    --container:
    calc(100% - 32px);

  }


  .site-header {

    top:
    12px;

  }


  .header-shell {

    min-height:
    70px;

    grid-template-columns:
    1fr auto;

    padding:
    8px 10px;

    border-radius:
    21px;

  }


  .header-brands {

    gap:
    12px;

  }


  .onewnos-brand {

    width:
    90px;

    height:
    51px;

    padding:
    6px 10px;

    border-radius:
    14px;

  }


  .header-divider {

    height:
    31px;

  }


  .parent-brand img {

    width:
    78px;

  }


  .desktop-nav,
  .header-actions {

    display:
    none;

  }


  .nav-toggle {

    display:
    block;

  }


  .hero {

    min-height:
    auto;

    padding:
    135px 0 60px;

  }


  .hero-shell {

    grid-template-columns:
    1fr;

    gap:
    60px;

  }


  .hero-content {

    max-width:
    760px;

  }


  .hero-content h1 {

    font-size:
    clamp(3.2rem, 10vw, 5.8rem);

  }


  .hero-visual {

    min-height:
    550px;

  }


  .hero-image {

    width:
    86%;

  }


  .shopping-journey {

    margin-top:
    55px;

  }


  .seasons-section,
  .fashion-section,
  .accessories-section,
  .gifts-section,
  .world-section {

    padding:
    100px 0;

  }


  .season-stage {

    min-height:
    780px;

  }


  .season-image {

    top:
    auto;

    width:
    100%;

    height:
    47%;

  }


  .season-image::after {

    background:
    linear-gradient(
    to bottom,
    transparent,
    var(--navy)
    );

  }


  .season-stage__content {

    width:
    100%;

    padding:
    65px 45px;

  }


  .season-selector {

    grid-template-columns:
    repeat(4, 1fr);

  }


  .fashion-shell,
  .accessories-shell,
  .gifts-shell {

    grid-template-columns:
    1fr;

  }


  .fashion-content {

    max-width:
    750px;

  }


  .fashion-gallery {

    order:
    2;

  }


  .accessories-visual {

    min-height:
    520px;

  }


  .gifts-content {

    max-width:
    750px;

  }


  .gift-visual {

    min-height:
    550px;

  }


  .split-seasons {

    grid-template-columns:
    1fr;

  }


  .split-card {

    min-height:
    520px;

  }


  .new-things {

    grid-template-columns:
    repeat(2, 1fr);

  }


  .footer-shell {

    grid-template-columns:
    repeat(2, 1fr);

    gap:
    65px;

  }

}


/* =========================================================
   20. SMALL MOBILE
   ========================================================= */

@media
(max-width: 650px) {

  :root {

    --container:
    calc(100% - 24px);

  }


  .mobile-nav {

    padding:
    20px;

  }


  .mobile-nav__onewnos-logo {

    width:
    72px;

  }


  .mobile-nav__parent-logo {

    width:
    72px;

  }


  .mobile-nav__close {

    width:
    50px;

    height:
    50px;

  }


  .mobile-nav__intro {

    margin:
    48px 0 25px;

  }


  .mobile-nav__intro h2 {

    font-size:
    2.6rem;

  }


  .mobile-nav__links {

    gap:
    8px;

  }


  .mobile-nav__links a {

    min-height:
    87px;

    padding:
    11px;

    gap:
    10px;

  }


  .mobile-nav__links b {

    flex-basis:
    42px;

    height:
    42px;

  }


  .mobile-nav__links strong {

    font-size:
    .67rem;

  }


  .mobile-nav__links small {

    font-size:
    .54rem;

  }


  .mobile-nav__bottom {

    padding-top:
    35px;

  }


  .mobile-nav__bottom > a:first-child {

    max-width:
    140px;

    line-height:
    1.8;

  }


  .hero {

    padding-top:
    125px;

  }


  .hero-content h1 {

    margin-bottom:
    20px;

    font-size:
    clamp(2.8rem, 14vw, 4.3rem);

    line-height:
    1.08;

  }


  .hero-content h1 strong {

    margin-top:
    13px;

    font-size:
    .44em;

  }


  .hero-description {

    font-size:
    .77rem;

    line-height:
    2;

  }


  .hero-buttons {

    display:
    grid;

    grid-template-columns:
    1fr;

  }


  .button {

    width:
    100%;

    min-height:
    58px;

  }


  .hero-mini-info {

    gap:
    13px;

    justify-content:
    space-between;

  }


  .hero-mini-info span {

    font-size:
    .52rem;

  }


  .hero-visual {

    min-height:
    390px;

  }


  .hero-image {

    width:
    92%;

    border-radius:
    28px;

  }


  .floating-card--season {

    top:
    0;

    right:
    0;

    width:
    155px;

    padding:
    15px;

  }


  .floating-card--delivery {

    bottom:
    0;

    left:
    0;

    min-width:
    195px;

    padding:
    12px;

  }


  .floating-gift {

    right:
    0;

    bottom:
    70px;

  }


  .shopping-journey {

    grid-template-columns:
    repeat(5, 100px);

    gap:
    0;

    width:
    100%;

    padding:
    0 18px 15px;

    overflow-x:
    auto;

    scrollbar-width:
    none;

  }


  .shopping-journey::-webkit-scrollbar {

    display:
    none;

  }


  .journey-line {

    right:
    60px;

    left:
    auto;

    width:
    390px;

  }


  .seasons-heading {

    margin-bottom:
    45px;

  }


  .seasons-heading h2,
  .world-heading h2 {

    font-size:
    2.7rem;

  }


  .seasons-heading p,
  .world-heading p {

    font-size:
    .76rem;

  }


  .season-stage {

    min-height:
    690px;

    border-radius:
    30px;

  }


  .season-stage__content {

    padding:
    45px 27px;

  }


  .season-stage__content h3 {

    font-size:
    2.6rem;

  }


  .season-stage__content p {

    font-size:
    .76rem;

  }


  .season-number {

    right:
    25px;

  }


  .season-number b {

    font-size:
    4rem;

  }


  .season-selector {

    display:
    flex;

    padding-bottom:
    10px;

    overflow-x:
    auto;

    scrollbar-width:
    none;

  }


  .season-selector::-webkit-scrollbar {

    display:
    none;

  }


  .season-tab {

    flex:
    0 0 100px;

    min-height:
    100px;

  }


  .fashion-content h2,
  .accessories-content h2,
  .gifts-content h2 {

    font-size:
    2.8rem;

  }


  .fashion-gallery {

    grid-template-columns:
    1fr;

  }


  .fashion-card,
  .fashion-card--large {

    grid-row:
    auto;

    min-height:
    420px;

  }


  .accessories-shell {

    gap:
    35px;

  }


  .accessories-visual {

    min-height:
    390px;

  }


  .accessory-orbit--one {

    width:
    75px;

    height:
    75px;

  }


  .accessory-orbit--two {

    width:
    63px;

    height:
    63px;

  }


  .accessory-orbit--three {

    width:
    70px;

    height:
    70px;

  }


  .gifts-shell {

    gap:
    30px;

  }


  .gift-visual {

    min-height:
    410px;

  }


  .gift-note {

    right:
    0;

    bottom:
    3%;

  }


  .split-card {

    min-height:
    520px;

    padding:
    45px 25px;

  }


  .split-card h2 {

    font-size:
    2.8rem;

  }


  .split-icon {

    font-size:
    10rem;

  }


  .new-things {

    grid-template-columns:
    1fr;

  }


  .new-card {

    min-height:
    270px;

  }


  .new-card h3 {

    margin-top:
    55px;

  }


  .final-shop {

    min-height:
    680px;

    padding:
    90px 24px;

  }


  .final-shop::before {

    inset:
    18px;

    border-radius:
    35px;

  }


  .final-shop h2 {

    font-size:
    3rem;

  }


  .final-shop p {

    font-size:
    .76rem;

  }


  .final-buttons {

    display:
    grid;

  }


  .footer-shell {

    grid-template-columns:
    1fr;

    gap:
    55px;

  }


  .footer-bottom {

    flex-direction:
    column;

    gap:
    15px;

    text-align:
    center;

  }

}


/* =========================================================
   21. EXTRA SMALL
   ========================================================= */

@media
(max-width: 390px) {

  .onewnos-brand {

    width:
    78px;

  }


  .parent-brand img {

    width:
    65px;

  }


  .mobile-nav__links {

    grid-template-columns:
    1fr;

  }


  .mobile-nav__intro {

    margin-top:
    35px;

  }


  .mobile-nav__intro p {

    display:
    none;

  }


  .hero-content h1 {

    font-size:
    2.65rem;

  }


  .hero-mini-info {

    display:
    none;

  }


  .hero-visual {

    min-height:
    350px;

  }


  .floating-card--season {

    width:
    140px;

  }


  .floating-card--delivery {

    min-width:
    180px;

  }


  .floating-gift {

    display:
    none;

  }

}


/* =========================================================
   22. REDUCED MOTION
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {

  * {

    scroll-behavior:
    auto !important;

    animation-duration:
    .01ms !important;

    animation-iteration-count:
    1 !important;

    transition-duration:
    .01ms !important;

  }

}



/* =========================================================
   FIX — SEASON IMAGE HOVER
   منع الصورة من الخروج من الإطار
   ========================================================= */

.season-visual,
.season-panel__visual,
.season-panel__image {

  position: relative !important;

  overflow: hidden !important;

  isolation: isolate;

}


/* الصورة ثابتة داخل مساحتها */

.season-visual img,
.season-panel__visual img,
.season-panel__image img {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  object-fit: cover !important;

  object-position: center !important;

  margin: 0 !important;

  translate: none !important;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  transform: scale(1) !important;

  transition:

    transform 1.2s cubic-bezier(.22,.8,.24,1),

    filter .8s ease !important;

}


/* إفكت الماوس يفضل موجود لكن من غير تحريك الصورة */

.season-panel:hover .season-visual img,
.season-panel:hover .season-panel__visual img,
.season-panel:hover .season-panel__image img,
.season-visual:hover img,
.season-panel__visual:hover img {

  transform: scale(1.035) !important;

  translate: none !important;

}


/* إلغاء أي حركة قديمة كانت بتحرك الصورة يمين أو شمال */

.season-panel:hover img {

  margin: 0 !important;

  left: 0 !important;

  right: 0 !important;

}




/* =========================================================
   99. FINAL STABILITY & SEASONS FIXES
   ========================================================= */

/* Loader safety: even if JavaScript is delayed, it cannot block forever. */
.page-loader {
  animation: loaderSafetyHide .01s linear 4s forwards;
}

@keyframes loaderSafetyHide {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Reveal stays animated, but content remains accessible without JS. */
html:not(.js) [data-reveal] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Keep the season card dimensions stable. */
.season-stage {
  min-height: 640px;
  height: 640px;
  isolation: isolate;
}

.season-image {
  overflow: hidden;
}

.season-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0) scale(1);
  will-change: opacity, transform;
}

.season-stage:hover .season-image img {
  transform: translate3d(0,0,0) scale(1.035);
}

.season-stage__content,
.season-stage__content > *,
.season-number {
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.22,.8,.24,1);
}

.season-stage.is-changing .season-image img {
  opacity: 0;
  transform: translate3d(0,0,0) scale(1.015);
}

.season-stage.is-changing .season-stage__content > *,
.season-stage.is-changing .season-number {
  opacity: 0;
  transform: translateY(10px);
}

.season-selector {
  direction: rtl;
}

@media (max-width: 820px) {
  .season-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px 390px;
    height: 690px;
    min-height: 690px;
    border-radius: 30px;
  }

  .season-image {
    position: relative;
    inset: auto;
    width: 100%;
    height: 300px;
  }

  .season-image::after {
    background: linear-gradient(
      180deg,
      transparent 48%,
      rgba(7, 23, 53, .92) 100%
    );
  }

  .season-stage__content {
    width: 100%;
    min-height: 390px;
    padding: 34px 24px 72px;
  }

  .season-stage__content h3 {
    margin: 16px 0;
    font-size: clamp(2.15rem, 10.5vw, 3.25rem);
    line-height: 1.12;
    letter-spacing: -.035em;
  }

  .season-stage__content p {
    min-height: 58px;
    font-size: .78rem;
    line-height: 1.9;
  }

  .season-number {
    right: auto;
    left: 22px;
    bottom: 22px;
  }

  .season-number b {
    font-size: 4rem;
  }

  .season-selector {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 7px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .season-selector::-webkit-scrollbar {
    display: none;
  }

  .season-tab {
    flex: 0 0 30%;
    min-width: 30%;
    min-height: 92px;
  }
}

@media (max-width: 430px) {
  .season-stage {
    grid-template-rows: 275px 390px;
    height: 665px;
    min-height: 665px;
  }

  .season-image {
    height: 275px;
  }

  .season-stage__content {
    min-height: 390px;
    padding: 30px 20px 68px;
  }

  .season-stage__content h3 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }
}


/* =========================================================
   100. ONEWNOS REFINED SCALE — FINAL
   ========================================================= */

/* A calmer, clearer overall scale */
.section { padding: clamp(72px, 7vw, 108px) 0; }
.section-heading { max-width: 760px; margin-bottom: clamp(32px, 4vw, 54px); }
.section-heading h2 { font-size: clamp(38px, 4.1vw, 66px); line-height: 1.12; letter-spacing: -.035em; }
.section-heading p { max-width: 620px; margin-top: 17px; font-size: clamp(14px, .95vw, 17px); line-height: 1.85; }

.hero { min-height: 780px; padding: 130px 0 70px; }
.hero-shell { gap: clamp(36px, 5vw, 76px); }
.hero-content h1 { font-size: clamp(48px, 4.7vw, 78px); line-height: 1.05; }
.hero-description { max-width: 610px; margin-top: 20px; font-size: clamp(14px, 1vw, 17px); line-height: 1.85; }
.hero-actions { margin-top: 27px; }
.hero-primary, .hero-secondary { min-height: 54px; padding-inline: 25px; }
.hero-visual img { max-height: 610px; }

/* More designed, less like a conventional ticker */
.season-marquee { padding: 9px 0; border-block: 1px solid rgba(255,255,255,.16); }
.marquee-track span { min-height: 38px; padding-inline: 27px; font-size: clamp(14px, 1.05vw, 18px); letter-spacing: -.01em; }
.marquee-track i { width: 22px; height: 22px; font-size: 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }

/* Seasons: compact, stable and with zero hover stretching */
.season-stage,
.season-image,
.season-stage__content { height: 570px; min-height: 570px; }
.season-stage { border-radius: 34px; }
.season-image img,
.season-stage:hover .season-image img { transform: none !important; scale: 1 !important; }
.season-stage__content { padding: 54px clamp(38px, 4.3vw, 66px); }
.season-stage__content h3 { max-width: 520px; margin-top: 18px; font-size: clamp(39px, 3.7vw, 61px); line-height: 1.1; letter-spacing: -.035em; }
.season-stage__content p { max-width: 490px; min-height: 58px; margin-top: 17px; font-size: clamp(14px, .95vw, 16px); line-height: 1.82; }
.season-button { min-height: 52px; margin-top: 21px; padding-inline: 24px; }
.season-number b { font-size: 64px; }
.season-selector { margin-top: 13px; border-radius: 23px; }
.season-tab { min-height: 86px; border-radius: 17px; }

/* Reduce visual bulk in the rest of the page */
.fashion-content h2, .accessories-content h2, .gifts-content h2 { font-size: clamp(39px, 4.1vw, 66px); line-height: 1.12; }
.fashion-content p, .accessories-content p, .gifts-content p { font-size: clamp(14px, .95vw, 17px); line-height: 1.85; }
.fashion-visual, .accessories-visual, .gifts-visual { min-height: 530px; border-radius: 32px; }
.fashion-visual img, .accessories-visual img, .gifts-visual img { height: 530px; }
.product-card, .category-card { padding: 22px; border-radius: 25px; }
.product-card h3, .category-card h3 { font-size: clamp(21px, 1.65vw, 27px); }
.final-shop { padding: clamp(82px, 8vw, 125px) 0; }
.final-shop__content h2 { font-size: clamp(44px, 4.7vw, 76px); }

@media (max-width: 820px) {
  .section { padding: 64px 0; }
  .hero { padding: 108px 0 55px; }
  .hero-content h1 { font-size: clamp(39px, 10.7vw, 55px); line-height: 1.08; }
  .hero-description { font-size: 13.5px; }
  .section-heading h2,
  .fashion-content h2,
  .accessories-content h2,
  .gifts-content h2 { font-size: clamp(34px, 9vw, 47px); line-height: 1.14; }

  .season-stage { grid-template-rows: 255px 350px; height: 605px; min-height: 605px; border-radius: 26px; }
  .season-image { height: 255px; min-height: 255px; }
  .season-stage__content { height: 350px; min-height: 350px; padding: 27px 21px 58px; }
  .season-stage__content h3 { margin-top: 12px; font-size: clamp(32px, 8.8vw, 43px); line-height: 1.12; }
  .season-stage__content p { min-height: 47px; margin-top: 12px; font-size: 12.5px; line-height: 1.72; }
  .season-button { min-height: 47px; margin-top: 14px; padding-inline: 19px; }
  .season-number { left: 18px; bottom: 17px; }
  .season-number b { font-size: 49px; }
  .season-selector { scroll-snap-type: x proximity; }
  .season-tab { flex: 0 0 29%; min-width: 29%; min-height: 80px; scroll-snap-align: center; }

  .fashion-visual, .accessories-visual, .gifts-visual { min-height: 410px; }
  .fashion-visual img, .accessories-visual img, .gifts-visual img { height: 410px; }
  .final-shop__content h2 { font-size: clamp(37px, 9.8vw, 51px); }
}

@media (max-width: 430px) {
  .season-stage { grid-template-rows: 235px 345px; height: 580px; min-height: 580px; }
  .season-image { height: 235px; min-height: 235px; }
  .season-stage__content { height: 345px; min-height: 345px; }
}





/* =========================================================
   ACCESSORIES — IMAGE SLIDESHOW
   ========================================================= */


/* الإطار الأساسي */

.accessories-image{

  position:relative;

  overflow:hidden;

  isolation:isolate;

  background:

  linear-gradient(

    145deg,

    #fff7f5,

    #f5eaff

  );

}


/* كل صور السلايدر */

.accessories-slide{

  position:absolute;

  inset:0;

  z-index:1;

  display:block;

  width:100%;

  height:100%;

  padding:12px;

  opacity:0;

  visibility:hidden;

  object-fit:contain;

  object-position:center;

  transform:scale(.985);

  transition:

    opacity .8s ease,

    visibility .8s ease,

    transform 1.2s
    cubic-bezier(.2,.75,.2,1);

}


/* الصورة الظاهرة */

.accessories-slide.is-active{

  z-index:2;

  opacity:1;

  visibility:visible;

  transform:scale(1);

}


/* إلغاء أي تكبير قديم للصورة */

.accessories-visual:hover
.accessories-image img,

.accessories-image:hover img,

.accessories-image img:hover{

  transform:scale(1);

}


/* إضاءة داخل الإطار */

.accessories-image::after{

  content:"";

  position:absolute;

  z-index:3;

  inset:0;

  pointer-events:none;

  border-radius:inherit;

  box-shadow:

    inset 0 0 0 1px

    rgba(255,255,255,.5),

    inset 0 -50px 80px

    rgba(74,36,128,.06);

}


/* نقاط السلايدر */

.accessories-slider__dots{

  position:absolute;

  z-index:8;

  right:50%;

  bottom:20px;

  display:flex;

  align-items:center;

  gap:7px;

  padding:7px 10px;

  border:

    1px solid

    rgba(255,255,255,.55);

  border-radius:999px;

  transform:

    translateX(50%);

  background:

    rgba(9,21,52,.42);

  box-shadow:

    0 8px 25px

    rgba(13,20,55,.14);

  backdrop-filter:

    blur(12px);

  -webkit-backdrop-filter:

    blur(12px);

}


/* النقطة */

.accessories-slider__dot{

  width:7px;

  height:7px;

  padding:0;

  cursor:pointer;

  border:0;

  border-radius:50%;

  background:

    rgba(255,255,255,.55);

  transition:

    width .3s ease,

    background .3s ease;

}


/* نقطة الصورة الحالية */

.accessories-slider__dot.is-active{

  width:25px;

  border-radius:999px;

  background:#ff4b98;

}


/* الموبايل */

@media(max-width:700px){

  .accessories-slide{

    padding:7px;

  }


  .accessories-slider__dots{

    bottom:13px;

  }

}


/* =========================================================
   ACCESSORIES SLIDER — COMPLETE FIX
   ========================================================= */


/* الجزء البصري بالكامل */

.accessories-visual{

  position:relative;

  width:min(100%, 650px);

  height:600px;

  margin-inline:auto;

  display:flex;

  align-items:center;

  justify-content:center;

  isolation:isolate;

}


/* الإطار الكبير */

.accessories-image{

  position:relative !important;

  display:block !important;

  width:540px !important;

  height:540px !important;

  max-width:100%;

  flex:none;

  overflow:hidden !important;

  opacity:1 !important;

  visibility:visible !important;

  border-radius:

    46% 54% 44% 56%

    / 40% 45% 55% 60%;

  background:

    linear-gradient(
      145deg,
      #fff4f1,
      #eee7ff
    );

  box-shadow:

    0 35px 80px
    rgba(81,55,154,.17),

    inset 0 0 0 1px
    rgba(255,255,255,.75);

  isolation:isolate;

}


/* كل صور السلايدر */

.accessories-image
.accessories-slide{

  position:absolute !important;

  inset:0 !important;

  display:block !important;

  width:100% !important;

  height:100% !important;

  max-width:none !important;

  padding:0 !important;

  margin:0 !important;

  opacity:0;

  visibility:hidden;

  object-fit:contain !important;

  object-position:center !important;

  border-radius:inherit;

  transform:none !important;

  transition:

    opacity .75s ease,

    visibility .75s ease;

}


/* الصورة الحالية */

.accessories-image
.accessories-slide.is-active{

  z-index:2;

  opacity:1 !important;

  visibility:visible !important;

}


/* ممنوع الصورة تكبر أو تخرج من الإطار */

.accessories-visual:hover
.accessories-image img,

.accessories-image:hover img,

.accessories-image img:hover{

  transform:none !important;

}


/* لمعة خفيفة من غير ما تغطي الصورة */

.accessories-image::after{

  content:"";

  position:absolute;

  inset:0;

  z-index:4;

  pointer-events:none;

  border-radius:inherit;

  box-shadow:

    inset 0 0 0 1px
    rgba(255,255,255,.6);

}


/* نقاط السلايدر */

.accessories-slider__dots{

  position:absolute;

  z-index:10;

  right:50%;

  bottom:22px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  padding:7px 10px;

  border-radius:999px;

  transform:translateX(50%);

  background:

    rgba(8,20,51,.55);

  border:

    1px solid

    rgba(255,255,255,.45);

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);

}


/* النقاط */

.accessories-slider__dot{

  display:block;

  width:7px;

  height:7px;

  min-width:0;

  padding:0;

  border:0;

  border-radius:50%;

  cursor:pointer;

  background:

    rgba(255,255,255,.58);

  transition:

    width .3s ease,

    background .3s ease;

}


.accessories-slider__dot.is-active{

  width:25px;

  border-radius:999px;

  background:#ff4894;

}


/* نخلي الدوائر فوق الصورة */

.accessory-orbit{

  z-index:12;

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

  .accessories-visual{

    height:530px;

  }


  .accessories-image{

    width:470px !important;

    height:470px !important;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .accessories-visual{

    width:100%;

    height:390px;

    margin-top:15px;

  }


  .accessories-image{

    width:min(
      88vw,
      355px
    ) !important;

    height:min(
      88vw,
      355px
    ) !important;

  }


  .accessories-slider__dots{

    bottom:14px;

  }


  .accessory-orbit{

    transform:scale(.78);

  }

}


/* =========================================================
   ACCESSORIES SLIDER — FULL FRAME IMAGE
   ========================================================= */

.accessories-image
.accessories-slide{

  width:100% !important;

  height:100% !important;

  padding:0 !important;

  object-fit:cover !important;

  object-position:center center !important;

}


/* الصورة الأولى:
   نرفعها قليلًا لإظهار الملابس بشكل أفضل */

.accessories-image
.accessories-slide:nth-child(1){

  object-position:center 45% !important;

}


/* الصورة الثانية:
   تركيز على الشنطة والإكسسوارات */

.accessories-image
.accessories-slide:nth-child(2){

  object-position:center center !important;

}


/* إطار أعرض يناسب الصور */

.accessories-image{

  width:620px !important;

  height:500px !important;

  border-radius:

    35% 24% 34% 25%

    / 30% 35% 28% 38% !important;

}


/* التابلت */

@media(max-width:1000px){

  .accessories-image{

    width:540px !important;

    height:440px !important;

  }

}


/* الموبايل */

@media(max-width:700px){

  .accessories-visual{

    height:350px;

  }


  .accessories-image{

    width:92vw !important;

    height:310px !important;

    border-radius:

      28% 20% 27% 18%

      / 22% 27% 20% 30% !important;

  }

}