:root {
  --chocolate: #160b07;
  --chocolate-deep: #0b0503;
  --chocolate-soft: #26130c;
  --chocolate-card: #2d180f;

  --gold: #c7a064;
  --gold-light: #ead6aa;

  --cream: #f5ecdf;
  --text-soft: #c8b9ab;
  --text-dark: #8d796b;

  --line: rgba(215, 180, 125, 0.22);
  --line-strong: rgba(215, 180, 125, 0.42);
}


/* Авторские торты: предупреждение, оформление и +1 кг */

body.mk-modal-open {
  overflow: hidden;
}

.mk-author-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 4, 2, .78);
  backdrop-filter: blur(8px);
}

.mk-author-notice-modal[hidden] {
  display: none;
}

.mk-author-notice-card {
  position: relative;
  width: min(680px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 34px;
  border: 1px solid rgba(216, 189, 125, .28);
  border-radius: 24px;
  background: linear-gradient(145deg, #321b12, #190c08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

.mk-author-notice-card h2 {
  margin: 12px 36px 18px 0;
  color: #fff9ef;
  font-family: Georgia, serif;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.12;
}

.mk-author-notice-text p {
  color: #d0c2b8;
  line-height: 1.7;
}

.mk-author-notice-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  color: #fff9ef;
  background: rgba(0, 0, 0, .2);
  font-size: 25px;
  cursor: pointer;
}

.mk-author-notice-continue {
  width: 100%;
  margin-top: 16px;
}

.mk-author-ordering-box {
  margin: 22px 0;
  padding: 22px;
  border: 1px solid rgba(216, 189, 125, .2);
  border-radius: 18px;
  background: rgba(216, 189, 125, .055);
}

.mk-author-ordering-box p,
.mk-author-ordering-box li {
  color: #c9bbb1;
  line-height: 1.55;
}

.mk-author-ordering-box h3 {
  margin: 20px 0 10px;
  color: #f2dda1;
  font-size: 13px;
  letter-spacing: .08em;
}

.mk-author-ordering-box ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 18px;
  margin: 0;
  padding-left: 20px;
}

.mk-author-decor-list {
  display: grid;
  gap: 9px;
}

.mk-author-decor-option,
.mk-author-extra-kg {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(0, 0, 0, .14);
  cursor: pointer;
}

.mk-author-decor-option input,
.mk-author-extra-kg input {
  margin-top: 4px;
  accent-color: #d8bd7d;
}

.mk-author-decor-option span,
.mk-author-extra-kg span {
  display: grid;
  gap: 4px;
}

.mk-author-decor-option strong,
.mk-author-extra-kg strong {
  color: #fff9ef;
}

.mk-author-decor-option small,
.mk-author-extra-kg small,
.mk-cart-decoration small {
  color: #a9998e;
}

.mk-author-extra-kg {
  margin: 14px 0;
  border-color: rgba(216, 189, 125, .24);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.mk-author-extra-kg-select {
  min-width: 190px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(216, 189, 125, .25);
  border-radius: 10px;
  color: #fff9ef;
  background: #28150e;
}

.mk-cart-decoration {
  margin-top: 8px !important;
  color: #f2dda1 !important;
  font-size: 12px !important;
}

.mk-author-design-choice {
  display: grid;
  gap: 9px;
}

.mk-author-own-design {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(216, 189, 125, .18);
  border-radius: 12px;
  background: rgba(0, 0, 0, .14);
}

.mk-author-own-design[hidden] {
  display: none;
}

.mk-author-own-design textarea,
.mk-author-own-design input {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: #fff9ef;
  background: #1c0e09;
}

.mk-author-own-design textarea {
  min-height: 100px;
  resize: vertical;
}

.mk-author-approval-note {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(243, 201, 124, .24);
  border-radius: 12px;
  color: #f3c97c;
  background: rgba(199, 133, 43, .1);
  line-height: 1.5;
}

@media (max-width: 650px) {
  .mk-author-notice-card {
    padding: 26px 20px;
  }

  .mk-author-ordering-box ul {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   ОСНОВА
====================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  color: var(--cream);

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(120, 65, 34, 0.17),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(100, 57, 31, 0.12),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #1c0d08,
      #0b0503 75%
    );

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  overflow-x: hidden;
}

button {
  font: inherit;
  color: inherit;
}

/* ======================================================
   ШАПКА
====================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 96px;

  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    12px
    clamp(22px, 4vw, 72px);

  background:
    linear-gradient(
      to bottom,
      rgba(12, 5, 3, 0.97),
      rgba(12, 5, 3, 0.72),
      transparent
    );

  backdrop-filter: blur(8px);
}

.logo-button {
  width: 76px;
  height: 60px;

  border: 0;
  background: transparent;

  cursor: pointer;
}

.mini-logo {
  font-family: Georgia, serif;

  color: var(--gold-light);

  font-size: 30px;
  letter-spacing: 3px;
}

/* ======================================================
   НАВИГАЦИЯ
====================================================== */

.desktop-nav {
  display: flex;
  align-items: center;

  gap: clamp(14px, 1.7vw, 30px);
}

.nav-item {
  position: relative;

  padding: 10px 2px;

  border: 0;
  background: transparent;

  color: #b9aa9d;

  font-size: 14px;

  cursor: pointer;

  transition: 0.25s ease;
}

.nav-item::after {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;
  bottom: 2px;

  height: 1px;

  background: var(--gold);

  transition: 0.25s ease;
}

.nav-item:hover,
.nav-item.active {
  color: var(--cream);
}

.nav-item:hover::after,
.nav-item.active::after {
  right: 0;
}

.order-link {
  color: var(--gold-light);
}

.cart-link {
  border: 1px solid var(--line);

  border-radius: 100px;

  background: transparent;

  padding: 9px 14px;

  cursor: pointer;
}

.cart-count {
  display: inline-grid;
  place-items: center;

  min-width: 22px;
  height: 22px;

  margin-left: 6px;

  border-radius: 50%;

  background: var(--gold-light);

  color: #1b0c07;

  font-size: 11px;
  font-weight: 700;
}

/* ======================================================
   МОБИЛЬНОЕ МЕНЮ
====================================================== */

.menu-button {
  display: none;

  width: 46px;
  height: 46px;

  border: 1px solid var(--line);
  border-radius: 50%;

  background: transparent;

  cursor: pointer;
}

.menu-button span {
  display: block;

  width: 18px;
  height: 1px;

  margin: 5px auto;

  background: var(--gold-light);
}

.mobile-menu {
  display: flex;

  position: fixed;
  inset: 0;

  z-index: 90;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 20px;

  background: rgba(17, 7, 4, 0.985);

  opacity: 0;
  pointer-events: none;

  transition: 0.3s ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu button {
  border: 0;
  background: transparent;

  color: var(--cream);

  font-family: Georgia, serif;
  font-size: 30px;

  cursor: pointer;
}

/* ======================================================
   СТРАНИЦЫ
====================================================== */

main {
  min-height: 100vh;
}

.page {
  display: none;

  min-height: calc(100vh - 70px);

  padding:
    120px
    clamp(22px, 5vw, 88px)
    70px;

  animation: pageFade 0.4s ease;
}

.page.active-page {
  display: block;
}

@keyframes pageFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================================================
   ТЕКСТ
====================================================== */

.eyebrow {
  margin-bottom: 20px;

  color: var(--gold);

  font-size: 12px;
  letter-spacing: 0.24em;

  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin-top: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 400;
}

.page-title {
  max-width: 780px;

  margin-bottom: 34px;
}

.page-title.center {
  margin-left: auto;
  margin-right: auto;

  text-align: center;
}

.page-title h2 {
  margin-bottom: 14px;

  font-size:
    clamp(42px, 5vw, 68px);
}

.page-title p {
  color: var(--text-soft);

  font-size: 16px;
  line-height: 1.7;
}

/* ======================================================
   ГЛАВНАЯ
====================================================== */

#about.active-page {
  display: flex;
  align-items: center;
}

.hero {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(380px, 0.95fr);

  align-items: center;

  gap: 7vw;
}

.hero-text {
  max-width: 760px;
}

h1 {
  margin-bottom: 28px;

  font-size:
    clamp(50px, 6vw, 92px);

  line-height: 0.98;

  letter-spacing: -0.035em;
}

h1 span {
  display: block;

  color: var(--gold-light);

  font-style: italic;
}

.hero-description {
  max-width: 650px;

  color: #d0c2b5;

  font-size:
    clamp(17px, 1.6vw, 21px);

  line-height: 1.65;
}

.hero-buttons {
  display: flex;

  gap: 14px;

  margin-top: 34px;

  flex-wrap: wrap;
}

.gold-button,
.outline-button {
  padding: 14px 22px;

  border-radius: 100px;

  cursor: pointer;

  transition: 0.25s ease;
}

.gold-button {
  border: 1px solid var(--gold-light);

  color: #211008;

  background:
    linear-gradient(
      135deg,
      #ecd8aa,
      #b88a4d
    );
}

.gold-button:hover {
  transform: translateY(-2px);
}

.outline-button {
  border: 1px solid var(--line);

  background: transparent;

  color: var(--cream);
}

.outline-button:hover {
  border-color: var(--gold);
}

.gold-button.small {
  padding: 10px 17px;
}

.hero-info {
  display: flex;

  gap: 28px;

  margin-top: 38px;

  color: #8d7a6c;

  font-size: 11px;
  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.hero-logo {
  position: relative;

  min-height: 570px;

  display: grid;
  place-items: center;
}

.hero-logo img {
  position: relative;

  z-index: 2;

  width: min(42vw, 590px);

  max-height: 580px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 28px 38px
      rgba(0, 0, 0, 0.38)
    );
}

.logo-glow {
  position: absolute;

  width: min(34vw, 470px);

  aspect-ratio: 1;

  border-radius: 50%;

  border:
    1px solid
    rgba(215, 180, 125, 0.22);
}

/* ======================================================
   КАТАЛОГ
====================================================== */

#catalog.active-page,
#sales.active-page,
#popular.active-page,
#order.active-page,
#cart.active-page {
  display: flex;

  flex-direction: column;

  justify-content: center;
}

.catalog-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  width: 100%;

  margin: 0 auto;
}

.pdf-book {
  overflow: hidden;

  background: #120804;

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.48);
}

.pdf-page {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #120804;
}

.pdf-page canvas {
  display: block;

  width: 100%;

  height: auto;
}

.catalog-arrow {
  appearance: none;
  -webkit-appearance: none;

  width: 54px;
  height: 54px;
  min-width: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid rgba(215, 180, 125, 0.45);
  border-radius: 50%;

  background: rgba(35, 17, 10, 0.72);

  color: var(--gold-light);

  font-family: Georgia, serif;
  font-size: 42px;
  line-height: 1;

  cursor: pointer;

  transition: 0.2s ease;
}

.catalog-arrow:hover:not(:disabled) {
  transform: scale(1.08);

  border-color: var(--gold);

  background: rgba(75, 42, 24, 0.9);
}

.catalog-arrow:disabled {
  opacity: 0.18;

  cursor: default;
}

/* ======================================================
   СКИДКИ
====================================================== */

.sale-card {
  width: 100%;
  max-width: 930px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  padding:
    clamp(28px, 4vw, 55px);

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

  border-radius: 30px;

  background:
    linear-gradient(
      135deg,
      rgba(83, 44, 24, 0.76),
      rgba(29, 14, 9, 0.85)
    );
}

.discount {
  display: inline-block;

  margin-bottom: 22px;

  padding: 8px 14px;

  border-radius: 100px;

  color: #211008;

  background: var(--gold-light);

  font-weight: 800;
}

.sale-card h3 {
  margin-bottom: 10px;

  font-size:
    clamp(36px, 4vw, 60px);
}

.sale-card p {
  color: var(--text-soft);

  line-height: 1.6;
}

/* ======================================================
   ПОПУЛЯРНОЕ
====================================================== */

.popular-placeholder {
  display: grid;

  grid-template-columns:
    1.2fr
    0.8fr;

  width: 100%;
  max-width: 860px;

  overflow: hidden;

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

  border-radius: 30px;

  background:
    rgba(45, 24, 15, 0.72);
}

.photo-placeholder {
  min-height: 370px;

  display: grid;
  place-items: center;

  color: #907665;

  letter-spacing: 0.18em;

  background: #211008;
}

.popular-info {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
  justify-content: center;

  padding: 42px;
}

.product-index {
  color: var(--gold);

  font-size: 12px;

  letter-spacing: 0.18em;
}

.popular-info h3 {
  margin:
    12px 0 8px;

  font-size: 48px;
}

.popular-info p {
  margin-bottom: 26px;

  color: var(--text-soft);
}

/* ======================================================
   ORDER
====================================================== */

.order-shell {
  width: 100%;

  max-width: 1450px;

  margin: 0 auto;
}

.order-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 24px;
}

.order-back {
  padding: 9px 15px;

  border: 1px solid var(--line);
  border-radius: 100px;

  background: rgba(41, 21, 13, 0.72);

  color: var(--gold-light);

  cursor: pointer;
}

.order-breadcrumb {
  color: #8d796b;

  font-size: 11px;
  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.order-step {
  display: none;
}

.order-step.active-order-step {
  display: block;

  animation: pageFade 0.35s ease;
}

/* ======================================================
   ВЫБОР ОТДЕЛА
====================================================== */

.category-grid {
  display: grid;

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

  gap: 16px;

  width: 100%;
  max-width: 1180px;

  margin: 0 auto;
}

.category {
  min-height: 245px;

  padding: 26px;

  text-align: left;

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

  border-radius: 25px;

  background:
    linear-gradient(
      160deg,
      rgba(76, 40, 23, 0.76),
      rgba(28, 14, 9, 0.82)
    );

  cursor: pointer;

  transition: 0.25s ease;
}

.category:hover {
  transform: translateY(-4px);

  border-color: var(--line-strong);
}

.category > span {
  color: var(--gold);

  font-size: 11px;
  letter-spacing: 0.18em;
}

.category h3 {
  margin:
    55px 0 10px;

  font-size: 28px;
}

.category p {
  color: var(--text-soft);

  font-size: 14px;
  line-height: 1.5;
}

/* ======================================================
   КЛАССИЧЕСКИЕ — ЗАГОЛОВОК
====================================================== */

.order-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 26px;
}

.order-section-heading h2 {
  margin-bottom: 0;

  font-size:
    clamp(38px, 4vw, 58px);
}

.order-section-heading > p {
  max-width: 400px;

  margin: 0;

  color: var(--text-soft);

  font-size: 14px;
  line-height: 1.6;
}

/* ======================================================
   СЕТКА КЛАССИЧЕСКИХ ТОРТОВ
====================================================== */

.product-grid {
  display: grid;

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

  gap: 14px;
}

/* ======================================================
   МАЛЕНЬКАЯ КАРТОЧКА ТОРТА
====================================================== */

.cake-choice {
  overflow: hidden;

  padding: 0;

  text-align: left;

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

  border-radius: 20px;

  background:
    linear-gradient(
      160deg,
      rgba(57, 29, 17, 0.84),
      rgba(23, 11, 7, 0.94)
    );

  cursor: pointer;

  transition: 0.22s ease;
}

.cake-choice:hover {
  transform: translateY(-4px);

  border-color: var(--line-strong);

  box-shadow:
    0 16px 35px
    rgba(0, 0, 0, 0.26);
}

.cake-choice-image {
  height: 185px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: transparent;
}

.cake-choice-image img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 8px;

  background: transparent;

  transition: transform 0.25s ease;
}

.cake-choice:hover
.cake-choice-image img {
  transform: scale(1.035);
}

.cake-choice-info {
  padding:
    14px 16px
    17px;
}

.cake-choice-info > span {
  color: var(--gold);

  font-size: 10px;

  letter-spacing: 0.14em;
}

.cake-choice-info h3 {
  margin:
    7px 0 6px;

  font-size: 23px;
}

.cake-choice-info p {
  margin: 0;

  color: #a99586;

  font-size: 12px;
  line-height: 1.45;
}

/* ======================================================
   ВЫБРАННЫЙ ТОРТ
====================================================== */

.product-detail {
  width: 100%;
  max-width: 1100px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(320px, 0.85fr)
    minmax(420px, 1.15fr);

  gap: 42px;

  align-items: start;
}

/* ======================================================
   FLIP CARD
====================================================== */

.product-detail-media {
  width: 100%;
}

.product-flip-card {
  width: 100%;

  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;

  perspective: 1400px;
}

.product-flip-inner {
  position: relative;

  width: 100%;

  min-height: 430px;

  transform-style: preserve-3d;

  transition:
    transform 0.65s
    cubic-bezier(
      0.2,
      0.7,
      0.2,
      1
    );
}

.product-flip-inner.is-flipped {
  transform: rotateY(180deg);
}

.product-flip-face {
  position: absolute;

  inset: 0;

  width: 100%;
  min-height: 430px;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 24px;

  background:
    linear-gradient(
      150deg,
      rgba(54, 28, 17, 0.76),
      rgba(18, 8, 5, 0.92)
    );

  box-shadow:
    0 22px 55px
    rgba(0, 0, 0, 0.32);
}

.product-flip-front {
  display: flex;
  flex-direction: column;
}

.product-flip-back {
  display: grid;

  grid-template-rows:
    230px
    1fr;

  transform: rotateY(180deg);
}

/* ======================================================
   ЛИЦЕВАЯ СТОРОНА
====================================================== */

.product-photo-frame {
  height: 370px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: transparent;
}

.product-photo-frame img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 14px;

  background: transparent;
}

.flip-hint {
  padding:
    14px
    18px
    16px;

  color: #8f7c6e;

  font-size: 11px;
  letter-spacing: 0.06em;

  text-align: center;

  border-top: 1px solid var(--line);
}

/* ======================================================
   ОБРАТНАЯ СТОРОНА
====================================================== */

.product-cut-frame {
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

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

  background: transparent;
}

.product-cut-frame img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 10px;

  background: transparent;
}

.product-back-content {
  padding:
    20px
    22px
    18px;

  text-align: left;
}

.product-back-content .eyebrow {
  margin-bottom: 12px;
}

.flip-composition {
  display: grid;

  gap: 7px;
}

.flip-composition-row {
  padding-bottom: 7px;

  color: var(--text-soft);

  font-size: 13px;

  border-bottom:
    1px solid
    rgba(215, 180, 125, 0.08);
}

.product-back-content
.flip-hint {
  margin-top: 14px;

  padding:
    12px 0 0;

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

  text-align: left;
}

/* ======================================================
   ПРАВАЯ ЧАСТЬ ТОРТА
====================================================== */

.product-detail-info {
  padding-top: 4px;
}

.product-detail-info h2 {
  margin-bottom: 12px;

  font-size:
    clamp(38px, 4vw, 58px);
}

.product-description {
  margin-bottom: 22px;

  color: var(--text-soft);

  font-size: 15px;
  line-height: 1.6;
}

/* ======================================================
   РАЗМЕРЫ
====================================================== */

.size-title {
  margin-bottom: 11px;

  color: var(--gold-light);

  font-size: 11px;
  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.size-options {
  display: grid;

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

  gap: 12px;
}

.size-card {
  padding: 17px;

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

  border-radius: 19px;

  background:
    linear-gradient(
      150deg,
      rgba(68, 35, 20, 0.78),
      rgba(24, 11, 7, 0.94)
    );
}

.size-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;
}

.size-letter {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid var(--gold);
  border-radius: 50%;

  color: var(--gold-light);

  font-family: Georgia, serif;

  font-size: 17px;
}

.size-price {
  color: var(--gold-light);

  font-family: Georgia, serif;

  font-size: 23px;
}

.size-card-data {
  display: grid;

  gap: 7px;

  margin-bottom: 13px;
}

.size-card-data > div {
  display: flex;
  justify-content: space-between;

  gap: 10px;

  padding-bottom: 6px;

  border-bottom:
    1px solid
    rgba(215, 180, 125, 0.07);
}

.size-card-data span {
  color: #8f7c6e;

  font-size: 11px;
}

.size-card-data strong {
  color: var(--cream);

  font-size: 12px;
  font-weight: 500;
}

.size-extra {
  margin-bottom: 11px;

  color: var(--gold);

  font-size: 11px;
}

.add-cart-button {
  width: 100%;

  padding: 10px 12px;

  border: 1px solid var(--gold-light);
  border-radius: 100px;

  background:
    linear-gradient(
      135deg,
      #ecd8aa,
      #b88a4d
    );

  color: #211008;

  font-size: 12px;

  cursor: pointer;

  transition: 0.2s ease;
}

.add-cart-button:hover {
  transform: translateY(-2px);
}

.size-index {
  margin-top: 11px;

  padding-top: 9px;

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

  color: #806d60;

  font-size: 10px;

  letter-spacing: 0.18em;

  text-align: center;
}

/* ======================================================
   ЗАГЛУШКИ
====================================================== */

.coming-soon-card {
  max-width: 700px;

  margin: 8vh auto 0;

  padding: 45px;

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

  border-radius: 28px;

  background:
    rgba(45, 24, 15, 0.72);

  text-align: center;
}

.coming-soon-card h2 {
  font-size:
    clamp(38px, 5vw, 58px);
}

.coming-soon-card p {
  color: var(--text-soft);
}

/* ======================================================
   TOAST
====================================================== */

.cart-toast {
  position: fixed;

  left: 50%;
  bottom: 30px;

  z-index: 500;

  transform:
    translateX(-50%)
    translateY(30px);

  padding: 12px 18px;

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

  border-radius: 100px;

  background:
    rgba(29, 14, 9, 0.97);

  color: var(--gold-light);

  font-size: 13px;

  opacity: 0;

  pointer-events: none;

  transition: 0.25s ease;
}

.cart-toast.show {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}

/* ======================================================
   КОРЗИНА
====================================================== */

.empty-cart {
  width: 100%;
  max-width: 720px;

  padding: 52px;

  text-align: center;

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

  border-radius: 30px;

  background:
    rgba(45, 24, 15, 0.72);
}

.cart-logo {
  width: 74px;
  height: 74px;

  display: inline-grid;
  place-items: center;

  margin-bottom: 22px;

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

  border-radius: 50%;

  color: var(--gold-light);

  font-family: Georgia, serif;

  font-size: 20px;
}

.empty-cart h3 {
  margin-bottom: 10px;

  font-size: 36px;
}

.empty-cart p {
  margin-bottom: 27px;

  color: var(--text-soft);
}

.cart-content {
  width: 100%;
  max-width: 980px;
}

.cart-items {
  display: grid;

  gap: 12px;
}

.cart-item {
  display: grid;

  grid-template-columns:
    105px
    1fr
    auto;

  gap: 18px;

  align-items: center;

  padding: 15px;

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

  border-radius: 21px;

  background:
    rgba(46, 24, 15, 0.72);
}

.cart-item-image {
  width: 105px;
  height: 90px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 15px;

  background: transparent;
}

.cart-item-image img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  background: transparent;
}

.cart-item-index {
  color: var(--gold);

  font-size: 10px;

  letter-spacing: 0.16em;
}

.cart-item-info h3 {
  margin:
    4px 0 5px;

  font-size: 25px;
}

.cart-item-info p {
  margin: 0;

  color: var(--text-soft);

  font-size: 13px;
}

.cart-item-controls {
  min-width: 140px;

  display: flex;
  flex-direction: column;

  align-items: flex-end;

  gap: 10px;
}

.quantity-control {
  display: flex;
  align-items: center;

  gap: 10px;
}

.quantity-control button {
  width: 30px;
  height: 30px;

  border: 1px solid var(--line);
  border-radius: 50%;

  background: transparent;

  color: var(--gold-light);

  cursor: pointer;
}

.remove-cart-item {
  border: 0;

  background: transparent;

  color: #876f60;

  font-size: 10px;

  cursor: pointer;
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 18px;

  padding: 20px 0;

  border-top: 1px solid var(--line);
}

.cart-summary span {
  color: var(--text-soft);
}

.cart-summary strong {
  color: var(--gold-light);

  font-family: Georgia, serif;

  font-size: 32px;
}

/* ======================================================
   FOOTER
====================================================== */

footer {
  display: flex;

  justify-content: space-between;

  gap: 20px;

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

  color: #705e51;

  font-size: 11px;
}

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

@media (max-width: 1100px) {

  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-logo {
    order: -1;

    min-height: 330px;
  }

  .hero-logo img {
    width:
      min(84vw, 440px);
  }

  .logo-glow {
    width:
      min(74vw, 390px);
  }

  .category-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .product-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .product-detail {
    grid-template-columns: 1fr;

    max-width: 720px;
  }

  .product-flip-inner,
  .product-flip-face {
    min-height: 440px;
  }

  .popular-placeholder {
    grid-template-columns: 1fr;
  }

}

/* ======================================================
   PHONE
====================================================== */

@media (max-width: 640px) {

  .header {
    height: 82px;

    padding:
      10px 18px;
  }

  .logo-button {
    width: 62px;
  }

  .page {
    padding:
      100px
      16px
      48px;
  }

  #about.active-page {
    align-items: flex-start;
  }

  .hero-text {
    text-align: center;
  }

  h1 {
    font-size:
      clamp(44px, 14vw, 65px);
  }

  .hero-description {
    font-size: 16px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-info {
    flex-direction: column;

    justify-content: center;

    gap: 8px;
  }

  .catalog-wrapper {
    gap: 5px;
  }

  .catalog-arrow {
    width: 40px;
    height: 40px;
    min-width: 40px;

    font-size: 30px;
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .category {
    min-height: 190px;
  }

  .category h3 {
    margin-top: 36px;
  }

  .order-topbar {
    align-items: flex-start;

    flex-direction: column;
  }

  .order-section-heading {
    align-items: flex-start;

    flex-direction: column;
  }

  .product-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .cake-choice-image {
    height: 145px;
  }

  .cake-choice-info {
    padding: 11px 12px 14px;
  }

  .cake-choice-info h3 {
    font-size: 19px;
  }

  .cake-choice-info p {
    display: none;
  }

  .product-detail {
    gap: 24px;
  }

  .product-flip-inner,
  .product-flip-face {
    min-height: 390px;
  }

  .product-photo-frame {
    height: 330px;
  }

  .product-flip-back {
    grid-template-rows:
      190px
      1fr;
  }

  .product-detail-info h2 {
    font-size: 40px;
  }

  .size-options {
    grid-template-columns: 1fr;
  }

  .cart-item {
    grid-template-columns:
      80px
      1fr;
  }

  .cart-item-image {
    width: 80px;
    height: 70px;
  }

  .cart-item-controls {
    grid-column:
      1 / -1;

    width: 100%;

    flex-direction: row;

    align-items: center;
    justify-content: space-between;
  }

  footer {
    flex-direction: column;

    text-align: center;
  }

}

/* ==================================================
   HOME EXTRA
================================================== */

.home-extra-grid {

  width: min(1180px, 92vw);

  display: grid;

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

  gap: 18px;

  margin:
    30px auto 60px;

}


.home-extra-card {

  padding:
    30px;

  border:
    1px solid
    rgba(216, 189, 125, 0.18);

  border-radius:
    22px;

  background:
    rgba(40, 21, 14, 0.72);

}


.home-extra-card h3 {

  margin:
    8px 0 15px;

  font-family:
    Georgia, serif;

  font-size:
    28px;

  font-weight:
    500;

}


.home-extra-card p {

  color:
    #b8aaa0;

  line-height:
    1.65;

}


/* ==================================================
   ABOUT PAGE
================================================== */

.about-page-shell {

  width:
    min(1180px, 92vw);

  display:
    grid;

  grid-template-columns:
    minmax(300px, 0.9fr)
    minmax(0, 1.1fr);

  gap:
    clamp(30px, 6vw, 80px);

  align-items:
    center;

  margin:
    70px auto;

}


.about-page-photo {

  position:
    relative;

  min-height:
    620px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(216, 189, 125, 0.18);

  border-radius:
    28px;

  background:
    linear-gradient(
      145deg,
      rgba(70, 35, 23, 0.95),
      rgba(26, 13, 9, 0.98)
    );

}


.about-page-photo img {

  width:
    100%;

  height:
    100%;

  min-height:
    620px;

  object-fit:
    cover;

  display:
    block;

}


.about-photo-placeholder {

  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    rgba(242, 221, 161, 0.55);

  font-size:
    12px;

  letter-spacing:
    3px;

}


.about-page-photo:not(.photo-empty)
.about-photo-placeholder {

  display:
    none;

}


.about-page-content h2 {

  margin:
    10px 0 24px;

  font-family:
    Georgia, serif;

  font-size:
    clamp(42px, 6vw, 64px);

  font-weight:
    500;

}


.about-page-content p {

  color:
    #c5b8af;

  font-size:
    16px;

  line-height:
    1.75;

  margin:
    0 0 18px;

}


@media (max-width: 760px) {

  .home-extra-grid {

    grid-template-columns:
      1fr;

  }


  .about-page-shell {

    grid-template-columns:
      1fr;

    margin-top:
      30px;

  }


  .about-page-photo {

    min-height:
      460px;

  }


  .about-page-photo img {

    min-height:
      460px;

  }

}