:root {
  --bg: #eee9e1;
  --bg-2: #f7f3ed;
  --panel: #fffdf8;
  --card: rgba(255, 255, 255, .76);
  --card-solid: #fffaf2;
  --text: #111111;
  --muted: #756f68;
  --line: rgba(17,17,17,.10);
  --line-strong: rgba(17,17,17,.16);
  --accent: #ff7048;
  --accent-2: #a78bff;
  --accent-soft: #f0e6ff;
  --accent-text: #ffffff;
  --success: #1f8a52;
  --danger: #e05252;
  --shadow: 0 24px 80px rgba(56, 43, 26, .13);
  --soft-shadow: 0 12px 30px rgba(56, 43, 26, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(167,139,255,.12), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(255,112,72,.10), transparent 30%),
    linear-gradient(180deg, var(--bg), #e9e1d7);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: radial-gradient(rgba(17,17,17,.09) 1px, transparent 1px);
  background-size: 18px 18px;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.app-shell {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 0 12px 30px;
  position: relative;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px 12px;
  background: rgba(238,233,225,.96);
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}
.brand-subtitle {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.mini-nav {
  display: flex;
  gap: 18px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  margin: 0 0 16px;
  max-width: 620px;
  font-size: clamp(44px, 11vw, 78px);
  line-height: .93;
  letter-spacing: -.065em;
  text-transform: uppercase;
  font-weight: 950;
}
h2 {
  margin-bottom: 10px;
  font-size: clamp(28px, 6vw, 44px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 950;
}

.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--soft-shadow);
  font-weight: 800;
}
.cart-pill strong {
  min-width: 27px;
  min-height: 27px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: #5d35e8;
  border-radius: 999px;
  padding: 0 7px;
}

.fullscreen-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: var(--soft-shadow);
  white-space: nowrap;
}
.fullscreen-pill:active { transform: translateY(1px); }
body.fullscreen-requested .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
@media (max-width: 760px) {
  .fullscreen-pill { display: none; }
}

.hero {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 18px;
  align-items: stretch;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 36px;
  padding: clamp(20px, 5vw, 34px);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 560px;
  align-items: stretch;
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.hero p {
  color: var(--muted);
  max-width: 560px;
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 22px;
}
.badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #918a82;
  box-shadow: var(--soft-shadow);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
}
.badge i {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 7px rgba(167,139,255,.12);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.primary {
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 16px 24px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
}
.primary.full { width: 100%; }
.hero-secondary { background: rgba(255,255,255,.62); color: #111; }

.feature-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.feature-row span {
  padding: 8px 13px;
  border-radius: 999px;
  background: #fff;
  color: #77716b;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
}


.hero-media {
  position: relative;
  min-height: 100%;
  width: 100%;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.72), rgba(255,255,255,.28) 42%, transparent 67%),
    linear-gradient(160deg, #f6f1ea, #e7ddd2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), var(--soft-shadow);
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.00));
}
.hero-video {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.keycap-preview {
  display: grid;
  grid-template-columns: repeat(5, minmax(42px, 1fr));
  gap: 11px;
  align-content: center;
  justify-content: center;
  min-height: 100%;
  padding: 36px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.82), rgba(255,255,255,.36) 42%, transparent 67%),
    linear-gradient(160deg, #f6f1ea, #e7ddd2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), var(--soft-shadow);
  transform: none;
}
.keycap-preview span {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17,17,17,.06);
  border-radius: 14px 14px 18px 18px;
  background: linear-gradient(180deg, #ffffff, #e8e2f4);
  color: #1a1620;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.06), 0 12px 20px rgba(0,0,0,.08);
  font-size: 13px;
  font-weight: 900;
  transform: rotate(-4deg);
}
.keycap-preview .accent { background: linear-gradient(180deg, #fff7fb, #ffd4e6); }
.keycap-preview .wide { grid-column: span 2; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 14px;
}
.stats-grid article {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.68);
  background: rgba(255,255,255,.58);
  border-radius: 26px;
  box-shadow: var(--soft-shadow);
}
.stats-grid small { display: block; color: var(--accent-2); font-size: 12px; font-weight: 950; margin-bottom: 10px; }
.stats-grid span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.stats-grid strong { font-size: 24px; letter-spacing: -.03em; }


.promo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 18px 20px;
  border-radius: 26px;
  background: linear-gradient(135deg, #111 0%, #2b241f 55%, #ff7048 130%);
  color: #fff;
  box-shadow: 0 18px 40px rgba(17,17,17,.16);
}
.promo-strip span {
  display: inline-flex;
  margin-bottom: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #ffd3c6;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.promo-strip strong {
  display: block;
  font-size: clamp(20px, 4vw, 32px);
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.promo-strip p {
  max-width: 290px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-weight: 750;
  line-height: 1.35;
}
.cart-promo {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(31,138,82,.10);
  border: 1px solid rgba(31,138,82,.24);
  color: var(--success);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}
.cart-promo.pending {
  background: rgba(255,112,72,.10);
  border-color: rgba(255,112,72,.24);
  color: var(--accent);
}

.filters-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 6px;
  margin: 0 -2px 6px;
}
.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px 2px 12px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  min-width: 0;
}
.filters::-webkit-scrollbar { display: none; }
.filters-arrow {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
}
.filters-arrow::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-top: 2px solid #111;
  border-right: 2px solid #111;
  top: 50%;
  left: 50%;
}
.filters-left::before { transform: translate(-38%, -50%) rotate(-135deg); }
.filters-right::before { transform: translate(-62%, -50%) rotate(45deg); }
.filter {
  white-space: nowrap;
  padding: 12px 16px;
  background: rgba(255,255,255,.58);
  color: #111;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 850;
  flex: 0 0 auto;
  user-select: none;
}
.filter.active {
  border-color: transparent;
  background: #111;
  color: #fff;
}

.search-box { display: block; margin-bottom: 24px; }
.search-box span, .checkout-form span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}
input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.62);
  color: var(--text);
  padding: 15px 16px;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--accent); background: #fff; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-bottom: 16px;
}
.section-head h2 { margin-bottom: 0; }
.section-head p:last-child { color: var(--muted); margin-bottom: 5px; }
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.product-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 30px;
  background: rgba(255,255,255,.64);
  box-shadow: var(--soft-shadow);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.product-card:active { transform: none; }
.product-card:hover { border-color: rgba(17,17,17,.14); box-shadow: var(--shadow); }
.product-image {
  width: 100%;
  background: transparent;
  display: block;
  overflow: hidden;
  padding: 10px 10px 0;
}
.product-image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  padding: 0;
  border-radius: 22px;
  background: transparent;
}
.product-body { padding: 16px; }
.product-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.product-body h3 { margin-bottom: 5px; font-size: 19px; letter-spacing: -.03em; }
.product-meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.product-desc { color: var(--muted); font-size: 14px; line-height: 1.45; min-height: 42px; }
.product-price { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.product-price strong { font-size: 22px; letter-spacing: -.035em; }
.product-price s { color: var(--muted); font-size: 13px; }
.card-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 14px; align-items: center; }
.secondary {
  min-height: 50px;
  padding: 13px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.add-btn,
.qty-btn {
  position: relative;
  min-width: 48px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  color: #fff;
}
.add-btn {
  background: var(--accent);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.12);
}
.add-btn::before,
.add-btn::after,
.qty-btn::before,
.qty-btn::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2.5px;
  border-radius: 999px;
  background: currentColor;
}
.add-btn::before,
.qty-btn.plus::before { transform: rotate(90deg); }
.add-btn::after,
.qty-btn.plus::after,
.qty-btn.minus::after { transform: none; }
.qty-btn.minus::before { display:none; }
.product-badge {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.stock { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 800; }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.in-stock { color: var(--success); }
.in-stock::before { background: var(--success); }
.out-stock { color: var(--danger); }
.out-stock::before { background: var(--danger); }

.modal {
  width: min(96vw, 760px);
  border: 0;
  padding: 0;
  border-radius: 34px;
  background: transparent;
  color: var(--text);
}
.modal::backdrop { background: rgba(20,16,12,.52); backdrop-filter: blur(5px); }
.modal-card {
  position: relative;
  max-height: 90vh;
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 34px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #111;
  font-size: 26px;
  z-index: 4;
  border: 1px solid var(--line);
}
.modal-product-image {
  position: relative;
  touch-action: pan-y;
  border-radius: 26px;
  overflow: hidden;
  background: #f0e9df;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-product-image img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; display: block; }
.product-gallery { margin-bottom: 16px; }
.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; }
.gallery-thumb {
  flex: 0 0 76px;
  height: 60px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #fff;
  opacity: .72;
}
.gallery-thumb.active { border-color: var(--accent); opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; background: #f5efe7; }
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(17,17,17,.78);
  color: white;
  border: 1px solid rgba(255,255,255,.22);
  font-size: 34px;
  line-height: 1;
  z-index: 3;
}
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-counter {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(17,17,17,.76);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  z-index: 3;
}

.gallery-swipe-hint {
  display: none;
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.features { display: grid; gap: 8px; padding-left: 0; list-style: none; }
.features li { padding: 11px 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.62); }
.cart-list { display: grid; gap: 10px; margin: 16px 0; }
.cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.66);
  border-radius: 20px;
}
.qty-controls { display: flex; align-items: center; gap: 8px; }
.qty-controls button {
  background: #111;
  color: #fff;
}
.qty-controls span {
  min-width: 18px;
  text-align: center;
  font-weight: 800;
}
.qty-controls button:disabled { background: #a7a19a; opacity: 1; }
.cart-total { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 14px 0; }
.checkout-form { display: grid; gap: 12px; margin-bottom: 14px; }
.order-result { padding: 13px; border-radius: 17px; background: rgba(31,138,82,.10); border: 1px solid rgba(31,138,82,.26); color: var(--success); }
.empty-state { padding: 18px; border: 1px solid var(--line); border-radius: 22px; color: var(--muted); text-align: center; background: rgba(255,255,255,.52); }
.hidden { display: none !important; }

select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.62);
  color: var(--text);
  padding: 15px 16px;
  outline: none;
  appearance: auto;
}
select:focus { border-color: var(--accent); background: #fff; }
.delivery-hint {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(14px);
  z-index: 9999;
  max-width: calc(100vw - 24px);
  padding: 13px 18px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  box-shadow: var(--shadow);
  font-weight: 900;
  letter-spacing: .02em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.cart-toast.show {
  animation: toastIn .9s ease forwards;
}
.cart-bump {
  animation: cartBump .44s ease;
}
.cart-fly-dot {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--accent);
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(255,112,72,.35);
  animation: flyToCart .7s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes toastIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.96); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  82% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.98); }
}
@keyframes cartBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  70% { transform: scale(.98); }
  100% { transform: scale(1); }
}
@keyframes flyToCart {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(170px,-170px) scale(.35); opacity: 0; }
}


.product-story {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.66);
}
.product-story span {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.product-story p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.mobile-cart-float {
  position: fixed;
  right: 14px;
  bottom: 92px;
  z-index: 80;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: none;
  place-items: center;
  background: #111;
  color: #fff;
  box-shadow: 0 18px 44px rgba(17,17,17,.24);
  border: 1px solid rgba(255,255,255,.5);
}
.mobile-cart-float .cart-icon { font-size: 22px; line-height: 1; }
.mobile-cart-float strong {
  position: absolute;
  right: -3px;
  top: -5px;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  border: 2px solid var(--bg-2);
}
.mobile-cart-float.has-items { animation: cartFloatPulse .5s ease; }
@keyframes cartFloatPulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (max-width: 820px) {
  .mini-nav { display: none; }
  .gallery-swipe-hint { display: block; }
  .mobile-cart-float { display: grid; }
  .topbar { grid-template-columns: 1fr auto; padding: 10px 10px 12px; }
  .hero { grid-template-columns: 1fr; min-height: auto; border-radius: 30px; }
  
.hero-media {
  position: relative;
  min-height: 100%;
  width: 100%;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.72), rgba(255,255,255,.28) 42%, transparent 67%),
    linear-gradient(160deg, #f6f1ea, #e7ddd2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), var(--soft-shadow);
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.00));
}
.hero-video {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.keycap-preview { padding: 24px; min-height: 280px; }
  .product-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid article { padding: 14px; border-radius: 22px; }
  .stats-grid strong { font-size: 18px; }
  .cart-pill span { display: none; }
  h1 { font-size: clamp(42px, 14vw, 64px); }
}

@media (max-width: 460px) {
  .app-shell { padding: 0 10px 26px; }
  .hero { padding: 18px; }
  .brand-title { font-size: 15px; }
  .brand-mark { width: 42px; height: 42px; }
  .stats-grid { gap: 8px; }
  .stats-grid span { font-size: 11px; }
  .stats-grid strong { font-size: 16px; }
  
.hero-media {
  position: relative;
  min-height: 100%;
  width: 100%;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.72), rgba(255,255,255,.28) 42%, transparent 67%),
    linear-gradient(160deg, #f6f1ea, #e7ddd2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), var(--soft-shadow);
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.00));
}
.hero-video {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.keycap-preview { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .keycap-preview span { min-height: 40px; font-size: 11px; }
  .feature-row span { font-size: 9px; }
  .modal { width: 98vw; }
  .modal-card { padding: 12px; border-radius: 26px; }
  .gallery-arrow { width: 40px; height: 40px; font-size: 30px; }
}


/* Full product images in catalog cards: no crop */
.product-image img { object-fit: contain !important; }
@media (max-width: 520px) {
  .product-image { padding: 10px 10px 0; }
  .product-image img { max-height: none; }
}

.hero-video::-webkit-media-controls { display: none !important; }
.product-image { touch-action: pan-y; }
.product-card { -webkit-tap-highlight-color: transparent; }
.modal { overscroll-behavior: contain; }

.pay-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(255,112,72,.20);
}


/* Cart modal polish: clean close icon, straight + / −, product thumbnails */
.close {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
.close::before,
.close::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: #111;
}
.close::before { transform: rotate(45deg); }
.close::after { transform: rotate(-45deg); }

.cart-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 12px !important;
}
.cart-item-main {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.cart-item-thumb {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
  background: #f2ece4;
  border: 1px solid var(--line);
}
.cart-item-main strong,
.cart-item-main .product-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qty-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.qty-controls .qty-btn,
.qty-btn {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 12px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
.qty-btn::before,
.qty-btn::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 14px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: translate(-50%, -50%) !important;
}
.qty-btn.plus::before {
  transform: translate(-50%, -50%) rotate(90deg) !important;
}
.qty-btn.minus::before { display: none !important; }
.qty-btn:disabled {
  background: #aaa39b !important;
  opacity: 1 !important;
}
.qty-controls span {
  min-width: 18px !important;
  text-align: center !important;
  font-weight: 900 !important;
}
.add-btn::before,
.add-btn::after {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.add-btn::before { transform: translate(-50%, -50%) rotate(90deg) !important; }

@media (max-width: 520px) {
  .cart-item { gap: 10px !important; }
  .cart-item-main { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .cart-item-thumb { width: 52px; height: 52px; border-radius: 13px; }
  .qty-controls .qty-btn,
  .qty-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; }
}

@media (max-width: 520px) {
  
.promo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 18px 20px;
  border-radius: 26px;
  background: linear-gradient(135deg, #111 0%, #2b241f 55%, #ff7048 130%);
  color: #fff;
  box-shadow: 0 18px 40px rgba(17,17,17,.16);
}
.promo-strip span {
  display: inline-flex;
  margin-bottom: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #ffd3c6;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.promo-strip strong {
  display: block;
  font-size: clamp(20px, 4vw, 32px);
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.promo-strip p {
  max-width: 290px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-weight: 750;
  line-height: 1.35;
}
.cart-promo {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(31,138,82,.10);
  border: 1px solid rgba(31,138,82,.24);
  color: var(--success);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}
.cart-promo.pending {
  background: rgba(255,112,72,.10);
  border-color: rgba(255,112,72,.24);
  color: var(--accent);
}

.filters-wrap { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 5px; }
  .filters-arrow { width: 34px; height: 34px; }
  .filter { padding: 11px 14px; }
}


/* FINAL FIX: centered gallery arrows + clean clickable backdrop */
.modal::backdrop {
  background: rgba(20,16,12,.56);
  backdrop-filter: blur(5px);
}
.modal-card {
  position: relative;
}
.modal-product-image {
  position: relative !important;
  overflow: hidden !important;
}
.gallery-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 999px !important;
  background: rgba(17,17,17,.74) !important;
  color: transparent !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  z-index: 10 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
.gallery-arrow::before {
  content: '' !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-top: 2.5px solid #fff !important;
  border-right: 2.5px solid #fff !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
}
.gallery-prev { left: 16px !important; right: auto !important; }
.gallery-prev::before { transform: translate(-42%, -50%) rotate(-135deg) !important; }
.gallery-next { right: 16px !important; left: auto !important; }
.gallery-next::before { transform: translate(-58%, -50%) rotate(45deg) !important; }

@media (max-width: 520px) {
  .gallery-arrow {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  .gallery-prev { left: 10px !important; }
  .gallery-next { right: 10px !important; }
}


/* Promo code + updated promo strip */
.promo-strip {
  align-items: stretch;
}
.promo-code-card {
  min-width: 190px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}
.promo-code-card span {
  margin-bottom: 8px;
}
.promo-code-card strong {
  font-size: clamp(18px, 3.4vw, 26px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.promo-code-card p {
  max-width: none;
  margin-top: 6px;
  color: rgba(255,255,255,.78);
}
.promo-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.promo-input-row input {
  text-transform: uppercase;
}
.promo-input-row button {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 15px;
  background: #111;
  color: #fff;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.promo-success { color: var(--success) !important; }
.promo-error { color: var(--accent) !important; }
.cart-promo.code {
  background: rgba(17,17,17,.06);
  border-color: rgba(17,17,17,.10);
  color: var(--text);
}
.old-total {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 14px;
  margin-right: 8px;
}
@media (max-width: 720px) {
  .promo-strip {
    display: grid;
    grid-template-columns: 1fr;
  }
  .promo-code-card {
    min-width: 0;
  }
}
@media (max-width: 520px) {
  .promo-input-row {
    grid-template-columns: 1fr;
  }
  .promo-input-row button {
    width: 100%;
  }
}

/* Friend promo + weekly sets */
.promo-strip-expanded {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.promo-strip-expanded .promo-code-card {
  min-height: 100%;
}
.weekly-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 8px 0 4px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,112,72,.12);
  color: var(--accent);
  border: 1px solid rgba(255,112,72,.25);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.modal-weekly {
  margin: 10px 0 8px;
}
.weekly-cart-promo {
  background: rgba(255,112,72,.10) !important;
  border-color: rgba(255,112,72,.25) !important;
}
@media (max-width: 820px) {
  .promo-strip-expanded {
    grid-template-columns: 1fr;
  }
}


/* Premium promo cards — softer, cleaner typography */
.promo-strip.promo-strip-expanded {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.promo-strip-expanded .promo-code-card {
  position: relative;
  min-width: 0 !important;
  min-height: 178px !important;
  padding: 22px 22px 20px !important;
  border-radius: 28px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 42px rgba(17, 14, 10, .10) !important;
  backdrop-filter: blur(8px);
}
.promo-strip-expanded .promo-code-card::after {
  content: '';
  position: absolute;
  inset: auto 18px 0 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  opacity: .65;
}
.promo-strip-expanded .weekly-promo-card {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 230, 207, .30), transparent 36%),
    linear-gradient(145deg, rgba(255, 145, 95, .20), rgba(255,255,255,.07)) !important;
}
.promo-strip-expanded .promo-code-card span {
  display: inline-flex !important;
  width: fit-content;
  margin: 0 0 18px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.promo-strip-expanded .promo-code-card strong {
  display: block !important;
  max-width: 270px;
  color: rgba(255,255,255,.94) !important;
  font-size: clamp(22px, 2.55vw, 34px) !important;
  font-weight: 780 !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  text-transform: none !important;
}
.promo-strip-expanded .promo-code-card p {
  max-width: 290px !important;
  margin: 12px 0 0 !important;
  color: rgba(255,255,255,.64) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  line-height: 1.48 !important;
  letter-spacing: -.012em !important;
}
.promo-strip-expanded .promo-code-card:nth-child(2) strong {
  font-size: clamp(28px, 3.2vw, 42px) !important;
  letter-spacing: -.035em !important;
  text-transform: uppercase !important;
}
@media (max-width: 920px) {
  .promo-strip.promo-strip-expanded {
    grid-template-columns: 1fr;
  }
  .promo-strip-expanded .promo-code-card {
    min-height: 142px !important;
  }
}
@media (max-width: 520px) {
  .promo-strip.promo-strip-expanded {
    gap: 10px;
    margin-top: 14px;
  }
  .promo-strip-expanded .promo-code-card {
    padding: 18px !important;
    border-radius: 24px !important;
  }
  .promo-strip-expanded .promo-code-card span {
    margin-bottom: 14px !important;
  }
  .promo-strip-expanded .promo-code-card strong {
    font-size: 25px !important;
  }
  .promo-strip-expanded .promo-code-card:nth-child(2) strong {
    font-size: 31px !important;
  }
  .promo-strip-expanded .promo-code-card p {
    font-size: 13.5px !important;
  }
}

/* Promo cards contrast fix — keep soft premium background, make text readable */
.promo-strip-expanded .promo-code-card {
  border: 1px solid rgba(32, 26, 21, .10) !important;
  box-shadow: 0 18px 42px rgba(32, 24, 18, .08) !important;
}
.promo-strip-expanded .promo-code-card span {
  background: rgba(33, 27, 23, .075) !important;
  color: rgba(39, 32, 27, .66) !important;
  border: 1px solid rgba(33, 27, 23, .075) !important;
  text-shadow: none !important;
}
.promo-strip-expanded .promo-code-card strong {
  color: #211b17 !important;
  text-shadow: none !important;
}
.promo-strip-expanded .promo-code-card p {
  color: rgba(45, 37, 31, .72) !important;
  text-shadow: none !important;
}
.promo-strip-expanded .weekly-promo-card {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 230, 207, .42), transparent 36%),
    linear-gradient(145deg, rgba(255, 176, 136, .28), rgba(255,255,255,.16)) !important;
}
.promo-strip-expanded .promo-code-card::after {
  background: linear-gradient(90deg, transparent, rgba(33, 27, 23, .16), transparent) !important;
}


/* 3 sets promo + four promo cards */
.promo-strip-expanded .bundle-promo-card {
  background: linear-gradient(145deg, rgba(230, 214, 202, .92), rgba(246, 237, 231, .9));
}
.bundle-cart-promo {
  background: rgba(36, 27, 20, .06);
  border-color: rgba(36, 27, 20, .16);
}
@media (min-width: 980px) {
  .promo-strip.promo-strip-expanded {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .promo-strip-expanded .promo-code-card strong {
    font-size: clamp(24px, 2.6vw, 38px);
  }
}


/* FAQ + custom request section */
.custom-note {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr) auto;
  gap: 18px;
  align-items: center;
  margin: 24px 0;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(244,236,226,.72));
  border: 1px solid rgba(36, 27, 20, .10);
  box-shadow: 0 18px 42px rgba(32, 24, 18, .06);
}
.custom-note h2 {
  margin: 4px 0 0;
  font-size: clamp(24px, 3vw, 42px);
  line-height: .98;
  letter-spacing: -.045em;
}
.custom-note p:not(.eyebrow) {
  margin: 0;
  color: rgba(45, 37, 31, .72);
  font-weight: 560;
  line-height: 1.45;
}
.faq-section {
  margin: 30px 0 56px;
  scroll-margin-top: 90px;
}
.custom-note { scroll-margin-top: 90px; }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.faq-grid details {
  border-radius: 22px;
  border: 1px solid rgba(36, 27, 20, .10);
  background: rgba(255,255,255,.64);
  box-shadow: 0 14px 30px rgba(32, 24, 18, .045);
  overflow: hidden;
}
.faq-grid summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 20px;
  color: #211b17;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -.02em;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(33,27,23,.72);
  border-bottom: 2px solid rgba(33,27,23,.72);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
  flex: 0 0 auto;
}
.faq-grid details[open] summary::after {
  transform: rotate(-135deg) translateY(-1px);
}
.faq-grid details p {
  margin: -4px 20px 18px;
  color: rgba(45, 37, 31, .70);
  font-size: 14px;
  font-weight: 540;
  line-height: 1.55;
}
@media (max-width: 860px) {
  .custom-note {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .custom-note .secondary {
    width: 100%;
  }
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* Promo desktop layout fix: keep 4 cards clean, no escaping text */
.promo-strip.promo-strip-expanded {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.promo-strip-expanded .promo-code-card {
  min-width: 0 !important;
  width: 100% !important;
}
.promo-strip-expanded .promo-code-card strong,
.promo-strip-expanded .promo-code-card p {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.promo-strip-expanded .promo-code-card strong {
  font-size: clamp(22px, 2.1vw, 31px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.04em !important;
}
.promo-strip-expanded .promo-code-card:nth-child(2) strong {
  font-size: clamp(28px, 2.45vw, 34px) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}
.promo-strip-expanded .promo-code-card p {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
@media (max-width: 1120px) {
  .promo-strip.promo-strip-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 620px) {
  .promo-strip.promo-strip-expanded {
    grid-template-columns: 1fr !important;
  }
  .promo-strip-expanded .promo-code-card strong,
  .promo-strip-expanded .promo-code-card:nth-child(2) strong {
    font-size: 28px !important;
  }
}


/* === UKEY responsive/catalog update === */
.quality-note {
  display: grid;
  gap: 6px;
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  background: rgba(255,250,242,.74);
  box-shadow: var(--soft-shadow);
  color: var(--muted);
  line-height: 1.45;
}
.quality-note strong { color: var(--text); }
.catalog-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.density-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.density-switch span { color: var(--muted); font-size: 12px; font-weight: 900; margin: 0 4px 0 2px; text-transform: uppercase; letter-spacing: .08em; }
.density-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.7);
  color: var(--text);
  font-weight: 950;
}
.density-btn.active { background: var(--text); color: #fff; }
.product-grid.density-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-grid.density-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-grid.density-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.product-grid.density-4 .product-body,
.product-grid.density-6 .product-body { padding: 12px; }
.product-grid.density-6 .product-desc,
.product-grid.density-6 .product-quote,
.product-grid.density-6 .product-meta,
.product-grid.density-4 .product-quote { display: none; }
.product-grid.density-6 .product-body h3 { font-size: 15px; }
.product-grid.density-4 .product-body h3 { font-size: 16px; }
.product-grid.density-6 .product-price strong { font-size: 17px; }
.product-image {
  border: 0;
  cursor: pointer;
  height: clamp(170px, 26vw, 360px);
  display: grid;
  place-items: center;
}
.product-image img {
  width: 100%;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
}
.product-meta { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.product-desc { min-height: 0; }
.product-quote {
  margin: 8px 0 0;
  padding: 9px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}
.modal-quote { font-size: 15px; margin: 12px 0; }
.stock { margin-top: 10px; }
.about-section, .wholesale-section {
  margin-top: 24px;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,250,242,.72);
  box-shadow: var(--soft-shadow);
}
.about-grid, .wholesale-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.about-grid article, .deal-card {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.58);
  padding: 16px;
}
.about-grid h3 { margin: 0 0 8px; }
.about-grid p { margin: 0; color: var(--muted); line-height: 1.45; }
.deal-card { display: grid; gap: 8px; color: var(--text); }
.deal-card b { font-size: 18px; }
.deal-card span { color: var(--muted); line-height: 1.4; }
.contact-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.contact-chips a {
  text-decoration: none;
  background: var(--text);
  color: #fff;
  padding: 11px 14px;
  border-radius: 999px;
  font-weight: 900;
}
.faq-grid details p { line-height: 1.5; }
@media (max-width: 1120px) {
  .product-grid.density-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-grid.density-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .catalog-tools { grid-template-columns: 1fr; }
  .density-switch { justify-content: center; width: 100%; }
  .about-grid, .wholesale-grid { grid-template-columns: 1fr; }
  .product-grid,
  .product-grid.density-2,
  .product-grid.density-4,
  .product-grid.density-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
  }
  .product-card { border-radius: 20px; }
  .product-image { height: clamp(125px, 42vw, 175px); padding: 6px 6px 0; }
  .product-image img { border-radius: 15px; }
  .product-body { padding: 9px; }
  .product-top { display: block; }
  .product-body h3 { font-size: 15px; line-height: 1.1; }
  .product-meta { font-size: 10px; }
  .product-badge { font-size: 10px; padding: 6px 8px; margin-top: 6px; display: inline-flex; }
  .weekly-badge { font-size: 10px; padding: 6px 8px; }
  .product-desc { font-size: 12px; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .product-quote { display: none; }
  .stock { font-size: 12px; margin: 8px 0 0; }
  .product-price strong { font-size: 17px; }
  .product-price s { font-size: 11px; }
  .card-actions { grid-template-columns: 1fr auto; gap: 6px; margin-top: 9px; }
  .secondary { min-height: 40px; padding: 9px 10px; font-size: 11px; }
  .add-btn, .qty-btn { width: 40px; height: 40px; min-width: 40px; }
  .hero-video { min-height: 260px; }
}
@media (max-width: 380px) {
  .app-shell { padding-left: 7px; padding-right: 7px; }
  .product-grid,
  .product-grid.density-2,
  .product-grid.density-4,
  .product-grid.density-6 { gap: 7px; }
  .product-image { height: 118px; }
  .product-desc { -webkit-line-clamp: 2; }
  .product-body h3 { font-size: 14px; }
}

/* === FIX 2026-07-02: ровные карточки + фото без обрезки === */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.product-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.product-price {
  margin-top: auto !important;
  min-height: 34px !important;
  align-items: baseline !important;
}
.card-actions {
  margin-top: 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 48px !important;
  align-items: center !important;
  min-height: 52px !important;
}
.secondary {
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.add-btn {
  align-self: center !important;
  justify-self: end !important;
  flex: 0 0 auto !important;
}
.product-image {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 5 !important;
  padding: 10px 10px 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
.product-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: transparent !important;
}
.product-grid.density-4 .product-image,
.product-grid.density-6 .product-image {
  aspect-ratio: 4 / 5 !important;
}
.product-grid.density-4 .product-desc,
.product-grid.density-6 .product-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.product-grid.density-6 .product-desc {
  -webkit-line-clamp: 2 !important;
}
#catalogCounter { display: none !important; }

@media (max-width: 820px) {
  .product-grid,
  .product-grid.density-2,
  .product-grid.density-4,
  .product-grid.density-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
  .product-image {
    aspect-ratio: 4 / 5 !important;
    padding: 6px 6px 0 !important;
  }
  .product-price {
    min-height: 28px !important;
  }
  .card-actions {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    min-height: 42px !important;
    margin-top: 9px !important;
  }
}

/* === FIX 2026-07-02: catalog alignment, title spacing, non-cropped images === */
.catalog-tools {
  align-items: end !important;
}
.catalog-tools .search-box {
  margin: 0 !important;
}
.density-switch {
  align-self: end !important;
  margin: 0 !important;
  height: 58px !important;
}
.product-image {
  overflow: hidden !important;
  margin-bottom: 10px !important;
  border-radius: 24px !important;
  background: transparent !important;
}
.product-body {
  padding-top: 0 !important;
}
.product-top {
  min-height: 44px !important;
  align-items: flex-start !important;
}
.product-body h3 {
  margin: 0 0 6px !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere !important;
}
.product-badge {
  flex: 0 0 auto !important;
  max-width: 44% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.product-grid.density-2 .product-image {
  aspect-ratio: 1 / 1 !important;
}
.product-grid.density-4 .product-image {
  aspect-ratio: 4 / 5 !important;
}
.product-grid.density-6 .product-image {
  aspect-ratio: 4 / 5 !important;
}
.product-grid.density-4 .secondary,
.product-grid.density-6 .secondary {
  font-size: 11px !important;
  letter-spacing: .02em !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  text-overflow: clip !important;
}
.product-grid.density-6 .card-actions {
  grid-template-columns: minmax(74px, 1fr) 40px !important;
  gap: 6px !important;
}
.product-grid.density-6 .add-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}
.product-grid.density-6 .secondary {
  min-height: 40px !important;
}

@media (max-width: 820px) {
  .catalog-tools {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .density-switch {
    width: 100% !important;
    height: 56px !important;
    justify-content: space-between !important;
  }
  .product-top {
    min-height: 40px !important;
  }
  .product-badge {
    max-width: 100% !important;
  }
  .product-image {
    margin-bottom: 8px !important;
    border-radius: 18px !important;
  }
  .secondary {
    font-size: 10px !important;
    letter-spacing: .015em !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-overflow: clip !important;
  }
}

/* === FIX 2026-07-02: calmer grid + readable text blocks === */
.wholesale-section,
.about-section,
.custom-note,
.faq-section {
  scroll-margin-top: 88px;
}

.section-head {
  gap: 14px !important;
  align-items: end !important;
  margin-bottom: 14px !important;
}
.section-head h2,
.wholesale-section h2,
.faq-section h2 {
  max-width: 760px !important;
  font-size: clamp(30px, 4.2vw, 46px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}
.section-head > p {
  margin: 0 0 8px !important;
  color: var(--muted) !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

.wholesale-section {
  padding: clamp(18px, 2.2vw, 26px) !important;
  border-radius: 28px !important;
}
.wholesale-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.deal-card {
  min-height: 104px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  align-content: start !important;
}
.deal-card b {
  font-size: clamp(16px, 1.8vw, 20px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}
.deal-card span {
  font-size: 15px !important;
  line-height: 1.35 !important;
}
.contact-chips {
  margin-top: 14px !important;
}
.contact-chips a {
  padding: 11px 15px !important;
  font-size: 14px !important;
}

.custom-note {
  grid-template-columns: minmax(0, .95fr) minmax(260px, 1.1fr) auto !important;
  gap: clamp(16px, 3vw, 28px) !important;
  padding: clamp(18px, 2.3vw, 26px) !important;
  border-radius: 28px !important;
}
.custom-note h2 {
  font-size: clamp(30px, 4.1vw, 44px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
}
.custom-note p:not(.eyebrow) {
  max-width: 420px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.custom-note .secondary {
  min-width: 210px !important;
  padding-inline: 20px !important;
  font-size: 14px !important;
  letter-spacing: .055em !important;
}

.faq-section {
  margin-top: 32px !important;
}
.faq-grid {
  display: block !important;
  columns: 2 320px;
  column-gap: 14px !important;
}
.faq-grid details {
  display: block !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  margin: 0 0 12px !important;
  border-radius: 20px !important;
}
.faq-grid summary {
  min-height: 70px !important;
  padding: 16px 18px !important;
  font-size: 15px !important;
  line-height: 1.22 !important;
  letter-spacing: -.018em !important;
}
.faq-grid details p {
  margin: -2px 18px 18px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

@media (max-width: 860px) {
  .section-head {
    display: block !important;
  }
  .section-head h2,
  .wholesale-section h2,
  .faq-section h2,
  .custom-note h2 {
    font-size: clamp(30px, 8vw, 40px) !important;
  }
  .section-head > p {
    margin-top: 6px !important;
    white-space: normal !important;
  }
  .wholesale-grid {
    grid-template-columns: 1fr !important;
  }
  .custom-note {
    grid-template-columns: 1fr !important;
  }
  .custom-note p:not(.eyebrow) {
    max-width: none !important;
  }
  .custom-note .secondary {
    min-width: 0 !important;
    width: 100% !important;
  }
  .faq-grid {
    columns: 1 !important;
  }
}

@media (max-width: 520px) {
  .wholesale-section,
  .custom-note,
  .about-section {
    padding: 16px !important;
    border-radius: 24px !important;
  }
  .deal-card {
    min-height: 86px !important;
    padding: 15px !important;
  }
  .deal-card span,
  .custom-note p:not(.eyebrow) {
    font-size: 14px !important;
  }
  .faq-grid summary {
    min-height: 62px !important;
    padding: 15px 16px !important;
    font-size: 14px !important;
  }
  .faq-grid details p {
    margin: -2px 16px 16px !important;
    font-size: 13.5px !important;
  }
}


/* === FINAL POLISH 2026-07-02: less zoom, stable 2/4/6 grid, readable buttons === */
.app-shell {
  width: min(100%, 1180px) !important;
  padding-left: clamp(10px, 2vw, 18px) !important;
  padding-right: clamp(10px, 2vw, 18px) !important;
}
.product-grid {
  align-items: stretch !important;
}
.product-grid.density-2 {
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  gap: 18px !important;
}
.product-grid.density-4 {
  grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
  gap: 14px !important;
}
.product-grid.density-6 {
  grid-template-columns: repeat(6, minmax(148px, 1fr)) !important;
  gap: 12px !important;
}
.product-card {
  min-width: 0 !important;
}
.product-image {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.22) !important;
}
.product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.product-grid.density-2 .product-image {
  aspect-ratio: 16 / 11 !important;
  max-height: 430px !important;
}
.product-grid.density-4 .product-image {
  aspect-ratio: 4 / 5 !important;
}
.product-grid.density-6 .product-image {
  aspect-ratio: 4 / 5 !important;
  padding: 7px 7px 0 !important;
}
.product-top {
  min-width: 0 !important;
}
.product-body h3 {
  min-width: 0 !important;
}
.product-grid.density-6 .product-top {
  display: block !important;
  min-height: 42px !important;
}
.product-grid.density-6 .product-badge {
  display: none !important;
}
.product-grid.density-6 .product-body {
  padding: 10px !important;
}
.product-grid.density-6 .product-body h3 {
  font-size: 14px !important;
  line-height: 1.04 !important;
  letter-spacing: -.035em !important;
}
.product-grid.density-6 .weekly-badge {
  width: 100% !important;
  justify-content: center !important;
  padding: 7px 8px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}
.product-grid.density-6 .stock {
  font-size: 12px !important;
}
.product-grid.density-6 .product-price strong {
  font-size: 17px !important;
}
.product-grid.density-6 .product-price s {
  font-size: 10px !important;
}
.product-grid.density-6 .card-actions {
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 6px !important;
  min-height: 40px !important;
}
.product-grid.density-6 .secondary {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-overflow: clip !important;
}
.product-grid.density-6 .add-btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
}
.product-grid.density-6 .add-btn::before,
.product-grid.density-6 .add-btn::after {
  width: 15px !important;
}
.checkout-form span {
  font-size: 12px !important;
  letter-spacing: .075em !important;
}
.checkout-form input::placeholder,
.checkout-form textarea::placeholder {
  color: rgba(117,111,104,.72) !important;
}
.checkout-form select {
  min-height: 52px !important;
}

@media (max-width: 1120px) {
  .product-grid.density-6 {
    grid-template-columns: repeat(4, minmax(165px, 1fr)) !important;
  }
  .product-grid.density-4 {
    grid-template-columns: repeat(3, minmax(190px, 1fr)) !important;
  }
}
@media (max-width: 820px) {
  .app-shell {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .product-grid,
  .product-grid.density-2,
  .product-grid.density-4,
  .product-grid.density-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .product-grid.density-2 .product-image,
  .product-grid.density-4 .product-image,
  .product-grid.density-6 .product-image {
    aspect-ratio: 4 / 5 !important;
    max-height: none !important;
  }
  .product-grid.density-6 .product-badge {
    display: inline-flex !important;
    max-width: 100% !important;
  }
  .product-grid.density-6 .product-top {
    display: block !important;
  }
  .secondary {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }
}
@media (max-width: 420px) {
  .product-body {
    padding: 8px !important;
  }
  .product-body h3 {
    font-size: 14px !important;
  }
  .card-actions {
    grid-template-columns: minmax(0, 1fr) 38px !important;
  }
  .add-btn, .qty-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }
}


/* === FIX 2026-07-02: six-card mode + custom pricing images === */
.app-shell {
  width: min(100%, 1240px) !important;
}
.product-grid.density-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.product-grid.density-6 .product-card {
  min-width: 0 !important;
  overflow: hidden !important;
}
.product-grid.density-6 .product-image {
  aspect-ratio: 4 / 5 !important;
  padding: 12px 12px 0 !important;
}
.product-grid.density-6 .product-image img,
.product-grid.density-4 .product-image img,
.product-grid.density-2 .product-image img {
  object-fit: contain !important;
  transform: scale(.94) !important;
  transform-origin: center !important;
}
.product-grid.density-6 .product-body {
  padding: 9px !important;
}
.product-grid.density-6 .product-top {
  min-height: 40px !important;
}
.product-grid.density-6 .product-body h3 {
  font-size: 14px !important;
  line-height: 1.08 !important;
}
.product-grid.density-6 .product-desc {
  font-size: 12px !important;
  line-height: 1.32 !important;
  min-height: 40px !important;
}
.product-grid.density-6 .product-price {
  min-height: 30px !important;
}
.product-grid.density-6 .card-actions {
  grid-template-columns: minmax(0, 1fr) 36px !important;
  gap: 5px !important;
  min-height: 38px !important;
  width: 100% !important;
  overflow: hidden !important;
}
.product-grid.density-6 .secondary {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 3px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.product-grid.density-6 .add-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
}
.product-grid.density-6 .add-btn::before,
.product-grid.density-6 .add-btn::after {
  width: 14px !important;
}
.product-grid.density-2 .product-image {
  aspect-ratio: 16 / 10 !important;
  padding: 18px 18px 0 !important;
}
.product-grid.density-4 .product-image {
  padding: 12px 12px 0 !important;
}

.custom-pricing-section {
  margin-top: 26px;
  scroll-margin-top: 86px;
}
.custom-pricing-head {
  margin-bottom: 14px !important;
}
.custom-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.custom-price-card {
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: var(--soft-shadow);
}
.custom-price-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #151515;
}
.custom-price-body {
  padding: 16px;
  display: grid;
  gap: 7px;
}
.custom-price-body h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.04em;
}
.custom-price-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
  font-size: 14px;
}
.custom-price-body strong {
  margin-top: 4px;
  font-size: 28px;
  letter-spacing: -.05em;
}
.custom-price-card.featured {
  border-color: rgba(255,104,64,.32);
}
.custom-note.compact {
  margin-top: 14px;
}
.checkout-form label span,
.checkout-form .field-label {
  font-size: 12px !important;
}
#customerName::placeholder {
  color: rgba(117,111,104,.72) !important;
}

@media (max-width: 1180px) {
  .product-grid.density-6 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 820px) {
  .product-grid.density-6,
  .product-grid.density-4,
  .product-grid.density-2,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .product-grid.density-6 .secondary,
  .product-grid.density-4 .secondary,
  .secondary {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }
  .custom-pricing-grid {
    grid-template-columns: 1fr;
  }
  .custom-price-card {
    border-radius: 22px;
  }
  .custom-price-card img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
}
@media (max-width: 420px) {
  .product-grid.density-6 .card-actions,
  .card-actions {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 5px !important;
  }
  .product-grid.density-6 .secondary,
  .secondary {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 9px !important;
    padding: 0 3px !important;
  }
  .product-grid.density-6 .add-btn,
  .add-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }
}

/* === FIX 2026-07-02: full catalog images, no crop at any density === */
.product-image,
.product-grid.density-2 .product-image,
.product-grid.density-4 .product-image,
.product-grid.density-6 .product-image {
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}
.product-image img,
.product-grid.density-2 .product-image img,
.product-grid.density-4 .product-image img,
.product-grid.density-6 .product-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}
.product-grid.density-2 .product-image {
  aspect-ratio: 16 / 11 !important;
}
.product-grid.density-4 .product-image {
  aspect-ratio: 4 / 5 !important;
}
.product-grid.density-6 .product-image {
  aspect-ratio: 4 / 5 !important;
}
@media (max-width: 820px) {
  .product-image,
  .product-grid.density-2 .product-image,
  .product-grid.density-4 .product-image,
  .product-grid.density-6 .product-image {
    aspect-ratio: 4 / 5 !important;
  }
}

/* === FINAL FIX 2026-07-02: product posters full-width, no inner frame, same behavior for 2/4/6 catalog === */
.product-image {
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}
.product-grid.density-2 .product-image,
.product-grid.density-4 .product-image,
.product-grid.density-6 .product-image {
  width: 100% !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  background: transparent !important;
}
.product-image img,
.product-grid.density-2 .product-image img,
.product-grid.density-4 .product-image img,
.product-grid.density-6 .product-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: none !important;
  margin: 0 !important;
}

@media (max-width: 820px) {
  .product-image,
  .product-grid.density-2 .product-image,
  .product-grid.density-4 .product-image,
  .product-grid.density-6 .product-image {
    aspect-ratio: auto !important;
    padding: 0 !important;
    max-height: none !important;
  }
}

/* === SOFT PROTECTION: block easy image saving without breaking product modal === */
html.protection-on, html.protection-on body {
  -webkit-user-select: none;
  user-select: none;
}
html.protection-on input,
html.protection-on textarea,
html.protection-on select {
  -webkit-user-select: text;
  user-select: text;
}
.product-image,
.product-image img,
.modal-product-image,
.modal-product-image img,
.gallery-thumb img,
.cart-item-thumb {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
.product-image img,
.modal-product-image img,
.gallery-thumb img,
.cart-item-thumb {
  pointer-events: none;
}
.gallery-thumb,
.product-image {
  cursor: pointer;
}


/* === FINAL MOBILE DENSITY + CUSTOM RESTORE FIX === */
.custom-pricing-section {
  margin-top: 24px;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,250,242,.72);
  box-shadow: var(--soft-shadow);
  scroll-margin-top: 90px;
}
.custom-pricing-head { align-items: end; }
.custom-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.custom-price-card {
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.68);
  box-shadow: 0 10px 28px rgba(17,17,17,.06);
}
.custom-price-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.custom-price-body { padding: 14px; }
.custom-price-body h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.03em; }
.custom-price-body p { margin: 0 0 10px; color: var(--muted); line-height: 1.42; font-size: 14px; }
.custom-price-body strong { font-size: 22px; letter-spacing: -.04em; }
.custom-price-card.featured { border-color: rgba(255, 100, 67, .45); }
.custom-note.compact {
  margin-top: 14px;
  box-shadow: none;
  background: rgba(255,255,255,.58);
}

@media (max-width: 820px) {
  /* На телефоне переключатель 2/4/6 теперь реально меняет размер карточек */
  .product-grid.density-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  .product-grid.density-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .product-grid.density-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 4px !important; }

  .product-grid.density-2 .product-card { border-radius: 20px !important; }
  .product-grid.density-4 .product-card,
  .product-grid.density-6 .product-card { border-radius: 14px !important; }

  .product-grid.density-2 .product-image { padding: 6px 6px 0 !important; }
  .product-grid.density-4 .product-image { padding: 4px 4px 0 !important; }
  .product-grid.density-6 .product-image { padding: 3px 3px 0 !important; }

  .product-grid.density-2 .product-body { padding: 9px !important; }
  .product-grid.density-4 .product-body { padding: 6px !important; }
  .product-grid.density-6 .product-body { padding: 4px !important; }

  .product-grid.density-4 .product-body h3 { font-size: 10px !important; line-height: 1.05 !important; }
  .product-grid.density-6 .product-body h3 { font-size: 8px !important; line-height: 1.05 !important; }
  .product-grid.density-4 .product-meta,
  .product-grid.density-6 .product-meta,
  .product-grid.density-4 .product-desc,
  .product-grid.density-6 .product-desc,
  .product-grid.density-4 .product-quote,
  .product-grid.density-6 .product-quote,
  .product-grid.density-4 .weekly-badge,
  .product-grid.density-6 .weekly-badge { display: none !important; }

  .product-grid.density-4 .product-badge,
  .product-grid.density-6 .product-badge { font-size: 7px !important; padding: 4px 5px !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .product-grid.density-4 .stock { font-size: 9px !important; margin-top: 5px !important; }
  .product-grid.density-6 .stock { font-size: 7px !important; margin-top: 4px !important; }
  .product-grid.density-4 .product-price strong { font-size: 12px !important; }
  .product-grid.density-6 .product-price strong { font-size: 9px !important; }
  .product-grid.density-4 .product-price s,
  .product-grid.density-6 .product-price s { display: none !important; }

  .product-grid.density-4 .card-actions,
  .product-grid.density-6 .card-actions {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 3px !important;
    min-height: 28px !important;
    margin-top: 5px !important;
  }
  .product-grid.density-4 .secondary { min-height: 28px !important; padding: 5px 4px !important; font-size: 7px !important; letter-spacing: 0 !important; }
  .product-grid.density-6 .secondary { min-height: 22px !important; padding: 4px 2px !important; font-size: 5.5px !important; letter-spacing: 0 !important; }
  .product-grid.density-4 .add-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; }
  .product-grid.density-6 .add-btn { width: 22px !important; height: 22px !important; min-width: 22px !important; }
  .product-grid.density-4 .add-btn::before,
  .product-grid.density-4 .add-btn::after { width: 12px !important; height: 2px !important; }
  .product-grid.density-6 .add-btn::before,
  .product-grid.density-6 .add-btn::after { width: 9px !important; height: 1.5px !important; }

  .custom-pricing-section { padding: 14px; border-radius: 24px; }
  .custom-pricing-grid { grid-template-columns: 1fr; gap: 10px; }
  .custom-price-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); border-radius: 20px; }
  .custom-price-card img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .custom-price-body { padding: 10px; }
  .custom-price-body h3 { font-size: 17px; }
  .custom-price-body p { font-size: 12px; line-height: 1.35; }
  .custom-price-body strong { font-size: 18px; }
}

@media (max-width: 380px) {
  .product-grid.density-4 { gap: 4px !important; }
  .product-grid.density-6 { gap: 3px !important; }
  .product-grid.density-6 .secondary { font-size: 5px !important; }
  .product-grid.density-6 .add-btn { width: 20px !important; height: 20px !important; min-width: 20px !important; }
}


/* === UX FIX: desktop readability, colors as separate tab, clean search === */
.app-shell { width: min(100%, 1280px); }
.hero { min-height: 420px; grid-template-columns: 1fr 1fr; }
.hero p { font-size: 16px; line-height: 1.5; }
.info-row span { cursor: default; pointer-events: none; }
.filters-wrap { display: none !important; }
.catalog-tools-clean {
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: end;
  gap: 12px;
}
.color-open-btn {
  min-height: 58px;
  padding: 10px 16px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.76);
  color: var(--text);
  box-shadow: var(--soft-shadow);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.color-open-btn span {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--accent);
}
.color-modal {
  width: min(520px, calc(100vw - 24px));
  border: 0;
  padding: 0;
  background: transparent;
}
.color-modal::backdrop { background: rgba(17,17,17,.42); backdrop-filter: blur(7px); }
.color-panel {
  padding: 20px;
  border-radius: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.color-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.color-panel-head h2 { margin: 0; font-size: 34px; }
.color-search { display: block; margin-bottom: 12px; }
.color-search span {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.color-search input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  outline: none;
}
.color-list {
  max-height: min(54vh, 480px);
  overflow: auto;
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding-right: 4px;
}
.color-option {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.7);
  border: 1px solid transparent;
  color: var(--text);
  text-align: left;
  font-size: 16px;
  font-weight: 800;
}
.color-option.active { border-color: var(--accent); background: rgba(255,112,72,.08); }
.color-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.color-option i {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.22);
}
.color-option.active i { border-color: var(--accent); background: radial-gradient(circle at center, var(--accent) 42%, transparent 45%); }

@media (min-width: 1180px) {
  .topbar { margin-left: -12px; margin-right: -12px; }
  .product-grid.density-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid.density-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-grid.density-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .product-grid.density-6 .secondary { min-width: 0; font-size: 10px !important; padding: 0 6px !important; }
}


@media (max-width: 920px) and (min-width: 641px) {
  .hero-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .app-shell { padding: 0 8px 26px; }
  .topbar { grid-template-columns: 1fr auto; padding: 8px; }
  .mini-nav { display: none; }
  h1 { font-size: clamp(34px, 10vw, 48px); line-height: .92; }
  h2 { font-size: clamp(28px, 8vw, 38px); }
  .hero { padding: 18px; border-radius: 26px; min-height: auto; }
  .hero p { font-size: 15px; line-height: 1.45; }
  .feature-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .feature-row span { font-size: 9px; white-space: normal; min-height: 30px; display: grid; place-items: center; }
  .catalog-tools-clean { grid-template-columns: 1fr; gap: 8px; }
  .color-open-btn, .density-switch { width: 100%; justify-content: center; }
  .density-switch { min-height: 54px; }
}

/* === FIX: color modal always clickable in Telegram WebView === */
.color-modal[open] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: auto;
}
.color-modal[open] .color-panel {
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.color-apply-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 18px;
}
@media (min-width: 900px) {
  .app-shell { width: min(100%, 1440px); }
  body { display: block; }
}

/* FIX: color selector click/tap reliability */
.color-modal, .color-panel, .color-list, .color-option { pointer-events: auto !important; }
.color-option { cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.color-option * { pointer-events: none; }
.color-modal[open] { display: grid; place-items: center; }
@media (max-width: 640px) {
  .color-modal { width: calc(100vw - 18px); }
  .color-panel { padding: 16px; border-radius: 24px; }
  .color-panel-head h2 { font-size: 28px; }
  .color-option { min-height: 56px; font-size: 16px; }
}


/* Hero cleanup: balanced CTA buttons and denser left column */
.hero-actions-balanced {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.hero-actions-balanced .primary,
.hero-actions-balanced .secondary {
  width: 100%;
  min-height: 58px;
  padding: 16px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.hero-note {
  margin-top: 0;
  padding: 18px 20px;
  border: 1px solid rgba(17,17,17,.07);
  border-radius: 24px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 12px 30px rgba(30,24,18,.06);
  color: #6f6862;
  max-width: 620px;
}
.hero-note strong {
  display: block;
  margin-bottom: 7px;
  color: #151515;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 950;
}
.hero-note span {
  display: block;
  font-size: 15px;
  line-height: 1.5;
}
.hero-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  max-width: 620px;
}
.hero-support-grid article {
  min-height: 118px;
  padding: 14px 14px 15px;
  border-radius: 20px;
  border: 1px solid rgba(17,17,17,.07);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 24px rgba(30,24,18,.05);
}
.hero-support-grid strong {
  display: block;
  margin-bottom: 8px;
  color: #141414;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hero-support-grid span {
  display: block;
  color: #6f6862;
  font-size: 13px;
  line-height: 1.45;
}
.feature-row.info-row { display: none !important; }
@media (max-width: 640px) {
  .hero-actions-balanced {
    grid-template-columns: 1fr;
  }
  .hero-actions-balanced .primary,
  .hero-actions-balanced .secondary {
    min-height: 54px;
  }
  .hero-note {
    padding: 15px 16px;
    border-radius: 20px;
  }
  .hero-note strong { font-size: 15px; }
  .hero-note span { font-size: 14px; }
  .hero-support-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .hero-support-grid article {
    min-height: 0;
    padding: 13px 14px;
    border-radius: 18px;
  }
  .hero-support-grid strong { font-size: 12px; }
  .hero-support-grid span { font-size: 13px; }
}

/* === FINAL FIX: color chooser must be a real full-screen layer in Telegram Desktop/PC === */
.color-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f4efe8 !important;
  color: var(--text) !important;
  overflow: auto !important;
  z-index: 2147483647 !important;
  box-sizing: border-box !important;
}
.color-modal[open] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.color-modal::backdrop {
  background: #f4efe8 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.color-panel {
  width: min(620px, 100%) !important;
  max-height: calc(100dvh - 36px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.96) !important;
}
.color-list {
  max-height: none !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 180px !important;
}
@media (max-width: 640px) {
  .color-modal {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .color-modal[open] {
    align-items: stretch !important;
  }
  .color-panel {
    width: 100% !important;
    max-height: none !important;
    min-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 26px !important;
  }
}

/* ===== Final UX polish fix pack ===== */
.topbar {
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 12px 32px rgba(17,17,17,.08);
  overflow: clip;
}

#cartModal {
  width: min(96vw, 760px);
}

#cartModal .modal-card {
  padding: 18px 18px 26px;
  overflow-x: hidden;
}

#cartModal h2 {
  margin-bottom: 14px;
}

#cartModal .cart-list:empty::before {
  content: 'Корзина пуста. Добавь набор из каталога.';
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  color: var(--muted);
  text-align: center;
}

#cartModal .checkout-form {
  gap: 10px;
}

#cartModal .checkout-form label {
  display: grid;
  gap: 6px;
}

#cartModal .promo-input-row {
  align-items: stretch;
}

#cartModal #applyPromoBtn {
  min-width: 122px;
}

#cartModal #submitOrderBtn {
  width: 100%;
  min-height: 58px;
  margin-top: 14px;
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(17,17,17,.14);
}

#cartModal .order-result {
  margin-top: 12px;
}

#productModal .modal-card {
  overflow-x: hidden;
}

.gallery-thumbs {
  gap: 10px;
  padding: 4px 2px 4px;
  margin-top: 4px;
}

.gallery-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: #f3ece3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center;
}

.modal-product-image {
  min-height: 420px;
}

.modal-product-image img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 760px) {
  .topbar {
    border-radius: 24px;
  }

  #cartModal .modal-card {
    padding: 16px 14px 22px;
  }

  .gallery-thumb {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }

  .modal-product-image {
    min-height: 280px;
  }
}


/* ===== HARD FIX: ПК / Telegram Desktop modal rendering ===== */
html, body {
  overflow-x: hidden !important;
}

.app-shell {
  max-width: 1220px;
}

.topbar {
  margin-top: 10px;
  margin-bottom: 16px;
  border-radius: 30px !important;
  background: rgba(244, 239, 232, .98) !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  box-shadow: 0 16px 36px rgba(17,17,17,.08) !important;
}

.modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px !important;
  background: transparent !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.modal[open] {
  display: grid !important;
  place-items: center !important;
}

.modal::backdrop {
  background: rgba(20,16,12,.58) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modal-card {
  width: min(94vw, 760px) !important;
  max-height: calc(100dvh - 44px) !important;
  overflow: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  border-radius: 30px !important;
  padding: 18px 18px 24px !important;
  background: #fffdf8 !important;
}

#cartModal .modal-card {
  width: min(94vw, 720px) !important;
  max-height: calc(100dvh - 52px) !important;
  padding: 22px 20px 26px !important;
}

#cartModal h2 {
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: .96 !important;
  margin: 0 0 14px !important;
}

#cartModal .checkout-form input,
#cartModal .checkout-form textarea,
#cartModal .checkout-form select {
  min-height: 48px !important;
  border-radius: 17px !important;
  box-sizing: border-box !important;
}

#cartModal .checkout-form textarea {
  min-height: 82px !important;
  resize: vertical;
}

#cartModal #submitOrderBtn {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 18px !important;
  margin-top: 14px !important;
  box-shadow: 0 -10px 22px rgba(255,253,248,.88), 0 14px 24px rgba(17,17,17,.18) !important;
}

#productModal .modal-card {
  width: min(94vw, 820px) !important;
  max-height: calc(100dvh - 44px) !important;
  padding: 16px !important;
}

.product-gallery {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  max-height: calc(100dvh - 110px) !important;
  overflow: hidden !important;
}

.modal-product-image {
  height: clamp(360px, 62dvh, 650px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  background: #f2ece3 !important;
  border-radius: 24px !important;
}

.modal-product-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

.gallery-thumbs {
  max-height: 78px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 2px 2px !important;
}

.gallery-thumb {
  flex: 0 0 70px !important;
  width: 70px !important;
  height: 70px !important;
  border-radius: 14px !important;
  background: #f1eadf !important;
  overflow: hidden !important;
}

.gallery-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 760px) {
  .app-shell {
    padding-left: 8px;
    padding-right: 8px;
  }

  .topbar {
    margin-top: 6px;
    border-radius: 24px !important;
  }

  .modal {
    padding: 8px !important;
  }

  .modal-card,
  #cartModal .modal-card,
  #productModal .modal-card {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 18px) !important;
    border-radius: 26px !important;
  }

  .product-gallery {
    max-height: calc(100dvh - 78px) !important;
  }

  .modal-product-image {
    height: min(58dvh, 520px) !important;
  }

  .gallery-thumb {
    flex-basis: 62px !important;
    width: 62px !important;
    height: 62px !important;
  }
}


/* ===== FINAL FIX: cart button typography + product modal photo crop ===== */

/* Кнопка "Корзина" в шапке — в одном стиле с остальными кнопками */
.cart-pill {
  min-height: 58px !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #111 !important;
  font-weight: 950 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.cart-pill span {
  text-transform: uppercase !important;
  letter-spacing: .075em !important;
  font-weight: 950 !important;
}

.cart-pill strong {
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

/* Шапка чуть ровнее и аккуратнее */
.topbar {
  border-radius: 32px !important;
  padding: 12px 14px !important;
}

/* Модалка товара: фото принудительно заполняет окно, чтобы низ не ломался */
#productModal .modal-card {
  width: min(94vw, 780px) !important;
  padding: 14px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
}

.product-gallery {
  width: 100% !important;
  max-height: calc(100dvh - 86px) !important;
  overflow: hidden !important;
}

.modal-product-image {
  width: 100% !important;
  height: clamp(520px, 76dvh, 820px) !important;
  max-height: calc(100dvh - 155px) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #111 !important;
  margin: 0 !important;
}

.modal-product-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Нижние миниатюры — ровная обрезка без кривого рендера */
.gallery-thumbs {
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: center !important;
  padding: 8px 2px 0 !important;
  margin: 0 !important;
}

.gallery-thumb {
  flex: 0 0 68px !important;
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #efe7dd !important;
}

.gallery-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Стрелки поверх фото, не ломают ширину */
.gallery-arrow {
  z-index: 8 !important;
}

@media (max-width: 760px) {
  .cart-pill {
    min-height: 50px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  .topbar {
    border-radius: 24px !important;
  }

  #productModal .modal-card {
    width: calc(100vw - 14px) !important;
    padding: 7px !important;
    border-radius: 24px !important;
  }

  .product-gallery {
    max-height: calc(100dvh - 34px) !important;
  }

  .modal-product-image {
    height: calc(100dvh - 118px) !important;
    min-height: 420px !important;
    border-radius: 22px !important;
  }

  .gallery-thumbs {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }

  .gallery-thumb {
    flex-basis: 58px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    border-radius: 12px !important;
  }
}


/* ===== iPhone / Telegram Mini App safe-area fix ===== */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html,
body {
  min-height: 100dvh;
}

body {
  background: #f3efe8;
}

@media (max-width: 760px) {
  body {
    min-height: 100dvh;
    background: #f3efe8;
  }

  .app-shell {
    padding-top: calc(var(--safe-top) + 74px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .topbar {
    top: calc(var(--safe-top) + 58px) !important;
    border-radius: 26px !important;
    background: rgba(244,239,232,.99) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,.88) !important;
    box-shadow: 0 12px 28px rgba(17,17,17,.10) !important;
  }

  .brand-title {
    font-size: 15px !important;
  }

  .brand-subtitle {
    font-size: 9px !important;
  }

  .brand-mark {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
  }

  .hero {
    margin-top: 10px !important;
  }

  .modal {
    padding-top: calc(var(--safe-top) + 66px) !important;
    padding-bottom: calc(var(--safe-bottom) + 8px) !important;
  }

  .mobile-cart-float {
    bottom: calc(var(--safe-bottom) + 14px) !important;
  }
}

/* iPhone with Dynamic Island / large top inset */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 760px) {
    .app-shell {
      padding-top: max(82px, calc(env(safe-area-inset-top) + 78px)) !important;
    }

    .topbar {
      top: max(58px, calc(env(safe-area-inset-top) + 46px)) !important;
    }
  }
}


/* ===== Clickable custom pricing cards ===== */
.custom-price-card {
  appearance: none;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(255,255,255,.72);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.custom-price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(17,17,17,.13);
  border-color: rgba(255,112,72,.42);
}

.custom-price-card:active {
  transform: translateY(-1px);
}

.custom-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  min-height: 42px;
  width: 100%;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.custom-plan-modal .modal-card,
.custom-plan-modal-card {
  width: min(94vw, 980px) !important;
  max-height: calc(100dvh - 44px) !important;
  overflow: auto !important;
  padding: 18px !important;
}

.custom-plan-detail {
  display: grid;
  grid-template-columns: minmax(260px, .95fr) minmax(320px, 1.05fr);
  gap: 22px;
  align-items: stretch;
}

.custom-plan-detail-media {
  border-radius: 26px;
  overflow: hidden;
  background: #111;
  min-height: 420px;
}

.custom-plan-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-plan-detail-body {
  display: flex;
  flex-direction: column;
  padding: 8px 6px 4px;
}

.custom-plan-detail-body h2 {
  margin-bottom: 10px;
}

.custom-plan-subtitle {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.custom-plan-price {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 10px 15px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 24px;
  font-weight: 950;
}

.custom-plan-list {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.custom-plan-list li {
  position: relative;
  padding: 12px 13px 12px 38px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  color: #4f4944;
  line-height: 1.35;
}

.custom-plan-list li::before {
  content: '✓';
  position: absolute;
  left: 13px;
  top: 11px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.custom-plan-attention {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,112,72,.10);
  border: 1px solid rgba(255,112,72,.25);
  color: #5c5149;
}

.custom-plan-attention b {
  color: #111;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.custom-plan-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.custom-plan-actions .primary,
.custom-plan-actions .secondary {
  min-height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 760px) {
  .custom-plan-detail {
    grid-template-columns: 1fr;
  }

  .custom-plan-detail-media {
    min-height: 300px;
    max-height: 360px;
  }

  .custom-plan-actions {
    grid-template-columns: 1fr;
  }

  .custom-card-action {
    min-height: 38px;
    font-size: 10px;
  }
}


/* CLICK FIX */
.custom-price-card {
  display: block !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.custom-price-card * {
  pointer-events: none !important;
}

.custom-price-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  z-index: 5 !important;
}

/* ===== PATCH FIXES AUTO ADDED ===== */
@media (max-width: 760px) {
  .topbar {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    padding: 8px 10px;
  }

  .fullscreen-pill {
    min-height: 34px;
    padding: 8px 10px;
    font-size: 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .cart-pill {
    padding: 8px 10px;
    flex-shrink: 0;
  }
}

/* card text fix */
.custom-price-card, .deal-card {
  overflow: visible !important;
}

.custom-price-body h3, .custom-price-body p {
  line-height: 1.35;
  word-break: break-word;
}

/* gallery fix */
.gallery-modal img {
  object-fit: cover;
  transform: scale(1.02);
}


/* === FIX 2026-07-03: custom cards sizing, no crop, readable text === */
.custom-pricing-section {
  overflow: hidden !important;
}

.custom-pricing-head {
  display: block !important;
  align-items: initial !important;
  margin-bottom: 16px !important;
}

.custom-pricing-head > p:last-child {
  display: none !important;
}

.custom-pricing-head h2 {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}

.custom-pricing-grid {
  align-items: stretch !important;
}

.custom-price-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.custom-price-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #111 !important;
  filter: contrast(1.04) brightness(1.02) !important;
}

.custom-price-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.custom-price-body h3 {
  color: #111 !important;
}

.custom-price-body p {
  color: #5d574f !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.custom-price-body strong {
  margin-top: auto !important;
  color: #111 !important;
}

.custom-card-action {
  margin-top: 14px !important;
  flex-shrink: 0 !important;
}

.custom-note.compact {
  overflow: hidden !important;
  align-items: center !important;
  gap: clamp(16px, 3vw, 34px) !important;
}

.custom-note.compact h2 {
  max-width: 100% !important;
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
  white-space: normal !important;
  text-wrap: balance;
}

.custom-note.compact p:not(.eyebrow) {
  color: #5d574f !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.custom-note.compact .secondary {
  white-space: nowrap !important;
}

.custom-plan-detail-media {
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #111 !important;
}

.custom-plan-detail-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #111 !important;
  filter: contrast(1.04) brightness(1.02) !important;
}

@media (max-width: 980px) {
  .custom-pricing-head h2 {
    font-size: clamp(30px, 6vw, 46px) !important;
  }

  .custom-pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .custom-price-card {
    display: flex !important;
    grid-template-columns: none !important;
    border-radius: 24px !important;
  }

  .custom-price-card img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
  }

  .custom-price-body {
    padding: 14px !important;
  }

  .custom-price-body h3 {
    font-size: 22px !important;
  }

  .custom-price-body p {
    font-size: 14px !important;
  }

  .custom-price-body strong {
    font-size: 24px !important;
  }

  .custom-note.compact {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
  }

  .custom-note.compact h2 {
    font-size: clamp(30px, 7.5vw, 44px) !important;
  }

  .custom-note.compact .secondary {
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .custom-plan-modal .modal-card,
  .custom-plan-modal-card {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 12px !important;
  }

  .custom-plan-detail {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .custom-plan-detail-media {
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 22px !important;
  }

  .custom-plan-detail-body h2 {
    font-size: 34px !important;
    line-height: .98 !important;
  }

  .custom-plan-subtitle {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 520px) {
  .custom-pricing-section {
    padding: 12px !important;
    border-radius: 22px !important;
  }

  .custom-pricing-head h2 {
    font-size: clamp(28px, 9.4vw, 40px) !important;
    line-height: .96 !important;
  }

  .custom-price-card {
    border-radius: 20px !important;
  }

  .custom-price-body {
    padding: 12px !important;
  }

  .custom-price-body p {
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  .custom-card-action {
    min-height: 40px !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
  }

  .custom-note.compact {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  .custom-note.compact h2 {
    font-size: clamp(28px, 9.2vw, 38px) !important;
  }

  .custom-note.compact p:not(.eyebrow) {
    font-size: 14px !important;
  }
}

/* === FIX v7: cart smaller + remove helper text + custom modal no overlap === */
/* Hide the small section helper captions requested for removal */
.faq-section > .section-head > p,
.custom-pricing-section > .section-head > p:not(.eyebrow),
.custom-pricing-head > p:not(.eyebrow),
.custom-pricing-head > p:last-child {
  display: none !important;
}

/* Cart pill: smaller text, lighter border/outline */
.cart-pill {
  min-height: 40px !important;
  padding: 8px 12px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17,17,17,.06) !important;
  box-shadow: 0 8px 18px rgba(17,17,17,.06) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}
.cart-pill span {
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}
.cart-pill strong {
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 7px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

/* Custom plan modal: force clean two-column layout; no image/text overlap */
.custom-plan-modal .modal-card,
.custom-plan-modal-card {
  width: min(96vw, 1080px) !important;
  max-height: calc(100dvh - 36px) !important;
  padding: 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  background: #fffdf8 !important;
}

.custom-plan-detail {
  display: grid !important;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.custom-plan-detail > *,
.custom-plan-detail-media,
.custom-plan-detail-body,
.custom-plan-list,
.custom-plan-list li {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.custom-plan-detail-media {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 420px !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #111 !important;
}

.custom-plan-detail-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #111 !important;
}

.custom-plan-detail-body {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 4px 4px 4px 0 !important;
  background: #fffdf8 !important;
}

.custom-plan-detail-body h2 {
  margin: 0 0 8px !important;
  font-size: clamp(34px, 4.5vw, 52px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
}

.custom-plan-subtitle {
  margin: 0 0 12px !important;
  color: #5d574f !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.custom-plan-price {
  margin-bottom: 14px !important;
  padding: 9px 14px !important;
  font-size: 22px !important;
}

.custom-plan-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

.custom-plan-list li {
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 10px 12px 10px 36px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(17,17,17,.11) !important;
  box-shadow: 0 8px 18px rgba(17,17,17,.045) !important;
  color: #3f3933 !important;
  font-size: 14px !important;
  line-height: 1.34 !important;
  opacity: 1 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.custom-plan-list li::before {
  left: 11px !important;
  top: 9px !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 12px !important;
}

.custom-plan-attention {
  margin-top: 0 !important;
  padding: 13px !important;
  border-radius: 16px !important;
  background: #fff0e8 !important;
  border: 1px solid rgba(255,112,72,.28) !important;
  color: #4f463f !important;
  opacity: 1 !important;
}

.custom-plan-actions {
  margin-top: 14px !important;
}

@media (max-width: 980px) {
  .custom-plan-modal .modal-card,
  .custom-plan-modal-card {
    width: calc(100vw - 24px) !important;
    padding: 14px !important;
  }
  .custom-plan-detail {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .custom-plan-detail-media {
    max-width: 360px !important;
  }
}

@media (max-width: 760px) {
  .cart-pill {
    min-height: 36px !important;
    padding: 7px 10px !important;
    gap: 6px !important;
    font-size: 12px !important;
  }
  .cart-pill span {
    font-size: 12px !important;
  }
  .cart-pill strong {
    min-width: 22px !important;
    min-height: 22px !important;
    font-size: 12px !important;
    padding: 0 6px !important;
  }

  .custom-plan-modal .modal-card,
  .custom-plan-modal-card {
    width: calc(100vw - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }

  .custom-plan-detail {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .custom-plan-detail-media {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(58dvh, 420px) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 20px !important;
  }

  .custom-plan-detail-body {
    padding: 0 !important;
  }

  .custom-plan-detail-body h2 {
    font-size: 34px !important;
  }

  .custom-plan-subtitle,
  .custom-plan-list li {
    font-size: 13px !important;
  }

  .custom-plan-actions {
    grid-template-columns: 1fr !important;
  }
}


/* === FIX v8: custom media height, cart/fullscreen alignment, compatibility copy === */

/* Align cart button visually with the fullscreen button */
.fullscreen-pill,
.cart-pill {
  min-height: 44px !important;
  border-radius: 999px !important;
}

.fullscreen-pill {
  padding: 10px 14px !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

.cart-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  border: 1px solid rgba(17,17,17,.08) !important;
}

.cart-pill span {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.cart-pill strong {
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 7px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Make custom plan/media blocks a bit taller on small screens */
@media (max-width: 760px) {
  .topbar {
    grid-template-columns: auto auto auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .fullscreen-pill,
  .cart-pill {
    min-height: 44px !important;
  }

  .fullscreen-pill {
    display: inline-flex !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
  }

  .cart-pill {
    padding: 10px 15px !important;
    font-size: 11px !important;
  }

  .cart-pill span {
    font-size: 11px !important;
  }

  .cart-pill strong {
    min-width: 24px !important;
    min-height: 24px !important;
    font-size: 12px !important;
  }

  /* Card previews in the pricing grid */
  .custom-price-card img {
    aspect-ratio: 1 / 1.12 !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Opened custom plan modal illustration */
  .custom-plan-detail-media {
    aspect-ratio: 1 / 1.12 !important;
    min-height: clamp(420px, 66dvh, 560px) !important;
    max-height: min(72dvh, 560px) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .custom-plan-detail-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

@media (max-width: 520px) {
  .custom-note.compact p:not(.eyebrow) {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .custom-plan-detail-media {
    min-height: clamp(440px, 68dvh, 600px) !important;
  }
}


/* === FIX v9: mobile custom height + exact cart alignment + compatibility text === */
/* Hide short helper captions if they exist anywhere in the custom/FAQ heads */
.custom-pricing-section .section-head > p:not(.eyebrow),
.custom-pricing-head > p:not(.eyebrow),
.faq-section .section-head > p:not(.eyebrow) {
  display: none !important;
}

/* Cart and fullscreen must have the same visual height on mobile and desktop */
.topbar {
  align-items: center !important;
}
.fullscreen-pill,
.cart-pill {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}
.fullscreen-pill {
  padding: 0 15px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .075em !important;
}
.cart-pill {
  padding: 0 14px !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  border: 1px solid rgba(17,17,17,.07) !important;
  box-shadow: 0 8px 18px rgba(17,17,17,.045) !important;
  transform: none !important;
}
.cart-pill span {
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.cart-pill strong {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

/* Mobile: make the custom cards/illustration longer downward, without overlapping text */
@media (max-width: 760px) {
  .topbar {
    grid-template-columns: auto auto auto !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .fullscreen-pill,
  .cart-pill {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .custom-pricing-grid {
    gap: 16px !important;
  }

  .custom-price-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .custom-price-card img {
    width: 100% !important;
    height: auto !important;
    min-height: clamp(500px, 118vw, 660px) !important;
    aspect-ratio: 1 / 1.38 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .custom-price-body {
    position: relative !important;
    z-index: 2 !important;
    background: #fffdf8 !important;
  }

  .custom-plan-detail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .custom-plan-detail-media {
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(500px, 118vw, 660px) !important;
    max-height: none !important;
    aspect-ratio: 1 / 1.38 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #111 !important;
  }

  .custom-plan-detail-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .custom-plan-detail-body {
    background: #fffdf8 !important;
    padding: 0 !important;
  }
}

@media (max-width: 430px) {
  .fullscreen-pill,
  .cart-pill {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }
  .fullscreen-pill { padding: 0 13px !important; font-size: 10.5px !important; }
  .cart-pill { padding: 0 13px !important; }
  .cart-pill span { font-size: 10.5px !important; }
  .cart-pill strong {
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
    min-height: 23px !important;
    font-size: 11.5px !important;
  }

  .custom-price-card img,
  .custom-plan-detail-media {
    min-height: clamp(520px, 128vw, 700px) !important;
  }
}

/* FIX MODAL FULL HEIGHT */
dialog {
  padding: 0 !important;
}

#productModal, #cartModal, #colorModal, #customPlanModal {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

.modal-card {
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.modal-content, .modal-body {
  flex: 1 !important;
  overflow-y: auto !important;
}


/* === FIX v11: custom plan modal structured like product card === */
#customPlanModal {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#customPlanModal .modal-card,
.custom-plan-modal-card {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #fffdf8 !important;
  box-sizing: border-box !important;
}

#customPlanModal .modal-close {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  z-index: 30 !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(10px) !important;
}

#customPlanModalContent {
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
}

.custom-plan-detail {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.custom-plan-detail-media {
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #111 !important;
  margin: 0 0 18px !important;
}

.custom-plan-detail-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: #111 !important;
}

.custom-plan-detail-body {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 8px 28px !important;
  background: #fffdf8 !important;
  display: block !important;
}

.custom-plan-detail-body .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .05em !important;
  margin: 0 0 8px !important;
}

.custom-plan-detail-body h2 {
  margin: 0 0 8px !important;
  font-size: clamp(42px, 8vw, 64px) !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
}

.custom-plan-subtitle {
  margin: 0 0 12px !important;
  color: #5d574f !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.custom-plan-price {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 16px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  letter-spacing: -.05em !important;
}

.custom-plan-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  list-style: none !important;
}

.custom-plan-list li {
  width: 100% !important;
  padding: 12px 14px 12px 38px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(17,17,17,.10) !important;
  color: #3f3933 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
}

.custom-plan-list li::before {
  left: 12px !important;
  top: 12px !important;
  width: 18px !important;
  height: 18px !important;
}

.custom-plan-attention {
  margin: 0 0 16px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: #fff0e8 !important;
  border: 1px solid rgba(255,112,72,.30) !important;
  color: #4f463f !important;
}

.custom-plan-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
}

.custom-plan-actions .primary,
.custom-plan-actions .secondary {
  min-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  #customPlanModal .modal-card,
  .custom-plan-modal-card {
    padding: 8px !important;
  }

  #customPlanModalContent {
    width: 100% !important;
  }

  .custom-plan-detail {
    max-width: 100% !important;
  }

  .custom-plan-detail-media {
    aspect-ratio: 1 / 1.08 !important;
    border-radius: 24px !important;
    margin-bottom: 16px !important;
  }

  .custom-plan-detail-body {
    padding: 0 8px 28px !important;
  }

  .custom-plan-detail-body h2 {
    font-size: clamp(40px, 13vw, 56px) !important;
  }

  .custom-plan-subtitle,
  .custom-plan-list li {
    font-size: 14px !important;
  }

  .custom-plan-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  .custom-plan-detail-media {
    aspect-ratio: 1 / 1.14 !important;
  }
  .custom-plan-actions .primary,
  .custom-plan-actions .secondary {
    min-height: 48px !important;
    font-size: 12px !important;
  }
}

/* === UKEY FINAL CUSTOM MODAL FIX v12.1 === */
/* Remove helper copy wherever it survived */
.faq-section .section-head > p:not(.eyebrow),
.custom-pricing-head > p:not(.eyebrow),
.custom-pricing-section .section-head > p:not(.eyebrow) {
  display: none !important;
}

/* Topbar: make cart visually the same scale as fullscreen, but not wider/heavier */
.fullscreen-pill,
.cart-pill {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.fullscreen-pill {
  padding: 0 16px !important;
  font-size: 11px !important;
  letter-spacing: .075em !important;
  font-weight: 950 !important;
}
.cart-pill {
  padding: 0 12px !important;
  gap: 7px !important;
  font-size: 11px !important;
  letter-spacing: .055em !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}
.cart-pill span {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
}
.cart-pill strong {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

/* Custom pricing cards: equal image blocks, no jumping, no top white strip */
.custom-pricing-grid {
  align-items: stretch !important;
}
.custom-price-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
  border-radius: 26px !important;
}
.custom-price-card > img {
  width: 100% !important;
  height: clamp(330px, 30vw, 430px) !important;
  min-height: clamp(330px, 30vw, 430px) !important;
  max-height: clamp(330px, 30vw, 430px) !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: #111 !important;
}
.custom-price-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
  background: #fffdf8 !important;
}
.custom-card-action {
  margin-top: auto !important;
}

/* Custom plan modal: use real product-card layout, but without empty bottom area */
#customPlanModal[open] {
  display: grid !important;
  place-items: start center !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: transparent !important;
}

#customPlanModal .modal-card,
.custom-plan-modal-card {
  width: min(100vw, 1180px) !important;
  max-width: min(100vw, 1180px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 14px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: #fffdf8 !important;
  box-sizing: border-box !important;
}

#customPlanModalContent {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.custom-plan-detail {
  display: grid !important;
  grid-template-columns: minmax(420px, 48%) minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.custom-plan-detail-media {
  width: 100% !important;
  max-width: none !important;
  height: min(82dvh, 760px) !important;
  min-height: 560px !important;
  max-height: 760px !important;
  aspect-ratio: auto !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: #111 !important;
  margin: 0 !important;
  align-self: stretch !important;
}
.custom-plan-detail-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: none !important;
  background: #111 !important;
}

.custom-plan-detail-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: 6px 10px 6px 0 !important;
  background: #fffdf8 !important;
  overflow: visible !important;
}

.custom-plan-detail-body h2 {
  margin: 0 0 8px !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
  font-size: clamp(42px, 4.5vw, 64px) !important;
}
.custom-plan-subtitle {
  max-width: 760px !important;
}
.custom-plan-list {
  gap: 8px !important;
}
.custom-plan-list li {
  overflow: hidden !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}
.custom-plan-actions {
  margin-top: 14px !important;
}

@media (max-width: 980px) {
  .custom-plan-detail {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .custom-plan-detail-media {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1.22 !important;
  }
  .custom-plan-detail-body {
    padding: 0 8px 28px !important;
  }
}

@media (max-width: 760px) {
  .cart-pill {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 11px !important;
    gap: 6px !important;
  }
  .cart-pill span {
    font-size: 10px !important;
  }
  .cart-pill strong {
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    font-size: 10px !important;
  }

  .custom-price-card > img {
    height: clamp(420px, 118vw, 620px) !important;
    min-height: clamp(420px, 118vw, 620px) !important;
    max-height: clamp(420px, 118vw, 620px) !important;
  }

  #customPlanModal .modal-card,
  .custom-plan-modal-card {
    width: 100vw !important;
    padding: 8px !important;
  }
  .custom-plan-detail-media {
    aspect-ratio: 1 / 1.26 !important;
    border-radius: 24px !important;
  }
  .custom-plan-detail-body h2 {
    font-size: clamp(42px, 13vw, 58px) !important;
  }
  .custom-plan-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  .custom-price-card > img {
    height: clamp(440px, 124vw, 650px) !important;
    min-height: clamp(440px, 124vw, 650px) !important;
  }
  .custom-plan-detail-media {
    aspect-ratio: 1 / 1.34 !important;
  }
}


/* ===== UKEY HARD FIX PRODUCT MODAL SCROLL v2 ===== */
/* Нативный dialog у Telegram/мобилок часто не скроллит внутреннюю .modal-card.
   Поэтому скролл переносится на сам #productModal, а карточка становится обычным потоком. */
#productModal.modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  background: rgba(20,16,12,.58) !important;
  box-sizing: border-box !important;
}

#productModal.modal[open] {
  display: block !important;
}

#productModal.modal::backdrop {
  background: rgba(20,16,12,.58) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

#productModal .modal-card {
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 18px 18px 28px !important;
  overflow: visible !important;
  border-radius: 34px !important;
  background: var(--panel) !important;
  box-sizing: border-box !important;
}

#productModal #productModalContent {
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#productModal .product-gallery {
  display: block !important;
  margin-bottom: 18px !important;
  overflow: visible !important;
}

#productModal .modal-product-image {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  touch-action: auto !important;
  background: #111 !important;
}

#productModal .modal-product-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 72vh !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  transform: none !important;
}

#productModal .gallery-thumbs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
}

#productModal .close {
  position: sticky !important;
  top: 8px !important;
  float: right !important;
  z-index: 20 !important;
  margin-left: auto !important;
}

/* чтобы после float-кнопки контент не обтекал крестик криво */
#productModal #productModalContent {
  clear: both !important;
}

@media (max-width: 760px) {
  #productModal.modal {
    padding: 0 !important;
  }

  #productModal .modal-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 8px 8px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
  }

  #productModal .modal-product-image {
    border-radius: 24px !important;
  }

  #productModal .modal-product-image img {
    max-height: 64vh !important;
  }

  #productModal .close {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !important;
  }
}


/* ===== UKEY FINAL FIX: product modal scroll + page starts from top v44000 ===== */
html.product-modal-open,
html.product-modal-open body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#productModal.modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  background: rgba(20,16,12,.60) !important;
  box-sizing: border-box !important;
}

#productModal.modal[open] {
  display: block !important;
}

#productModal.modal::backdrop {
  background: rgba(20,16,12,.60) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

#productModal .modal-card {
  width: min(100%, 940px) !important;
  max-width: 940px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 18px 18px 32px !important;
  overflow: visible !important;
  border-radius: 34px !important;
  box-sizing: border-box !important;
}

#productModal #productModalContent {
  clear: both !important;
  display: block !important;
  overflow: visible !important;
  min-height: 0 !important;
}

#productModal .modal-product-image {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}

#productModal .modal-product-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 68vh !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  transform: none !important;
}

#productModal .gallery-thumbs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
}

#productModal .close {
  position: sticky !important;
  top: 8px !important;
  float: right !important;
  z-index: 50 !important;
  margin-left: auto !important;
}

@media (max-width: 760px) {
  #productModal.modal {
    padding: 0 !important;
  }

  #productModal .modal-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 8px 8px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
  }

  #productModal .modal-product-image {
    border-radius: 24px !important;
  }

  #productModal .modal-product-image img {
    max-height: 58vh !important;
  }

  #productModal .close {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !important;
  }
}


/* ===== UKEY FIX 45010: BLURRED SIDE BACKGROUND IN PRODUCT GALLERY ===== */
#productModal .modal-product-image {
  position: relative !important;
  isolation: isolate !important;
  background: #111 !important;
}

#productModal .modal-product-image::before {
  content: "" !important;
  position: absolute !important;
  inset: -34px !important;
  z-index: 0 !important;
  background-image: var(--gallery-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(28px) saturate(1.12) brightness(.78) !important;
  transform: scale(1.08) !important;
  opacity: .95 !important;
  pointer-events: none !important;
}

#productModal .modal-product-image::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(17,17,17,.18) !important;
  pointer-events: none !important;
}

#productModal .modal-product-image img,
#productModal .gallery-arrow,
#productModal .gallery-counter {
  position: relative !important;
  z-index: 2 !important;
}

#productModal .modal-product-image img {
  background: transparent !important;
}


/* ===== UKEY FINAL SERVER BUILD: modal, scroll, blur sides, arrows ===== */

html.ukey-modal-lock,
html.ukey-modal-lock body {
  overflow: hidden !important;
}

#productModal.modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: rgba(20,16,12,.62) !important;
  z-index: 999999 !important;
  box-sizing: border-box !important;
}

#productModal.modal[open] {
  display: block !important;
}

#productModal.modal::backdrop {
  background: rgba(20,16,12,.62) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

#productModal .modal-card {
  width: min(100%, 940px) !important;
  max-width: 940px !important;
  height: auto !important;
  max-height: calc(100dvh - 32px) !important;
  margin: 0 auto !important;
  padding: 18px 18px 36px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  border-radius: 34px !important;
  background: var(--panel) !important;
  box-sizing: border-box !important;
}

#productModal #productModalContent {
  display: block !important;
  overflow: visible !important;
  min-height: 0 !important;
  clear: both !important;
}

#productModal .modal-product-image {
  position: relative !important;
  isolation: isolate !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
  background-color: #111 !important;
  background-image:
    linear-gradient(rgba(17,17,17,.18), rgba(17,17,17,.18)),
    var(--gallery-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#productModal .modal-product-image::before {
  content: "" !important;
  position: absolute !important;
  inset: -40px !important;
  z-index: 0 !important;
  background-image: var(--gallery-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(30px) saturate(1.15) brightness(.8) !important;
  transform: scale(1.12) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

#productModal .modal-product-image::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: rgba(17,17,17,.12) !important;
  pointer-events: none !important;
}

#productModal .modal-product-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 68vh !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  transform: none !important;
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
}

#productModal .gallery-thumbs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
}

#productModal .gallery-arrow {
  position: absolute !important;
  top: 42% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(17,17,17,.72) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  z-index: 20 !important;
}

#productModal .gallery-prev {
  left: 18px !important;
  right: auto !important;
}

#productModal .gallery-next {
  right: 18px !important;
  left: auto !important;
}

#productModal .gallery-counter {
  position: absolute !important;
  z-index: 20 !important;
}

#productModal .gallery-arrow::before,
#productModal .gallery-arrow::after {
  display: none !important;
}

#productModal .close {
  position: sticky !important;
  top: 8px !important;
  float: right !important;
  z-index: 999999 !important;
  margin-left: auto !important;
}

@media (max-width: 760px) {
  #productModal.modal {
    padding: 0 !important;
  }

  #productModal .modal-card {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 8px 8px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
  }

  #productModal .modal-product-image {
    border-radius: 24px !important;
  }

  #productModal .modal-product-image img {
    max-height: 58vh !important;
  }

  #productModal .gallery-arrow {
    top: 42% !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 30px !important;
  }

  #productModal .gallery-prev {
    left: 10px !important;
  }

  #productModal .gallery-next {
    right: 10px !important;
  }

  #productModal .close {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !important;
  }
}

/* ===== Telegram Desktop: fit the WebView, keep the wide layout when it fits ===== */
html.tg-miniapp.tg-desktop,
html.tg-miniapp.tg-desktop body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

html.tg-miniapp.tg-desktop .app-shell {
  width: min(100%, 1600px) !important;
  max-width: 1600px !important;
  min-width: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

@media (min-width: 821px) {
  html.tg-miniapp.tg-desktop .hero {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: 24px !important;
  }
}

html.tg-miniapp.tg-desktop .topbar {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
}

html.tg-miniapp.tg-desktop .fullscreen-pill {
  display: inline-flex !important;
}
html.tg-miniapp.tg-desktop .fullscreen-pill[hidden] {
  display: none !important;
}

html.tg-miniapp.tg-desktop.tg-fullscreen .app-shell {
  padding-top: max(14px, var(--ukey-tg-safe-top, 0px)) !important;
  padding-right: max(14px, var(--ukey-tg-safe-right, 0px)) !important;
  padding-bottom: max(14px, var(--ukey-tg-safe-bottom, 0px)) !important;
  padding-left: max(14px, var(--ukey-tg-safe-left, 0px)) !important;
}
html.tg-miniapp.tg-desktop.tg-fullscreen .topbar {
  top: var(--ukey-tg-safe-top, 0px) !important;
}

@media (max-width: 980px) {
  html.tg-miniapp.tg-desktop .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
  html.tg-miniapp.tg-desktop .mini-nav { display: none; }
}

@media (max-width: 560px) {
  html.tg-miniapp.tg-desktop .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  html.tg-miniapp.tg-desktop .brand { grid-column: 1 / -1; }
}

/* Normal browser rendering is deliberately unchanged. */
html:not(.tg-miniapp) .fullscreen-pill {
  display: none !important;
}

/* ===== UKEY V32 COMMERCE: CDEK + YooKassa checkout ===== */
.cart-total-breakdown {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px 16px;
  align-items: center;
}
.cart-total-breakdown .grand-total-label,
.cart-total-breakdown .grand-total-value {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-weight: 900;
}
.cart-total-breakdown .grand-total-value { font-size: 20px; }
.cdek-checkout {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.58);
}
.cdek-route-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.cdek-route-line strong { color: var(--text); }
.cdek-calc-btn { width: 100%; min-height: 48px; }
.cdek-checkout label { display: grid; gap: 6px; }
.cdek-checkout label > span {
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
}
.cdek-checkout select {
  width: 100%;
  min-height: 50px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 14px;
  font: inherit;
  color: var(--text);
}
.cdek-result {
  padding: 11px 13px;
  border-radius: 15px;
  background: rgba(17,17,17,.045);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.cdek-result[data-kind="success"] {
  color: #157347;
  background: rgba(29,151,85,.09);
  border: 1px solid rgba(29,151,85,.2);
}
.cdek-result[data-kind="error"] {
  color: #b42318;
  background: rgba(255,112,72,.08);
  border: 1px solid rgba(255,112,72,.2);
}
@media (max-width: 640px) {
  .cdek-checkout { padding: 12px; border-radius: 18px; }
  .cart-total-breakdown { gap: 9px 12px; }
}


/* === V32.5 CDEK city autocomplete + YooKassa pay CTA === */
.checkout-form label { position: relative; }
.cdek-city-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 2px);
  z-index: 120;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 0 0 18px 18px;
  background: #fffdfa;
  box-shadow: 0 18px 40px rgba(20,18,16,.16);
}
.cdek-city-suggestion {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #111;
  text-align: left;
  cursor: pointer;
}
.cdek-city-suggestion:hover,
.cdek-city-suggestion:focus-visible { background: rgba(17,17,17,.06); outline: none; }
.cdek-city-suggestion strong { font-size: 15px; }
.cdek-city-suggestion span { color: var(--muted); font-size: 12px; }
.cdek-city-empty { padding: 12px; color: var(--muted); font-size: 13px; }
.inline-pay-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #111;
  color: #fff !important;
  font-weight: 850;
  text-decoration: none;
  box-sizing: border-box;
}

.inline-pay-retry {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 14px;
  background: #111; color: #fff; font-weight: 850; cursor: pointer;
}
.inline-pay-retry:disabled { opacity: .65; cursor: wait; }


/* ===== V32.9.3 checkout fixes ===== */
.cdek-checkout input[type="text"] {
  width: 100%; min-height: 50px; border-radius: 16px; border: 1px solid var(--line);
  background: #fff; padding: 0 14px; font: inherit; color: var(--text); box-sizing: border-box;
}
.cdek-pvz-choice { display: grid; gap: 10px; }
.cdek-pvz-select-label { margin-top: 2px; }
#customerReceiptEmail:invalid:not(:placeholder-shown) { border-color: rgba(180,35,24,.55); }
#cartModal.checkout-complete .modal-card { opacity: .92; }


/* ===== V32.9.7 persistent payment + mobile hero / Telegram dismiss fixes ===== */
.pending-payment-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; margin:14px 0 16px; padding:16px; border:1px solid rgba(29,151,85,.28); border-radius:20px; background:rgba(29,151,85,.09); }
.pending-payment-card.hidden { display:none !important; }
.pending-payment-copy { display:grid; gap:4px; min-width:0; }
.pending-payment-copy strong { font-size:17px; line-height:1.25; overflow-wrap:anywhere; }
.pending-payment-copy span { color:#5f665f; font-size:13px; line-height:1.4; }
.pending-payment-kicker { color:#157347 !important; font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:10px !important; }
.pending-payment-link { min-height:50px; padding:13px 18px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; text-decoration:none; }
.pending-payment-expired { border-color:rgba(180,35,24,.24); background:rgba(180,35,24,.07); }
.pending-payment-expired .pending-payment-copy span { color:#7a5a55; }
.pending-payment-dismiss { min-height:46px; padding:10px 16px; border-radius:14px; }

@media (max-width:820px) {
  .hero { grid-template-columns:minmax(0,1fr) !important; min-height:0 !important; gap:14px !important; align-items:start !important; }
  .hero-copy { justify-content:flex-start !important; min-height:0 !important; }
  .hero-note { margin-top:0 !important; }
  .hero-media { min-height:0 !important; height:auto !important; aspect-ratio:16/10 !important; }
  .hero-video { min-height:0 !important; height:100% !important; aspect-ratio:16/10 !important; }
  .pending-payment-card { grid-template-columns:1fr; }
  .pending-payment-link, .pending-payment-dismiss { width:100%; }
}
.hero-copy, .hero-copy h1, .hero-copy p, .hero-note, .section-head, .quality-note { -webkit-user-select:text; user-select:text; }


/* ===== UKEY V32.9.9 MOBILE CHECKOUT: iPhone / Android / Telegram Mini App ===== */
:root {
  --ukey-vv-height: 100dvh;
  --ukey-vv-width: 100vw;
  --ukey-vv-top: 0px;
  --ukey-vv-left: 0px;
}
html { -webkit-text-size-adjust: 100%; }
html.cart-modal-open,
html.cart-modal-open body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#cartModal.modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: transparent !important;
  overscroll-behavior: none !important;
  z-index: 1000000 !important;
}
#cartModal.modal[open] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#cartModal.modal::backdrop {
  background: rgba(20,16,12,.58) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
#cartModal .modal-card {
  display: block !important;
  width: min(100%, 760px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 28px) !important;
  margin: 0 auto !important;
  padding: 18px 18px calc(26px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  box-sizing: border-box !important;
  border-radius: 30px !important;
  background: #fffdf8 !important;
  scrollbar-gutter: stable !important;
}
#cartModal .checkout-form input,
#cartModal .checkout-form select,
#cartModal .checkout-form textarea,
#cartModal .cdek-checkout input,
#cartModal .cdek-checkout select {
  font-size: 16px !important; /* prevents iOS focus zoom */
  max-width: 100% !important;
}
#cartModal .checkout-form,
#cartModal .cdek-checkout,
#cartModal .cart-list,
#cartModal .cart-total-breakdown,
#cartModal .pending-payment-card {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#cartModal #submitOrderBtn {
  position: sticky !important;
  bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 30 !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
  box-shadow: 0 -12px 24px rgba(255,253,248,.96), 0 10px 24px rgba(17,17,17,.18) !important;
}

@media (max-width: 820px) {
  #cartModal.modal {
    inset: auto !important;
    top: var(--ukey-vv-top, 0px) !important;
    left: var(--ukey-vv-left, 0px) !important;
    width: var(--ukey-vv-width, 100vw) !important;
    height: var(--ukey-vv-height, 100dvh) !important;
    max-height: var(--ukey-vv-height, 100dvh) !important;
    padding: 0 !important;
    background: #fffdf8 !important;
  }
  #cartModal.modal[open] {
    display: block !important;
  }
  #cartModal .modal-card {
    width: 100% !important;
    max-width: none !important;
    height: var(--ukey-vv-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--ukey-vv-height, 100dvh) !important;
    margin: 0 !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #cartModal .close {
    position: sticky !important;
    top: max(4px, env(safe-area-inset-top, 0px)) !important;
    z-index: 50 !important;
    float: right !important;
    margin: 0 0 2px auto !important;
  }
  #cartModal h2 {
    clear: both !important;
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: .98 !important;
    margin-top: 2px !important;
  }
  #cartModal #submitOrderBtn {
    bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    min-height: 56px !important;
    margin-bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
  }
  #cartModal .order-result {
    margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #cartModal .cdek-city-suggestions {
    max-height: min(42vh, 300px) !important;
  }
  #cartModal .pending-payment-card {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 380px) {
  #cartModal .modal-card { padding-left: 9px !important; padding-right: 9px !important; }
  #cartModal .checkout-form { gap: 10px !important; }
  #cartModal .cdek-checkout { padding: 10px !important; }
  #cartModal .promo-input-row { grid-template-columns: minmax(0,1fr) auto !important; }
}

/* ===== UKEY V32.9.10 VERIFIED TELEGRAM CONTACT ===== */
#customerAlias[readonly] {
  cursor: default;
  background: rgba(244, 242, 237, .72);
}
#customerAlias[data-telegram-verified="1"] {
  border-color: rgba(29,151,85,.38);
  box-shadow: 0 0 0 3px rgba(29,151,85,.06);
}
#telegramContactStatus[data-state="pending"] { color: #7c6b3e; }
#telegramContactStatus[data-state="ok"] { color: var(--success); }
#telegramContactStatus[data-state="error"] { color: #b42318; }

/* UKEY V32.10 — Telegram-first checkout */
.telegram-checkout-note {
  display: grid;
  gap: 6px;
  padding: 14px 15px;
  border-radius: 16px;
  background: rgba(45, 137, 239, .08);
  border: 1px solid rgba(45, 137, 239, .18);
}
.telegram-checkout-note strong { font-size: 14px; line-height: 1.3; }
.telegram-checkout-note .delivery-hint { margin: 0; }
#orderResult #continueInTelegramBtn { margin-top: 12px; width: 100%; }


/* ===== UKEY V32.10.4 — verified Telegram + order hub ===== */
.telegram-username-field {
  display: grid;
  gap: 7px;
  margin: 2px 0 0;
}
.telegram-username-field > span {
  font-size: 13px;
  font-weight: 700;
}
.telegram-username-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}
.telegram-username-row input {
  min-width: 0;
  min-height: 48px;
  font-size: 16px;
}
.telegram-username-row button {
  min-height: 48px;
  white-space: nowrap;
  padding-inline: 16px;
}
#customerAlias[data-telegram-verified="1"] {
  border-color: rgba(29,151,85,.48) !important;
  box-shadow: 0 0 0 3px rgba(29,151,85,.08) !important;
}
#customerAlias[data-telegram-verified="0"] {
  border-color: rgba(180,35,24,.22);
}
.telegram-contact-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.telegram-contact-actions button {
  flex: 1 1 150px;
  min-height: 44px;
}
.telegram-privacy-hint {
  opacity: .78;
  font-size: 12px !important;
}
@media (max-width: 430px) {
  .telegram-username-row { grid-template-columns: 1fr; }
  .telegram-username-row button { width: 100%; }
  .telegram-contact-actions { display: grid; grid-template-columns: 1fr; }
}


/* V32.10.4: fast city picker for all CDEK destinations, not only Moscow/SPB. */
.cdek-popular-title {
  padding: 10px 12px 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cdek-popular-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 10px 12px;
}
.cdek-popular-city {
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cdek-popular-city:hover,
.cdek-popular-city:focus-visible { background: rgba(17,17,17,.06); outline: none; }
.cdek-popular-city:disabled { opacity: .55; cursor: wait; }
@media (max-width: 520px) {
  .cdek-popular-grid { gap: 6px; padding-inline: 8px; }
  .cdek-popular-city { min-height: 34px; padding: 7px 10px; font-size: 12px; }
}

/* UKEY_LAYOUT_POLISH_V1 BEGIN */
/* Square source artwork must remain whole at every viewport width. */
#customSection .custom-price-card > img,
#customPlanModal .custom-plan-detail-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
  flex: 0 0 auto !important;
  transform: none !important;
  filter: none !important;
}
#customPlanModal .custom-plan-detail-media {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  align-self: start !important;
}

/* Keep the existing system font; use readable weights and spacing. */
.hero .hero-copy h1 {
  font-size: clamp(36px, 5.4vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
  margin-bottom: 24px !important;
  overflow-wrap: break-word;
}
.app-shell .section-head h2,
.app-shell .wholesale-section h2,
.app-shell .faq-section h2,
#customSection .custom-pricing-head h2 {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: -.02em !important;
  overflow-wrap: break-word;
}
#customSection .custom-pricing-head { margin-bottom: 22px !important; }
#customSection .custom-price-body {
  padding: 18px !important;
  gap: 10px !important;
  text-align: left !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
#customSection .custom-price-body h3 {
  margin: 0 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
}
#customSection .custom-price-body p,
#customSection .custom-note.compact p:not(.eyebrow),
#customPlanModal .custom-plan-subtitle,
#customPlanModal .custom-plan-list li {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: normal !important;
}
#customSection .custom-price-body p {
  margin: 0 0 8px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
}
#customSection .custom-price-body strong,
#customPlanModal .custom-plan-price {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
}
#customSection .custom-price-body strong { margin-top: auto !important; }
#customSection .custom-card-action,
#customSection .custom-note.compact .secondary,
#customPlanModal .custom-plan-actions .primary,
#customPlanModal .custom-plan-actions .secondary {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: normal !important;
  min-height: 46px !important;
  height: auto !important;
  text-align: center !important;
}
#customSection .custom-card-action {
  margin-top: 4px !important;
  padding: 12px !important;
}
#customSection .custom-note.compact h2,
#customPlanModal .custom-plan-detail-body h2 {
  font-size: clamp(28px, 3vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  overflow-wrap: break-word;
}
/* UKEY_LAYOUT_POLISH_V1 END */

/* DELIVERY_MANUAL_PVZ_V1 */
#cartModal #cdekPvzInput {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: vertical;
}
#cartModal #cdekPvzInput:focus-visible {
  outline: 2px solid #15925d;
  outline-offset: 2px;
}
#cdekPvzHelp { line-height: 1.5; }

/* CHECKOUT_DESIGN_V1: in-flow choices, full addresses and graded offers. */
.promo-strip-expanded .promo-code-card { background:var(--offer-fill); border:1px solid var(--offer-border); box-shadow:none; padding:24px; }
.promo-strip-expanded .promo-code-card > span { background:rgba(255,255,255,.65);color:var(--offer-ink);border-color:var(--offer-border); }
.promo-strip-expanded .promo-code-card > strong {font-size:clamp(24px,2.05vw,32px);line-height:1.15;color:var(--offer-ink);letter-spacing:-.7px;}
.promo-strip-expanded .promo-code-card > p { color:#3f4145;line-height:1.55; }
.collector-promo-card,.offer-collector {--offer-fill:#edf0ff;--offer-border:#c6cff5;--offer-ink:#33418a;}
.weekly-promo-card,.offer-weekly {--offer-fill:#fff0d5;--offer-border:#ebd1a1;--offer-ink:#805000;}
.bundle-promo-card,.offer-bundle {--offer-fill:#ffded4;--offer-border:#f2b6a4;--offer-ink:#8e341c;}
.shipping-promo-card,.offer-shipping {--offer-fill:#dceee2;--offer-border:#add0b8;--offer-ink:#245c3a;}
#cartModal .cart-offers {display:grid;gap:9px;margin:18px 0 22px;}
#cartModal .cart-offer {display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap;padding:13px 16px;background:var(--offer-fill);color:var(--offer-ink);border:1px solid var(--offer-border);border-radius:15px;font-size:14px;line-height:1.45;}
#cartModal .cart-offer strong {font-weight:750;}
#cartModal .cart-offer span {font-weight:500;}
#cartModal .checkout-choice-field {border:0;padding:0;margin:0;min-width:0;}
#cartModal .checkout-choice-field legend,#cartModal .pvz-list-heading {margin:0 0 10px;font-size:13px;font-weight:750;line-height:1.4;color:#625e58;letter-spacing:.03em;}
#cartModal .delivery-method-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#cartModal .checkout-form .delivery-option {display:flex;align-items:flex-start;gap:11px;position:relative;min-width:0;margin:0;padding:16px;background:#fff;border:1px solid #dad7d1;border-radius:18px;cursor:pointer;transition:background .15s,border-color .15s;}
#cartModal .checkout-form .delivery-option:has(input:checked) {background:#eaf3ee;border-color:#5c9e78;box-shadow:inset 0 0 0 1px #5c9e78;}
#cartModal .checkout-form .delivery-option:focus-within {outline:3px solid #326a4a;outline-offset:3px;}
#cartModal .checkout-form .delivery-option input[type=radio] {appearance:auto;flex:0 0 18px;width:18px;height:18px;min-height:0;margin:3px 0 0;padding:0;accent-color:#26734b;}
#cartModal .choice-body {display:grid;gap:5px;min-width:0;flex:1;letter-spacing:normal;text-transform:none;}
#cartModal .choice-body strong {font-size:16px;line-height:1.35;font-weight:700;color:#18241d;overflow-wrap:anywhere;}
#cartModal .choice-body small {font-size:13px;line-height:1.45;color:#5d665f;font-weight:400;letter-spacing:normal;text-transform:none;}
#cartModal .tariff-cards {display:grid;gap:10px;}
#cartModal .tariff-price {display:grid;gap:3px;flex-shrink:0;color:#1c3e2b;font-size:20px;font-weight:750;line-height:1.3;letter-spacing:-.3px;white-space:nowrap;}
#cartModal .tariff-price small {font-size:12px;color:#636c66;text-align:right;font-weight:400;}
#cartModal .cdek-checkout {display:grid;gap:20px;padding:18px;background:#fafbf9;}
#cartModal .cdek-checkout > * {min-width:0;margin-top:0;}
#cartModal .cdek-route-line {padding-bottom:0;}
#cartModal #cdekPvzInput {min-height:92px;padding:15px 16px;resize:vertical;line-height:1.5;font-size:16px;overflow-wrap:anywhere;}
#cartModal .cdek-pvz-choice {display:grid;gap:10px;}
#cartModal .pvz-list-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 0;}
#cartModal .pvz-text-button {min-height:44px;max-width:100%;padding:8px 0;background:transparent;border:0;border-radius:6px;color:#246e48;font:inherit;font-size:14px;font-weight:650;letter-spacing:normal;text-transform:none;text-decoration:underline;text-underline-offset:3px;}
#cartModal .pvz-cards {display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-height:460px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:3px;}
#cartModal .pvz-cards:empty {display:none;}
#cartModal .pvz-card {display:grid;gap:9px;width:100%;min-width:0;padding:16px;text-align:left;white-space:normal;overflow-wrap:anywhere;border:1px solid #d8ded9;border-radius:16px;background:#fff;color:#222b25;font:inherit;letter-spacing:normal;text-transform:none;box-shadow:none;}
#cartModal .pvz-card strong {font-size:16px;font-weight:650;line-height:1.45;}
#cartModal .pvz-card-meta {font-size:13px;font-weight:400;line-height:1.5;color:#626a65;}
#cartModal .pvz-card-action {font-size:14px;font-weight:650;line-height:1.4;color:#246c46;}
#cartModal .pvz-card[aria-pressed=true] {background:#e5f1e9;border-color:#528d67;box-shadow:inset 0 0 0 1px #528d67;}
#cartModal .pvz-card:focus-visible,#cartModal .pvz-text-button:focus-visible {outline:3px solid #326a4a;outline-offset:2px;}
#cartModal .pvz-selected {background:#e5f1e9;border:1px solid #bed8c7;border-radius:12px;padding:12px 14px;color:#24563b;font-size:14px;line-height:1.5;overflow-wrap:anywhere;}
#cartModal .delivery-hint {font-size:13px;line-height:1.5;letter-spacing:normal;text-transform:none;font-weight:400;}
#cartModal .cdek-result {margin:0;line-height:1.5;overflow-wrap:anywhere;}
#cartModal .promo-code-field {padding:17px;border:1px solid #c6cff5;border-radius:18px;background:#edf0ff;}
#cartModal .promo-code-field > span {color:#33418a;}
#cartModal .promo-input-row {min-width:0;}
#cartModal #promoCodeInput {min-width:0;font-size:16px;text-transform:uppercase;}
#cartModal #orderResult {scroll-margin:20px 0 100px;line-height:1.55;overflow-wrap:anywhere;}
#cartModal .cdek-city-suggestions {position:static;max-height:280px;margin-top:8px;box-shadow:none;}
#cartModal .hidden {display:none !important;}
@media(max-width:540px) {
  #cartModal .delivery-method-cards {grid-template-columns:minmax(0,1fr);}
  #cartModal .cdek-checkout {padding:14px;gap:18px;}
  #cartModal .checkout-form .delivery-option {padding:14px;}
  #cartModal .tariff-option {flex-wrap:wrap;}
  #cartModal .tariff-option .choice-body {flex-basis:calc(100% - 32px);}
  #cartModal .tariff-price {margin-left:29px;}
  #cartModal .pvz-cards {max-height:420px;}
  #cartModal .pvz-card {padding:14px;}
  #cartModal .cart-offer {display:grid;gap:4px;}
  #cartModal .promo-input-row {display:grid;grid-template-columns:minmax(0,1fr) !important;gap:9px;}
  #cartModal .promo-input-row button {width:100%;min-height:48px;}
  .promo-strip-expanded .promo-code-card {padding:20px;}
}

/* PVZ_SEARCH_V2: full address suggestions remain below the input, in document flow. */
#cartModal .pvz-cards {max-height:none;overflow:visible;scrollbar-gutter:auto;padding:3px;}
#cartModal .pvz-card,#cartModal .pvz-card strong,#cartModal .pvz-card-meta {white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;max-height:none;line-clamp:unset;-webkit-line-clamp:unset;}
#cartModal #cdekPvzHeading {margin:8px 0 0;}

/* Checkout Telegram recovery: wrapping controls, no off-screen actions. */
.checkout-telegram-recovery{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;}
.checkout-telegram-recovery.hidden{display:none;}
.checkout-telegram-recovery button{flex:1 1 190px;min-height:48px;white-space:normal;line-height:1.3;}

/* v32.11.13: explicit offer colours override legacy important declarations. */
.promo-strip-expanded .promo-code-card.collector-promo-card {background:linear-gradient(145deg,#edf0ff,#fffdf9) !important;border-color:#c6cff5 !important;}
.promo-strip-expanded .promo-code-card.collector-promo-card > span {background:#edf0ff !important;color:#33418a !important;border-color:#c6cff5 !important;}
.promo-strip-expanded .promo-code-card.collector-promo-card > strong {color:#33418a !important;}
.promo-strip-expanded .promo-code-card.weekly-promo-card {background:linear-gradient(145deg,#fff0d5,#fffdf9) !important;border-color:#ebd1a1 !important;}
.promo-strip-expanded .promo-code-card.weekly-promo-card > span {background:#fff0d5 !important;color:#805000 !important;border-color:#ebd1a1 !important;}
.promo-strip-expanded .promo-code-card.weekly-promo-card > strong {color:#805000 !important;}
.promo-strip-expanded .promo-code-card.bundle-promo-card {background:linear-gradient(145deg,#ffded4,#fffdf9) !important;border-color:#f2b6a4 !important;}
.promo-strip-expanded .promo-code-card.bundle-promo-card > span {background:#ffded4 !important;color:#8e341c !important;border-color:#f2b6a4 !important;}
.promo-strip-expanded .promo-code-card.bundle-promo-card > strong {color:#8e341c !important;}
.promo-strip-expanded .promo-code-card.shipping-promo-card {background:linear-gradient(145deg,#dceee2,#fffdf9) !important;border-color:#add0b8 !important;}
.promo-strip-expanded .promo-code-card.shipping-promo-card > span {background:#dceee2 !important;color:#245c3a !important;border-color:#add0b8 !important;}
.promo-strip-expanded .promo-code-card.shipping-promo-card > strong {color:#245c3a !important;}


/* CATALOG_CHOICES_V321115 */
.catalog-hub { min-width:0; scroll-margin-top:100px; }
.catalog-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.catalog-choice { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:24px; border:1px solid #ded8d0; border-radius:24px; background:#fffdf9; color:#24211e; text-align:left; cursor:pointer; transition:background .18s,border-color .18s; }
.catalog-choice:hover { background:#f0ecf9; border-color:#aa97d3; }
.catalog-choice.is-active { background:#e9e0fa; border-color:#b59bdc; }
.catalog-choice-kicker { color:#716976; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.catalog-choice strong { font-size:clamp(21px,2.6vw,34px); line-height:1.15; letter-spacing:-.025em; }
.catalog-choice-detail { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#625b65; font-size:14px; line-height:1.4; }
.catalog-choice-detail i { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; background:#fff; border-radius:50%; font-style:normal; font-size:22px; }
.catalog-choice:focus-visible { outline:3px solid #8060b6; outline-offset:3px; }
.catalog-panel[hidden] { display:none !important; }
@media (max-width:540px) {
  .catalog-choices { gap:10px; margin:20px 0; }
  .catalog-choice { padding:16px 13px; border-radius:20px; gap:10px; }
  .catalog-choice-kicker { font-size:9px; letter-spacing:.05em; }
  .catalog-choice strong { font-size:22px; }
  .catalog-choice-detail { font-size:12px; gap:4px; }
  .catalog-choice-detail i { width:24px; height:24px; font-size:20px; }
}


/* RESPONSIVE_SECTIONS_V321116 */
.hero.hero-responsive .hero-copy { justify-content:center; gap:0; padding:0; min-width:0; }
.hero.hero-responsive .hero-note,
.hero.hero-responsive .hero-support-grid { width:100%; max-width:none; }
.hero.hero-responsive .hero-actions button { white-space:normal; }
.section-disclosure { min-width:0; }
.section-disclosure > .section-disclosure-heading {
  display:flex; align-items:center !important; justify-content:space-between;
  gap:16px; list-style:none; cursor:pointer; min-height:56px;
}
.section-disclosure-heading::-webkit-details-marker { display:none; }
.section-disclosure-heading::marker { content:""; }
.section-disclosure-heading > div { min-width:0; }
.section-disclosure-heading:focus-visible { outline:3px solid #8060b6; outline-offset:6px; border-radius:12px; }
.section-disclosure-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border:1px solid #ded8d0; border-radius:50%; background:#fffdf9; color:#554269; }
.section-disclosure-icon::before { content:"+"; font-size:24px; line-height:1; font-weight:500; }
.section-disclosure[open] > summary .section-disclosure-icon::before { content:"−"; }
.section-disclosure:not([open]) > .section-disclosure-heading { margin-bottom:0 !important; }
.section-disclosure:not([open]) > .section-disclosure-body { display:none; }
@media (max-width:820px) {
  .hero.hero-responsive .hero-note,
  .hero.hero-responsive .hero-support-grid { display:none !important; }
  .hero.hero-responsive .hero-copy { justify-content:flex-start !important; gap:20px; padding:4px 0 8px; }
  .hero.hero-responsive .badge { margin:0; line-height:1.5; }
  .hero.hero-responsive .hero-copy h1 { margin:0 !important; font-size:clamp(34px,7vw,56px) !important; text-wrap:balance; }
  .hero.hero-responsive .hero-actions { margin:0; }
  .about-section, .wholesale-section { padding:18px; border-radius:24px; }
  .section-disclosure > .section-disclosure-heading { gap:12px; }
  .app-shell .section-disclosure .section-disclosure-heading h2 { font-size:clamp(23px,5.6vw,30px) !important; line-height:1.2 !important; letter-spacing:-.02em !important; }
  .section-disclosure .section-disclosure-heading .eyebrow { font-size:11px; margin-bottom:8px; }
  .section-disclosure[open] > .section-disclosure-heading { margin-bottom:16px !important; }
}


/* Whole-card links for the three cooperation contexts. */
#wholesaleSection a.deal-card {
  position: relative;
  padding-right: 44px !important;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
#wholesaleSection a.deal-card::after {
  content: "↗";
  position: absolute;
  top: 16px;
  right: 16px;
  color: #7652bd;
  font-size: 22px;
  line-height: 1;
}
@media (hover: hover) {
  #wholesaleSection a.deal-card:hover {
    background-color: #f4efff;
    border-color: #ad8ce0;
  }
}
#wholesaleSection a.deal-card:focus-visible {
  outline: 3px solid #7652bd;
  outline-offset: 3px;
}
#wholesaleSection a.deal-card:active { background-color: #e9dffb; }
@media (prefers-reduced-motion: reduce) {
  #wholesaleSection a.deal-card { transition: none; }
}

/* UKEY × Камыш — branded heading; cards use the existing catalogue styles. */
.kamysh-collab{margin:30px 0 38px}
.kamysh-collab[hidden]{display:none}
.kamysh-heading{border:1px solid #d7c9b9;border-radius:26px;background:#eae1d5;color:#302c27;margin-bottom:18px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:28px 34px 24px;overflow:hidden}
.kamysh-label{font-size:10px;font-weight:800;letter-spacing:.18em;color:#78644e}
.kamysh-heading h2{font-size:clamp(28px,3.6vw,46px);line-height:1.15;letter-spacing:-.04em;margin:10px 0 7px;font-weight:850}
.kamysh-heading h2>span{color:#968063;font-weight:450;margin:0 .12em}
.kamysh-heading p{margin:0;color:#786b5d;font-size:14px;line-height:1.5}
.kamysh-seal{z-index:1;font-size:12px;line-height:1.6;text-align:right;margin-right:94px;color:#6c5b46}
.kamysh-seal span{color:#9e7650}
.kamysh-reeds{position:absolute;right:24px;bottom:-20px;width:80px;height:134px;color:#8e7d5b;opacity:.52;transform:rotate(7deg)}
.kamysh-footnote{font-size:11px;text-align:center;color:#8c7861;margin:17px 20px 0;line-height:1.5}
@media(max-width:560px){.kamysh-collab{margin:20px 0 28px}.kamysh-heading{border-radius:20px;padding:24px 18px 20px;margin-bottom:14px}.kamysh-heading p{font-size:12px;max-width:220px}.kamysh-heading h2{font-size:31px}.kamysh-seal{display:none}.kamysh-reeds{right:10px;width:65px;opacity:.3}.kamysh-footnote{font-size:10px}}