@media (max-width: 1360px) {
  .header-main { grid-template-columns: 218px minmax(490px,1fr) auto; gap: 16px; }
  .header-usp { padding: 0 12px; }
  .header-usp--rating { display: none; }
  .header-usps { grid-template-columns: repeat(3,1fr); }
  .header-actions { gap: 12px; }
  .primary-navigation a { font-size: 12px; }
}

@media (max-width: 1100px) {
  .header-main { grid-template-columns: 220px 1fr auto; min-height: 102px; }
  .header-usps { grid-template-columns: repeat(2,1fr); }
  .header-usp:nth-child(3) { display: none; }
  .header-actions .header-account span { display: none; }
  .configurator-grid, .promo-grid { grid-template-columns: repeat(3,1fr); }
  .benefit-strip { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1.5fr repeat(3,1fr); }
  .footer-grid > div:last-child { display: none; }
}

@media (max-width: 767px) {
  :root { --radius-md: 16px; }
  body { font-size: 15px; overflow-x: hidden; }
  .site-container { width: min(calc(100% - 32px), 520px); }
  .header-main { display: flex; min-height: 74px; justify-content: space-between; gap: 0; }
  /* These rules belong only to the header. The footer logo keeps its normal document flow. */
  .site-header .brand { position: absolute; left: 50%; transform: translateX(-50%); }
  .site-header .brand b { font-size: 31px; }
  .site-header .brand span, .header-usps, .header-actions .header-account, .header-actions > a > span:not(.cart-count) { display: none; }
  .header-actions { margin-left: auto; gap: 16px; }
  .header-actions .tl-icon { width: 25px; height: 25px; }
  .cart-count { top: -8px; left: 15px; }
  .mobile-menu-toggle { display: inline-grid; width: 38px; height: 42px; padding: 0; place-items: center; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; }
  .mobile-menu-toggle .tl-icon { width: 29px; height: 29px; }
  .menu-surface { position: absolute; top: 74px; right: 0; left: 0; visibility: hidden; overflow: hidden; max-height: 0; background: #fff; box-shadow: 0 16px 28px rgba(22,23,24,.15); opacity: 0; transition: max-height .22s ease, opacity .18s ease, visibility .18s ease; }
  .site-header.is-menu-open .menu-surface { visibility: visible; max-height: 520px; opacity: 1; }
  .primary-navigation { width: 100%; padding: 11px 16px 17px; }
  .primary-navigation ul { display: block; min-height: 0; }
  .primary-navigation a { min-height: 47px; justify-content: flex-start; padding: 0 8px; border-right: 0; border-bottom: 1px solid var(--border-soft); color: var(--text-primary); font-size: 14px; }
  .primary-navigation li:last-child a { color: var(--brand-red); }
  .primary-navigation a:hover { background: #f8f8f8; }
  .mobile-menu-close { display: block; margin: 0 0 4px auto; border: 0; background: transparent; color: var(--text-primary); font-size: 30px; line-height: 1; cursor: pointer; }

  .hero { padding: 10px 0 0; background: #fff; }
  .hero__inner { display: grid; grid-template-columns: 1fr; min-height: 430px; overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: #f8f6f3; }
  .hero__copy, .hero__image { grid-area: 1 / 1; }
  .hero__copy { z-index: 2; width: min(76%, 320px); align-self: start; padding: 30px 0 0 24px; }
  .hero h1 { font-size: clamp(36px,10vw,43px); line-height: .98; }
  .hero h1 span { max-width: 260px; }
  .hero__copy > p { margin: 14px 0 18px; font-size: 14px; line-height: 1.4; }
  .hero__actions .button--secondary { display: none; }
  .button { min-height: 44px; padding: 0 20px; font-size: 13px; }
  .hero__image::before { background: linear-gradient(90deg,rgba(248,246,243,1) 0%,rgba(248,246,243,.96) 47%,rgba(248,246,243,.12) 78%); }
  .hero__image img { object-position: 67% center; }
  .rating-badge { right: 12px; bottom: 72px; width: 82px; height: 82px; border-width: 2px; }
  .rating-badge b { font-size: 23px; }.rating-badge span { margin: 3px 0; font-size: 9px; }.rating-badge small { max-width: 65px; font-size: 7px; }
  .hero__trust { right: 10px; bottom: 10px; left: 10px; gap: 6px; justify-content: space-between; padding: 10px 7px; border-radius: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }
  .hero__trust li { flex: 1; align-items: flex-start; gap: 5px; }
  .hero__trust .tl-icon { width: 19px; height: 19px; }.hero__trust b { font-size: 8px; }.hero__trust small { display: none; }

  .configurator-section { margin-top: 18px; padding: 24px 0 19px; }
  .configurator-section h2, .how-section h2 { margin-bottom: 16px; font-size: 22px; }
  .configurator-grid, .promo-grid { display: flex; overflow-x: auto; gap: 12px; margin-right: -16px; padding: 0 16px 10px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .configurator-grid::-webkit-scrollbar, .promo-grid::-webkit-scrollbar { display: none; }
  /* Promo cards form their own site container, so their edge-to-edge rail needs explicit geometry. */
  .promo-grid { width: calc(100% - 16px); margin-left: 16px; margin-right: 0; }
  .configurator-card { min-width: 208px; min-height: 300px; scroll-snap-align: start; }
  .configurator-card img { height: 158px; }
  .promo-grid { padding-top: 19px; padding-bottom: 19px; }
  .promo-card { min-width: 184px; min-height: 190px; scroll-snap-align: start; }
  .promo-card img { min-height: 190px; }.promo-card__copy { inset: 13px; }

  .how-section { padding: 4px 0 28px; text-align: left; }
  .steps { grid-template-columns: 1fr 1fr; gap: 24px 10px; }
  .steps li { min-height: 156px; padding: 0 5px; }
  .step-visual { width: 64px; height: 64px; margin-bottom: 12px; border-radius: 21px; }.step-visual::after { display: none; }
  .step-number { width: 27px; height: 27px; font-size: 11px; }.step-icon { width: 32px; height: 32px; }
  .steps h3 { font-size: 13px; }.steps p { font-size: 10px; }
  .benefit-strip { grid-template-columns: 1fr; margin-bottom: 28px; }.benefit-strip > div { min-height: 69px; padding: 12px 15px; border-right: 0; border-bottom: 1px solid var(--border-soft); }.benefit-strip > div:nth-child(n+4) { display: flex; }.benefit-strip > div:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; padding: 28px 0 23px; }.footer-grid > div:last-child { display: block; }.footer-brand { grid-column: 1 / -1; }.footer-bottom { display: block; line-height: 2.1; }.footer-bottom span:last-child { display: flex; flex-wrap: wrap; gap: 0 15px; }.footer-bottom a { margin-left: 0; }
  .tl-archive-hero { display:flex; min-height:0; flex-direction:column-reverse; }.tl-archive-hero__copy { padding:28px 23px; }.tl-product-grid ul.products { grid-template-columns:repeat(2,1fr); gap:10px; }
}

@media (max-width: 390px) {
  .hero__copy { width: 78%; padding-left: 20px; }.hero h1 { font-size: 35px; }.header-actions { gap: 12px; }.configurator-card { min-width: 200px; }
}