:root {
  --mk-ink: #172820;
  --mk-accent: #d85d3c;
  --mk-accent2: #fff0e7;
  --mk-teal: #2d7664;
  --mk-bg: #f6f4ef;
  --mk-line: #e8e4dc;
  --mk-r: 22px;
  --premium-shadow: 0 18px 50px rgb(28 37 31 / 8%);
}

body {
  background:
    radial-gradient(ellipse at 82% 0%, rgb(222 126 87 / 8%), transparent 34rem),
    var(--mk-bg);
  color: var(--mk-ink);
}

.announcement {
  background: #172820;
  color: #f7f4ec;
  letter-spacing: .025em;
}

.mk-top {
  background: rgb(255 255 255 / 92%);
  border-bottom-color: rgb(23 40 32 / 9%);
  box-shadow: 0 8px 28px rgb(28 37 31 / 6%);
  backdrop-filter: blur(18px);
}

.mk-row { min-height: 74px; }
.mk-top .logo { font-size: 24px; }
.mk-top .logo em { color: var(--mk-accent); }
.mk-search { border-color: #d7d4cc; background: #f8f7f3; }
.mk-search input { color: var(--mk-ink); }
.mk-search button { background: var(--mk-accent); }
.mk-search button:hover { background: #bd472b; }
.mk-actions { align-items: center; }
.mk-act { border-radius: 13px; transition: background .2s, transform .2s; }
.mk-act:hover { transform: translateY(-2px); }
.mk-cats { background: rgb(255 255 255 / 86%); }
.mk-cats a { color: #52625a; }
.mk-cats a:hover, .mk-cats a.on { background: #172820; color: #fff; }

.mk-hero { gap: 18px; padding: 26px 0 20px; }
.mk-slider {
  min-height: 360px;
  border-radius: 30px;
  box-shadow: 0 24px 60px rgb(37 48 41 / 16%);
}
.mk-slide {
  min-height: 360px;
  padding: clamp(28px, 5vw, 60px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mk-slide::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(42vw, 430px);
  aspect-ratio: 1;
  right: -7%;
  bottom: -38%;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgb(255 255 255 / 5%), 0 0 0 72px rgb(255 255 255 / 4%);
}
.mk-slide h2 { max-width: 590px; font-size: clamp(32px, 4vw, 54px); }
.mk-slide p { max-width: 430px; font-size: 16px; line-height: 1.8; }
.mk-slide .btn {
  background: #fff9ef;
  color: #172820;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgb(16 28 20 / 18%);
}
.mk-slide img {
  max-height: 290px;
  filter: drop-shadow(0 28px 28px rgb(12 20 14 / 30%));
  animation: premium-float 5.5s ease-in-out infinite;
}
.mk-dots i.on { background: #fff; }
.mk-promo {
  border-radius: 24px;
  border: 1px solid rgb(23 40 32 / 8%);
  box-shadow: var(--premium-shadow);
  transition: transform .25s, box-shadow .25s;
}
.mk-promo:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgb(28 37 31 / 13%); }
.mk-promo b { font-size: 21px; }

.mk-trust { gap: 12px; margin: 0 0 24px; }
.mk-trust div {
  min-height: 58px;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: 17px;
  box-shadow: 0 5px 16px rgb(28 37 31 / 4%);
}
.mk-trust svg { color: var(--mk-accent); }
.mk-box {
  padding: clamp(16px, 2vw, 26px);
  margin-bottom: 24px;
  border: 1px solid rgb(23 40 32 / 7%);
  border-radius: 26px;
  box-shadow: 0 12px 34px rgb(28 37 31 / 5%);
}
.mk-head { margin-bottom: 20px; }
.mk-head h2 { font-size: clamp(20px, 2vw, 25px); letter-spacing: -.025em; }
.mk-head a { color: #b94a2e; }
.mk-rail { gap: 16px; }
.mk-rail i {
  width: 76px;
  height: 76px;
  color: #23483c;
  background: #f4eee5;
  border: 1px solid #ece3d8;
}
.mk-rail a:hover i { background: #e8f0e9; color: #173c30; }

.grid { gap: 18px !important; }
.pc {
  border: 1px solid #e9e5dd;
  border-radius: 21px;
  box-shadow: 0 8px 24px rgb(28 37 31 / 4%);
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
.pc:hover {
  border-color: #d9c5b6;
  box-shadow: 0 22px 48px rgb(28 37 31 / 13%);
  transform: translateY(-5px);
}
.pc-stage { background: linear-gradient(145deg, #f4f0e8, #eee9df); }
.pc-stage img { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.pc:hover .pc-stage img { transform: scale(1.055) rotate(-2deg); }
.pc-badge.sale { background: #bd5636; }
.pc-actions { gap: 8px; }
.mk-btn { border-radius: 12px; transition: transform .18s, filter .18s; }
.mk-btn:hover { filter: brightness(.96); transform: translateY(-1px); }
.mk-btn.ghost { border-color: #d9d4ca; color: #34483d; }

.content-page { padding-top: 30px; padding-bottom: 64px; }
.cart-page, .checkout-page { animation: premium-rise .45s ease both; }
.cart-page .panel, .checkout-page .panel {
  border: 1px solid #e8e4dc;
  border-radius: 22px;
  box-shadow: 0 14px 40px rgb(28 37 31 / 6%);
}
.cart-line { padding: 20px 0; }
.cart-line + .cart-line { border-top-color: #ebe7df; }
.cart-line img { border-radius: 15px; background: #f2eee7; }
.cart-line .text-link {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #f0d8cf;
  border-radius: 10px;
  color: #ad452d;
  cursor: pointer;
}
.cart-line .cart-remove {
  display: inline-grid;
  width: 36px;
  min-height: 36px;
  padding: 0;
  place-items: center;
  color: #000;
  background: #fff;
  border-color: #e5e5e5;
}
.cart-line .cart-remove svg { width: 18px; height: 18px; }
.cart-line .cart-remove:hover { color: #000; border-color: #b8b8b8; background: #f7f7f7; }
.qty button { border-radius: 10px; }
.order-summary { position: sticky; top: 96px; height: fit-content; }
.summary-total { border-top: 1px solid #e8e4dc; }
.checkout-steps span, .checkout-steps a { border-radius: 999px; }
.checkout-form input, .checkout-form textarea { border-radius: 12px; }
.checkout-form input:focus, .checkout-form textarea:focus {
  border-color: #2d7664;
  box-shadow: 0 0 0 4px rgb(45 118 100 / 12%);
}
.checkout-submit, .checkout-form > .btn {
  min-height: 50px;
  border-radius: 13px;
}
.payment-advance {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #e8d8bf;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffaf0, #f6f3e9);
  color: #26382f;
}
.payment-advance strong { line-height: 1.5; }
.payment-advance p { margin: 0; color: #66746b; font-size: 13px; line-height: 1.65; }
.payment-wallets { display: block; width: min(100%, 224px); height: auto; }
.mk-pay { display: grid; gap: 10px; }
.mk-pay .payment-wallets { width: min(100%, 180px); }
.payment-coming-soon { color: #c7c9d4; font-size: 12px; line-height: 1.6; }
.secure-note { border-radius: 14px; }
.mk-foot { background: #172820; }
.mk-foot .cols { gap: clamp(22px, 4vw, 56px); }
.mk-copy { border-top-color: rgb(255 255 255 / 15%); }

.locale-switch { display: inline-flex; align-items: center; }
.locale-switch select {
  min-height: 36px;
  padding: 0 28px 0 11px;
  border: 1px solid #e0ddd5;
  border-radius: 999px;
  background: #fff;
  color: #26382f;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.locale-switch select:focus-visible { outline: 2px solid #2d7664; outline-offset: 2px; }

@keyframes premium-float { 50% { transform: translateY(-8px) rotate(-4deg); } }
@keyframes premium-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .mk-slide { min-height: 310px; }
  .mk-slider { min-height: 310px; }
  .order-summary { position: static; }
}
@media (max-width: 650px) {
  .mk-row { min-height: 0; }
  .mk-actions { gap: 2px; }
  .locale-switch select { min-height: 34px; padding-left: 9px; font-size: 11px; }
  .mk-slide { min-height: 255px; padding: 24px 22px; }
  .mk-slider { min-height: 255px; border-radius: 22px; }
  .mk-slide h2 { font-size: clamp(28px, 8vw, 38px); }
  .mk-side { gap: 10px; }
  .mk-promo { border-radius: 18px; }
  .mk-trust { gap: 8px; }
  .mk-trust div { min-height: 54px; padding: 9px; font-size: 11px; }
  .mk-box { border-radius: 20px; }
  .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
  .cart-line img { width: 64px; height: 64px; }
  .cart-line > strong { font-size: 13px; }
  .cart-page .layout-two, .checkout-page .layout-two { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}