.belvg-discount-banner-wrapper { width: 100%; } /* * One promotional band at a time. While a page-level discount banner is on screen, the CMS strip * in the header steps aside; both halves of the pair are named so no breakpoint shows two bands. * * The marker lives on , not , because templates/preflight.phtml sets it from an inline * head script before the strip is ever painted. js/discount-banner.js owns it after that and * corrects it against the fresh quote. */ html.belvg-discount-banner-shown .page-header .panel.wrapper > .mobile-only-banner, html.belvg-discount-banner-shown .page-header .panel.wrapper > .desktop-only-banner { display: none; } /* * The reveal and the strip's exit have to land in the same layout pass. The class is written the * moment the quote says so, but the banner is a Knockout template that arrives about 50 ms later, so * ungated the page moved twice in opposite directions: the strip left, then the banner pushed * everything back down. Holding the banner out of flow until the class arrives makes it one move, * and js/discount-banner.js holds the class back until the banner has actually rendered. * * Only the two placements that sit in page flow are gated. The checkout copy renders inside the * summary area and the minicart and add-to-bag copies live in overlays, so none of them can move * the header. */ html:not(.belvg-discount-banner-shown) .belvg-discount-banner--pdp, html:not(.belvg-discount-banner-shown) .belvg-discount-banner--cart { display: none; } /* * When the head script already knows the banner is coming, the strip never paints, so the band it * would have filled has to be held open until the template lands. The reserve matches the strip's * own 35 px and takes the banner's colour from the cached payload, so the shopper sees the band it * is about to become rather than a white gap. Without a cached colour the reserve stays transparent. */ html.belvg-discount-banner-shown .belvg-discount-banner--pdp, html.belvg-discount-banner-shown .belvg-discount-banner--cart { background: var(--belvg-discount-banner-bg, transparent); min-height: 35px; } .belvg-discount-banner { align-items: center; display: flex; gap: 8px; justify-content: center; line-height: 1.2; padding: 10px 12px; text-align: center; } .belvg-discount-banner__icon { display: inline-flex; flex-shrink: 0; } .belvg-discount-banner__text { font-size: 15px; font-weight: 600; padding-top: 1px; } .cart-top-container { flex-wrap: wrap; } .belvg-discount-banner--cart { clear: both; flex: 0 0 100%; margin-bottom: 15px; order: -1; width: 100%; } #modalAddToCartAfter { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; } .belvg-discount-banner--popup { margin: 15px -10px; width: auto; text-transform: uppercase; } .belvg-discount-banner--popup .belvg-discount-banner { margin-bottom: 20px; } .block-minicart .belvg-discount-banner { margin: -20px -20px 12px; padding-left: 9px; padding-right: 9px; } .block-minicart .belvg-discount-banner__text, .belvg-discount-banner--popup .belvg-discount-banner__text { font-size: 13px; padding-top: 1px; } .minicart-wrapper #minicart-content-wrapper .items-total, .minicart-wrapper #minicart-content-wrapper .subtotal { align-items: baseline; display: flex; flex-direction: row; float: none; justify-content: space-between; margin: 0; text-align: left; width: 100%; } .minicart-wrapper #minicart-content-wrapper .actions > .primary { margin-left: 0; margin-right: 0; width: 100%; } .minicart-wrapper #minicart-content-wrapper .actions > .primary .action.primary { width: 100%; } .minicart-wrapper #minicart-content-wrapper .actions > .primary .paypal.checkout { text-align: center; width: 100%; } .minicart-wrapper #minicart-content-wrapper .actions .secondary .action.viewcart { box-sizing: border-box; width: 100%; } .minicart-wrapper #minicart-content-wrapper .minicart-items-wrapper { padding-left: 20px; padding-right: 20px; } .minicart-wrapper #minicart-content-wrapper .items-total span, .minicart-wrapper #minicart-content-wrapper .subtotal .price-container { margin: 0; } .minicart-wrapper #minicart-content-wrapper .items-total .count { order: 2; } .block-minicart .belvg-minicart-discount .label, .block-minicart .belvg-minicart-discount .price-wrapper { color: #a30f2d; } .block-minicart .belvg-minicart-estimated .label, .block-minicart .belvg-minicart-estimated .price-wrapper { font-weight: 700; } .block-minicart .belvg-minicart-estimated .label-note { display: inline-block; margin-left: 4px; font-weight: 400; text-transform: none; opacity: 0.7; } @media (min-width: 768px) { .belvg-discount-banner--popup .belvg-discount-banner { margin-bottom: 35px; } .belvg-discount-banner--cart { flex: 0 0 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; } .block-minicart .belvg-discount-banner { padding-left: 20px; padding-right: 20px; } .minicart-wrapper #minicart-content-wrapper .block-content > .actions { margin-top: 10px; } } @media (min-width: 769px) { .checkout-block.-summary > .belvg-discount-banner { margin-left: -24px; margin-right: -24px; } } @media (max-width: 768px) { .checkout-block.-summary > .belvg-discount-banner { padding: 10px 7px; } } @media (max-width: 767px) { .belvg-discount-banner__text { font-size: 13px; padding-top: 2px; } } /* The theme hides every .title inside .cart-summary for the "Summary" heading, which also swallows the label of the discount totals row. Bring it back for that row only. */ .checkout-cart-index #maincontent .cart-summary #cart-totals .totals .title { display: inline; } /* --------------------------------------------------------------------------- * Header promo strip. * * The markup used to come from the CMS block header_banner and its style and * rotator script from the CMS block top-banner-style, surfaced through a widget. * Block\HeaderStrip renders the wrappers now and the copy still comes from the * per-store CMS blocks top-banner-mobile / top-banner-desktop, so the client * keeps editing it in the admin. * * Two slide idioms exist in that copy and both are styled here: .promo-banner * with the rotator (English) and .top-autoplay with data-am-fadeshow radio * inputs and no script (UK, DE, JP, FR, PT, AU, CA, ES). * ------------------------------------------------------------------------- */ .mobile-only-banner { background: #fff; } .promo-banner { background-color: #222; color: #fff; text-align: center; padding: 12px 0; position: relative; overflow: hidden; font-family: inherit; font-size: 15px; height: 11px; } .promo-slides { position: relative; width: 100%; height: 100%; bottom: 6px; } .promo-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; transition: opacity 1s ease-in-out; } .promo-slide.promo-active { opacity: 1; z-index: 1; } .promo-coupon { background: #eee; color: #222; font-size: 12px; padding: 4px 8px; border-radius: 3px; margin-left: 5px; font-weight: 600; } /* --------------------------------------------------------------------------- * .top-autoplay slides. * * The radio inputs and labels are an accessibility affordance from CHICWISH-1446, * not a control surface: nothing ever styled :checked, so the rotation runs on a * keyframe cycle instead and the inputs stay out of the flow. The cycle length * depends on the slide count, which the copy decides per store view, so each * count gets its own keyframes and the count is read off the sibling chain. * Hold and fade match the .promo-banner rotator: 5s visible, 0.3s cross-fade. * ------------------------------------------------------------------------- */ .top-autoplay [data-am-fadeshow] { position: relative; height: 35px; overflow: hidden; background-color: #222; } .top-autoplay [data-am-fadeshow] > input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .top-autoplay .fs-slides { position: relative; width: 100%; height: 100%; } .top-autoplay .fs-slide { position: absolute; top: 0; left: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 0 12px; box-sizing: border-box; font-size: 15px; line-height: 1.2; text-align: center; opacity: 0; } .top-autoplay .fs-slide .coupon { background: #eee; color: #222; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 3px; margin-left: 5px; } /* * A lone slide has nothing to rotate to, and a count this file does not cover has no animation to * carry it. Both land here, so an unsupported count fails to a readable strip rather than an empty * band. For every covered count the keyframes are infinite and therefore always active, so they win * over this declaration. */ .top-autoplay .fs-slide:first-child { opacity: 1; } .top-autoplay .fs-slide:first-child:nth-last-child(2), .top-autoplay .fs-slide:first-child:nth-last-child(2) ~ .fs-slide { animation-name: cw-strip-cycle-2; animation-duration: 10.6s; animation-iteration-count: infinite; } .top-autoplay .fs-slide:first-child:nth-last-child(3), .top-autoplay .fs-slide:first-child:nth-last-child(3) ~ .fs-slide { animation-name: cw-strip-cycle-3; animation-duration: 15.9s; animation-iteration-count: infinite; } .top-autoplay .fs-slide:first-child:nth-last-child(4), .top-autoplay .fs-slide:first-child:nth-last-child(4) ~ .fs-slide { animation-name: cw-strip-cycle-4; animation-duration: 21.2s; animation-iteration-count: infinite; } .top-autoplay .fs-slide:nth-child(2) { animation-delay: 5.3s; } .top-autoplay .fs-slide:nth-child(3) { animation-delay: 10.6s; } .top-autoplay .fs-slide:nth-child(4) { animation-delay: 15.9s; } @keyframes cw-strip-cycle-2 { 0% { opacity: 0; } 2.83% { opacity: 1; } 50% { opacity: 1; } 52.83% { opacity: 0; } 100% { opacity: 0; } } @keyframes cw-strip-cycle-3 { 0% { opacity: 0; } 1.89% { opacity: 1; } 33.33% { opacity: 1; } 35.22% { opacity: 0; } 100% { opacity: 0; } } @keyframes cw-strip-cycle-4 { 0% { opacity: 0; } 1.42% { opacity: 1; } 25% { opacity: 1; } 26.42% { opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .top-autoplay .fs-slide { animation: none; opacity: 0; } .top-autoplay .fs-slide:first-child { opacity: 1; } }