:root {
  --ink: #201f25;
  --muted: #6e6a70;
  --line: #ddd9d3;
  --paper: #f7f6f2;
  --lilac: #d8cee0;
  --peach: #f3d8cc;
  --sage: #d5ddd2;
  --sand: #e9dfce;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
}
a {
  color: inherit;
  text-decoration: none;
}
.topline {
  background: #27262c;
  color: #f5f2ee;
  text-align: center;
  padding: 11px;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.topline span {
  margin: 0 10px;
  color: #bdb7bd;
}
.header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5.5%;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}
.logo {
  font-size: 20px;
  letter-spacing: 0.32em;
  font-weight: 600;
  white-space: nowrap;
}
.logo small {
  font-size: 9px;
  letter-spacing: 0.18em;
  display: block;
  text-align: center;
  margin-top: 1px;
}
.header nav {
  display: flex;
  gap: 30px;
}
.header nav a {
  font-size: 13px;
}
.actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.actions button {
  background: none;
  border: 0;
  font: inherit;
  font-size: 19px;
  cursor: pointer;
}
.actions .cart-button {
  border-left: 1px solid var(--line);
  padding-left: 15px;
  font-size: 13px;
}
.cart-button b {
  margin-left: 6px;
  background: var(--ink);
  color: #fff;
  border-radius: 20px;
  padding: 2px 6px;
  font-size: 10px;
}
.hero {
  min-height: 590px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--paper);
  overflow: hidden;
}
.hero-copy {
  padding: 115px 11%;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  margin: 0 0 18px;
  color: #5f5862;
  font-weight: 600;
}
.hero h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  margin: 0;
}
.hero h1 {
  font-size: clamp(45px, 5vw, 78px);
  line-height: 1.05;
}
.hero-copy > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.65;
  max-width: 390px;
  margin: 28px 0;
}
.hero-buttons {
  display: flex;
  gap: 24px;
  align-items: center;
}
.button {
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 23px;
  font-size: 13px;
  cursor: pointer;
  min-height: 48px;
}
.button.dark {
  background: var(--ink);
  color: #fff;
}
.button.outline {
  background: transparent;
}
.text-link {
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.text-link span {
  padding-left: 7px;
}
.hero-art {
  background: var(--lilac);
  position: relative;
  min-height: 480px;
  overflow: hidden;
}
.hero-sun {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: #eee8da;
  right: -70px;
  top: 55px;
}
.hero-face {
  position: absolute;
  background: linear-gradient(
    135deg,
    #8a665a 0 26%,
    #d6a98e 27% 53%,
    #735248 54%
  );
  width: 370px;
  height: 500px;
  right: 15%;
  bottom: -105px;
  border-radius: 48% 52% 8% 8%;
  filter: blur(0.2px);
}
.hero-card {
  position: absolute;
  left: 10%;
  bottom: 58px;
  background: #fff;
  padding: 19px 52px 19px 20px;
  box-shadow: 0 12px 30px #604d6430;
  display: grid;
  gap: 4px;
}
.hero-card b {
  font-size: 14px;
}
.hero-card span {
  font-size: 12px;
  color: var(--muted);
}
.hero-card i {
  position: absolute;
  right: 18px;
  top: 25px;
  font-style: normal;
}
.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 28px 6%;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}
.benefits div {
  border-right: 1px solid var(--line);
  padding-right: 15px;
  display: grid;
  gap: 5px;
}
.benefits div:last-child {
  border: 0;
}
.benefits b {
  font-size: 13px;
}
.benefits span {
  font-size: 12px;
  color: var(--muted);
}
.section {
  padding: 100px 7%;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 38px;
}
.section h2,
.care h2,
.checkout h2 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.1;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.category {
  min-height: 250px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.category span {
  font-size: 12px;
  opacity: 0.55;
}
.category b {
  font-family: "Playfair Display";
  font-size: 27px;
  line-height: 1.15;
  font-weight: 500;
}
.category i {
  font-style: normal;
  align-self: flex-end;
  font-size: 24px;
}
.peach {
  background: var(--peach);
}
.lilac {
  background: var(--lilac);
}
.sand {
  background: var(--sand);
}
.sage {
  background: var(--sage);
}
.catalog {
  background: #fbfaf8;
}
.filter-toggle {
  border: 0;
  background: none;
  font: inherit;
}
.filters {
  display: flex;
  gap: 9px;
  margin-bottom: 28px;
  overflow: auto;
}
.filters button {
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px 15px;
  border-radius: 20px;
  white-space: nowrap;
  font: inherit;
  font-size: 12px;
}
.filters .active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.product {
  position: relative;
  background: #fff;
  padding-bottom: 18px;
}
.product-art {
  height: 285px;
  background: #eeece7;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.product-art:after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #e2d9c9;
  bottom: -55px;
  right: -32px;
}
.tube {
  height: 174px;
  width: 75px;
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(90deg, #eee 0%, #fff 45%, #d9d9d9 100%);
  z-index: 1;
  position: relative;
  box-shadow: 8px 10px 10px #5553;
}
.tube:before {
  content: "";
  position: absolute;
  top: -19px;
  left: 10px;
  width: 55px;
  height: 20px;
  background: #29272b;
  border-radius: 4px 4px 0 0;
}
.tube:after {
  content: "AG SKIN";
  position: absolute;
  top: 55px;
  left: 10px;
  color: #333;
  font-size: 10px;
  font-weight: bold;
}
.product:nth-child(2) .product-art {
  background: #e7ddd5;
}
.product:nth-child(3) .product-art {
  background: #dfe6dc;
}
.product:nth-child(4) .product-art {
  background: #e2d9e7;
}
.product:nth-child(2) .tube {
  height: 150px;
  border-radius: 50% 50% 9px 9px;
  width: 100px;
}
.product:nth-child(3) .tube {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.product:nth-child(4) .tube {
  background: #323034;
}
.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fff;
  padding: 6px 8px;
  font-size: 10px;
  z-index: 2;
}
.wish {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: #ffffffc8;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  font-size: 17px;
  z-index: 2;
}
.product-info {
  padding: 16px 16px 0;
}
.brand {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.product h3 {
  font-family: "DM Sans";
  font-size: 14px;
  line-height: 1.45;
  margin: 8px 0;
  font-weight: 500;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  font-weight: 600;
}
.add {
  border: 0;
  background: none;
  font-size: 23px;
  cursor: pointer;
}
.catalog-footer {
  text-align: center;
  margin-top: 36px;
}
.care {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--sage);
  min-height: 570px;
}
.care-art {
  position: relative;
  overflow: hidden;
}
.oval {
  position: absolute;
  width: 410px;
  height: 520px;
  border-radius: 50%;
  background: #c5d0c1;
  left: 20%;
  top: 25px;
}
.bottle {
  position: absolute;
  background: #f7f6f1;
  box-shadow: 10px 12px 18px #54604d35;
}
.bottle.large {
  height: 310px;
  width: 140px;
  border-radius: 13px 13px 8px 8px;
  left: 37%;
  top: 105px;
}
.bottle.large:after {
  content: "MOLODIST\A SKINCARE";
  white-space: pre;
  position: absolute;
  left: 25px;
  top: 110px;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.1em;
}
.bottle.small {
  height: 150px;
  width: 120px;
  border-radius: 60px 60px 8px 8px;
  left: 17%;
  top: 285px;
  background: #28272b;
}
.care-copy {
  padding: 125px 12%;
}
.care-copy > p:not(.eyebrow) {
  color: #4f5c50;
  line-height: 1.65;
  max-width: 420px;
  margin: 24px 0;
}
.brands {
  text-align: center;
  padding-top: 75px;
  padding-bottom: 75px;
}
.brand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.brand-row b {
  letter-spacing: 0.05em;
  font-size: 20px;
}
.consultation {
  background: #eee8de;
  display: grid;
  grid-template-columns: 1.1fr 0.65fr 0.45fr;
  align-items: end;
  gap: 45px;
}
.consultation > p {
  line-height: 1.7;
  color: #5e5755;
  margin: 0;
}
.checkout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  padding: 100px 12%;
  background: #29272b;
  color: #fff;
}
.checkout > div > p:not(.eyebrow) {
  line-height: 1.6;
  color: #d5d0d0;
  max-width: 340px;
}
.checkout-form {
  display: grid;
  gap: 15px;
}
.checkout-form label {
  font-size: 12px;
  display: grid;
  gap: 7px;
  color: #d9d5d3;
}
.checkout-form input,
.checkout-form select {
  background: #39373b;
  border: 1px solid #57545a;
  color: #fff;
  padding: 15px;
  font: inherit;
}
.checkout-form small {
  color: #a9a4a7;
  font-size: 11px;
}
footer {
  padding: 45px 7%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #454347;
  background: #29272b;
  color: #fff;
}
footer > div {
  display: flex;
  gap: 22px;
  font-size: 12px;
}
footer p {
  font-size: 11px;
  color: #aaa;
}
.cart-drawer {
  position: fixed;
  right: 0;
  top: 0;
  width: min(410px, 100%);
  height: 100%;
  background: #fff;
  z-index: 30;
  padding: 32px;
  transform: translateX(100%);
  transition: 0.25s;
  display: flex;
  flex-direction: column;
}
.cart-drawer.open {
  transform: translateX(0);
}
.close-cart {
  position: absolute;
  right: 22px;
  top: 22px;
  border: 0;
  background: none;
  font-size: 30px;
}
.cart-drawer h3 {
  font-size: 30px;
  margin-bottom: 28px;
}
.empty {
  color: var(--muted);
  font-size: 14px;
}
.cart-item {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.cart-total {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
}
.backdrop {
  position: fixed;
  inset: 0;
  background: #18171b55;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
}
.backdrop.show {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 800px) {
  .header {
    height: 66px;
    padding: 0 4%;
  }
  .header nav {
    display: none;
  }
  .actions button:not(.cart-button) {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    padding: 75px 8%;
  }
  .hero-art {
    min-height: 350px;
  }
  .benefits {
    grid-template-columns: 1fr 1fr;
  }
  .benefits div:nth-child(2) {
    border-right: 0;
  }
  .section {
    padding: 70px 5%;
  }
  .category-grid,
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
  .category {
    min-height: 180px;
  }
  .category b {
    font-size: 22px;
  }
  .product-art {
    height: 210px;
  }
  .care,
  .checkout {
    grid-template-columns: 1fr;
  }
  .care-art {
    min-height: 350px;
  }
  .care-copy {
    padding: 75px 8%;
  }
  .consultation {
    grid-template-columns: 1fr;
    padding: 70px 8%;
    gap: 25px;
  }
  .brand-row {
    justify-content: center;
  }
  .checkout {
    padding: 70px 8%;
  }
  footer {
    display: grid;
    gap: 25px;
  }
  footer > div {
    flex-wrap: wrap;
  }
  .logo {
    font-size: 16px;
  }
  .hero h1 {
    font-size: 48px;
  }
}
@media (max-width: 390px) {
  .products,
  .category-grid {
    grid-template-columns: 1fr;
  }
  .benefits {
    grid-template-columns: 1fr;
  }
  .benefits div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
  }
  .hero-buttons {
    flex-wrap: wrap;
  }
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.auth-modal.is-open { opacity: 1; visibility: visible; }
.auth-modal__backdrop { position: absolute; inset: 0; background: rgb(21 20 22 / 0.82); backdrop-filter: blur(1px); }
.auth-modal__panel { position: relative; z-index: 1; width: min(420px, 100%); padding: 50px 42px 46px; background: #fff; border-radius: 16px; box-shadow: 0 20px 55px rgb(0 0 0 / 0.25); transform: translateY(10px); transition: transform 0.2s ease; }
.auth-modal.is-open .auth-modal__panel { transform: translateY(0); }
.auth-modal__close { position: absolute; top: 15px; right: 18px; width: 34px; height: 34px; border: 0; background: none; color: #25242a; font: 300 35px/28px Arial, sans-serif; cursor: pointer; }
.auth-modal h2 { margin: 0 0 24px; font: 500 22px/1.2 'DM Sans', sans-serif; letter-spacing: -0.025em; }
.auth-modal__form { display: grid; gap: 19px; }
.auth-modal__code-form { display: grid; gap: 18px; }
.auth-modal__code-form[hidden] { display: none; }
.auth-modal__phone { position: relative; display: block; border: 1px solid #302e31; border-radius: 26px; padding: 18px 17px 9px; }
.auth-modal__phone span { position: absolute; top: 8px; left: 17px; color: #77737a; font-size: 13px; }
.auth-modal__phone input { display: block; width: 100%; margin-top: 5px; padding: 0; border: 0; outline: 0; background: transparent; color: #28262b; font: 400 16px 'DM Sans', sans-serif; }
.auth-modal__remember { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.auth-modal__remember input { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid #25242a; border-radius: 3px; background: #25242a; display: grid; place-content: center; }
.auth-modal__remember input:checked::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.auth-modal__submit { height: 40px; margin-top: 3px; border: 0; border-radius: 22px; background: #20201f; color: #fff; font: 400 14px 'DM Sans', sans-serif; cursor: pointer; }
.auth-modal__submit:hover { background: #353438; }
.auth-modal__form p { margin: 1px 0 0; color: #49464d; font-size: 13px; line-height: 1.35; }
.auth-modal__form p a { text-decoration: underline; text-underline-offset: 2px; }
.auth-modal__phone-error { min-height: 16px; margin: -10px 0 -4px !important; color: #b54a4a !important; font-size: 12px !important; line-height: 1.2 !important; }
.auth-modal__sent { margin: 0; color: #6b6870; font-size: 15px; line-height: 1.35; }
.auth-modal__sent strong { display: block; color: #26242a; font-weight: 600; }
.auth-modal__change,
.auth-modal__resend { width: max-content; padding: 0; border: 0; background: transparent; color: #25242a; font: 600 14px/1.2 'DM Sans', sans-serif; cursor: pointer; text-align: left; }
.auth-modal__code { position: relative; display: block; border: 1px solid #302e31; border-radius: 26px; padding: 18px 17px 9px; }
.auth-modal__code:focus-within { border-color: #5c4b82; box-shadow: 0 0 0 2px rgb(92 75 130 / 0.12); }
.auth-modal__code span { position: absolute; top: 8px; left: 17px; color: #77737a; font-size: 13px; }
.auth-modal__code input { display: block; width: 100%; margin-top: 5px; padding: 0; border: 0; outline: 0; background: transparent; color: #28262b; font: 400 16px 'DM Sans', sans-serif; letter-spacing: 0.18em; }
.auth-modal__code-error { min-height: 16px; margin: -10px 0 -4px; color: #b54a4a; font-size: 12px; line-height: 1.2; }
@media (max-width: 480px) { .auth-modal { padding: 16px; } .auth-modal__panel { padding: 38px 28px 30px; border-radius: 12px; } }