/* DINOGOODS GLOBAL BUTTON SYSTEM V2 — compact, consistent, line-art CTAs */
:root{
  --dg-btn-green:#033220;
  --dg-btn-green-hover:#0b4a34;
  --dg-btn-green-soft:#eaf0ec;
  --dg-btn-white:#fff;
  --dg-btn-line:#cbd6d0;
  --dg-btn-h:50px;
  --dg-btn-h-mobile:48px;
}

/* Base CTA */
.btn{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:var(--dg-btn-h)!important;
  height:var(--dg-btn-h)!important;
  padding:0 19px!important;
  gap:14px!important;
  border:1px solid transparent!important;
  border-radius:0!important;
  white-space:nowrap!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.012em!important;
  text-decoration:none!important;
  cursor:pointer;
  transform:none!important;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease!important;
}
.btn>span{
  min-width:0;
  white-space:nowrap!important;
  line-height:1!important;
}
.btn .arrow,
.btn .line-art-arrow,
.btn svg{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
  margin:0!important;
  transition:transform .2s ease!important;
}
.btn:hover .arrow,
.btn:hover .line-art-arrow,
.btn:hover svg{
  transform:translate(2px,-2px);
}
.btn:focus-visible{
  outline:2px solid #4c944f!important;
  outline-offset:3px!important;
}
.btn[aria-disabled="true"],
.btn:disabled{
  opacity:.48!important;
  pointer-events:none!important;
}

/* Primary */
.btn-solid,
.btn-header{
  background:var(--dg-btn-green)!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-white)!important;
}
.btn-solid:hover,
.btn-solid:focus-visible,
.btn-header:hover,
.btn-header:focus-visible{
  background:var(--dg-btn-green-hover)!important;
  border-color:var(--dg-btn-green-hover)!important;
  color:var(--dg-btn-white)!important;
}

/* Secondary on light backgrounds */
.btn-outline{
  background:transparent!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-green)!important;
}
.btn-outline:hover,
.btn-outline:focus-visible{
  background:var(--dg-btn-green)!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-white)!important;
}

/* CTA variants used over photography / dark surfaces */
.btn-light{
  background:var(--dg-btn-green)!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-white)!important;
}
.btn-light:hover,
.btn-light:focus-visible{
  background:var(--dg-btn-white)!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-green)!important;
}
.btn-outline-light{
  background:var(--dg-btn-white)!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-green)!important;
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible{
  background:var(--dg-btn-green)!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-white)!important;
}

/* Header CTA remains compact while sharing the same visual language. */
.btn-header{
  min-height:42px!important;
  height:42px!important;
  padding:0 16px!important;
  font-size:13px!important;
  gap:11px!important;
}
.btn-header .arrow,
.btn-header .line-art-arrow,
.btn-header svg{
  width:15px!important;
  height:15px!important;
  flex-basis:15px!important;
}

/* Kill legacy oversized/full-width CTA rules. */
.sourcing-final-actions,
.hero-actions,
.button-row,
.source-actions{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:9px!important;
}
.sourcing-final-actions{
  width:auto!important;
  max-width:none!important;
  margin-top:8px!important;
}
.sourcing-final-actions .btn,
.source-actions .btn,
.hero-actions .btn,
.button-row .btn{
  width:auto!important;
  min-width:0!important;
  min-height:var(--dg-btn-h)!important;
  height:var(--dg-btn-h)!important;
  padding:0 19px!important;
  gap:14px!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:14px!important;
  font-weight:700!important;
}
.sourcing-final-actions .btn .arrow,
.sourcing-final-actions .btn svg{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
}

/* Form and card CTA buttons use the same base system without accidental stretching. */
.form .btn,
.b2b-form .btn,
.article-action-card .btn,
.seo-conversion-box .btn,
.matcha-related-route .btn{
  min-height:var(--dg-btn-h)!important;
  height:var(--dg-btn-h)!important;
  padding:0 19px!important;
  font-size:14px!important;
}
.article-action-card .btn{
  width:100%!important;
  justify-content:space-between!important;
}

/* Text CTAs stay text CTAs, but share icon geometry and motion. */
.text-link,
.card-link{
  gap:8px!important;
  font-size:14px!important;
  line-height:1.25!important;
  font-weight:700!important;
}
.text-link .arrow,
.card-link .arrow,
.text-link .line-art-arrow,
.card-link .line-art-arrow,
.text-link svg,
.card-link svg{
  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;
  margin:0!important;
  transition:transform .2s ease!important;
}
.text-link:hover .arrow,
.card-link:hover .arrow,
.text-link:hover .line-art-arrow,
.card-link:hover .line-art-arrow,
.text-link:hover svg,
.card-link:hover svg{
  transform:translate(2px,-2px);
}

/* Utility icon buttons remain square and distinct from CTA buttons. */
.rail-controls button,
.menu-toggle,
.menu-close,
.source-gallery-ui button{
  border-radius:0!important;
}

@media(max-width:899px){
  .btn,
  .sourcing-final-actions .btn,
  .source-actions .btn,
  .hero-actions .btn,
  .button-row .btn,
  .form .btn,
  .b2b-form .btn,
  .seo-conversion-box .btn,
  .matcha-related-route .btn{
    min-height:var(--dg-btn-h-mobile)!important;
    height:var(--dg-btn-h-mobile)!important;
    padding:0 17px!important;
    font-size:13.5px!important;
    gap:12px!important;
  }
  .sourcing-final-actions,
  .source-actions{
    display:flex!important;
    grid-template-columns:none!important;
    width:auto!important;
    max-width:100%!important;
    gap:8px!important;
  }
  .source-actions .btn,
  .sourcing-final-actions .btn{
    width:auto!important;
  }
}
@media(max-width:520px){
  .btn{
    max-width:100%!important;
  }
  .sourcing-final-actions,
  .source-actions,
  .button-row,
  .hero-actions{
    align-items:flex-start!important;
  }
  .sourcing-final-actions .btn,
  .source-actions .btn,
  .button-row .btn,
  .hero-actions .btn{
    width:auto!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .btn,
  .btn .arrow,
  .btn .line-art-arrow,
  .btn svg,
  .text-link .arrow,
  .card-link .arrow,
  .text-link svg,
  .card-link svg{
    transition:none!important;
  }
  .btn:hover .arrow,
  .btn:hover .line-art-arrow,
  .btn:hover svg,
  .text-link:hover .arrow,
  .card-link:hover .arrow,
  .text-link:hover svg,
  .card-link:hover svg{
    transform:none!important;
  }
}


/* INSIGHT CTA CONTRAST FIX — 2026-10-03 */
.insight-seo-detail-v4 .seo-conversion-box .btn-light{
  background:#fff!important;
  border-color:#fff!important;
  color:#033220!important;
}
.insight-seo-detail-v4 .seo-conversion-box .btn-light>span,
.insight-seo-detail-v4 .seo-conversion-box .btn-light .arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-light .line-art-arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-light svg{
  color:#033220!important;
  stroke:currentColor!important;
}
.insight-seo-detail-v4 .seo-conversion-box .btn-light:hover,
.insight-seo-detail-v4 .seo-conversion-box .btn-light:focus-visible{
  background:#4c944f!important;
  border-color:#4c944f!important;
  color:#fff!important;
}
.insight-seo-detail-v4 .seo-conversion-box .btn-light:hover>span,
.insight-seo-detail-v4 .seo-conversion-box .btn-light:focus-visible>span,
.insight-seo-detail-v4 .seo-conversion-box .btn-light:hover .arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-light:focus-visible .arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-light:hover .line-art-arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-light:focus-visible .line-art-arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-light:hover svg,
.insight-seo-detail-v4 .seo-conversion-box .btn-light:focus-visible svg{
  color:#fff!important;
}
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light{
  background:transparent!important;
  border-color:#fff!important;
  color:#fff!important;
}
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light>span,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light .arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light .line-art-arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light svg{
  color:#fff!important;
  stroke:currentColor!important;
}
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light:hover,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light:focus-visible{
  background:#fff!important;
  border-color:#fff!important;
  color:#033220!important;
}
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light:hover>span,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light:focus-visible>span,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light:hover .arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light:focus-visible .arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light:hover .line-art-arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light:focus-visible .line-art-arrow,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light:hover svg,
.insight-seo-detail-v4 .seo-conversion-box .btn-outline-light:focus-visible svg{
  color:#033220!important;
}
.insight-seo-detail-v4 .seo-conversion-box .button-row{
  gap:10px!important;
  align-items:center!important;
}
.insight-seo-detail-v4 .seo-conversion-box .button-row .btn{
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
}
@media(max-width:640px){
  .insight-seo-detail-v4 .seo-conversion-box .button-row{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .insight-seo-detail-v4 .seo-conversion-box .button-row .btn{
    width:100%!important;
    justify-content:space-between!important;
  }
}


/* GLOBAL FILLED CTA CONTRAST — authoritative fix 2026-10-03
   Every DINOGOODS green filled CTA must render white copy/icon.
   Hover/focus inverses to white surface + green copy. */
.btn-solid,
.btn-header,
.btn-light{
  background:var(--dg-btn-green)!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-white)!important;
}
.btn-solid>span,
.btn-header>span,
.btn-light>span,
.btn-solid .arrow,
.btn-header .arrow,
.btn-light .arrow,
.btn-solid .line-art-arrow,
.btn-header .line-art-arrow,
.btn-light .line-art-arrow,
.btn-solid svg,
.btn-header svg,
.btn-light svg{
  color:var(--dg-btn-white)!important;
  stroke:currentColor!important;
  fill:none;
}
.btn-solid:hover,
.btn-solid:focus-visible,
.btn-header:hover,
.btn-header:focus-visible,
.btn-light:hover,
.btn-light:focus-visible{
  background:var(--dg-btn-white)!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-green)!important;
}
.btn-solid:hover>span,
.btn-solid:focus-visible>span,
.btn-header:hover>span,
.btn-header:focus-visible>span,
.btn-light:hover>span,
.btn-light:focus-visible>span,
.btn-solid:hover .arrow,
.btn-solid:focus-visible .arrow,
.btn-header:hover .arrow,
.btn-header:focus-visible .arrow,
.btn-light:hover .arrow,
.btn-light:focus-visible .arrow,
.btn-solid:hover .line-art-arrow,
.btn-solid:focus-visible .line-art-arrow,
.btn-header:hover .line-art-arrow,
.btn-header:focus-visible .line-art-arrow,
.btn-light:hover .line-art-arrow,
.btn-light:focus-visible .line-art-arrow,
.btn-solid:hover svg,
.btn-solid:focus-visible svg,
.btn-header:hover svg,
.btn-header:focus-visible svg,
.btn-light:hover svg,
.btn-light:focus-visible svg{
  color:var(--dg-btn-green)!important;
  stroke:currentColor!important;
}

/* Outline CTA on light backgrounds */
.btn-outline{
  background:transparent!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-green)!important;
}
.btn-outline>span,
.btn-outline .arrow,
.btn-outline .line-art-arrow,
.btn-outline svg{
  color:var(--dg-btn-green)!important;
  stroke:currentColor!important;
}
.btn-outline:hover,
.btn-outline:focus-visible{
  background:var(--dg-btn-green)!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-white)!important;
}
.btn-outline:hover>span,
.btn-outline:focus-visible>span,
.btn-outline:hover .arrow,
.btn-outline:focus-visible .arrow,
.btn-outline:hover .line-art-arrow,
.btn-outline:focus-visible .line-art-arrow,
.btn-outline:hover svg,
.btn-outline:focus-visible svg{
  color:var(--dg-btn-white)!important;
  stroke:currentColor!important;
}

/* Outline CTA on dark / photographic backgrounds */
.btn-outline-light{
  background:transparent!important;
  border-color:var(--dg-btn-white)!important;
  color:var(--dg-btn-white)!important;
}
.btn-outline-light>span,
.btn-outline-light .arrow,
.btn-outline-light .line-art-arrow,
.btn-outline-light svg{
  color:var(--dg-btn-white)!important;
  stroke:currentColor!important;
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible{
  background:var(--dg-btn-white)!important;
  border-color:var(--dg-btn-white)!important;
  color:var(--dg-btn-green)!important;
}
.btn-outline-light:hover>span,
.btn-outline-light:focus-visible>span,
.btn-outline-light:hover .arrow,
.btn-outline-light:focus-visible .arrow,
.btn-outline-light:hover .line-art-arrow,
.btn-outline-light:focus-visible .line-art-arrow,
.btn-outline-light:hover svg,
.btn-outline-light:focus-visible svg{
  color:var(--dg-btn-green)!important;
  stroke:currentColor!important;
}

/* Prevent nested dark-section typography rules from overriding button labels. */
.hero .btn-light,
.feature .btn-light,
.cta-photo .btn-light,
.sourcing-final-cta .btn-light,
.seo-bottom-cta .btn-light,
.seo-conversion-box .btn-light,
.site-footer .btn-light{
  color:var(--dg-btn-white)!important;
}
.hero .btn-light>span,
.feature .btn-light>span,
.cta-photo .btn-light>span,
.sourcing-final-cta .btn-light>span,
.seo-bottom-cta .btn-light>span,
.seo-conversion-box .btn-light>span,
.site-footer .btn-light>span{
  color:var(--dg-btn-white)!important;
}
.hero .btn-light:hover,
.feature .btn-light:hover,
.cta-photo .btn-light:hover,
.sourcing-final-cta .btn-light:hover,
.seo-bottom-cta .btn-light:hover,
.seo-conversion-box .btn-light:hover,
.site-footer .btn-light:hover{
  color:var(--dg-btn-green)!important;
}
.hero .btn-light:hover>span,
.feature .btn-light:hover>span,
.cta-photo .btn-light:hover>span,
.sourcing-final-cta .btn-light:hover>span,
.seo-bottom-cta .btn-light:hover>span,
.seo-conversion-box .btn-light:hover>span,
.site-footer .btn-light:hover>span{
  color:var(--dg-btn-green)!important;
}