/* ===== Sehlvet landing — pixel-perfect rebuild of Figma node 367:486 (1440×4669) ===== */

@font-face {
  font-family: 'Wilkysta';
  src: url('wilkysta.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

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

html, body {
  background: #f0eadc;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#stage {
  position: relative;
  width: 1440px;
  height: 4669px;
  margin: 0 auto;
  background: #f0eadc;
  overflow: hidden;
  text-align: left;
  color: #2f2f2f;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
}

#stage p, #stage div, #stage span { box-sizing: border-box; }

.abs { position: absolute; }

/* font helpers */
.wilkysta { font-family: 'Wilkysta', serif; font-weight: 400; }
.pf  { font-family: 'Playfair Display', serif; }
.poppins { font-family: 'Poppins', sans-serif; }
.w400 { font-weight: 400; }
.w500 { font-weight: 500; }
.w600 { font-weight: 600; }

/* ===== Background blur blobs ===== */
.blob { position: absolute; border-radius: 50%; z-index: 0; }
.blob-1 { top: 215px;  left: 722px; width: 428px; height: 784px; background: rgba(193,174,160,0.8); filter: blur(210px); }
.blob-2 { top: 2110px; left: 596px; width: 317px; height: 622px; background: rgba(193,174,160,0.6); filter: blur(300px); }
.blob-3 { top: 3139px; left: 389px; width: 322px; height: 622px; background: rgba(193,174,160,0.6); filter: blur(300px); }

/* ===== Hero arches + portrait ===== */
.arch-outline {
  position: absolute; top: 309.89px; left: 807.77px;
  width: 455px; height: 680px;
  border-radius: 250px 250px 0 0;
  border: 2px solid #754f23;
  transform: rotate(-8.4deg); transform-origin: 0 0;
  z-index: 1;
}
.arch-fill {
  position: absolute; top: 273px; left: 885px;
  width: 455px; height: 680px;
  border-radius: 250px 250px 0 0;
  background: #754f23; border: 1px solid #754f23;
  z-index: 1;
}
.hero-photo {
  position: absolute; top: 0; left: 685px;
  width: 670px; height: 953px;
  overflow: hidden; z-index: 2;
}
.hero-photo img {
  position: absolute; left: 0; top: -15.54%;
  width: 123.38%; height: 115.57%;
  max-width: none; object-fit: cover;
}

/* ===== Header / nav ===== */
.header { position: absolute; z-index: 5; }
.logo-top { top: 58px; left: 102px; font-size: 36px; font-weight: 600; color: #2f2f2f; white-space: nowrap; }
.nav-link { top: 67px; font-size: 24px; font-weight: 400; color: #2f2f2f; white-space: nowrap; }
.nav-home   { left: 487px; }
.nav-coll   { left: 583px; }
.nav-brands { left: 737px; }
.nav-about  { left: 847px; }
.nav-bookmark { top: 70px; left: 1255px; width: 24.5px;  height: 30px; }
.nav-bag      { top: 70px; left: 1309.5px; width: 28.36px; height: 30px; }
.nav-bookmark img, .nav-bag img { display: block; width: 100%; height: 100%; }
.nav-dot { top: 70px; left: 1302px; width: 17px; height: 17px; border-radius: 50%; background: #754f23; z-index: 6; }
.nav-badge { top: 69px; left: 1307px; font-size: 12px; color: #dcd7d3; z-index: 7; white-space: nowrap; }

/* ===== Hero text ===== */
.title-text {
  position: absolute; top: 257px; left: 100px; width: 939px;
  font-family: 'Wilkysta', serif; font-weight: 400;
  font-size: 96px; color: #2f2f2f;
  white-space: pre-wrap; z-index: 4;
}
.title-text p { line-height: 112px; }

.hero-body {
  position: absolute; top: 522px; left: 102px; width: 539px;
  font-size: 18px; line-height: 25px; color: #2f2f2f; z-index: 4;
}

/* ===== Buttons ===== */
.btn { position: absolute; width: 222px; height: 60px; }
.btn .btn-bg { position: absolute; inset: 0; border-radius: 16px; box-sizing: border-box; }
.btn .btn-label { position: absolute; top: 12px; font-size: 24px; white-space: nowrap; }
.btn .btn-arrow { position: absolute; left: 150px; top: 23px; width: 36px; height: 16px; }
.btn .btn-arrow img { display: block; width: 100%; height: 100%; }

.btn-primary { top: 696px; left: 102px; z-index: 4; }
.btn-primary .btn-bg { background: #754f23; }
.btn-primary .btn-label { left: 36px; color: #fff; }

.btn-viewall { top: 1686px; left: 1098px; }
.btn-viewall .btn-bg { border: 2px solid #754f23; }
.btn-viewall .btn-label { left: 38px; top: 13px; color: #754f23; }

.btn-explore-summer { top: 2702px; left: 1095px; color: #754f23; }
.btn-explore-summer .btn-bg { border: 2px solid #754f23; }
.btn-explore-summer .btn-label { left: 38px; top: 12px; color: #754f23; font-family: 'Poppins', sans-serif; }

.btn-explore-winter { top: 3260px; left: 1095px; color: #754f23; }
.btn-explore-winter .btn-bg { border: 2px solid #754f23; }
.btn-explore-winter .btn-label { left: 38px; top: 13px; color: #754f23; }

/* ===== Section headings (Wilkysta two-size) ===== */
.heading { position: absolute; font-family: 'Wilkysta', serif; font-weight: 400; color: #2f2f2f; white-space: nowrap; line-height: normal; }
.heading .big   { font-size: 64px; }
.heading .small { font-size: 36px; }
.h-trending { top: 902px;  left: 103px; }
.h-summer   { top: 1848px; left: 100px; }
.h-winter   { top: 2893px; left: 981px; }
.h-testi    { top: 3749px; left: 810px; }

/* underlines */
.uline { position: absolute; height: 0; border-top: 1px solid #2f2f2f; }
.uline-trending { top: 998.5px; left: 101.5px; width: 412px; }
.uline-summer   { top: 1947.5px; left: 99.5px; width: 530px; }
.uline-winter   { top: 2991.5px; left: 900.5px; width: 439px; }
.uline-testi    { top: 3850.5px; left: 809.5px; width: 531px; }

/* ===== Body paragraphs ===== */
.body-p { position: absolute; font-size: 18px; line-height: 25px; color: #2f2f2f; }
.bp-trending { top: 1024px; left: 102px; width: 586px; }
.bp-summer-1 { top: 1970px; left: 102px; width: 586px; white-space: pre-wrap; }
.bp-summer-2 { top: 2044px; left: 752px; width: 586px; }
.bp-summer-3 { top: 2627px; left: 120px; width: 543px; }
.bp-winter-1 { top: 3010px; left: 754px; width: 586px; text-align: right; white-space: pre-wrap; }
.bp-winter-2 { top: 3119px; left: 111px; width: 586px; }
.bp-winter-3 { top: 3376px; left: 752px; width: 588px; }
.bp-testi-1  { top: 3877px; left: 760px; width: 580px; text-align: right; white-space: pre-wrap; }

/* ===== Trending product cards ===== */
.card { position: absolute; }
.card .card-bg { position: absolute; inset: 0; border-radius: 16px; background: #f0eadc; border: 1px solid #754f23; box-sizing: border-box; }
.card .card-img { position: absolute; border-radius: 16px; object-fit: cover; }
.card .card-img-wrap { position: absolute; overflow: hidden; border-radius: 16px; }
.card .card-img-wrap img { position: absolute; max-width: none; display: block; object-fit: cover; }
.card .card-title { position: absolute; font-weight: 600; font-size: 24px; color: #2f2f2f; }
.card .card-price-label { position: absolute; font-size: 16px; color: #2f2f2f; }
.card .card-price-now { position: absolute; font-size: 18px; font-weight: 500; color: #2f2f2f; }
.card .card-price-old { position: absolute; font-size: 16px; color: #2f2f2f; text-decoration: line-through; }
.card .card-ic { position: absolute; }
.card .card-ic img { display: block; width: 100%; height: 100%; }

/* center card — Black and gray exercise outfit */
.card-center { top: 1063px; left: 498px; width: 444px; height: 691px; }
.card-center .card-img { top: 23px; left: 24px; width: 400px; height: 525px; }
.card-center .card-title { top: 578px; left: 24px; white-space: nowrap; }
.card-center .card-price-label { top: 651px; left: 24px; }
.card-center .card-price-now { top: 649px; left: 71px; }
.card-center .card-price-old { top: 651px; left: 145px; }
.card-center .ic-bookmark { top: 651px; left: 354px; width: 16px; height: 19px; }
.card-center .ic-cart { top: 649px; left: 406px; width: 20px; height: 22px; }

/* left card — Formal shirt for woman */
.card-left { top: 1213px; left: 102px; width: 340px; height: 513px; }
.card-left .card-img-wrap { top: 21px; left: 23px; width: 294px; height: 349px; }
.card-left .card-img-wrap img { left: -6.143px; top: -42.561px; width: 300.143px; height: 446.89px; }
.card-left .card-title { top: 400px; left: 24px; white-space: nowrap; }
.card-left .card-price-label { top: 472px; left: 23px; font-family: 'Poppins', sans-serif; }
.card-left .card-price-now { top: 470px; left: 70px; }
.card-left .ic-bookmark { top: 473px; left: 249px; width: 16px; height: 19px; }
.card-left .ic-cart { top: 471px; left: 300px; width: 20px; height: 22px; }

/* right card — Yellow jacket for winter */
.card-right { top: 1116px; left: 1000px; width: 340px; height: 513px; }
.card-right .card-img-wrap { top: 22px; left: 24px; width: 293px; height: 349px; }
.card-right .card-img-wrap img { left: 0; top: -35px; width: 293px; height: 439px; }
.card-right .card-title { top: 402px; left: 23px; white-space: pre; }
.card-right .card-price-label { top: 473px; left: 23px; }
.card-right .card-price-now { top: 471px; left: 70px; }
.card-right .ic-bookmark { top: 476px; left: 248px; width: 16px; height: 19px; }
.card-right .ic-cart { top: 475px; left: 299px; width: 20px; height: 22px; }

/* ===== Summer images ===== */
.img-rounded { position: absolute; border-radius: 36px; object-fit: cover; }
.summer-1 { top: 2155px; left: 840px; width: 413px; height: 491px; }
.summer-2 { top: 2418px; left: 728px; width: 224px; height: 284px; z-index: 3; }
.summer-3 { top: 2064px; left: 162px; width: 410px; height: 521px; }

/* ===== Winter images ===== */
.winter-1 { top: 3211px; left: 378px; width: 319px; height: 405px; transform: scaleX(-1); }
.winter-2 { top: 3331px; left: 122px; width: 428px; height: 284px; z-index: 3; }

/* ===== Testimonial ===== */
.testi-img { top: 3902px; left: 122px; width: 284px; height: 348px; }
.quote-mark { position: absolute; top: 3948px; left: 448px; width: 54px; height: 48px; }
.quote-mark img { display: block; width: 100%; height: 100%; }
.testi-text { position: absolute; top: 4047px; left: 446px; width: 572px; height: 284px; font-size: 16px; color: #2f2f2f; line-height: normal; }
.testi-name { position: absolute; top: 4171px; left: 446px; font-size: 24px; font-weight: 600; color: #2f2f2f; white-space: nowrap; }
.testi-role { position: absolute; top: 4214px; left: 446px; font-size: 16px; color: #2f2f2f; white-space: nowrap; }
.testi-nav { position: absolute; width: 60px; height: 60px; border: 2px solid #754f23; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.testi-nav img { display: block; width: 8px; height: 14px; }
.testi-prev { top: 4190px; left: 1169px; }
.testi-next { top: 4190px; left: 1257px; }

/* ===== Footer ===== */
.footer-bar { position: absolute; top: 4426px; left: 0; width: 1440px; height: 243px; background: #754f23; z-index: 1; }
.footer-el { position: absolute; z-index: 2; color: #ddd9d6; }
.footer-logo { top: 4485px; left: 100px; font-size: 24px; font-weight: 600; white-space: nowrap; }
.footer-copy { top: 4531px; left: 100px; font-size: 16px; white-space: nowrap; }
.footer-social { position: absolute; z-index: 2; }
.footer-social img { display: block; width: 100%; height: 100%; }
/* sized to each SVG's natural viewBox (13×22 / 22×21 / 24×20 / 22×22), centred on the
   Figma layer frame — Figma renders these at full stroke-box size, not the smaller frame */
.fs-fb  { top: 4588px; left: 99px;  width: 13px; height: 22px; }
.fs-in  { top: 4589px; left: 129px; width: 22px; height: 21px; }
.fs-tw  { top: 4592px; left: 172px; width: 24px; height: 20px; }
.fs-ig  { top: 4590px; left: 213px; width: 22px; height: 22px; }

.footer-col { position: absolute; z-index: 2; font-size: 16px; color: #ddd9d6; }
.footer-col p { white-space: nowrap; position: absolute; left: 0; }
.col-nav  { top: 4485px; left: 625px; width: 82px; height: 123px; }
.col-nav .l0 { top: 0; font-weight: 500; }
.col-nav .l1 { top: 34px; font-weight: 500; }
.col-nav .l2 { top: 68px; font-weight: 500; }
.col-nav .l3 { top: 102px; font-weight: 500; }
.col-contact { top: 4485px; left: 1045px; width: 200px; height: 127px; }
.col-contact .l0 { top: 0; font-weight: 500; }
.col-contact .l1 { top: 34px; font-weight: 400; }
.col-contact .l2 { top: 72px; font-weight: 400; }
.col-contact .l3 { top: 106px; font-weight: 400; }

/* ============================================================
   MOBILE — Figma node 422:35, 390px fluid reflow (scale-to-fill)
   ============================================================ */
#stage-m { display: none; }
@media (max-width: 767px) {
  #stage { display: none; }
  #stage-m { display: flex; }
}

#stage-m {
  width: 390px;
  margin: 0 auto;
  position: relative;
  background: #f0eadc;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  font-size: 15px;
  color: #2f2f2f;
  font-family: 'Playfair Display', serif;
  overflow: hidden;
}
#stage-m img { display: block; }

/* shared mobile bits */
.m-uline { background: #2f2f2f; height: 1px; flex-shrink: 0; }
.m-body { align-self: stretch; font-size: 15px; line-height: 22px; font-weight: 400; color: #2f2f2f; }
.m-heading-block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex-shrink: 0; }
.m-head-img { position: relative; flex-shrink: 0; }
.m-head-img img { width: 100%; height: 100%; }

.m-btn { display: flex; align-items: center; justify-content: space-between; border-radius: 14px; box-sizing: border-box; overflow: hidden; flex-shrink: 0; }
.m-btn span { font-size: 16px; line-height: normal; white-space: nowrap; }
.m-btn .m-arrow { width: 28px; height: 12px; flex-shrink: 0; }
.m-btn .m-arrow img { width: 100%; height: 100%; }
.m-btn-filled { width: 156px; height: 52px; background: #754f23; padding: 0 22px 0 28px; gap: 20px; }
.m-btn-filled span { color: #fff; }
.m-btn-outline { width: 150px; height: 50px; border: 1.5px solid #754f23; padding: 0 20px 0 26px; gap: 19px; }
.m-btn-outline span { color: #754f23; }

/* header */
.m-header { align-self: stretch; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-sizing: border-box; flex-shrink: 0; overflow: hidden; }
.m-logo { font-size: 22px; font-weight: 600; color: #2f2f2f; white-space: nowrap; }
.m-navicons { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.m-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.m-menu i { width: 24px; height: 2px; border-radius: 1px; background: #2f2f2f; display: block; }
.m-bag { position: relative; width: 28px; height: 30px; flex-shrink: 0; }
.m-bag .m-bag-ic { position: absolute; top: 3px; left: 2px; width: 24px; height: 25.4px; }
.m-bag .m-bag-ic img { width: 100%; height: 100%; }
.m-bag .m-bag-dot { position: absolute; top: -1px; left: 15px; width: 15px; height: 15px; border-radius: 50%; background: #754f23; }
.m-bag .m-bag-num { position: absolute; top: 0.5px; left: 15px; width: 15px; height: 12px; font-family: 'Poppins', sans-serif; font-size: 9px; color: #ddd9d6; text-align: center; line-height: 12px; }

/* hero */
.m-hero { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; padding: 30px 24px 40px; gap: 22px; overflow: hidden; }
.m-hero-title { width: 233.56px; height: 86.96px; }
.m-hero-portrait { align-self: stretch; height: 420px; position: relative; }
.m-hero-blob { position: absolute; top: 52px; left: 55px; width: 232px; height: 322px; border-radius: 50%; background: rgba(193,174,160,0.45); filter: blur(55px); }
.m-hero-arch { position: absolute; top: 48px; left: 68px; width: 250px; height: 360px; border-radius: 130px 130px 0 0; background: #754f23; }
.m-hero-photo { position: absolute; top: 6px; left: 40px; width: 250px; height: 360px; border-radius: 130px 130px 0 0; overflow: hidden; }
.m-hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* trending */
.m-trending { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; padding: 34px 24px; gap: 16px; overflow: hidden; }
.m-head-trending { width: 195.31px; height: 31.37px; }
.m-trending .m-uline { width: 196px; }
.m-carousel { align-self: stretch; display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.m-carousel::-webkit-scrollbar { display: none; }
.m-card { width: 245px; flex-shrink: 0; box-sizing: border-box; border-radius: 16px; background: #f0eadc; border: 1px solid #754f23; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 12px 14px; gap: 10px; }
.m-card-img { align-self: stretch; height: 278px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.m-card-img img { width: 100%; height: 100%; object-fit: cover; }
.m-card-title { align-self: stretch; font-size: 16px; line-height: 21px; font-weight: 600; color: #2f2f2f; }
.m-price-row { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; overflow: hidden; }
.m-price-left { display: flex; align-items: center; gap: 6px; color: #2f2f2f; white-space: nowrap; }
.m-price-left .m-price-lbl { font-size: 14px; font-weight: 400; }
.m-price-left .m-price-now { font-size: 15px; font-weight: 600; }
.m-price-left .m-price-old { font-size: 13px; font-weight: 400; text-decoration: line-through; }
.m-price-icons { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.m-price-icons .m-ic-bm { width: 15px; height: 18px; }
.m-price-icons .m-ic-cart { width: 17px; height: 19px; }
.m-price-icons img { width: 100%; height: 100%; }
.m-dots { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 6px; }
.m-dots .on { width: 9px; height: 9px; border-radius: 50%; background: #754f23; }
.m-dots .off { width: 7px; height: 7px; border-radius: 50%; background: rgba(117,79,35,0.35); }

/* summer / winter */
.m-section { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; padding: 34px 24px; gap: 18px; overflow: hidden; }
.m-head-summer { width: 187.04px; height: 25.4px; }
.m-head-winter { width: 170.17px; height: 25.85px; }
.m-summer .m-uline { width: 188px; }
.m-winter .m-uline { width: 170px; }
.m-collage { align-self: stretch; position: relative; }
.m-collage img { position: absolute; object-fit: cover; }
.m-summer-collage { height: 315px; }
.m-summer-collage .c1 { top: 0; left: 0; width: 180px; height: 250px; border-radius: 24px; }
.m-summer-collage .c2 { top: 40px; left: 168px; width: 174px; height: 240px; border-radius: 24px; }
.m-summer-collage .c3 { top: 188px; left: 118px; width: 150px; height: 122px; border-radius: 20px; }
.m-winter-collage { height: 310px; }
.m-winter-collage .c1 { top: 0; left: 130px; width: 212px; height: 270px; border-radius: 24px; }
.m-winter-collage .c2 { top: 152px; left: 0; width: 222px; height: 158px; border-radius: 20px; }

/* testimonial */
.m-testi { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; padding: 34px 24px; gap: 18px; overflow: hidden; }
.m-head-customer { width: 250.16px; height: 31.22px; }
.m-testi .m-uline { width: 250px; }
.m-quote { width: 38px; height: 33px; }
.m-quote img { width: 100%; height: 100%; }
.m-testi-text { align-self: stretch; font-size: 15px; line-height: 23px; font-weight: 400; color: #2f2f2f; }
.m-testi-row { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; }
.m-testi-person { display: flex; align-items: center; gap: 12px; }
.m-testi-photo { width: 62px; height: 76px; border-radius: 14px; overflow: hidden; flex-shrink: 0; }
.m-testi-photo img { width: 100%; height: 100%; object-fit: cover; }
.m-testi-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; color: #2f2f2f; white-space: nowrap; }
.m-testi-meta .nm { font-size: 17px; font-weight: 600; }
.m-testi-meta .rl { font-size: 14px; font-weight: 400; }
.m-testi-navs { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.m-testi-nav { width: 46px; height: 46px; border: 1.5px solid #754f23; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0; }
.m-testi-nav i { width: 8px; height: 14px; display: block; }
.m-testi-nav img { width: 100%; height: 100%; }

/* footer */
.m-footer { align-self: stretch; background: #754f23; display: flex; flex-direction: column; align-items: flex-start; padding: 32px 24px 28px; gap: 24px; color: #ddd9d6; overflow: hidden; }
.m-foot-logo { font-size: 22px; font-weight: 600; color: #ddd9d6; white-space: nowrap; }
.m-foot-cols { align-self: stretch; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; color: #ddd9d6; white-space: nowrap; }
.m-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.m-foot-col .hd { font-size: 15px; font-weight: 500; }
.m-foot-col .ln { font-size: 14px; font-weight: 400; }
.m-foot-nav .ln { font-size: 15px; font-weight: 500; }
.m-foot-social { display: flex; align-items: center; gap: 18px; }
.m-foot-social i { display: block; }
.m-foot-social img { width: 100%; height: 100%; }
.m-foot-social .s-fb { width: 12px; height: 20px; }
.m-foot-social .s-in { width: 21px; height: 20px; }
.m-foot-social .s-tw { width: 24px; height: 20px; }
.m-foot-social .s-ig { width: 20px; height: 20px; }
.m-foot-copy { font-size: 13px; font-weight: 400; color: #ddd9d6; opacity: 0.9; white-space: nowrap; }

/* Pin sections to exact Figma heights — eliminates fluid-flex sub-pixel drift so every
   section top (and the footer) lands on the Figma pixel. Sections already overflow:hidden. */
.m-trending { height: 618px; }
.m-summer   { height: 756px; }
.m-winter   { height: 751px; }
.m-testi    { height: 425px; }
.m-footer   { height: 311px; }