@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400&family=Tajawal:wght@200;400;500&family=Zain:wght@200;300;400&display=swap');

:root {
  --dark: #211f1f;
  --ink: #221f1f;
  --black: #010101;
  --yellow: #ffcc02;
  --grey: #6c6d70;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: calc(100vw / 59.5); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  font-family: 'Almarai', sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video, svg { display: block; }

.top {
  position: relative;
  height: 5.35rem;
  background: var(--dark);
  z-index: 30;
}

.burger {
  position: absolute;
  left: 1.86rem;
  top: 1.12rem;
  width: 3.5rem;
  height: 2.71rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .1rem 0;
}
.burger span { height: 1px; background: #fff; }

.logo {
  position: absolute;
  left: 50%;
  top: 1.69rem;
  width: 8.29rem;
  transform: translateX(-50%);
}

.top .login { position: absolute; left: 51.69rem; top: 2.1rem; width: 1.77rem; }
.top .bag { position: absolute; left: 55.52rem; top: 1.76rem; width: 1.46rem; }
.top button img { width: 100%; }

.menu {
  position: absolute;
  left: 0;
  top: 5.35rem;
  width: 15.33rem;
  height: 27.44rem;
  background: var(--dark);
  color: #fff;
  padding: 1.6rem 0 0 1.8rem;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .35s ease, visibility .35s;
  z-index: 25;
}
.menu-open .menu { transform: none; visibility: visible; }
.menu a { display: block; width: max-content; }
.menu .main { font-family: 'Tajawal', sans-serif; font-weight: 200; font-size: 1.92rem; line-height: 1.3; margin-bottom: 1.05rem; }
.menu .main:nth-child(2) { padding-left: .35rem; }
.menu .sub { font-size: 1.56rem; line-height: 1.45; margin-bottom: .9rem; }
.menu .main + .sub { margin-top: .35rem; }

.hero { position: relative; height: 38.07rem; background: var(--dark); overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero i { position: absolute; background: var(--dark); }
.hero .v { left: 20.5rem; top: 0; width: .89rem; height: 100%; }
.hero .h1 { left: 0; top: 16.73rem; width: 20.95rem; height: .82rem; }
.hero .h2 { left: 20.5rem; right: 0; top: 30.66rem; height: .81rem; }

.intro {
  background: var(--dark);
  color: #fff;
  min-height: 12.48rem;
  padding: 4rem 2rem 2rem;
  text-align: center;
  font-size: max(.8rem, 10px);
  line-height: 2.62;
}

.brand { position: relative; height: 33.21rem; }
.brand .word { position: absolute; left: 1.9rem; top: 6.05rem; width: 23.2rem; }
.brand hr { position: absolute; left: 1.86rem; top: 13.02rem; width: 53.95rem; height: .27rem; border: 0; background: var(--dark); }
.cats {
  position: absolute;
  left: 2.18rem;
  right: 1.86rem;
  top: 17.09rem;
  display: flex;
  justify-content: space-between;
}
.cats a { display: flex; flex-direction: column; align-items: center; width: 9.61rem; }
.cats img, .cats .blank { width: 9.61rem; height: 9.61rem; border-radius: 50%; object-fit: cover; }
.cats .blank { background: var(--dark); }
.cats span {
  margin-top: 1.15rem;
  width: 9.23rem;
  height: 2.06rem;
  border-radius: 1.03rem;
  background: var(--yellow);
  display: grid;
  place-items: center;
  font-size: max(1.15rem, 8px);
  white-space: nowrap;
}

.film { height: 28.41rem; background: var(--dark); overflow: hidden; }
.film video { width: 100%; height: 100%; object-fit: cover; }

.best h2 {
  font-weight: 400;
  font-size: 3.32rem;
  line-height: 1;
  text-align: center;
  padding: 3.3rem 0 .8rem;
}
.strip {
  background: var(--yellow);
  padding: 2.77rem 0 2.8rem;
  display: grid;
  grid-template-columns: 190fr 202fr 203fr;
}
.strip a { position: relative; height: 25.64rem; overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.strip .add { position: absolute; left: 1.03rem; bottom: 1.26rem; width: 1.24rem; height: auto; cursor: pointer; }

.offer { display: block; padding: 6.5rem 0 11.68rem; }
.offer img { width: 100%; }

.foot { position: relative; height: 44.37rem; overflow: hidden; }
.foot p {
  position: absolute;
  top: 1.75rem;
  font-family: 'Zain', sans-serif;
  font-size: .8rem;
  line-height: 2;
  color: var(--black);
}
.foot p:nth-of-type(1) { left: 4.14rem; }
.foot p:nth-of-type(2) { left: 23.35rem; }
.foot p:nth-of-type(3) { left: 41.71rem; }
.social { position: absolute; top: 20.17rem; left: 4.64rem; display: flex; gap: 2.69rem; }
.social span { width: 3.79rem; height: 2.19rem; background: var(--black); }
.foot .huge { position: absolute; left: -.19rem; top: 30.64rem; width: 59.89rem; }

.sheet {
  position: relative;
  margin: 4rem auto;
  background: #fff;
  border: 1px solid var(--black);
  box-shadow: .9rem .9rem 1rem rgba(0, 0, 0, .55);
}

.collection { width: 43.45rem; min-height: 58.41rem; padding: 3.7rem 0 4rem; }
.collection h1 { font-weight: 300; font-size: 1.67rem; padding-left: 2.06rem; margin-bottom: 3.8rem; }
.grid {
  display: grid;
  grid-template-columns: repeat(3, 10.45rem);
  column-gap: 3.53rem;
  row-gap: 4.2rem;
  padding-left: 1.86rem;
}
.card .pic img { width: 10.45rem; height: 13.16rem; object-fit: cover; }
.card .buy { display: block; margin: 1.77rem 0 0 2.71rem; width: 5.22rem; height: 1.7rem; background: var(--black); }
.card .buy img { height: 1.2rem; margin: .25rem auto 0; }
.card small {
  display: block;
  margin: .2rem 0 0 2.71rem;
  font-family: 'Zain', sans-serif;
  font-weight: 300;
  font-size: max(.63rem, 8px);
  line-height: 1.35;
  color: var(--black);
}

.product { width: 36.07rem; overflow: hidden; }
.slides { position: relative; height: 37.77rem; background: #eee; }
.track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.track img { flex: 0 0 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.dots { position: absolute; left: 0; right: 0; bottom: 1.35rem; display: flex; justify-content: center; gap: .4rem; }
.dots button { width: .82rem; height: .82rem; border-radius: 50%; background: var(--grey); }
.dots button.on { background: var(--black); }

.panel { background: var(--dark); color: #fff; min-height: 37.52rem; padding: 2.1rem 2.9rem 3.1rem 2.7rem; }
.panel h1 { font-weight: 300; font-size: 1.56rem; padding-left: .2rem; }
.panel .price { font-size: 1.53rem; margin: .3rem 0 0 .7rem; }
.panel .about { font-size: max(.8rem, 9px); line-height: 2.62; margin: 1rem 0 6.2rem; max-width: 24.6rem; }
.sizes { font-family: 'Zain', sans-serif; font-size: max(.8rem, 9px); }
.sizes > p { margin-bottom: 1.6rem; }
.sizes div { display: flex; padding-left: .46rem; }
.sizes label { display: flex; align-items: center; gap: .68rem; width: 6.18rem; cursor: pointer; }
.sizes input { appearance: none; width: .9rem; height: .9rem; background: #fff; display: grid; place-items: center; cursor: pointer; }
.sizes input:checked::after { content: ''; width: .5rem; height: .5rem; background: var(--dark); }
.panel .warn { color: var(--yellow); font-size: max(.8rem, 9px); margin-top: 1rem; }
.actions { display: flex; gap: .6rem; margin: 3.4rem 0 1.1rem .46rem; }

.qty { display: flex; align-items: center; justify-content: space-around; font-family: 'Tajawal', sans-serif; font-weight: 500; }
.qty button { width: 33%; height: 100%; }
.panel .qty { width: 4.92rem; height: 1.88rem; border: .5px solid #fff; font-size: max(.57rem, 8px); }
.panel .cart-add {
  width: 12.28rem;
  height: 1.88rem;
  background: var(--yellow);
  color: #000;
  font-family: 'Zain', sans-serif;
  font-weight: 300;
  font-size: max(.8rem, 9px);
}
.panel .now {
  display: block;
  margin-left: -.08rem;
  width: 30.44rem;
  height: 2.89rem;
  background: var(--yellow);
  color: #000;
  font-family: 'Zain', sans-serif;
  font-size: 1.29rem;
}

.top .bag { position: absolute; }
.count {
  position: absolute;
  right: -.7rem;
  top: -.5rem;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 .3rem;
  border-radius: .65rem;
  background: var(--yellow);
  color: #000;
  font-family: 'Tajawal', sans-serif;
  font-weight: 500;
  font-size: max(.85rem, 10px);
  line-height: 1.3rem;
  text-align: center;
}

.shade { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; display: none; }
.cart-open .shade { display: block; }
.cart {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 33.19rem;
  height: 49.42rem;
  max-height: 94vh;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid var(--black);
  font-family: 'Tajawal', sans-serif;
  color: var(--black);
  z-index: 50;
  display: none;
  flex-direction: column;
  padding: .95rem 1.3rem 1.6rem .9rem;
}
.cart-open .cart { display: flex; }
.cart h2 { font-weight: 400; font-size: 3.15rem; padding-left: 0; }
.cart .x { position: absolute; right: 1.6rem; top: 1.75rem; width: 2.04rem; height: 2.03rem; }
.cart .x::before, .cart .x::after { content: ''; position: absolute; left: -.2rem; top: 50%; width: 2.6rem; height: .75px; background: var(--ink); transform: rotate(45deg); }
.cart .x::after { transform: rotate(-45deg); }
.cart .head { display: flex; justify-content: space-between; font-weight: 200; font-size: 1.59rem; margin: 1.3rem .2rem 0; padding-bottom: 1.2rem; border-bottom: 1px solid #bdbdbd; }
.cart .lines { flex: 1; overflow-y: auto; padding-top: 1.4rem; }
.line { display: grid; grid-template-columns: 10.56rem 1fr auto; gap: .5rem; margin-bottom: 1.6rem; }
.line img { width: 10.56rem; height: 11.14rem; object-fit: cover; }
.line .info { font-family: 'Almarai', sans-serif; font-size: 1.15rem; line-height: 1.8; color: var(--ink); }
.line .muted { color: #808285; font-size: 1rem; }
.line .qty { margin-top: 1.2rem; width: 10rem; height: 3.2rem; border: .75px solid var(--ink); font-size: 1.5rem; color: #808285; }
.line .remove { margin-top: .6rem; font-size: 1rem; color: #808285; text-decoration: underline; }
.line-total { font-family: 'Almarai', sans-serif; font-size: 1.1rem; white-space: nowrap; }
.cart .nothing { display: none; flex: 1; padding-top: 4rem; text-align: center; font-size: 1.6rem; color: #808285; }
.cart.empty .nothing { display: block; }
.cart.empty .lines { display: none; }
.cart .bottom { border-top: 1px solid #bdbdbd; margin: 0 .6rem 0 1.1rem; padding-top: 1.4rem; }
.cart .sum { display: flex; justify-content: space-between; align-items: baseline; padding: 0 .7rem 0 .2rem; }
.cart .sum b { font-weight: 500; font-size: 1.5rem; }
.cart .sum span { font-family: 'Almarai', sans-serif; font-size: 1.15rem; color: var(--ink); }
.cart .checkout { margin-top: 2.3rem; width: 100%; height: 4.54rem; background: var(--black); color: #fff; font-size: 1.87rem; }
.cart.empty .checkout { opacity: .35; cursor: default; }
.cart .thanks { display: none; flex: 1; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; text-align: center; }
.cart.done .thanks { display: flex; }
.cart.done .head, .cart.done .lines, .cart.done .nothing, .cart.done .bottom { display: none; }
.thanks h3 { font-weight: 400; font-size: 3rem; }
.thanks p { font-size: 1.6rem; }
.thanks .muted { color: #808285; font-size: 1.3rem; }
.thanks .again { margin-top: 2rem; padding: 1.2rem 3rem; background: var(--yellow); font-size: 1.6rem; }

@media (max-width: 760px) {
  .top { height: 56px; }
  .burger { left: 16px; top: 18px; width: 28px; height: 20px; padding: 0; }
  .logo { top: 19px; width: 96px; }
  .top .login { left: auto; right: 54px; top: 18px; width: 21px; }
  .top .bag { left: auto; right: 18px; top: 15px; width: 18px; }
  .menu { top: 56px; }

  .menu { width: 72vw; height: auto; padding: 22px 0 28px 24px; }
  .menu .main { font-size: 26px; margin-bottom: 10px; }
  .menu .main:nth-child(2) { padding-left: 0; }
  .menu .sub { font-size: 19px; margin-bottom: 8px; }
  .menu .main + .sub { margin-top: 10px; }

  .count { min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; font-size: 10px; right: -8px; top: -7px; }

  .sheet { width: auto; margin: 0; border: 0; box-shadow: none; }

  .collection { min-height: 0; padding: 22px 16px 40px; }
  .collection h1 { font-size: 22px; padding: 0; margin-bottom: 18px; }
  .grid { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 26px; padding: 0; }
  .card .pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .card .buy { margin: 10px 0 0; width: 100%; height: 36px; }
  .card .buy img { height: 20px; margin-top: 8px; }
  .card small { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }

  .slides { height: 115vw; }
  .dots { bottom: 14px; gap: 7px; }
  .dots button { width: 9px; height: 9px; }
  .panel { min-height: 0; padding: 22px 18px 30px; }
  .panel h1 { font-size: 21px; padding: 0; }
  .panel .price { font-size: 18px; margin: 4px 0 0; }
  .panel .about { font-size: 14px; line-height: 1.7; margin: 14px 0 26px; max-width: none; }
  .sizes { font-size: 14px; }
  .sizes > p { margin-bottom: 12px; }
  .sizes div { flex-wrap: wrap; gap: 10px; padding: 0; }
  .sizes label { width: auto; min-width: 54px; gap: 8px; }
  .sizes input { width: 16px; height: 16px; }
  .sizes input:checked::after { width: 9px; height: 9px; }
  .panel .warn { font-size: 13px; margin-top: 12px; }
  .actions { margin: 24px 0 10px; gap: 10px; }
  .panel .qty { width: 104px; height: 46px; font-size: 16px; }
  .panel .cart-add { flex: 1; width: auto; height: 46px; font-size: 16px; }
  .panel .now { width: 100%; height: 52px; margin: 0; font-size: 18px; }

  .cart { left: 0; top: 0; width: 100%; height: 100%; max-height: none; transform: none; border: 0; padding: 18px 16px 22px; }
  .cart h2 { font-size: 30px; }
  .cart .x { right: 18px; top: 26px; width: 22px; height: 22px; }
  .cart .x::before, .cart .x::after { width: 28px; left: -3px; height: 1px; }
  .cart .head { font-size: 15px; margin: 18px 0 0; padding-bottom: 12px; }
  .cart .lines { padding-top: 16px; }
  .line { grid-template-columns: 96px 1fr auto; gap: 12px; margin-bottom: 20px; }
  .line img { width: 96px; height: 120px; }
  .line .info { font-size: 15px; line-height: 1.5; }
  .line .muted { font-size: 13px; }
  .line .qty { margin-top: 10px; width: 116px; height: 40px; font-size: 18px; }
  .line .remove { margin-top: 8px; font-size: 13px; }
  .line-total { font-size: 14px; }
  .cart .nothing { font-size: 16px; padding-top: 40px; }
  .cart .bottom { margin: 0; padding-top: 14px; }
  .cart .sum { padding: 0 2px; }
  .cart .sum b { font-size: 16px; }
  .cart .sum span { font-size: 16px; }
  .cart .checkout { margin-top: 16px; height: 54px; font-size: 19px; }
  .thanks h3 { font-size: 30px; }
  .thanks p { font-size: 16px; }
  .thanks .muted { font-size: 14px; }
  .thanks .again { font-size: 16px; padding: 14px 30px; }
}