/* Homepage promo band + basket callout.
   Data: Marketing > Homepage Promo (oc_jw_home_promo). Colours = $brand-color / $brand-primary. */

.promo-hero{background:#3d3443;color:#fff;overflow:hidden;margin:0 0 10px}
.promo-hero__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;grid-gap:28px 48px;gap:28px 48px;padding-top:44px;padding-bottom:44px}
.promo-hero__inner:before,.promo-hero__inner:after{display:none}/* cancel Bootstrap .container clearfix inside grid */
.promo-hero__inner--text{grid-template-columns:minmax(0,1fr);text-align:center}
.promo-hero__inner--text .promo-hero__actions{justify-content:center}
.promo-hero__inner--text .promo-hero__sub,.promo-hero__inner--text .promo-hero__small{margin-left:auto;margin-right:auto}
.promo-hero__eyebrow{display:inline-block;margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#00AEEF}
.promo-hero__headline{margin:0;font-weight:800;line-height:.92;color:#fff;font-family:inherit}
.promo-hero__pct{display:block;font-size:136px;font-size:clamp(72px,12vw,136px);letter-spacing:-.045em}
.promo-hero__pct sup{font-size:.42em;top:auto;vertical-align:.95em;margin-left:3px;color:#00AEEF}
.promo-hero__what{display:block;font-size:34px;font-size:clamp(22px,3.2vw,34px);font-weight:700;letter-spacing:-.01em;margin-top:8px}
.promo-hero__sub{margin:16px 0 24px;color:#ddd7e1;max-width:44ch;font-size:15px;line-height:1.55}
.promo-hero__actions{display:flex;flex-wrap:wrap;align-items:center;margin:-6px}
.promo-hero__actions > *{margin:6px}
.promo-hero__cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;background:#00AEEF;color:#2a232f;font-weight:800;letter-spacing:.02em;text-decoration:none}
.promo-hero__cta .fa{margin-left:8px}
.promo-hero__cta:hover,.promo-hero__cta:focus{background:#3cc4f5;color:#2a232f;text-decoration:none}
.promo-hero__small{margin:18px 0 0;font-size:12px;line-height:1.6;color:#c4bcc9;max-width:56ch}
.promo-hero__small a{color:#fff;text-decoration:underline}
.promo-hero__ends{display:inline-block;border:1px solid rgba(255,255,255,.4);padding:1px 8px;margin-right:8px;color:#fff;font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}

.promo-hero__art{position:relative;justify-self:end;width:100%;max-width:460px}
.promo-hero__art img{display:block;width:100%;height:auto;max-width:100%}
.promo-price{position:absolute;left:-18px;bottom:22px;background:#fff;color:#2a232f;padding:12px 16px 12px 14px;box-shadow:0 8px 0 rgba(0,0,0,.22);line-height:1.2}
.promo-price > span{display:block}
.promo-price__size{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b6170;margin-bottom:2px}
.promo-price__row s{color:#6b6170;font-size:15px;margin-right:10px}
.promo-price__row strong{color:#c8102e;font-size:30px;font-weight:800;letter-spacing:-.02em}
.promo-price__note{font-size:11px;color:#6b6170;margin-top:2px}

/* code chip / copy button, shared by banner and basket */
.promo-code{display:inline-flex;align-items:stretch;min-height:50px;padding:0;border:2px dashed #00AEEF;border-radius:0;background:transparent;color:#fff;font-weight:800;font-size:18px;line-height:1;letter-spacing:.16em;cursor:pointer}
.promo-code__value{display:flex;align-items:center;padding:0 16px;-webkit-user-select:all;user-select:all}
.promo-code__action{display:flex;align-items:center;background:#00AEEF;color:#2a232f;font-size:12px;letter-spacing:.06em;padding:0 12px;text-transform:uppercase;white-space:nowrap}
.promo-code__action .fa{margin-right:6px}
.promo-code.is-copied .promo-code__action{background:#fff}
.promo-code--light{color:#3d3443}
.promo-code:focus,.promo-hero__cta:focus{outline:3px solid #fff;outline-offset:3px}
.promo-code--light:focus,.promo-callout__apply:focus{outline:3px solid #0077a8;outline-offset:3px}
.promo-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@media (max-width:767px){
  .promo-hero__inner{grid-template-columns:minmax(0,1fr);padding-top:28px;padding-bottom:34px}
  .promo-hero__art{order:-1;justify-self:center;width:86%;max-width:340px}
  .promo-price{left:-10px;bottom:14px}
  .promo-hero__actions > *{flex:1 1 100%}
  .promo-code{justify-content:space-between}
}

/* basket callout (checkout/cart.tpl) */
.promo-callout{display:flex;flex-wrap:wrap;align-items:center;border:2px solid #00AEEF;border-left-width:8px;background:#effaff;padding:8px 10px;margin:0 0 16px}
.promo-callout > *{margin:6px}
.promo-callout__icon{font-size:28px;color:#0077a8}
.promo-callout__body{flex:1 1 240px;min-width:0}
.promo-callout__title{font-weight:700;font-size:16px;margin:0 0 2px}
.promo-callout__small{font-size:12.5px;margin:0;color:#6b6170}
.promo-callout__actions{display:flex;flex-wrap:wrap;align-items:center;margin:0 -4px}
.promo-callout__actions > *{margin:4px}
.promo-callout__apply{display:inline-flex;align-items:center;justify-content:center;background:#3d3443;color:#fff;border:0;font-weight:700;font-size:14px;padding:0 18px;min-height:50px;cursor:pointer}
.promo-callout__apply .fa{margin-right:8px}
.promo-callout__apply:hover{background:#2a232f}
.promo-callout__apply[disabled]{opacity:.7;cursor:progress}
.promo-callout.is-applied{border-color:#3c763d;background:#e3f3e0}
.promo-callout.is-applied .promo-callout__icon{color:#3c763d}
@media (max-width:480px){.promo-callout__actions,.promo-callout__apply,.promo-callout__actions .promo-code{width:100%}}
@media (prefers-reduced-motion:no-preference){.promo-code__action,.promo-hero__cta{transition:background .2s}}