/* HIMART Commerce case — page-specific visualization compatibility layer.
   Common hero, typography, spacing, motion, navigation and canvas rules are owned by the shared design system.
   The legacy production bundle is kept behind this component only to preserve the approved Himart-specific
   keyword/ring/data-chart/landing visualization while those selectors are migrated incrementally. */
@import url("../../himart-narrative-v2-production.css?v=20260919-4");

/* Himart-only narrative synthesis treatment moved out of himart.html. */
html body.himart-commerce-page .narrative-touchpoint-synthesis>h4{
  font:100 var(--hm-type-subsection)/1.18 var(--hm-font-ko)!important;
  color:#fff!important;
}
html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card b{
  margin:0!important;
  font:300 16px/1.3 var(--hm-font-ko)!important;
}
html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card.positive b{color:var(--hm-blue)!important}
html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card.negative b{color:var(--hm-red)!important}
html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card p{
  font:300 var(--hm-type-comparison)/var(--hm-leading-group) var(--hm-font-ko)!important;
  color:#fff!important;
}

/* 01.3 / TRANSITION TOUCHPOINT
   Remove the inherited white card rule. The accent line now matches the exact
   width of each card's blue/red gradient field: 1px, 100% opacity. */
html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card{
  position:relative!important;
  border-top:0!important;
}
html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card::after{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:1px;
  background:var(--hm-blue);
  opacity:1;
  pointer-events:none;
}
html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card.negative::after{
  background:var(--hm-red);
}

/* The values below are data, not layout overrides. The HTML continues to provide --pct / --c / width / height values. */
html body.himart-commerce-page :is(.keyword-grid,.voice-stack,.ring-row,.sentiment-graph,.pie-layout,.chart-wrap,.hbars,.landing-stack,.search-slope,.pdp-columns){
  min-width:0;
}

@media(max-width:780px){
  html body.himart-commerce-page .narrative-touchpoint-synthesis>h4{
    font-size:var(--hm-type-subsection-mobile)!important;
    line-height:1.2!important;
  }
  html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card p{
    font-size:var(--hm-type-group-mobile)!important;
    line-height:var(--hm-leading-group)!important;
  }
}