/* Country discount card (common/includes/couponBar) under the nav of the v2 pages and under the category belt of the
   Shards pages and of templates. It carries everything itself and shares no class with chrome.css or main.css, the
   Shards pages load it before chrome.css. The notice card of the margin app: amber tint, background 12% of #F59E0B on
   white, icon 70% of it on ink. Half a second after load it flashes the old coupon bar's blue. Positioned so the hero's
   glow, which starts 140px above the hero, paints under it */
.coupon-card{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;padding:12px 16px;
  border-radius:14px;text-align:center;font-size:14px;font-weight:400;line-height:1.45;background:#FEF3E2;color:#4A4F5C;
  animation:couponFlash 1.5s ease-in-out .5s}
.coupon-card__ico{flex:none;color:#B27510;animation:couponLinkFlash 1.5s ease-in-out .5s}
.coupon-card a{color:#14161C;font-weight:600;text-decoration:underline;text-underline-offset:2px;animation:couponLinkFlash 1.5s ease-in-out .5s}
.coupon-card a:hover{color:#14161C}

/* #FEF3E2 is 12% of #F59E0B on white, #B27510 is 70% of it on #14161C, spelled out so the keyframes can return to them */
@keyframes couponFlash{
  0%,100%{background-color:#FEF3E2;color:#4A4F5C}
  30%,50%{background-color:#006EDB;color:#fff}
}
@keyframes couponLinkFlash{
  30%,50%{color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .coupon-card,.coupon-card a,.coupon-card__ico{animation:none}
}

/* The v2 header's column (chrome.css .nav-inner, common/v2/couponCard), on the Shards pages the header's (topnav.css
   .yx-wrap, common/bodies/composition). The Shards wrap is always there, empty when there is no discount */
.coupon-wrap{max-width:var(--container,1200px);margin:0 auto;padding:0 var(--gutter,24px)}
.coupon-wrap--shards{max-width:var(--yx-wrap,1680px);padding:0 var(--yx-gutter,24px)}
.coupon-wrap--shards .coupon-card{margin:0 0 16px}