:root {
  --mk-ink: #172b32;
  --mk-accent: #a9633f;
  --mk-accent2: #f3e9df;
  --mk-teal: #23675b;
  --mk-bg: #f5f2ec;
  --mk-line: #e7e0d6;
  --premium-shadow: 0 18px 50px rgb(23 43 50 / 8%);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 86% 3%, rgb(169 99 63 / 7%), transparent 34rem),
    var(--mk-bg);
  color: var(--mk-ink);
  font-family: "Plus Jakarta Sans", "Hind Siliguri", sans-serif;
}

:is(h1, h2, h3, .mk-top .logo, .mk-foot .brand) {
  font-family: "Plus Jakarta Sans", "Hind Siliguri", sans-serif;
  letter-spacing: -.035em;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgb(35 103 91 / 48%);
  outline-offset: 3px;
}

.announcement {
  background: #172b32;
  color: #f8f5ef;
  letter-spacing: .035em;
}

.mk-top {
  background: rgb(255 255 255 / 94%);
  border-bottom-color: rgb(23 43 50 / 8%);
  box-shadow: 0 8px 28px rgb(23 43 50 / 5%);
  backdrop-filter: blur(20px);
}

.mk-row { min-height: 78px; gap: clamp(14px, 2vw, 26px); }
.mk-top .logo { color: #172b32; font-size: 25px; font-weight: 800; }
.mk-top .logo em { color: var(--mk-accent); }
.mk-search {
  border: 1px solid #dcd6cb;
  background: #faf9f6;
  box-shadow: inset 0 1px 2px rgb(23 43 50 / 3%);
}
.mk-search:focus-within { border-color: var(--mk-teal); box-shadow: 0 0 0 4px rgb(35 103 91 / 10%); }
.mk-search button { background: #23675b; transition: background .2s, color .2s; }
.mk-search button:hover { background: #174d43; }
.mk-act { transition: color .2s, background .2s, transform .2s; }
.mk-act:hover { background: #f3e9df; color: #8c4c31; transform: translateY(-2px); }

.mk-cats {
  position: relative;
  border-bottom: 1px solid rgb(23 43 50 / 8%);
  background: #fff;
}
.mk-cats .wrap {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 9px 0 11px;
  scrollbar-width: thin;
  scrollbar-color: #c8b8a7 transparent;
  scroll-snap-type: x proximity;
}
.mk-cats a {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #536168;
  font-size: 12px;
  font-weight: 650;
  padding: 8px 15px;
  scroll-snap-align: start;
  transition: background .2s, border-color .2s, color .2s;
}
.mk-cats a:hover { border-color: #e8d7c8; background: #faf6f1; color: #8c4c31; }
.mk-cats a.on { background: #172b32; color: #fff; }

.mk-hero { gap: 20px; padding: 28px 0 22px; }
.mk-slider {
  min-height: 380px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 28px;
  box-shadow: 0 26px 64px rgb(23 43 50 / 15%);
}
.mk-slide {
  min-height: 380px;
  padding: clamp(30px, 5vw, 62px);
}
.mk-slide > div:first-child { position: relative; z-index: 1; }
.mk-slide h2 {
  max-width: 610px;
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.045em;
}
.mk-slide p { max-width: 440px; font-size: 16px; line-height: 1.8; }
.mk-slide .tag { padding: 7px 13px; letter-spacing: .04em; }
.mk-slide .btn {
  border-radius: 999px;
  box-shadow: 0 10px 25px rgb(23 43 50 / 16%);
  transition: transform .2s, box-shadow .2s;
}
.mk-slide .btn:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgb(23 43 50 / 22%); }
.mk-slide img {
  max-height: 305px;
  filter: drop-shadow(0 28px 28px rgb(12 20 14 / 24%));
}
.mk-side { gap: 16px; }
.mk-promo {
  min-height: 170px;
  border: 1px solid rgb(23 43 50 / 7%);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgb(23 43 50 / 6%);
  transition: transform .25s, box-shadow .25s;
}
.mk-promo:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgb(23 43 50 / 12%); }
.mk-promo b { font-size: 21px; }
.mk-promo span { line-height: 1.6; }

.mk-trust { gap: 12px; margin: 0 0 26px; }
.mk-trust div {
  min-height: 62px;
  border: 1px solid var(--mk-line);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgb(23 43 50 / 4%);
  font-size: 12px;
}
.mk-trust svg { color: var(--mk-accent); }
.mk-box {
  margin-bottom: 26px;
  padding: clamp(20px, 2.5vw, 30px);
  border: 1px solid rgb(23 43 50 / 7%);
  border-radius: 24px;
  box-shadow: 0 14px 38px rgb(23 43 50 / 5%);
}
.mk-head { margin-bottom: 22px; }
.mk-head h2 { font-size: clamp(21px, 2vw, 27px); font-weight: 750; }
.mk-head a { color: #925638; }

.mk-rail {
  grid-auto-columns: minmax(112px, 1fr);
  gap: 12px;
  padding: 2px 1px 9px;
}
.mk-rail a {
  min-height: 132px;
  justify-content: center;
  border: 1px solid #eee8df;
  border-radius: 17px;
  background: linear-gradient(160deg, #fff, #faf8f4);
  padding: 12px 8px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mk-rail a:hover { border-color: #d8b99f; box-shadow: 0 10px 24px rgb(23 43 50 / 8%); transform: translateY(-3px); }
.mk-rail i {
  width: 58px;
  height: 58px;
  color: #23675b;
  background: #f2ece3;
  border: 1px solid #e8dfd3;
}
.mk-rail a:hover i { background: #e8f0e9; color: #174d43; }

.grid { gap: 18px !important; }
.pc {
  border: 1px solid #e8e2d9;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgb(23 43 50 / 4%);
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
.pc:hover {
  border-color: #d8b99f;
  box-shadow: 0 22px 48px rgb(23 43 50 / 12%);
  transform: translateY(-5px);
}
.pc-link { padding: 10px 10px 0; }
.pc-stage { border-radius: 15px; background: linear-gradient(145deg, #f2eee6, #eae5da); }
.pc-stage img { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.pc:hover .pc-stage img { transform: scale(1.055) rotate(-1deg); }
.pc-info h3 { font-size: 14px; font-weight: 700 !important; line-height: 1.45; }
.pc-cat, .pc-sizes { color: #737b78 !important; }
.pc-badge.sale { background: #a9633f; }
.mk-btn {
  min-height: 38px;
  border-radius: 11px;
  transition: transform .18s, filter .18s;
}
.mk-btn:hover { filter: brightness(.95); transform: translateY(-1px); }
.mk-btn.ghost { border-color: #d8d0c5; color: #304b46; }

.mk-foot { background: #172b32; }
.mk-foot .brand { font-size: 22px; letter-spacing: -.04em; }
.mk-foot .brand em { color: #db9a70; }
.mk-fab { background: #23675b; box-shadow: 0 12px 28px rgb(23 43 50 / 24%); }

.content-page { padding-top: 32px; padding-bottom: 68px; }
.cart-page, .checkout-page { animation: premium-rise .45s ease both; }
.cart-page .panel, .checkout-page .panel {
  border-color: #e7e0d6;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgb(23 43 50 / 6%);
}
.payment-advance {
  border-color: #e6d7c7;
  background: linear-gradient(135deg, #fffaf3, #f5efe6);
}
.checkout-form input:focus, .checkout-form textarea:focus {
  border-color: #23675b;
  box-shadow: 0 0 0 4px rgb(35 103 91 / 11%);
}
.checkout-form .field label { color: #354c47; font-weight: 650; }
.checkout-form .field label span,
.checkout-form .field-hint { color: #697873; }
.checkout-form .field input,
.checkout-form .field textarea,
.checkout-form .field select { color: #172b32; }
.checkout-form .field input::placeholder,
.checkout-form .field textarea::placeholder { color: #89938e; opacity: 1; }

@media (max-width: 900px) {
  .mk-slider, .mk-slide { min-height: 330px; }
  .mk-slide h2 { font-size: clamp(30px, 5vw, 48px); }
  .mk-rail { grid-auto-columns: minmax(108px, 1fr); }
}

@media (max-width: 650px) {
  .mk-row { min-height: 0; padding: 11px 0; }
  .mk-top .logo { font-size: 20px; }
  .mk-cats .wrap { padding: 7px 0 9px; }
  .mk-cats a { padding: 7px 12px; font-size: 11.5px; }
  .mk-hero { gap: 12px; padding: 16px 0; }
  .mk-slider, .mk-slide { min-height: 255px; }
  .mk-slide { padding: 25px 21px; }
  .mk-slide h2 { font-size: clamp(28px, 8vw, 40px); }
  .mk-slide p { font-size: 14px; }
  .mk-side { gap: 10px; }
  .mk-promo { min-height: 118px; border-radius: 17px; }
  .mk-trust { gap: 8px; margin-bottom: 16px; }
  .mk-trust div { min-height: 54px; padding: 9px; font-size: 10.5px; }
  .mk-box { margin-bottom: 16px; padding: 16px; border-radius: 19px; }
  .mk-head { margin-bottom: 15px; }
  .mk-rail { grid-auto-columns: 106px; gap: 9px; }
  .mk-rail a { min-height: 118px; font-size: 11px; }
  .mk-rail i { width: 52px; height: 52px; }
  .grid { gap: 10px !important; }
  .pc { border-radius: 16px; }
  .pc-link { padding: 7px 7px 0; }
  .pc-actions { gap: 5px; padding: 7px; }
  .mk-btn { min-height: 34px; font-size: 11px; }
  .content-page { padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mk-act, .mk-promo, .mk-rail a, .pc, .pc-stage img, .mk-btn, .mk-slide .btn { transition: none; }
}