:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #fcfdff;
  --line: #e7ebf2;
  --line-strong: #d9e0ea;
  --text: #111827;
  --muted: #667085;
  --muted-strong: #4b5565;
  --accent: #ff6900;
  --accent-soft: #ffede1;
  --accent-dark: #f45800;
  --navy: #081d42;
  --navy-soft: #132d62;
  --green: #1d9d46;
  --shadow-lg: 0 20px 48px rgba(14, 23, 38, 0.08);
  --shadow-sm: 0 10px 24px rgba(10, 17, 30, 0.05);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --page-width: min(1380px, calc(100vw - 36px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at top, rgba(255, 140, 66, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0, var(--bg) 240px);
  color: var(--text);
  font-family: "Manrope", sans-serif;
}

.legal-links-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  padding: 28px 0 36px;
  color: var(--muted);
  font-size: 0.92rem;
}

.legal-links-footer a {
  color: inherit;
  font-weight: 800;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.icon--xs {
  width: 1rem;
  height: 1rem;
}

.icon--sm {
  width: 1.125rem;
  height: 1.125rem;
}

.icon--md {
  width: 1.4rem;
  height: 1.4rem;
}

.icon--lg {
  width: 1.65rem;
  height: 1.65rem;
}

.icon--flip {
  transform: scaleX(-1);
}

.page-width {
  width: var(--page-width);
  margin: 0 auto;
}

.site-shell {
  padding-bottom: 32px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(219, 226, 236, 0.9);
}

.site-header__top {
  display: grid;
  grid-template-columns: auto auto minmax(320px, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 92px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.brand__market {
  color: var(--accent);
}

.brand__place {
  color: #273142;
}

.catalog-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.catalog-button:hover {
  border-color: #c6d0de;
  transform: translateY(-1px);
}

.catalog-button.is-open {
  border-color: rgba(255, 105, 0, 0.42);
  background: #fff7f0;
  color: var(--accent-dark);
}

.catalog-dropdown {
  position: absolute;
  z-index: 75;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(217, 224, 234, 0.95);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 247, 240, 0.64), rgba(255, 255, 255, 0.96) 34%),
    #fff;
  box-shadow: 0 24px 48px rgba(11, 19, 32, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.catalog-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.catalog-dropdown__head {
  display: grid;
  gap: 4px;
  padding: 8px 8px 10px;
}

.catalog-dropdown__head strong {
  font-size: 1.04rem;
}

.catalog-dropdown__head span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.catalog-dropdown__list {
  display: grid;
  gap: 8px;
}

.catalog-dropdown__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.catalog-dropdown__item:hover,
.catalog-dropdown__item:focus-visible {
  border-color: rgba(255, 105, 0, 0.24);
  background: #fff;
  transform: translateX(2px);
  outline: 0;
}

.catalog-dropdown__badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff2e8, #ffe2cc);
  color: var(--accent-dark);
  font-weight: 900;
}

.catalog-dropdown__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.catalog-dropdown__copy strong {
  color: var(--text);
}

.catalog-dropdown__copy small,
.catalog-dropdown__item em {
  color: var(--muted);
  font-size: 0.84rem;
  font-style: normal;
}

.catalog-dropdown__item em {
  white-space: nowrap;
  font-weight: 800;
}

.search-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  min-height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.search-panel__field {
  display: flex;
}

.search-panel__field input {
  width: 100%;
  padding: 0 18px;
  border: 0;
  outline: 0;
  color: var(--text);
}

.search-panel__field input::placeholder {
  color: #8c96a5;
}

.search-panel__category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid var(--line);
  background: #fbfcfe;
  color: var(--muted-strong);
}

.search-panel__category.is-open {
  color: var(--accent-dark);
  background: #fff7f0;
}

.search-category-menu {
  position: absolute;
  z-index: 76;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(217, 224, 234, 0.95);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 38px rgba(11, 19, 32, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.search-category-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.search-category-menu__item {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #344054;
  text-align: left;
  font-weight: 800;
}

.search-category-menu__item:hover,
.search-category-menu__item:focus-visible {
  background: #fff4ea;
  color: var(--accent-dark);
  outline: 0;
}

.search-panel__submit {
  padding: 0 26px;
  border: 0;
  background: linear-gradient(180deg, #ff7a17, var(--accent));
  color: #fff;
  font-weight: 700;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.header-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 12px;
  border-radius: 14px;
  color: #1f2937;
  transition: background-color 0.2s ease;
}

.header-action:hover {
  background: #f7f8fb;
}

.header-action strong,
.header-action span {
  display: block;
}

.header-action strong {
  font-size: 0.98rem;
  font-weight: 700;
}

.header-action small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

.header-action--account {
  padding-right: 18px;
}

.header-action--cart {
  padding-right: 8px;
}

.cart-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.cart-badge.is-empty {
  display: none;
}

.site-header__nav {
  border-top: 1px solid rgba(229, 234, 240, 0.8);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 50px;
  font-size: 0.98rem;
  color: #303948;
}

.nav-row a {
  position: relative;
  padding: 4px 2px;
  transition: color 0.2s ease;
}

.nav-row a:hover,
.nav-row a.is-accent {
  color: var(--accent);
}

.landing-page {
  padding-top: 42px;
}

.hero,
.surface-strip,
.products-section {
  border: 1px solid rgba(225, 231, 239, 0.88);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(340px, 1.15fr);
  gap: 10px;
  min-height: 426px;
  padding: 30px 34px;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(102deg, rgba(4, 15, 36, 0.96) 0%, rgba(6, 22, 49, 0.96) 44%, rgba(10, 32, 64, 0.82) 100%),
    linear-gradient(180deg, #0f254f, #081a35);
  color: #fff;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
  padding-left: 18px;
}

.hero__kicker {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero__title {
  margin: 0;
  font-size: clamp(2.6rem, 4.5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.06em;
}

.hero__title span {
  display: block;
  color: var(--accent);
}

.hero__description {
  max-width: 430px;
  margin: 20px 0 28px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.15rem;
  line-height: 1.65;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 160px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff7d1f, var(--accent));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(255, 106, 0, 0.26);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(255, 106, 0, 0.3);
}

.hero__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 46px;
}

.hero__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.hero__dots button.is-active {
  width: 24px;
  background: var(--accent);
}

.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(26, 35, 56, 0.72);
  color: #fff;
  transform: translateY(-50%);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero__arrow:hover {
  background: rgba(35, 45, 71, 0.92);
  transform: translateY(-50%) scale(1.04);
}

.hero__arrow--left {
  left: 12px;
}

.hero__arrow--right {
  right: 12px;
}

.hero__visual {
  position: relative;
  min-height: 360px;
}

.scene,
.glow,
.wheel,
.washer-bottle,
.spray-bottle,
.foam-bottle,
.sponge,
.device,
.home-item,
.fashion-item {
  position: absolute;
}

.scene {
  inset: 0;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.hero[data-theme="auto"] .scene--auto,
.hero[data-theme="tech"] .scene--tech,
.hero[data-theme="home"] .scene--home,
.hero[data-theme="fashion"] .scene--fashion {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.glow {
  inset: auto auto 24px 12%;
  width: 72%;
  height: 180px;
  border-radius: 999px;
  filter: blur(38px);
  opacity: 0.55;
}

.glow--auto {
  background: radial-gradient(circle, rgba(37, 125, 255, 0.38), transparent 68%);
}

.glow--tech {
  background: radial-gradient(circle, rgba(72, 209, 255, 0.34), transparent 68%);
}

.glow--home {
  background: radial-gradient(circle, rgba(255, 191, 90, 0.3), transparent 68%);
}

.glow--fashion {
  background: radial-gradient(circle, rgba(255, 103, 148, 0.3), transparent 68%);
}

.wheel {
  right: -44px;
  bottom: -34px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #111827 0 24%, #414959 24.5% 26%, #121821 26.5% 35%, #4f5664 35.5% 38%, #0c1118 38.5% 63%, #5b6470 63.5% 66%, #090d13 66.5%);
  box-shadow:
    inset 0 0 0 14px #080b11,
    inset 0 0 0 30px #2d3541,
    inset 0 0 42px rgba(255, 255, 255, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.45);
}

.wheel::before,
.wheel::after {
  content: "";
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.wheel::before {
  width: 184px;
  height: 184px;
  background:
    conic-gradient(from 16deg, #d5d9e2 0 7%, transparent 7% 16%, #d5d9e2 16% 23%, transparent 23% 32%, #d5d9e2 32% 39%, transparent 39% 48%, #d5d9e2 48% 55%, transparent 55% 64%, #d5d9e2 64% 71%, transparent 71% 80%, #d5d9e2 80% 87%, transparent 87% 96%, #d5d9e2 96%);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.25));
}

.wheel::after {
  width: 72px;
  height: 72px;
  background:
    radial-gradient(circle at 50% 50%, #404854 0 16%, #b4bcc8 16.5% 24%, #59616d 24.5% 100%);
}

.washer-bottle {
  left: 18%;
  bottom: 8px;
  width: 172px;
  height: 252px;
  border-radius: 18px 18px 22px 22px;
  background: linear-gradient(180deg, #2aa0ff 0%, #1985ef 36%, #0a67c8 100%);
  box-shadow:
    inset -16px 0 24px rgba(0, 0, 0, 0.18),
    inset 10px 0 16px rgba(255, 255, 255, 0.18),
    0 28px 30px rgba(3, 12, 30, 0.34);
}

.washer-bottle::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 30px;
  width: 88px;
  height: 38px;
  border: 14px solid rgba(255, 255, 255, 0.94);
  border-right-width: 20px;
  border-radius: 22px;
  opacity: 0.85;
}

.washer-bottle__cap {
  position: absolute;
  top: -8px;
  left: 88px;
  width: 36px;
  height: 28px;
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(180deg, #ff4f39, #d81d15);
  box-shadow: 0 8px 16px rgba(99, 14, 10, 0.28);
}

.washer-bottle__handle {
  position: absolute;
  top: 30px;
  right: 18px;
  width: 30px;
  height: 76px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(7, 54, 104, 0.55));
}

.washer-bottle__label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(230, 244, 255, 0.96)),
    linear-gradient(180deg, #ddf1ff, #ffffff);
  color: #083b74;
  text-align: center;
  box-shadow: inset 0 0 0 2px rgba(85, 162, 230, 0.18);
}

.washer-bottle__label strong {
  color: #d62a17;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.washer-bottle__label span {
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.washer-bottle__label small {
  align-self: flex-end;
  color: #0a4b8e;
  font-size: 1.4rem;
  font-weight: 800;
}

.spray-bottle {
  left: 50%;
  bottom: 14px;
  width: 108px;
  height: 218px;
  border-radius: 22px 22px 16px 16px;
  background:
    linear-gradient(180deg, #1b1f27 0%, #0f141c 38%, #06090d 100%);
  box-shadow:
    inset -14px 0 16px rgba(255, 255, 255, 0.06),
    0 26px 30px rgba(0, 0, 0, 0.38);
}

.spray-bottle::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 40px;
  width: 28px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(180deg, #101722, #06080d);
}

.spray-bottle__head {
  position: absolute;
  top: -12px;
  left: 10px;
  width: 82px;
  height: 48px;
  border-radius: 22px 18px 16px 16px;
  background:
    linear-gradient(180deg, #303742, #171c24);
  clip-path: polygon(0 76%, 20% 76%, 32% 16%, 82% 16%, 100% 40%, 84% 54%, 84% 76%, 0 76%);
}

.spray-bottle__label {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 20px 10px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(29, 29, 29, 0.2), rgba(18, 18, 18, 0.85));
  color: #fff;
  text-transform: uppercase;
}

.spray-bottle__label strong {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.spray-bottle__label span {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ebf1f7;
}

.foam-bottle {
  left: 64%;
  bottom: 12px;
  width: 104px;
  height: 214px;
  border-radius: 18px 18px 14px 14px;
  background: linear-gradient(180deg, #f7f7f7 0%, #c7c8cc 40%, #7d8088 100%);
  box-shadow:
    inset -10px 0 16px rgba(0, 0, 0, 0.16),
    0 20px 28px rgba(0, 0, 0, 0.3);
}

.foam-bottle__cap {
  position: absolute;
  top: -8px;
  left: 35px;
  width: 34px;
  height: 24px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #21252c, #080a0d);
}

.foam-bottle__label {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1f2329, #07090d);
  color: #fff;
  text-transform: uppercase;
}

.foam-bottle__label strong {
  font-size: 1rem;
  font-weight: 800;
}

.foam-bottle__label span {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.72);
}

.sponge {
  right: 68px;
  bottom: 22px;
  width: 112px;
  height: 62px;
  border-radius: 10px 10px 6px 6px;
  background:
    linear-gradient(180deg, #ffe57c 0%, #f2c13d 100%);
  box-shadow:
    inset -10px -8px 10px rgba(161, 108, 5, 0.16),
    0 16px 20px rgba(0, 0, 0, 0.2);
}

.sponge::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 10px 10px, rgba(255, 255, 255, 0.34) 0 2px, transparent 2px),
    radial-gradient(circle at 34px 22px, rgba(255, 255, 255, 0.24) 0 2px, transparent 2px),
    radial-gradient(circle at 52px 16px, rgba(255, 255, 255, 0.24) 0 2px, transparent 2px),
    radial-gradient(circle at 68px 34px, rgba(255, 255, 255, 0.24) 0 2px, transparent 2px),
    radial-gradient(circle at 84px 18px, rgba(255, 255, 255, 0.22) 0 2px, transparent 2px);
}

.device--panel {
  right: -20px;
  bottom: -24px;
  width: 360px;
  height: 280px;
  border-radius: 42px;
  background:
    radial-gradient(circle at 30% 24%, rgba(103, 236, 255, 0.24), transparent 32%),
    linear-gradient(135deg, #111928, #050b16 55%, #081529 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 40px rgba(0, 0, 0, 0.34);
}

.device--phone {
  left: 28%;
  bottom: 20px;
  width: 138px;
  height: 260px;
  border-radius: 32px;
  padding: 10px;
  background: linear-gradient(145deg, #dce7f2, #aab6c7 42%, #5d6776 100%);
  box-shadow: 0 24px 28px rgba(0, 0, 0, 0.28);
}

.device__screen {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(180deg, #0f2d59 0%, #1f7ae0 46%, #6fe0ff 100%);
}

.device--watch {
  left: 52%;
  bottom: 18px;
  width: 136px;
  height: 136px;
  border-radius: 36px;
  background:
    linear-gradient(145deg, #202735, #0f1219);
  box-shadow: inset 0 0 0 10px #111827, 0 16px 26px rgba(0, 0, 0, 0.32);
}

.device--watch::before,
.device--watch::after {
  content: "";
  position: absolute;
  left: 42px;
  width: 52px;
  height: 34px;
  border-radius: 18px;
  background: linear-gradient(180deg, #181f2c, #080b12);
}

.device--watch::before {
  top: -24px;
}

.device--watch::after {
  bottom: -24px;
}

.device--case {
  left: 66%;
  bottom: 36px;
  width: 122px;
  height: 84px;
  border-radius: 44px 44px 20px 20px;
  background: linear-gradient(180deg, #f3f6f9, #c8d1dc 50%, #99a8b9);
  box-shadow: 0 18px 24px rgba(0, 0, 0, 0.24);
}

.device--earbud {
  bottom: 134px;
  width: 36px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f5f8fc, #cbd4e0);
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.18);
}

.device--earbud::after {
  content: "";
  position: absolute;
  inset: 10px 11px auto;
  height: 14px;
  border-radius: 999px;
  background: #1d2430;
}

.device--earbud-left {
  left: 70%;
  transform: rotate(-18deg);
}

.device--earbud-right {
  left: 78%;
  transform: rotate(16deg);
}

.home-item--wall {
  right: -24px;
  bottom: -22px;
  width: 360px;
  height: 300px;
  border-radius: 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(24, 24, 24, 0)),
    linear-gradient(180deg, #5b473b, #32241f 64%, #241815);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.home-item--chair {
  left: 28%;
  bottom: 18px;
  width: 164px;
  height: 164px;
  border-radius: 36px 36px 52px 52px;
  background:
    linear-gradient(180deg, #f2dfcf, #d0ab88 48%, #935f3c 100%);
  box-shadow: 0 24px 28px rgba(0, 0, 0, 0.26);
}

.home-item--chair::before,
.home-item--chair::after {
  content: "";
  position: absolute;
  bottom: -28px;
  width: 14px;
  height: 48px;
  border-radius: 999px;
  background: #2a1b17;
}

.home-item--chair::before {
  left: 28px;
}

.home-item--chair::after {
  right: 28px;
}

.home-item--table {
  left: 56%;
  bottom: 22px;
  width: 120px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ead8be, #b48659);
  box-shadow: 0 18px 24px rgba(0, 0, 0, 0.22);
}

.home-item--table::before {
  content: "";
  position: absolute;
  left: 52px;
  top: 70px;
  width: 16px;
  height: 88px;
  border-radius: 999px;
  background: #624020;
}

.home-item--plant {
  left: 72%;
  bottom: 34px;
  width: 92px;
  height: 140px;
}

.home-item--plant::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 0;
  width: 56px;
  height: 50px;
  border-radius: 12px 12px 18px 18px;
  background: linear-gradient(180deg, #d39d4c, #8a5a25);
}

.home-item--plant::after {
  content: "";
  position: absolute;
  inset: 0 0 36px;
  background:
    radial-gradient(circle at 26px 60px, #78c55c 0 18px, transparent 19px),
    radial-gradient(circle at 46px 34px, #4da24a 0 20px, transparent 21px),
    radial-gradient(circle at 60px 64px, #72bf58 0 18px, transparent 19px),
    radial-gradient(circle at 40px 84px, #4c924a 0 24px, transparent 25px);
}

.home-item--lamp {
  left: 18%;
  bottom: 12px;
  width: 80px;
  height: 220px;
}

.home-item--lamp::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  width: 38px;
  height: 76px;
  border-radius: 26px 26px 14px 14px;
  background: linear-gradient(180deg, #fff4d2, #d9bb7d);
}

.home-item--lamp::after {
  content: "";
  position: absolute;
  left: 38px;
  top: 70px;
  width: 6px;
  height: 132px;
  border-radius: 999px;
  background: #1f140d;
  box-shadow: 0 130px 0 18px #261a12;
}

.fashion-item--backdrop {
  right: -10px;
  bottom: -22px;
  width: 362px;
  height: 286px;
  border-radius: 44px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
    linear-gradient(135deg, #261b2f, #100912 58%, #2e1728);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.fashion-item--bag {
  left: 58%;
  bottom: 24px;
  width: 134px;
  height: 132px;
  border-radius: 26px;
  background: linear-gradient(180deg, #f2dfbd, #d7b37e 48%, #a97436);
  box-shadow: 0 20px 24px rgba(0, 0, 0, 0.24);
}

.fashion-item--bag::before {
  content: "";
  position: absolute;
  left: 28px;
  top: -30px;
  width: 78px;
  height: 52px;
  border: 10px solid #d0a35d;
  border-bottom: 0;
  border-radius: 38px 38px 0 0;
}

.fashion-item--shirt {
  left: 28%;
  bottom: 22px;
  width: 154px;
  height: 172px;
  border-radius: 28px 28px 18px 18px;
  background: linear-gradient(180deg, #ffffff, #dfe6ef 70%, #bcc9d9);
  clip-path: polygon(18% 0, 34% 0, 42% 10%, 58% 10%, 66% 0, 82% 0, 100% 20%, 86% 36%, 82% 28%, 82% 100%, 18% 100%, 18% 28%, 14% 36%, 0 20%);
  box-shadow: 0 24px 28px rgba(0, 0, 0, 0.22);
}

.fashion-item--shoe {
  bottom: 22px;
  width: 120px;
  height: 48px;
  border-radius: 30px 18px 18px 18px;
  background: linear-gradient(180deg, #ff8db4, #e25187 60%, #74224d);
  box-shadow: 0 18px 22px rgba(0, 0, 0, 0.2);
}

.fashion-item--shoe::after {
  content: "";
  position: absolute;
  inset: auto 12px -8px 8px;
  height: 14px;
  border-radius: 999px;
  background: #faf7f6;
}

.fashion-item--shoe-left {
  left: 52%;
  transform: rotate(-8deg);
}

.fashion-item--shoe-right {
  left: 70%;
  transform: rotate(6deg);
}

.surface-strip {
  display: grid;
  gap: 18px;
  padding: 20px 26px;
  border-radius: 20px;
  margin-top: 18px;
}

.category-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 28px;
}

.category-card,
.benefit-card,
.trust-card {
  display: flex;
  align-items: center;
}

.category-card {
  flex: 0 1 236px;
  gap: 12px;
  min-width: 0;
}

.category-card span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.category-card strong {
  font-size: 1rem;
}

.category-card small {
  color: var(--muted);
  font-size: 0.86rem;
}

.category-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: #253041;
  background: linear-gradient(180deg, #fff, #fafbfd);
}

.category-card__icon--accent {
  color: var(--accent);
  border-color: rgba(255, 105, 0, 0.26);
  background: linear-gradient(180deg, #fff5ef, #fff);
}

.benefits-strip,
.trust-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.benefit-card,
.trust-card {
  gap: 16px;
  min-width: 0;
}

.benefit-card .icon,
.trust-card .icon {
  width: 2rem;
  height: 2rem;
  color: #1e2738;
}

.benefit-card strong,
.trust-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

.benefit-card p,
.trust-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.benefit-card span {
  color: var(--accent);
  font-weight: 800;
}

.products-section {
  position: relative;
  padding: 22px 26px 18px;
  border-radius: 20px;
  margin-top: 18px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.section-heading h2 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.section-heading a {
  color: var(--accent);
  font-weight: 700;
}

.products-shell {
  position: relative;
}

.products-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 80px) / 6);
  gap: 16px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.products-track::-webkit-scrollbar {
  display: none;
}

.product-card {
  position: relative;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #fcfdff);
  min-width: 0;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 24px rgba(11, 19, 32, 0.08);
}

.product-card__wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #8891a1;
}

.product-card__media {
  display: grid;
  place-items: center;
  height: 150px;
  margin-bottom: 14px;
}

.product-card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  min-height: 58px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 10px;
  color: #465063;
  font-size: 0.92rem;
}

.stars {
  color: #ffb91c;
  letter-spacing: 0.03em;
}

.rating small {
  color: #778095;
  font-size: 0.84rem;
}

.price {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.shipping {
  margin: 8px 0 0;
  font-weight: 700;
}

.shipping--fast {
  color: var(--green);
}

.shipping--free {
  color: #179657;
}

.product-card__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 1px solid rgba(255, 105, 0, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff4ea, #ffe8d7);
  color: var(--accent-dark);
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.product-card__add:hover,
.product-card__add.is-added {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(255, 105, 0, 0.14);
  background: linear-gradient(180deg, #ff7a17, var(--accent));
  color: #fff;
}

.cart-toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.cart-toast {
  min-width: 260px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(12, 22, 38, 0.92);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 18px 34px rgba(10, 17, 30, 0.24);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cart-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.products-next {
  position: absolute;
  top: 50%;
  right: -14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #2d3748;
  box-shadow: 0 12px 24px rgba(10, 17, 30, 0.12);
  transform: translateY(-50%);
}

.mini-scene {
  position: relative;
  width: 100%;
  height: 100%;
}

.mini-washer,
.mini-spray,
.mini-foam,
.mini-oil,
.mini-holder,
.mini-camera {
  position: absolute;
}

.mini-washer {
  left: 46px;
  bottom: 4px;
  width: 72px;
  height: 108px;
  border-radius: 14px;
  background: linear-gradient(180deg, #299dfd, #0768cc);
  box-shadow: 0 12px 18px rgba(7, 30, 58, 0.14);
}

.mini-washer::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  width: 36px;
  height: 18px;
  border: 7px solid rgba(255, 255, 255, 0.92);
  border-right-width: 10px;
  border-radius: 14px;
}

.mini-washer__cap {
  position: absolute;
  top: -6px;
  left: 36px;
  width: 16px;
  height: 14px;
  border-radius: 4px;
  background: #df3026;
}

.mini-washer__label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(225, 241, 255, 0.95));
}

.mini-spray {
  left: 54px;
  bottom: 4px;
  width: 58px;
  height: 108px;
  border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg, #1c1f25, #06080c);
  box-shadow: 0 12px 18px rgba(7, 30, 58, 0.14);
}

.mini-spray__top {
  position: absolute;
  top: -8px;
  left: 5px;
  width: 45px;
  height: 24px;
  clip-path: polygon(0 78%, 28% 78%, 36% 12%, 80% 12%, 100% 34%, 82% 52%, 82% 78%, 0 78%);
  border-radius: 12px;
  background: linear-gradient(180deg, #303742, #171c24);
}

.mini-spray__label {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 10px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.34));
}

.mini-foam {
  left: 54px;
  bottom: 4px;
  width: 52px;
  height: 104px;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, #f7f7f7, #7f828a);
  box-shadow: 0 12px 18px rgba(7, 30, 58, 0.14);
}

.mini-foam__cap {
  position: absolute;
  top: -6px;
  left: 18px;
  width: 16px;
  height: 12px;
  border-radius: 4px;
  background: #0c1015;
}

.mini-foam__label {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 10px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1d2128, #06080c);
}

.mini-oil {
  left: 46px;
  bottom: 2px;
  width: 70px;
  height: 102px;
  border-radius: 14px 18px 10px 12px;
  background: linear-gradient(180deg, #d1a53e, #8c651a);
  box-shadow: 0 12px 18px rgba(7, 30, 58, 0.14);
}

.mini-oil::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 40px;
  width: 18px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
}

.mini-oil__cap {
  position: absolute;
  top: -7px;
  left: 18px;
  width: 18px;
  height: 14px;
  border-radius: 4px;
  background: #0e1117;
}

.mini-oil__label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.28);
}

.mini-holder {
  left: 38px;
  bottom: 10px;
  width: 90px;
  height: 110px;
}

.mini-holder__arm {
  position: absolute;
  right: 8px;
  bottom: 10px;
  width: 50px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #454d58, #12171e);
  transform: rotate(36deg);
}

.mini-holder__body {
  position: absolute;
  left: 18px;
  top: 4px;
  width: 54px;
  height: 78px;
  border-radius: 18px;
  background: linear-gradient(180deg, #313946, #0d131b);
  box-shadow: 0 12px 18px rgba(7, 30, 58, 0.14);
}

.mini-holder__body::before,
.mini-holder__body::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 14px;
  height: 34px;
  border-radius: 9px;
  background: #161d27;
}

.mini-holder__body::before {
  left: -10px;
}

.mini-holder__body::after {
  right: -10px;
}

.mini-holder__foot {
  position: absolute;
  right: 10px;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #434b56, #151a22);
}

.mini-camera {
  left: 34px;
  bottom: 16px;
  width: 110px;
  height: 96px;
}

.mini-camera__mount {
  position: absolute;
  right: 20px;
  top: 0;
  width: 16px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3d464f, #161b22);
  box-shadow: 10px -8px 0 0 #161b22;
}

.mini-camera__body {
  position: absolute;
  left: 12px;
  bottom: 0;
  width: 90px;
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2d343d, #090d12);
  box-shadow: 0 12px 18px rgba(7, 30, 58, 0.14);
}

.mini-camera__lens {
  position: absolute;
  left: 44px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #7dc5ff 0 20%, #1d3456 22% 42%, #0f1723 44% 64%, #141e2d 66% 100%);
}

.trust-strip {
  margin-top: 18px;
}

.hero[data-theme="auto"],
.hero[data-theme="build"],
.hero[data-theme="clean"] {
  display: block;
  gap: 0;
  min-height: clamp(220px, 27vw, 380px);
  padding: 0;
}

.hero[data-theme="auto"] {
  aspect-ratio: 1922 / 534;
  background:
    #081d42 url("assets/images/hero-motoryzacja-banner.png") center center / cover no-repeat;
}

.hero[data-theme="build"] {
  aspect-ratio: 1927 / 658;
  background:
    #101821 url("assets/images/hero-budowlanka-banner.png") center center / cover no-repeat;
}

.hero[data-theme="clean"] {
  aspect-ratio: 1924 / 658;
  background:
    #edf3ef url("assets/images/hero-dom-banner.png") center center / cover no-repeat;
}

.hero[data-theme="auto"]::after,
.hero[data-theme="build"]::after,
.hero[data-theme="clean"]::after {
  content: none;
}

.hero[data-theme="auto"] .hero__copy,
.hero[data-theme="auto"] .hero__visual,
.hero[data-theme="build"] .hero__copy,
.hero[data-theme="build"] .hero__visual,
.hero[data-theme="clean"] .hero__copy,
.hero[data-theme="clean"] .hero__visual {
  display: none;
}

.hero[data-theme="tech"] {
  background:
    linear-gradient(102deg, rgba(4, 11, 32, 0.98) 0%, rgba(5, 18, 44, 0.96) 42%, rgba(7, 45, 82, 0.88) 100%),
    linear-gradient(180deg, #0f254f, #081a35);
}

.hero[data-theme="home"] {
  background:
    linear-gradient(102deg, rgba(32, 18, 7, 0.92) 0%, rgba(57, 34, 16, 0.94) 48%, rgba(114, 78, 35, 0.82) 100%),
    linear-gradient(180deg, #3c2614, #24170f);
}

.hero[data-theme="fashion"] {
  background:
    linear-gradient(102deg, rgba(28, 12, 23, 0.96) 0%, rgba(46, 14, 31, 0.94) 44%, rgba(112, 33, 69, 0.78) 100%),
    linear-gradient(180deg, #280f1e, #180813);
}

.analytics-consent {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: min(680px, calc(100vw - 28px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(12px);
}

.analytics-consent strong {
  display: block;
  margin-bottom: 5px;
}

.analytics-consent p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.analytics-consent__actions {
  display: flex;
  gap: 10px;
}

.analytics-consent button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.analytics-consent button:last-child {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.staging-notice {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 49;
  display: grid;
  gap: 4px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 13px 15px;
  border: 1px solid rgba(255, 90, 0, 0.28);
  border-radius: 16px;
  background: rgba(255, 247, 237, 0.96);
  color: #7c2d12;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(12px);
}

.staging-notice strong {
  color: #9a3412;
  font-size: 0.94rem;
}

.staging-notice span {
  color: #7c2d12;
  font-size: 0.86rem;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .site-header__top {
    grid-template-columns: auto minmax(200px, 1fr) auto;
    grid-template-areas:
      "brand search actions"
      "catalog search actions";
    align-items: center;
    row-gap: 12px;
    padding: 16px 0;
  }

  .brand {
    grid-area: brand;
  }

  .catalog-button {
    grid-area: catalog;
    width: fit-content;
  }

  .search-panel {
    grid-area: search;
  }

  .header-actions {
    grid-area: actions;
  }

  .category-strip {
    gap: 16px;
  }

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

  .products-track {
    grid-auto-columns: calc((100% - 48px) / 4);
  }
}

@media (max-width: 1080px) {
  .site-header {
    position: static;
  }

  .site-header__top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "catalog"
      "search"
      "actions";
    gap: 12px;
  }

  .header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .nav-row {
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 8px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: unset;
    padding-inline: 26px;
  }

  .hero__copy {
    max-width: 100%;
    padding: 16px 30px 0 52px;
  }

  .hero__visual {
    min-height: 380px;
  }

  .category-strip {
    gap: 14px;
  }

  .category-card {
    flex-basis: 220px;
  }

  .products-track {
    grid-auto-columns: calc((100% - 16px) / 2);
  }
}

@media (max-width: 720px) {
  :root {
    --page-width: min(calc(100vw - 20px), 100%);
  }

  .landing-page {
    padding-top: 24px;
  }

  .brand {
    font-size: 1.9rem;
  }

  .search-panel {
    grid-template-columns: 1fr;
  }

  .search-panel__category,
  .search-panel__submit {
    min-height: 48px;
    justify-content: center;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .hero {
    padding: 22px 18px 18px;
    border-radius: 20px;
  }

  .hero__copy {
    padding: 10px 18px 0 44px;
  }

  .hero__title {
    font-size: 2.35rem;
  }

  .hero__description {
    font-size: 1rem;
  }

  .hero__arrow {
    width: 38px;
    height: 38px;
  }

  .hero__arrow--left {
    left: 8px;
  }

  .hero__arrow--right {
    right: 8px;
  }

  .hero__visual {
    min-height: 300px;
  }

  .wheel {
    width: 240px;
    height: 240px;
  }

  .washer-bottle {
    left: 10%;
    width: 132px;
    height: 194px;
  }

  .washer-bottle__label strong {
    font-size: 1.6rem;
  }

  .spray-bottle,
  .foam-bottle {
    transform: scale(0.82);
    transform-origin: bottom left;
  }

  .sponge {
    right: 24px;
    width: 88px;
    height: 46px;
  }

  .surface-strip,
  .products-section {
    padding: 18px;
  }

  .category-strip,
  .benefits-strip,
  .trust-strip {
    grid-template-columns: 1fr;
  }

  .category-strip {
    justify-content: center;
  }

  .category-card {
    flex-basis: min(100%, 280px);
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-heading h2 {
    font-size: 1.7rem;
  }

  .products-track {
    grid-auto-columns: 84%;
  }

  .products-next {
    display: none;
  }

  .analytics-consent {
    left: 10px;
    right: 10px;
    bottom: 10px;
    grid-template-columns: 1fr;
    width: auto;
  }

  .analytics-consent__actions {
    flex-direction: column;
  }

  .staging-notice {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
  }

  .analytics-consent + .staging-notice,
  .staging-notice:has(+ .analytics-consent) {
    bottom: 170px;
  }
}