/* 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=20260925-7-major-title-42");

/* 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;
  }
}


/* Himart 01.4 flush-left synthesis columns — 2026-09-21 */
html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card{
  padding-right:0!important;
  padding-left:0!important;
  align-items:flex-start!important;
  text-align:left!important;
}
html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card b,
html body.himart-commerce-page .narrative-touchpoint-synthesis .synthesis-card p{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  text-align:left!important;
}


/* HIMART 01 qualitative color/alignment authority — 2026-09-24 */
/* Negative voice graph: semantic negative data stays red, overriding the global
   multi-series blue palette only inside this Himart qualitative comparison. */
html body.himart-page-body.himart-commerce-page #live-main #brand .voice-group.negative .ring-row .ring-card{
  --ring:var(--hm-red)!important;
}
html body.himart-page-body.himart-commerce-page #live-main #brand .voice-group.negative .ring-card .pct{
  color:var(--hm-red)!important;
}

/* 01.3 sentiment split: left is positive blue, right is negative red. */
html body.himart-page-body.himart-commerce-page #live-main #brand .sentiment-graph .sentiment-block{
  border-top-color:var(--hm-blue)!important;
}
html body.himart-page-body.himart-commerce-page #live-main #brand .sentiment-graph .sentiment-block.negative{
  border-top-color:var(--hm-red)!important;
}

/* 01.3 feedback summary: no gradient or boxed inset. Align text flush with each
   semantic rail and let rail color own title/body color. */
html body.himart-page-body.himart-commerce-page #live-main #brand .sentiment-conclusion .conclusion-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:20px!important;
  border:0!important;
  background:transparent!important;
}
html body.himart-page-body.himart-commerce-page #live-main #brand .sentiment-conclusion .conclusion-card{
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:24px 0 0!important;
  border:0!important;
  border-top:1px solid var(--hm-blue)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
html body.himart-page-body.himart-commerce-page #live-main #brand .sentiment-conclusion .conclusion-card.negative{
  border-top-color:var(--hm-red)!important;
}
html body.himart-page-body.himart-commerce-page #live-main #brand .sentiment-conclusion .conclusion-card::before,
html body.himart-page-body.himart-commerce-page #live-main #brand .sentiment-conclusion .conclusion-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}
html body.himart-page-body.himart-commerce-page #live-main #brand .sentiment-conclusion .conclusion-card :is(h5,p){
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  color:var(--hm-blue)!important;
  text-align:left!important;
}
html body.himart-page-body.himart-commerce-page #live-main #brand .sentiment-conclusion .conclusion-card.negative :is(h5,p){
  color:var(--hm-red)!important;
}

/* 01.4 principle-card titles use the primary Himart blue. */
html body.himart-page-body.himart-commerce-page #live-main #brand .direction-list .direction-card h4{
  color:var(--hm-blue)!important;
}

@media(max-width:780px){
  html body.himart-page-body.himart-commerce-page #live-main #brand .sentiment-conclusion .conclusion-grid{
    grid-template-columns:1fr!important;
    row-gap:32px!important;
  }
}