/* KONIC V20 — shared spacing, product hierarchy and Office navigation polish. */
html[data-konic-context="home"] {
  --konic-module-gap: 20px;
}

html[data-konic-context="office"] {
  --konic-module-gap: 10px;
  --space-1: 10px;
  --section-gap: 10px;
}

/* Home: one same-level rhythm and compact source-faithful product summaries. */
html[data-konic-context="home"] :is(.product-grid,.feature-grid,.support-cards,.news-grid,.retailer-grid,.contact-grid,.catalog-grid,.card-grid) {
  gap: 20px !important;
}

html[data-konic-context="home"] .product-card .product-info {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(2.65em, auto);
  align-content: start;
  gap: 5px;
  min-height: 126px;
  padding: 18px 42px 18px 18px;
}

html[data-konic-context="home"] .product-card .product-info h3 {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

html[data-konic-context="home"] .product-card .konic-product-model {
  margin: 0;
  color: #786f66;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[data-konic-context="home"] .product-card .konic-product-highlight {
  display: -webkit-box;
  overflow: hidden;
  margin: 2px 0 0;
  color: #766f67;
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html[data-konic-context="home"] .product-card .product-info > b {
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: #e3062d;
  font-size: 16px;
}

/* Office: use a consistent 10px gap for same-level modules throughout routes. */
html[data-konic-context="office"] :is(.hero-grid,.mount-grid,.category-band,.story-grid,.x-product-grid,.x-guide-grid,.x-support-links,.x-help-split,.x-news-grid,.x-store-grid,.x-contact-grid,.x-catalog-layout,.x-product-detail) {
  gap: 10px !important;
}

/* Office Products dropdown: align left copy, four category cards and finder as one row. */
html[data-konic-context="office"] .mega-menu[data-konic-category="products"] {
  top: 72px;
  left: 16px;
  right: 16px;
  grid-template-columns: minmax(220px,.7fr) minmax(620px,1.9fr) minmax(250px,.72fr);
  align-items: stretch;
  gap: 10px;
  min-height: 146px;
  padding: 16px;
  border-radius: 16px;
}

html[data-konic-context="office"] .mega-menu[data-konic-category="products"] > :first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0 10px;
}

html[data-konic-context="office"] .mega-menu[data-konic-category="products"] .mega-kicker {
  margin-bottom: 8px;
}

html[data-konic-context="office"] .mega-menu[data-konic-category="products"] h2 {
  font-size: clamp(27px,2.4vw,38px);
  line-height: .98;
}

html[data-konic-context="office"] .mega-menu[data-konic-category="products"] .mega-links {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

html[data-konic-context="office"] .office-mega-category-card {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(64px,.78fr) minmax(82px,1.22fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 112px !important;
  padding: 10px 8px 10px 14px !important;
  overflow: hidden;
  border: 1px solid rgba(17,16,15,.1) !important;
  border-radius: 12px;
  background: rgba(255,255,255,.42);
  transition: transform .2s ease,border-color .2s ease,background .2s ease !important;
}

html[data-konic-context="office"] .office-mega-category-card:hover {
  padding-left: 14px !important;
  color: inherit !important;
  border-color: rgba(223,24,29,.36) !important;
  background: rgba(255,255,255,.78);
  transform: translateY(-1px);
}

html[data-konic-context="office"] .office-mega-category-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.12;
}

html[data-konic-context="office"] .office-mega-category-card picture {
  display: grid;
  place-items: center;
  width: 100%;
  height: 90px;
  overflow: visible;
}

html[data-konic-context="office"] .office-mega-category-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(19,15,13,.10));
  transition: transform .28s cubic-bezier(.2,.75,.2,1);
}

html[data-konic-context="office"] .office-mega-category-card:hover img {
  transform: scale(1.055);
}

html[data-konic-context="office"] .mega-menu[data-konic-category="products"] .mega-feature {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  min-width: 0;
  min-height: 112px;
  padding: 18px;
}

html[data-konic-context="office"] .mega-menu[data-konic-category="products"] .mega-feature .arrow {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  margin: 0;
  color: #ed1c24;
}

html[data-konic-context="office"] .mega-menu[data-konic-category="products"] .office-mega-feature-kicker,
html[data-konic-context="office"] .mega-menu[data-konic-category="products"] .mega-feature strong {
  grid-column: 2;
  margin: 0;
}

html[data-konic-context="office"] .mega-menu[data-konic-category="products"] .mega-feature strong {
  font-size: 16px;
  line-height: 1.15;
}

/* Office homepage category imagery: the four V20 assets share one black/white/red visual language. */
html[data-konic-context="office"] .hero-grid .mount-grid .product-card {
  border-color: rgba(223,24,29,.12);
}

html[data-konic-context="office"] .hero-grid .mount-grid .product-image-wrap {
  padding: 10px 24px 0;
}

html[data-konic-context="office"] .hero-grid .mount-grid .product-image-wrap img {
  max-height: 190px;
  transition: transform .3s cubic-bezier(.2,.75,.2,1);
}

html[data-konic-context="office"] .hero-grid .mount-grid .product-card:hover .product-image-wrap img {
  transform: scale(1.035);
}

/* Office list cards: title, model, concise source highlight; the whole card is the link. */
html[data-konic-context="office"] .x-product-card {
  color: inherit;
  text-decoration: none;
  grid-template-rows: minmax(230px,1fr) auto;
  background: #fff;
}

html[data-konic-context="office"] .x-product-card .x-product-image,
html[data-konic-context="office"] .x-product-card .x-product-copy,
html[data-konic-context="office"] .x-product-card .x-product-placeholder {
  background: #fff;
}

html[data-konic-context="office"] .x-product-card .x-product-image img {
  transition: transform .28s cubic-bezier(.2,.75,.2,1);
}

html[data-konic-context="office"] .x-product-card:hover .x-product-image img {
  transform: scale(1.025);
}

html[data-konic-context="office"] .x-product-card .x-product-copy {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(2.65em,auto);
  align-content: start;
  gap: 5px;
  min-height: 126px;
  padding: 17px 42px 17px 17px;
}

html[data-konic-context="office"] .x-product-card .x-product-copy h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.1;
}

html[data-konic-context="office"] .x-product-card .x-model {
  order: 2;
  margin: 0;
  color: #706a64;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[data-konic-context="office"] .x-product-card .x-product-highlight {
  order: 3;
  display: -webkit-box;
  overflow: hidden;
  margin: 2px 0 0;
  color: #746e67;
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html[data-konic-context="office"] .x-product-card .x-card-link {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  color: #df181d;
}

/* Office detail: gallery and copy share one visual baseline; category bar is deliberately absent. */
html[data-konic-context="office"] .x-product-detail {
  grid-template-columns: 1.12fr .88fr !important;
  align-items: stretch;
  min-height: 610px;
  margin-top: 10px;
}

html[data-konic-context="office"] .x-product-gallery,
html[data-konic-context="office"] .x-product-info {
  min-height: 610px;
}

html[data-konic-context="office"] .x-product-info {
  padding: clamp(30px,3.3vw,54px) !important;
}

html[data-konic-context="office"] .x-product-info h1 {
  max-width: 620px;
  font-size: clamp(34px,3.5vw,54px) !important;
  line-height: 1 !important;
}

html[data-konic-context="office"] .x-product-intro {
  font-size: 14px;
  line-height: 1.55;
}

html[data-konic-context="office"] .x-key-points {
  margin-top: 20px;
}

html[data-konic-context="office"] .x-product-tabs.x-section {
  margin-top: 10px;
}

@media (max-width: 1180px) {
  html[data-konic-context="office"] .mega-menu[data-konic-category="products"] {
    grid-template-columns: minmax(180px,.58fr) minmax(500px,1.72fr) minmax(210px,.7fr);
  }
  html[data-konic-context="office"] .office-mega-category-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 70px;
    text-align: center;
  }
}

@media (max-width: 900px) {
  html[data-konic-context="office"] .x-product-detail { grid-template-columns: 1fr !important; }
  html[data-konic-context="office"] .x-product-gallery,
  html[data-konic-context="office"] .x-product-info { min-height: auto; }
}

@media (max-width: 680px) {
  html[data-konic-context="home"] :is(.product-grid,.feature-grid,.support-cards,.news-grid,.retailer-grid,.contact-grid,.catalog-grid,.card-grid) { gap: 14px !important; }
  html[data-konic-context="home"] .product-card .product-info,
  html[data-konic-context="office"] .x-product-card .x-product-copy { min-height: 116px; padding: 15px 38px 15px 15px; }
}