@media(min-width:540px){body.has-desktop-product.catalog-page{background:#fff;color:#111;margin:0}.desktop-product-header{display:flex!important;align-items:center;flex-wrap:nowrap}.desktop-product-footer{display:block!important}.desktop-product-header{box-sizing:border-box;width:100%;max-width:none;height:92px;margin:0;padding-inline:max(40px,calc((100% - 1120px)/2));background:#fff;color:#111}.desktop-product-header nav{display:flex!important;position:static!important;align-items:center;gap:24px;margin:0 auto!important;padding:0!important;background:transparent!important}.desktop-product-header nav a{display:inline-flex!important;align-items:center;height:auto!important;padding:0 0 4px;color:#111;text-decoration:none;text-transform:uppercase;white-space:nowrap}.desktop-product-header nav a[aria-current=page]{border-bottom:1px solid #D11D23;color:#111}.desktop-product-header .mobile{display:none!important}.desktop-product-header .logo{width:170px;height:24px;object-fit:contain}.desktop-product-footer{background:#f7f7f8}.desktop-product-footer .logo{width:170px;height:24px;object-fit:contain}}@media(min-width:540px) and (max-width:1000px){.desktop-product-header{height:80px;padding-inline:24px}.desktop-product-header nav{gap:12px}.desktop-product-header nav a{font-size:12px}.desktop-product-header .header-btn{padding:10px 12px;font-size:12px}.desktop-product-header .logo{width:140px;height:auto}.desktop-product-footer .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.desktop-product-footer .footer-grid>a{grid-row:span 2}}@media(max-width:539px){body.has-desktop-product .desktop-product-header,body.has-desktop-product .desktop-product-footer{display:none!important}}

@media(min-width:540px) and (max-width:700px){.desktop-product-header{height:auto;min-height:82px;display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px}.desktop-product-header>a:first-child{margin-right:auto}.desktop-product-header .logo{width:126px;height:auto}.desktop-product-header nav{order:3;flex:1 0 100%;justify-content:space-between;gap:7px}.desktop-product-header nav a{font-size:10px}.desktop-product-header .search{display:none}.desktop-product-header .header-btn{padding:8px 9px;font-size:10px}.desktop-product-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.desktop-product-footer .footer-grid>a{grid-column:1/-1;grid-row:auto}}

/* Breadcrumb 20px spacing like news */
.commerce-crumbs, .breadcrumbs {
  padding: 20px 0 !important;
  margin: 0 auto !important;
  min-height: auto !important;
}
main[class*="-page"], .generator-page, .commerce-page {
  padding-top: 0 !important;
  padding-block-start: 0 !important;
}

/* Standardized Product Gallery, Lightbox, Kit and Russia Block */
.product-photo-slot {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 4/3 !important;
  background: #f7f7f8 !important;
  overflow: hidden !important;
}
.product-photo-slot img.product-main-photo {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
.product-photo-prev, .product-photo-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  outline: none !important;
}
.product-photo-prev { left: 16px !important; }
.product-photo-next { right: 16px !important; }
.product-open-gallery {
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  z-index: 5 !important;
  color: #111 !important;
  outline: none !important;
}
.product-thumbnails, .generator-gallery-thumbnails {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}
.product-thumbnails button, .generator-gallery-thumbnails button {
  position: relative !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
  border: 1px solid #d5d7d9 !important;
  border-radius: 2px !important;
  background: #fff !important;
  padding: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}
.product-thumbnails button[aria-pressed="true"], .generator-gallery-thumbnails button[aria-pressed="true"] {
  border: 2px solid #D11D23 !important;
}
.product-thumbnails button img, .generator-gallery-thumbnails button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.thumbnail-more-wrap {
  position: relative !important;
  overflow: hidden !important;
}
.thumbnail-more-badge {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 17, 20, 0.65) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  font-family: var(--font-family-primary), Arial, sans-serif !important;
  pointer-events: none !important;
  transition: background 0.2s ease !important;
}
.thumbnail-more-wrap:hover .thumbnail-more-badge {
  background: rgba(15, 17, 20, 0.4) !important;
}

/* Lightbox Modal (Screenshot 2) */
.embedded-product-gallery {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: #131418 !important;
  color: #fff !important;
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
}
.embedded-product-gallery[open] {
  display: flex !important;
}
.embedded-gallery-head {
  position: absolute !important;
  top: 24px !important;
  left: 36px !important;
  right: 36px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  z-index: 10 !important;
}
.embedded-gallery-close {
  width: 32px !important;
  height: 32px !important;
  background: url("/assets/gallery-controls/modal-close.png") center/contain no-repeat !important;
  font-size: 0 !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  outline: none !important;
}
.embedded-gallery-view {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(80vw, 1150px) !important;
  height: min(66vh, 700px) !important;
  margin: auto !important;
  position: relative !important;
}
.embedded-gallery-view img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
.embedded-gallery-prev, .embedded-gallery-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  color: #fff !important;
  font-size: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: background 0.2s !important;
  z-index: 10 !important;
  outline: none !important;
}
.embedded-gallery-prev:hover, .embedded-gallery-next:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}
.embedded-gallery-prev { left: 40px !important; }
.embedded-gallery-next { right: 40px !important; }
.embedded-gallery-thumbs {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 10px !important;
  max-width: 90vw !important;
  overflow-x: auto !important;
  padding: 6px !important;
  z-index: 10 !important;
}
.embedded-gallery-thumb {
  width: 76px !important;
  height: 52px !important;
  border: 2px solid transparent !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  background: #222 !important;
  padding: 0 !important;
  cursor: pointer !important;
  opacity: 0.65 !important;
  transition: opacity 0.2s, border-color 0.2s !important;
  outline: none !important;
}
.embedded-gallery-thumb.is-active, .embedded-gallery-thumb:hover {
  opacity: 1 !important;
  border: 2px solid #D11D23 !important;
}
.embedded-gallery-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Motoblock 4-Column Kit Layout (Matching Figma) */
.generator-kit-layout, .tiller-kit .generator-kit-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: center !important;
}
.generator-photo-kit-main img, .tiller-kit-main-photo {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.tiller-kit-items, .generator-kit-items {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, auto) !important;
  grid-auto-flow: column !important;
  gap: 28px 24px !important;
}
.tiller-kit-items > article, .generator-kit-items > article {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  border: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.tiller-kit-items > article > h3, .generator-kit-items > article > h3 {
  color: #D11D23 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important;
}
.tiller-kit-items > article > p:first-of-type,
.tiller-kit-items > article .kit-item-title {
  text-transform: uppercase !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: #111116 !important;
  margin: 0 !important;
}
.tiller-kit-items > article > p:nth-of-type(2),
.tiller-kit-items > article .kit-item-sub {
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: #62686C !important;
  margin: 0 !important;
}



/* Lightbox Single Arrows via CSS ::before */
.embedded-gallery-prev, .embedded-gallery-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 50px !important;
  height: 60px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  outline: none !important;
  box-shadow: none !important;
}
.embedded-gallery-prev svg, .embedded-gallery-next svg {
  display: none !important;
}
.embedded-gallery-prev { left: 4vw !important; }
.embedded-gallery-next { right: 4vw !important; }
.embedded-gallery-prev::before, .embedded-gallery-next::before {
  content: "" !important;
  display: block !important;
  width: 14px !important;
  height: 24px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transition: transform 0.15s ease !important;
}
.embedded-gallery-prev::before {
  background-image: url("/assets/gallery-controls/arrow-left.svg") !important;
}
.embedded-gallery-next::before {
  background-image: url("/assets/gallery-controls/arrow-right.svg") !important;
}
.embedded-gallery-prev:hover::before {
  transform: scale(1.15) !important;
}
.embedded-gallery-next:hover::before {
  transform: scale(1.15) !important;
}


/* ==========================================================================
   PERFECT FIGMA REPRODUCTION: Product Gallery 455x337 & Generator Russia Block
   ========================================================================== */

/* 1. PC Product Gallery Slot: exact 455px x 337px, full-size cover, no letterboxing */
@media (min-width: 768px) {
  .product-gallery, .generator-gallery {
    width: 455px !important;
    max-width: 455px !important;
    flex: 0 0 455px !important;
  }

  .product-photo-slot {
    position: relative !important;
    display: block !important;
    width: 455px !important;
    height: 337px !important;
    aspect-ratio: 455 / 337 !important;
    background: transparent !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
  }

  .product-photo-slot img.product-main-photo,
  .product-photo-slot .product-open-gallery img.product-main-photo,
  .product-photo-slot > button > img.product-main-photo,
  .product-photo-slot > img {
    position: absolute !important;
    inset: 0 !important;
    width: 455px !important;
    height: 337px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transition: transform 0.2s ease !important;
  }

  .product-photo-slot:hover img.product-main-photo {
    transform: scale(1.02) !important;
  }

  .product-photo-prev,
  .product-photo-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
    border: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 4 !important;
    transition: background 0.15s ease !important;
  }

  .product-photo-prev:hover,
  .product-photo-next:hover {
    background: rgba(0, 0, 0, 0.75) !important;
  }

  .product-photo-prev { left: 12px !important; }
  .product-photo-next { right: 12px !important; }

  .product-photo-slot .product-open-gallery {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .product-photo-slot .product-open-gallery svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #ffffff !important;
  }

  .product-thumbnails, .generator-gallery-thumbnails {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 14px !important;
    width: 455px !important;
    max-width: 455px !important;
  }

  .product-thumbnails button, .generator-gallery-thumbnails button {
    position: relative !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    border: 1px solid #d5d7d9 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    padding: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.15s ease !important;
  }

  .product-thumbnails button[aria-pressed="true"], .generator-gallery-thumbnails button[aria-pressed="true"] {
    border: 2px solid #D11D23 !important;
  }

  .product-thumbnails button img, .generator-gallery-thumbnails button img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .thumbnail-more-wrap {
    position: relative !important;
  }

  .thumbnail-more-badge {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    font: 700 16px/1 var(--font-family-primary) !important;
    border-radius: 2px !important;
  }
}

/* 2. GENERATOR RUSSIA PRODUCTION BLOCK (Figma Screen 2 Pixel-Perfect) */
.generator-page .generator-production,
.generator-production {
  background: #000000 !important;
  color: #ffffff !important;
  margin-block: 60px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.generator-page .generator-production .wrap,
.generator-production .wrap {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
}

.generator-production-top {
  position: relative !important;
  width: 100% !important;
  height: 270px !important;
  min-height: 270px !important;
  background: #000000 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

.generator-photo-production {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  z-index: 1 !important;
  pointer-events: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.generator-production-copy {
  position: relative !important;
  z-index: 2 !important;
  width: 440px !important;
  max-width: 440px !important;
  padding-left: 40px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.generator-production-copy h2 {
  font: 400 32px/1.15 var(--font-family-primary), sans-serif !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 16px 0 !important;
}

.generator-production-copy .russia-title-lead,
.generator-production-copy p:first-of-type {
  font: 600 17px/1.35 var(--font-family-primary) !important;
  color: #ffffff !important;
  margin: 0 0 14px 0 !important;
}

.generator-production-copy .russia-desc-text,
.generator-production-copy p:last-of-type {
  font: 400 13px/1.5 var(--font-family-primary) !important;
  color: #b0b4b8 !important;
  margin: 0 !important;
}

.generator-production-values {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 24px 0 !important;
  background: #000000 !important;
  background-image: none !important;
  border-top: 1px solid #232328 !important;
  box-sizing: border-box !important;
}

.generator-production-values article,
.generator-feature-item {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
}

.generator-production-values article:first-child {
  padding-left: 40px !important;
}

.generator-production-values article:last-child {
  padding-right: 40px !important;
}

.generator-production-values article + article {
  border-left: 1px solid #232328 !important;
}

.generator-production-values article > img.russia-feature-icon {
  position: static !important;
  width: 44px !important;
  height: 48px !important;
  flex: 0 0 44px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
}

.russia-feature-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.russia-feature-text h3,
.generator-production-values h3 {
  font: 700 13px/1.3 var(--font-family-primary) !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 6px 0 !important;
  display: block !important;
  width: 100% !important;
}

.russia-feature-text p,
.generator-production-values p {
  font: 400 12px/1.45 var(--font-family-primary) !important;
  color: #b0b4b8 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
}

@media(min-width:701px) and (max-width:1000px){body.has-desktop-product>.desktop-product-header{box-sizing:border-box!important;height:auto!important;min-height:104px!important;flex-wrap:wrap!important;gap:8px 16px!important;padding:10px 24px!important}body.has-desktop-product>.desktop-product-header>a:first-child{margin-right:auto!important}body.has-desktop-product>.desktop-product-header nav{order:3!important;flex:1 0 100%!important;justify-content:space-between!important;gap:8px!important;margin:0!important}body.has-desktop-product>.desktop-product-header nav a{font-size:11px!important}body.has-desktop-product>.desktop-product-header .search{margin-left:0!important}}
@media(min-width:540px) and (max-width:767px){body.has-desktop-product>.desktop-product-header{box-sizing:border-box!important;height:auto!important;min-height:100px!important;flex-wrap:wrap!important;gap:8px!important;padding:8px 18px!important}body.has-desktop-product>.desktop-product-header>a:first-child{margin-right:auto!important}body.has-desktop-product>.desktop-product-header nav{order:3!important;flex:1 0 100%!important;justify-content:space-between!important;gap:6px!important;margin:0!important}body.has-desktop-product>.desktop-product-header nav a{font-size:10px!important}body.has-desktop-product>.desktop-product-header .logo{width:125px!important;height:auto!important}body.has-desktop-product>.desktop-product-header .search{display:none!important}body.has-desktop-product>.desktop-product-header .header-btn{padding:8px 10px!important;font-size:10px!important}}
