/* Final merchant-decision layout layer v4.
   Loaded after all shared/editorial/pricing styles so layout and color hierarchy are deterministic. */

/* Merchant-first pages: use color to communicate role, not decoration. */
.merchant-language-examples{
  --merchant-section-accent:var(--brand);
  background:linear-gradient(180deg,color-mix(in srgb,var(--merchant-section-accent) 5%,transparent),transparent 34%)!important;
}
body[data-editorial-route="/shopify-app/"] .merchant-language-examples{--merchant-section-accent:var(--info)}
body[data-editorial-route="/features/free-shopify-audit/"] .merchant-language-examples{--merchant-section-accent:var(--warning)}
body[data-editorial-route="/why-safe/"] .merchant-language-examples{--merchant-section-accent:var(--success)}
body[data-editorial-route="/shopify-store-optimization/"] .merchant-language-examples{--merchant-section-accent:var(--brand)}
body[data-editorial-route="/features/core-web-vitals/"] .merchant-language-examples{--merchant-section-accent:var(--info)}
body[data-editorial-route="/features/technical-seo/"] .merchant-language-examples{--merchant-section-accent:var(--info)}
body[data-editorial-route="/features/liquid-changes/"] .merchant-language-examples{--merchant-section-accent:var(--brand-hover)}
body[data-editorial-route="/use-cases/"] .merchant-language-examples{--merchant-section-accent:var(--brand-hover)}

.merchant-language-examples .section-head>.kicker{
  color:var(--merchant-section-accent)!important;
}

/* Default interior layout: two open editorial columns. */
.merchant-language-examples .merchant-example-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:clamp(34px,5vw,72px)!important;
  row-gap:0!important;
  border-top:0!important;
}
.merchant-language-examples .merchant-example-grid>.merchant-example,
.merchant-language-examples .merchant-example-grid>.merchant-example:nth-child(odd),
.merchant-language-examples .merchant-example-grid>.merchant-example:nth-child(even){
  --merchant-accent:var(--brand);
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  padding:24px 0 30px!important;
  border:0!important;
  border-top:1px solid color-mix(in srgb,var(--merchant-accent) 46%,var(--editorial-rule))!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.merchant-language-examples .merchant-example-grid>.merchant-example:nth-child(2){--merchant-accent:var(--info)}
.merchant-language-examples .merchant-example-grid>.merchant-example:nth-child(3){--merchant-accent:var(--success)}
.merchant-language-examples .merchant-example-grid>.merchant-example:nth-child(4){--merchant-accent:var(--warning)}
.merchant-language-examples .merchant-example-grid>.merchant-example:nth-child(5){--merchant-accent:var(--brand-hover)}
.merchant-language-examples .merchant-example-grid>.merchant-example:nth-child(6){--merchant-accent:var(--info)}

.merchant-language-examples .merchant-example-grid>.merchant-example>span{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  width:max-content!important;
  max-width:100%!important;
  margin-bottom:16px!important;
  padding:5px 8px!important;
  border:1px solid color-mix(in srgb,var(--merchant-accent) 30%,transparent)!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--merchant-accent) 9%,transparent)!important;
  color:var(--merchant-accent)!important;
  font-weight:800!important;
}
.merchant-language-examples .merchant-example-grid>.merchant-example>span:before{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:currentColor;
  content:"";
}
.merchant-language-examples .merchant-example-grid>.merchant-example h3,
.merchant-language-examples .merchant-example-grid>.merchant-example p{
  max-width:none!important;
}
.merchant-language-examples .merchant-example-grid>.merchant-example h3{
  color:var(--text)!important;
}
.merchant-language-examples .merchant-example-grid>.merchant-example p{
  color:var(--muted)!important;
}

/* Safety is a three-rule system: show all three principles in one row on desktop. */
body[data-editorial-route="/why-safe/"] .merchant-language-examples .merchant-example-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  column-gap:clamp(26px,3.5vw,48px)!important;
}
body[data-editorial-route="/why-safe/"] .merchant-language-examples .merchant-example-grid>.merchant-example:nth-child(1){--merchant-accent:var(--brand)}
body[data-editorial-route="/why-safe/"] .merchant-language-examples .merchant-example-grid>.merchant-example:nth-child(2){--merchant-accent:var(--info)}
body[data-editorial-route="/why-safe/"] .merchant-language-examples .merchant-example-grid>.merchant-example:nth-child(3){--merchant-accent:var(--success)}

/* Pricing: keep scenario groups and the three-step workflow compact on desktop. */
[data-pricing-decision] .scenario-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
[data-pricing-decision] .scenario-grid article{
  grid-column:auto!important;
  grid-row:auto!important;
  min-width:0!important;
  min-height:0!important;
}
[data-pricing-decision] [data-merchant-content="workflow"] p{
  min-height:0!important;
  margin:0 0 14px!important;
}
[data-pricing-decision] [data-merchant-content="workflow"] strong{
  margin-top:0!important;
}

/* Signal Lime remains a bright status/fill color. In Light mode, small text uses
   the accessible semantic success token instead of lime-on-white. */
html[data-theme="light"] [data-pricing-decision] .decision-plan-top b,
html[data-theme="light"] [data-pricing-decision] .enterprise-strip span,
html[data-theme="light"] [data-pricing-decision] .enterprise-details li::before,
html[data-theme="light"] [data-pricing-decision] .finder-result b,
html[data-theme="light"] [data-pricing-decision] .merchant-run>span,
html[data-theme="light"] [data-pricing-decision] .calc-results .highlight strong{
  color:var(--success)!important;
}
html[data-theme="light"] .merchant-language-examples .merchant-example-grid>.merchant-example>span{
  color:color-mix(in srgb,var(--merchant-accent) 68%,var(--text))!important;
}

@media(max-width:900px){
  body[data-editorial-route="/why-safe/"] .merchant-language-examples .merchant-example-grid{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:800px){
  [data-pricing-decision] .scenario-grid{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:760px){
  .merchant-language-examples .merchant-example-grid{
    grid-template-columns:1fr!important;
    column-gap:0!important;
  }
}