inside: the WTS theme forces its own colour on every
with * !important. */ .oht-holiday-notice { position: relative; z-index: 101; background: var(--oht-notice-bg, #00005c); color: var(--oht-notice-fg, #fff); font-family: var(--oht-notice-font, Outfit, sans-serif); font-size: 16px; line-height: 1.45; text-align: center; } .oht-holiday-notice__inner { max-width: 1140px; margin: 0 auto; padding: 10px 16px; } .oht-holiday-notice a, .oht-holiday-notice a:visited, .oht-holiday-notice a:hover { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* Phones get the one-line short message when one is set. display:none also * hides the other version from screen readers, so each reads only one. */ .oht-holiday-notice__short { display: none; } @media (max-width: 575px) { .oht-holiday-notice { font-size: 13px; line-height: 1.35; } .oht-holiday-notice__inner { padding: 7px 12px; } .oht-holiday-notice--has-short .oht-holiday-notice__full { display: none; } .oht-holiday-notice--has-short .oht-holiday-notice__short { display: inline; } } /* Themes that pin their header to the top of the document with * position:absolute (the WTS theme does this on the front page and on product * categories) would otherwise draw that header over the notice. Making the * page wrapper the positioning context moves such a header down below the * notice. Applied only while a notice is showing. * * Checked on the live WTS theme 2026-09-10 on the front page, a product * category, a product page and mobile: the header, hello bar and Menu panel * all sit correctly below the notice. */ .oht-has-holiday-notice #page { position: relative; }