/* =========================================================
   KIVARO desktop proportional fit
   901px-1439px: preserve the approved 1440px desktop canvas
   and scale the complete page uniformly. <=900px continues to
   use the dedicated mobile routes.
   ========================================================= */

/* These secondary navigation blocks belong only to an abandoned tablet
   experiment. The live mobile site has its own navigation, so they must
   never be rendered on the desktop HTML pages at any viewport width. */
.mobile-secondary-nav {
  display: none !important;
}

html.kivaro-proportional-desktop {
  overflow-x: hidden !important;
  background: #F7F3EE !important;
}

html.kivaro-proportional-desktop body {
  width: 1440px !important;
  min-width: 1440px !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  zoom: var(--kivaro-desktop-fit, 1) !important;
  overflow-x: visible !important;
  background: #F7F3EE !important;
}

html.kivaro-proportional-desktop *,
html.kivaro-proportional-desktop *::before,
html.kivaro-proportional-desktop *::after {
  box-sizing: border-box !important;
}

/* Restore the approved desktop header instead of tablet/mobile reflow. */
html.kivaro-proportional-desktop .site-header,
html.kivaro-proportional-desktop body.home-page .site-header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 9999 !important;
}

html.kivaro-proportional-desktop .site-header .nav-wrap,
html.kivaro-proportional-desktop .nav-wrap,
html.kivaro-proportional-desktop body.home-page .site-header .nav-wrap {
  display: flex !important;
  grid-template-columns: none !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  width: min(1360px, calc(100% - 40px)) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 14px 0 !important;
  margin: 0 auto !important;
}

html.kivaro-proportional-desktop .site-header .brand,
html.kivaro-proportional-desktop .nav-wrap .brand {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

html.kivaro-proportional-desktop .site-header .brand img,
html.kivaro-proportional-desktop .nav-wrap .brand img {
  width: auto !important;
  height: 42px !important;
  max-width: none !important;
  object-fit: contain !important;
}

html.kivaro-proportional-desktop .site-header .main-nav,
html.kivaro-proportional-desktop .main-nav {
  display: flex !important;
  position: static !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.kivaro-proportional-desktop .site-header .main-nav a,
html.kivaro-proportional-desktop .main-nav a {
  flex: 0 0 auto !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

html.kivaro-proportional-desktop .site-header .main-nav a.btn,
html.kivaro-proportional-desktop .main-nav a.btn {
  padding: 13px 20px !important;
  font-size: 12px !important;
}

html.kivaro-proportional-desktop .mobile-header-catalog,
html.kivaro-proportional-desktop .menu-toggle,
html.kivaro-proportional-desktop button.menu-toggle,
html.kivaro-proportional-desktop .mobile-secondary-nav {
  display: none !important;
}

html.kivaro-proportional-desktop body.home-page main {
  margin-top: 0 !important;
  background: #F7F3EE !important;
}

/* Home: retain desktop columns while the entire page scales. */
html.kivaro-proportional-desktop body.home-page .hero-v9 > .container.hero-grid-v9,
html.kivaro-proportional-desktop body.home-page .hero-grid-v9 {
  display: grid !important;
  grid-template-columns: .96fr 1.04fr !important;
  gap: 24px !important;
  width: min(calc(100% - 120px), 1360px) !important;
  height: auto !important;
  min-height: 0 !important;
}

html.kivaro-proportional-desktop body.home-page .hero-box-v9,
html.kivaro-proportional-desktop body.home-page .hero-image-v9 {
  height: 520px !important;
  min-height: 520px !important;
}

html.kivaro-proportional-desktop body.home-page .number-band-v9 .numbers {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html.kivaro-proportional-desktop .kivaro-footer-v2 .footer-main-v2 {
  grid-template-columns: 1.22fr .78fr .86fr .95fr !important;
}

html.kivaro-proportional-desktop .kivaro-footer-v2 .footer-bottom-v2 {
  flex-direction: row !important;
  align-items: center !important;
}

/* Products: use the exact desktop sidebar and two-column product cards. */
html.kivaro-proportional-desktop body.products-page .products-hero {
  display: block !important;
}

html.kivaro-proportional-desktop body.products-page .products-hero .hero-banner {
  height: 640px !important;
  min-height: 640px !important;
}

html.kivaro-proportional-desktop body.products-page .layout {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 24px !important;
  width: min(1280px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 8px 0 40px !important;
}

html.kivaro-proportional-desktop body.products-page aside.sidebar {
  display: block !important;
  position: sticky !important;
  top: 92px !important;
}

html.kivaro-proportional-desktop body.products-page .content-sections {
  width: auto !important;
  min-width: 0 !important;
}

html.kivaro-proportional-desktop body.products-page .product-grid {
  display: grid !important;
  grid-template-columns: 44% 56% !important;
  min-height: 640px !important;
}

html.kivaro-proportional-desktop body.products-page .product-visual {
  min-height: 640px !important;
  height: auto !important;
  padding: 18px !important;
  border-right: 1px solid rgba(61,43,31,.10) !important;
  border-bottom: 0 !important;
}

html.kivaro-proportional-desktop body.products-page .product-visual img,
html.kivaro-proportional-desktop body.products-page .product-visual img.kivaro-flip-base {
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

html.kivaro-proportional-desktop body.products-page .product-content {
  padding: 24px 22px 22px !important;
}

html.kivaro-proportional-desktop body.products-page .meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* OEM/ODM: retain the sidebar and original wide artwork proportions. */
html.kivaro-proportional-desktop body.oem-odm-page .page-head {
  display: block !important;
}

html.kivaro-proportional-desktop body.oem-odm-page .page-head .hero-image {
  height: 640px !important;
  min-height: 640px !important;
}

html.kivaro-proportional-desktop body.oem-odm-page .layout {
  display: grid !important;
  grid-template-columns: 290px minmax(0, 1fr) !important;
  gap: 22px !important;
  width: min(1360px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 4px 0 44px !important;
}

html.kivaro-proportional-desktop body.oem-odm-page aside.sidebar {
  display: block !important;
  position: sticky !important;
  top: 92px !important;
}

html.kivaro-proportional-desktop body.oem-odm-page .content-sections {
  width: auto !important;
  min-width: 0 !important;
}

html.kivaro-proportional-desktop body.oem-odm-page .oem-card .media img {
  width: 100% !important;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
}

html.kivaro-proportional-desktop body.oem-odm-page .feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.kivaro-proportional-desktop body.oem-odm-page .cta-panel {
  grid-template-columns: 1fr 1fr !important;
}

/* About: keep both approved three-column visual compositions intact. */
html.kivaro-proportional-desktop body .risk-save-grid {
  grid-template-columns: 1.04fr .86fr 1.04fr !important;
  gap: 16px !important;
}

html.kivaro-proportional-desktop body .risk-stack {
  grid-template-rows: repeat(3, 166px) !important;
  gap: 14px !important;
}

html.kivaro-proportional-desktop body .risk-visual-card {
  height: 166px !important;
  min-height: 166px !important;
  grid-template-columns: 38% 62% !important;
}

html.kivaro-proportional-desktop body .risk-visual-art {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

html.kivaro-proportional-desktop body .risk-product-stage {
  height: 526px !important;
  min-height: 526px !important;
}

html.kivaro-proportional-desktop body .collection-grid {
  grid-template-columns: .82fr 1.22fr .82fr !important;
  gap: 18px !important;
}

html.kivaro-proportional-desktop body .collection-side {
  grid-template-rows: repeat(3, 150px) !important;
  gap: 12px !important;
}

html.kivaro-proportional-desktop body .collection-center,
html.kivaro-proportional-desktop body .collection-center-full-image {
  height: 474px !important;
  min-height: 474px !important;
}

html.kivaro-proportional-desktop body .collection-full-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html.kivaro-proportional-desktop body .risk-benefits {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Contact: retain the approved two-panel desktop inquiry layout. */
html.kivaro-proportional-desktop body.contact-page-fit .contact-redesign-wrap {
  width: min(1120px, calc(100% - 48px)) !important;
  max-width: 1120px !important;
}

html.kivaro-proportional-desktop body.contact-page-fit .contact-redesign-card {
  display: grid !important;
  grid-template-columns: 1.35fr .85fr !important;
  gap: 18px !important;
}

html.kivaro-proportional-desktop body.contact-page-fit .inquiry-form-panel {
  order: initial !important;
  margin-top: 0 !important;
}

html.kivaro-proportional-desktop body.contact-page-fit .inquiry-info-panel {
  order: initial !important;
}

html.kivaro-proportional-desktop body.contact-page-fit .inquiry-grid {
  grid-template-columns: 1fr 1fr !important;
}

/* Four Learning Tower detail pages: cancel their tablet breakpoints so the
   approved desktop composition is what gets scaled in a window. */
html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .58fr) !important;
  gap: 54px !important;
  min-height: 650px !important;
  padding: 54px !important;
}

html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-hero-media {
  width: min(100%, 365px) !important;
  margin-inline: 0 !important;
}

html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-model-grid:not(.alt-comparison-grid),
html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-advantage-grid,
html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-media-grid {
  grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr) !important;
  gap: 54px !important;
}

html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-split {
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr) !important;
  gap: 70px !important;
}

html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-faq-layout {
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr) !important;
  gap: 60px !important;
}

html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-quality-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-quote-grid {
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr) !important;
  gap: 44px !important;
  padding: 44px !important;
}

html.kivaro-proportional-desktop body.learning-tower-seo-page .alt-custom-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.kivaro-proportional-desktop body.learning-tower-seo-page .kivaro-footer-v2 .footer-main-v2 {
  grid-template-columns: 1.22fr .78fr .86fr .95fr !important;
  gap: 52px !important;
}

html.kivaro-proportional-desktop body.learning-tower-seo-page .kivaro-footer-v2 .footer-bottom-v2 {
  flex-direction: row !important;
  align-items: center !important;
}

/* Keep fixed contact actions aligned with the fitted desktop canvas. */
html.kivaro-proportional-desktop .kivaro-right-contact-stack {
  right: 16px !important;
}
