/* ==========================================================================
   Hero
   ========================================================================== */
/* z-index both keeps the photo behind the hero's content and lifts the hero
   above the rest of the page: the floating mobile cart lives in here, and
   with a plain isolate it slid under the product tiles further down.
   Stays below the header (100), mega menu (80–90) and dialogs (200+). */
.hero {
  position: relative;
  z-index: 10;
  padding-top: 24px;
  padding-bottom: 40px;
}

/* Content height varies (stacked cards, wrapped search, eyebrow), so the
   photo always covers the whole hero — every element in it is styled light. */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

/* Scrim: text runs the full width on phones, so the photo is dimmed evenly,
   with extra shade at the bottom under the category cards. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%),
    rgba(0, 0, 0, 0.55);
}

/* From tablet up the text sits on the left: near-black under it, then the
   shade falls off fast so the pallet and the shovel on the right keep their
   colour. Soft shades at the top (search bar) and the bottom (cards). */
@media (min-width: 768px) {
  .hero__bg::after {
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 40%),
      /* keeps the search and the icons readable over the bright doorway */
      linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 22%),
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.8) 30%,
        rgba(0, 0, 0, 0.35) 52%,
        rgba(0, 0, 0, 0) 68%
      );
  }
}

/* Dark theme: the bottom melts into the page background instead of ending
   on a hard edge. The light page is white and the card text is white, so
   the light theme keeps the dark edge. Sits above the photo and the scrim. */
:root:not([data-theme="light"]) .hero__bg::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 45%;
  background: linear-gradient(
    to top,
    var(--color-bg) 0%,
    rgba(19, 19, 19, 0.85) 25%,
    rgba(19, 19, 19, 0) 100%
  );
  pointer-events: none;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* On tablets the photo is cropped top and bottom: keep the bottom, so the
   pallet and the shovel sit as high as possible above the cards. */
@media (min-width: 768px) {
  .hero__bg img {
    object-position: 50% 100%;
  }
}

/* From 1440px the photo stops covering the whole hero: it is scaled down and
   pinned to the top right, so the standing shovel ends above the category
   cards instead of behind their blur. Height = the space above the cards
   (hero minus ~270px of cards and padding) ÷ 0.8, since the blade ends at
   80% of the frame — but no wider than keeps the pallet (57% of the frame)
   right of the title (~940px from the left). The left and bottom edges
   melt into the dark background under the text and the cards.
   Below 1440px that would shrink the photo too much — it covers as before. */
@media (min-width: 1440px) {
  /* the dark page colour, so the masked photo edges and the fade match */
  .hero__bg {
    background: #131313;
  }

  .hero__bg img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    max-width: none;
    height: min(calc((100% - 270px) * 1.22), calc((100vw - 940px) * 1.3));
    aspect-ratio: 2560 / 1429;
    -webkit-mask-image:
      linear-gradient(to bottom, #000 72%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, #000 72%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 22%);
    mask-composite: intersect;
  }
}

.hero__utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.hero__search {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-text-light);
  border-radius: var(--radius-sm);
  padding: 13px 20px;
}

.hero__search input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--color-text-light);
  font-size: 14px;
}

.hero__search input::placeholder {
  color: var(--color-text-light);
  opacity: 0.85;
}

/* Inside the photo hero (homepage only) the utility bar sits on the
   image, not the page background, so it stays light regardless of theme. */
.hero .hero__search {
  border-color: var(--color-text-white);
}

.hero .hero__search input,
.hero .hero__search input::placeholder {
  color: var(--color-text-white);
}

.hero__icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-light);
}

.hero .hero__icon-btn {
  color: var(--color-text-white);
}

.hero__icons svg {
  height: 20px;
  width: auto;
  opacity: 0.9;
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-text-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.cart-badge[hidden] {
  display: none;
}

/* Flashes when the count changes, so adding an item is noticeable. */
@keyframes cart-badge-bump {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.5);
    box-shadow: 0 0 0 6px rgba(233, 105, 18, 0.25);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(233, 105, 18, 0);
  }
}

.cart-badge.is-bumped {
  animation: cart-badge-bump 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .cart-badge.is-bumped {
    animation: none;
  }
}

@media (max-width: 767px) {
  .hero__icon-btn--cart {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 250;
    width: 52px;
    height: 52px;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-white);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  }

  .hero__icon-btn--cart svg {
    height: 22px;
  }

  /* Inverted here — an accent badge on the accent bubble would disappear. */
  .hero__icon-btn--cart .cart-badge {
    top: -4px;
    right: -4px;
    background: var(--color-text-white);
    color: var(--color-accent);
  }
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(32px, 8vw, 45px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  max-width: 620px;
  margin-bottom: 20px;
}

.hero .hero__title {
  color: var(--color-text-white);
}

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

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--color-accent);
}

.hero__text {
  font-size: 14px;
  max-width: 420px;
  margin-bottom: 28px;
}

.hero .hero__text {
  color: var(--color-text-white);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 100px;
}

.hero .hero__actions {
  color: var(--color-text-white);
}

/* Stretching to the row height puts the underline on the button's baseline
   while the label stays centred against the button's own label. */
.hero__actions .link-arrow {
  width: 205px;
  gap: 90px;
  align-self: stretch;
  border-bottom: 1px solid currentColor;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: clamp(45px, 6vw, 52px);
  }
}

@media (min-width: 1200px) {
  /* bottom padding keeps the category cards off the photo's edge */
  .hero {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  /* the title runs in three lines now — a smaller gap keeps the text block
     up near the search bar */
  .hero__utility {
    max-width: 1460px;
    margin-bottom: 56px;
  }

  .hero__search {
    min-width: 560px;
  }

  /* Narrow enough to wrap after "снегоуборочный" and "оптом от": the title
     stays in the shaded left half and never runs into the pallet. */
  .hero__title {
    font-size: 59px;
    max-width: 800px;
  }

  .hero__text {
    max-width: 560px;
  }
}

/* hero category cards */
.hero-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.hero-card {
  --hover-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(238, 238, 238, 0.18);
  border-radius: var(--radius-md);
  backdrop-filter: blur(5px);
  background: rgba(217, 217, 217, 0.03);
  padding: 20px;
  min-height: 150px;
  color: var(--color-text-white);
  transition:
    transform 0.45s var(--hover-ease),
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.45s ease;
}

/* Hover: the card lifts, a warm spotlight follows the pointer inside it
   (--mx/--my come from js/main.js; without JS it sits in the top right),
   the border lights up next to the pointer, a thin accent line runs along
   the bottom and the arrow slides on. */
.hero-card::before,
.hero-card::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-card::before {
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    320px circle at var(--mx, 85%) var(--my, 0%),
    rgba(233, 105, 18, 0.22),
    rgba(233, 105, 18, 0) 70%
  );
}

/* the border glow: a gradient masked down to a 1px ring */
.hero-card::after {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(
    200px circle at var(--mx, 85%) var(--my, 0%),
    rgba(233, 105, 18, 0.95),
    rgba(233, 105, 18, 0) 70%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

.hero-card:hover,
.hero-card:focus-visible {
  transform: translateY(-6px);
  background-color: rgba(217, 217, 217, 0.07);
  border-color: rgba(238, 238, 238, 0.28);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
}

.hero-card:focus-visible {
  outline: none;
}

.hero-card:hover::before,
.hero-card:hover::after,
.hero-card:focus-visible::before,
.hero-card:focus-visible::after {
  opacity: 1;
}

.hero-card__eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 32px;
  transition: color 0.3s ease;
}

.hero-card:hover .hero-card__eyebrow,
.hero-card:focus-visible .hero-card__eyebrow {
  color: var(--color-accent);
}

.hero-card__title {
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 8px;
}

.hero-card__text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 260px;
}

.hero-card__arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 20px;
  height: 25px;
  transform: rotate(90deg);
  transition: translate 0.45s var(--hover-ease);
}

.hero-card:hover .hero-card__arrow,
.hero-card:focus-visible .hero-card__arrow {
  translate: 6px 0;
}

/* thin accent line drawn along the bottom edge */
.hero-card__line {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), rgba(233, 105, 18, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--hover-ease);
  pointer-events: none;
}

.hero-card:hover .hero-card__line,
.hero-card:focus-visible .hero-card__line {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-card,
  .hero-card__arrow,
  .hero-card__line {
    transition-duration: 0.01ms;
  }

  .hero-card:hover,
  .hero-card:focus-visible {
    transform: none;
  }
}

@media (min-width: 768px) {
  .hero-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Statement / big headline
   ========================================================================== */
.statement {
  padding-top: 32px;
  padding-bottom: 8px;
}

.statement__row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.statement__kicker {
  display: inline-block;
  font-size: 14px;
}

.statement__body {
  max-width: 480px;
}

.statement__title {
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(20px, 4vw, 32px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-align: left;
}

.statement__title span {
  display: block;
}

.statement__text {
  margin-top: 16px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.statement .facts {
  margin-top: 56px;
}

@media (min-width: 1200px) {
  .statement {
    padding-top: 140px;
    padding-bottom: 140px;
  }

  .statement .facts {
    margin-top: 96px;
  }

  .statement__row {
    gap: 24px;
  }

  /* headline across the wide column, its explanation beside it */
  .statement__body {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: end;
    gap: 60px;
    max-width: none;
  }

  .statement__title {
    font-size: 45px;
  }

  .statement__text {
    margin-top: 0;
    font-size: 16px;
  }
}

/* ==========================================================================
   Dealers banner
   ========================================================================== */
.dealer__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  /* stays dark in both themes, warmed by an accent glow in the corner */
  background:
    radial-gradient(
      circle at 85% 130%,
      rgba(233, 105, 18, 0.35),
      rgba(233, 105, 18, 0) 55%
    ),
    var(--color-text-dark);
  color: var(--color-text-white);
}

.dealer__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 560px;
  margin-bottom: 16px;
}

.dealer__text {
  max-width: 560px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.dealer__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.dealer__note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 1200px) {
  .dealer__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 56px 64px;
  }

  .dealer__cta {
    align-items: center;
  }
}

/* ==========================================================================
   Bestsellers
   ========================================================================== */
.hits__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.hits__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(32px, 6vw, 60px);
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}

.hits__subtitle {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 560px;
}

.hits__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hits__filters button {
  padding: 9px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.hits__filters button:hover {
  border-color: var(--color-text-light);
}

.hits__filters button.is-active {
  background: var(--color-text-light);
  border-color: var(--color-text-light);
  color: var(--color-bg);
}

.hits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* the tile's own display: flex would otherwise beat [hidden] */
.hits__grid > [hidden] {
  display: none;
}

.hits__more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* Tile extras used here: the "hit" label and a stand-in for missing photos */
.product-tile__hit {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-text-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-tile__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 768px) {
  .hits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 1200px) {
  .hits__head {
    margin-bottom: 48px;
  }

  .hits__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .hits__more {
    margin-top: 48px;
  }
}

/* ==========================================================================
   Video tests
   ========================================================================== */
.tests__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.tests__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(32px, 6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  max-width: 900px;
}

.tests__subtitle {
  max-width: 440px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.tests__grid {
  display: grid;
  gap: 20px;
}

.test-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-bg-elevated);
}

/* 4:5 crops vertical Instagram footage without losing the action */
.test-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-card-bg-strong);
}

.test-card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.test-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

.test-card__title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.test-card__text {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.test-card__meta {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
}

.test-card__meta div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
}

.test-card__meta dt {
  font-weight: 600;
}

.test-card__meta dd {
  margin: 0;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .tests__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .test-card__body {
    padding: 20px;
  }
}

@media (min-width: 1200px) {
  .tests__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 48px;
  }

  .tests__grid {
    gap: 24px;
  }

  .test-card__body {
    padding: 28px;
  }
}

/* ==========================================================================
   Certificate
   ========================================================================== */
.certificate {
  padding-bottom: 60px;
}

.certificate__card {
  display: grid;
  gap: 24px;
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
}

.certificate__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.certificate__text {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.certificate__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.certificate__facts dt {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.certificate__facts dd {
  margin: 0;
  font-size: 15px;
}

.certificate__btn {
  justify-self: start;
}

@media (min-width: 1200px) {
  .certificate {
    padding-bottom: 110px;
  }

  .certificate__card {
    grid-template-columns: 1fr auto;
    column-gap: 60px;
    row-gap: 32px;
    padding: 48px 56px;
  }

  .certificate__intro {
    grid-column: 1 / -1;
  }

  .certificate__facts {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    column-gap: 48px;
  }

  .certificate__btn {
    align-self: end;
  }
}

/* ==========================================================================
   Partner banner
   ========================================================================== */
.partner-banner__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 34px);
  letter-spacing: -0.05em;
  margin-bottom: 24px;
}

/* ==========================================================================
   Mobile type scale — one size per role across the page, one section gap
   ========================================================================== */
@media (max-width: 767px) {
  /* H1 */
  .hero__title {
    font-size: 34px;
    line-height: 1.05;
    margin-bottom: 16px;
  }

  /* H2 */
  .hits__title,
  .tests__title,
  .dealer__title,
  .partner-banner__title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .hits__title {
    margin-bottom: 12px;
  }

  .certificate__title {
    font-size: 24px;
  }

  /* accent headline keeps its caps, but gets room between lines */
  .statement__title {
    font-size: 22px;
    line-height: 1.15;
  }

  /* H3 — card titles */
  .hero-card__title {
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  /* body */
  .hero__text,
  .hits__subtitle,
  .dealer__text,
  .certificate__text {
    font-size: 15px;
    line-height: 1.5;
  }

  .hero__text {
    margin-bottom: 20px;
  }


  /* small */
  .hero-card__text,
  .statement__text {
    font-size: 14px;
    line-height: 1.5;
  }

  .statement__text {
    margin-top: 12px;
    text-transform: none;
    color: var(--color-text-muted);
  }

  /* labels */
  .hero-card__eyebrow {
    margin-bottom: 24px;
  }

  /* full-width button with the link under it, underline spanning the row */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .hero__actions .link-arrow {
    width: auto;
    justify-content: space-between;
    padding-block: 12px;
  }

  /* spacing: every block sits 56px from the next */
  .hero__actions {
    margin-bottom: 48px;
  }

  .hero-cards {
    gap: 16px;
  }

  .hero {
    padding-bottom: 56px;
  }

  .statement {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .statement__row {
    gap: 12px;
  }

  .hits,
  .tests {
    padding-block: 56px;
  }

  /* Dealer block: no frame on phones — it runs edge to edge as a band,
     the text keeps the page gutter. */
  .dealer__card {
    margin-inline: calc(var(--container-pad) * -1);
    padding: 48px var(--container-pad);
    border: 0;
    border-radius: 0;
  }

  .hits__head {
    margin-bottom: 24px;
  }

  /* chips scroll sideways instead of stacking into three rows */
  .hits__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    scrollbar-width: none;
  }

  .hits__filters::-webkit-scrollbar {
    display: none;
  }

  /* one-time nudge showing the chips scroll sideways (see main.js) */
  .hits__filters.is-hinting > button {
    animation: chips-peek 1.4s cubic-bezier(0.45, 0, 0.25, 1) 0.3s;
  }

  .certificate {
    padding-bottom: 56px;
  }

  /* two tiles per row: tighter paddings and type so each stays readable */
  .hits .product-tile {
    --tile-radius: 20px;
    --tile-pad: 12px;
  }

  .hits .product-tile__top {
    top: 10px;
    left: 10px;
    right: 10px;
    gap: 6px;
  }

  .hits .status-badge {
    padding: 5px 9px;
    font-size: 11px;
  }

  .hits .product-tile__sku {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .hits .product-tile__title {
    font-size: 14px;
    line-height: 1.3;
  }

  .hits .product-tile__desc {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .hits .product-tile__btn {
    padding: 10px 8px;
    font-size: 13px;
  }
}

@keyframes chips-peek {
  0%,
  100% {
    transform: translateX(0);
  }
  35%,
  60% {
    transform: translateX(-80px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hits__filters.is-hinting > button {
    animation: none;
  }
}