/* ==========================================================================
   SCOTT COUNTRY — Components
   Direction B "Specialist System" — approved 2026-08-04
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: .85rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-body-bold); font-size: var(--fs-base);
  text-transform: uppercase; letter-spacing: .05em;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  min-height: 48px;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn--secondary:hover { background: var(--accent); color: #fff; }
.btn--on-dark { background: #fff; color: var(--bg-dark); }
.btn--on-dark:hover { background: var(--accent-on-dark); color: #fff; }
.btn--ghost-on-dark { background: transparent; color: var(--text-on-dark); border: 1px solid var(--border-on-dark); }
.btn--ghost-on-dark:hover { border-color: var(--text-on-dark); color: var(--text-on-dark); }

/* ---------- Announcement bar (1:1 live Dawn: black utility-bar, desktop
   custom-container ≥990px, mobile slideshow-component <990px) ---------- */
.utility-bar { height: 100%; z-index: 2; position: relative; }
.utility-bar.color-scheme-4, .utility-bar { background: #000; color: #fff; border-bottom: 1px solid rgba(255,255,255,.15); }
.utility-bar__grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "announcements"; }
.utility-bar__grid.page-width { padding-left: 3rem; padding-right: 3rem; }
.announcement-bar__custom-container {
  display: flex; justify-content: space-between; align-items: center;
  grid-area: announcements; gap: var(--space-6);
}
.announcement-bar__custom-block { padding: 0; }
.announcement-bar__announcement {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: nowrap; min-height: 39px; padding: .9rem 0; white-space: nowrap;
}
.announcement-bar__announcement img { width: 24px; height: 24px; flex: none; }
.announcement-bar__message { margin: 0; padding: 0; text-align: center; letter-spacing: .1rem; font-size: var(--fs-sm); line-height: 1.2; }
.announcement-bar__message.h5 { font-family: var(--font-heading); font-weight: 500; }
.announcement-bar__custom-container .list-payment,
.announcement-bar .list-payment { list-style: none; display: flex; align-items: center; gap: 4px; padding: 0; margin: 0; }
.announcement-bar__custom-container .list-payment__item,
.announcement-bar .list-payment__item { display: inline-flex; }
.announcement-bar__custom-container .list-payment__item svg,
.announcement-bar__custom-container .list-payment__item img { width: 30px; height: 19px; display: block; object-fit: contain; }
.omniCapital { background-color: #fff; border-radius: 2px; }
@media screen and (max-width: 1220px) and (min-width: 990px) { .announcement-bar__custom-container .list-payment { display: none; } }
@media screen and (max-width: 670px) { .announcement-bar .list-payment { display: none; } }

/* Mobile/tablet slideshow (live: slideshow-component.large-up-hide) */
.announcement-bar { height: 39px; }
.announcement-bar-slider, .announcement-bar-slider .slider { width: 100%; }
.announcement-bar-slider { display: flex; align-items: center; justify-content: center; }
.announcement-bar .slider--everywhere { display: flex; flex-wrap: nowrap; overflow: hidden; margin: 0; scroll-snap-type: x mandatory; transition: transform .3s ease-out; }
.announcement-bar .slideshow__slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; }
.announcement-bar .announcement-bar__announcement { min-height: 39px; }
.announcement-bar .slider-button { width: 44px; min-width: 44px; height: 39px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.announcement-bar .slider-button:hover { color: rgba(255,255,255,.7); }
.announcement-bar .slider-button .icon-caret { width: 12px; height: 12px; }
.announcement-bar .slider-button--next .icon-caret { transform: rotate(-90deg); }
.announcement-bar .slider-button--prev .icon-caret { transform: rotate(90deg); }

/* Dawn responsive helpers (breakpoints: 750 / 990) */
@media screen and (max-width: 749px) { .small-hide { display: none !important; } }
@media screen and (min-width: 750px) and (max-width: 989px) { .medium-hide { display: none !important; } }
@media screen and (min-width: 990px) { .large-up-hide { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .announcement-bar .slider--everywhere { transition: none; } }

/* ---------- Header (live Dawn: pure black, grid layout, on-scroll-up) ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--bg-dark); color: var(--text-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
  transition: background-color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.52,0,.61,.99);
}
/* on-scroll-up: header slides away while scrolling down, returns on scroll up */
.header.header--hidden { transform: translateY(-101%); }
/* Homepage dynamic flow: transparent over the hero, solid black on scroll
   (live header is scheme-4 black; this keeps the dark feel while giving the
   transparent-over-hero effect). Inner pages keep the solid header. */
body.page-home .header {
  background: transparent;
  border-bottom-color: transparent;
}
body.page-home .header.is-scrolled {
  background: var(--bg-dark);
  border-bottom-color: var(--border-on-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
/* Pull the homepage hero up behind the transparent header.
   Hero height matches the live site's banner--large: 72rem (~720px) desktop,
   39rem (~390px) mobile-bottom, with responsive steps. */
body.page-home .hero-slider { margin-top: calc(-1 * var(--header-h)); }
body.page-home .hero-slider .hero-slide { min-height: calc(720px + var(--header-h)); }
body.page-home .hero-slider__inner { min-height: calc(720px + var(--header-h)); }
@media (max-width: 1024px) {
  body.page-home .hero-slider .hero-slide { min-height: calc(560px + var(--header-h)); }
  body.page-home .hero-slider__inner { min-height: calc(560px + var(--header-h)); }
}
@media (max-width: 640px) {
  body.page-home .hero-slider .hero-slide { min-height: calc(420px + var(--header-h)); }
  body.page-home .hero-slider__inner { min-height: calc(420px + var(--header-h)); }
}
.header__inner {
  display: grid; grid-template-areas: "toggle logo actions";
  grid-template-columns: auto 1fr auto; column-gap: var(--space-3);
  align-items: center; min-height: var(--header-h);
}
.header__logo { grid-area: logo; justify-self: center; line-height: 0; padding: .5rem; display: flex; align-items: center; gap: .5rem; }
.header__logo-mark { border-radius: 8px; flex: none; }
.header__logo img { width: 300px; height: auto; max-width: 50vw; }
/* Mobile (<=600px): shrink header height, and size the logo with min() so it
   NEVER overflows regardless of exact device width (iPhone SE through the
   largest Android/iPhone Pro Max) instead of guessing per-device breakpoints.
   Available width for the logo = 100vw minus its fixed-size neighbors:
   16px+16px container padding, 44px toggle, 6px+6px column-gaps, and
   3x44px=132px action icons = calc(100vw - 220px). */
@media (max-width: 600px) {
  :root { --header-h: 64px; }
  .header__logo { padding: .4rem; }
  .header__logo img { width: 170px; max-width: min(55vw, calc(100vw - 220px)); }
  .header__inner { column-gap: 6px; }
  .header .container { padding-inline: 16px; }
  .header__actions { padding-right: 0; }
}
.header__logo-text { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1.05rem; color: var(--brand, #154734); line-height: 1.1; white-space: nowrap; }
.footer__logo-text { display: block; margin-top: .35rem; }
.header__nav {
  grid-area: nav; display: none; align-items: center; justify-content: center;
}
.header__nav > a, .header__nav .mega-nav__link {
  font-family: var(--font-heading); font-size: 14px; font-weight: 500; font-style: normal;
  line-height: 27px; color: var(--text-nav); padding: 15px 20px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.header__nav > a:hover, .header__nav .mega-nav__link:hover { color: var(--text-nav-hover); }
.header__actions { grid-area: actions; justify-self: end; display: flex; align-items: center; padding-right: .8rem; }

/* Menu toggle (hamburger ↔ close morph — Dawn transition) */
.menu-toggle { display: inline-flex; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-hamburger { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Icon buttons (search / account / cart) — Dawn 44px hit area */
.icon-btn {
  position: relative; width: 44px; height: 44px; padding: 10px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-on-dark);
}
.icon-btn:hover { background: rgba(255,255,255,.08); }
.icon-btn .icon { width: 2rem; height: 2rem; }
.icon-btn:hover .icon { transform: scale(1.07); }
.icon-btn .icon { transition: transform .15s ease; }
.badge-count {
  position: absolute; top: 2px; right: 2px; background: var(--accent-on-dark); color: #fff;
  font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Mega nav dropdown (live: PURE BLACK panel, Categories 33.3% | Popular 66.7%) */
.mega-nav { position: relative; }
.mega-nav__panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 920px; max-width: min(920px, calc(100vw - var(--gutter)));
  background: #000; color: var(--text-on-dark);
  padding: var(--space-6) var(--space-6) var(--space-7);
  box-shadow: var(--shadow-drop);
  overflow: auto; max-height: 747px;
  visibility: hidden; opacity: 0;
  transition: opacity 300ms ease 150ms, visibility 0s linear 450ms;
}
.mega-nav:hover .mega-nav__panel, .mega-nav:focus-within .mega-nav__panel {
  visibility: visible; opacity: 1;
  transition: opacity 300ms ease 150ms;
}
.mega-nav__grid { display: grid; grid-template-columns: 33.3333% 66.6667%; gap: var(--space-5); }
.mega-nav__col-title {
  display: block; font-family: var(--font-heading); font-size: 14px; font-weight: 600; font-style: normal;
  color: rgb(218,218,218); margin-bottom: var(--space-3); letter-spacing: .02em;
}
.mega-nav__col-title:hover { color: #fff; }
.mega-nav__cats a, .mega-nav__product {
  display: block; font-family: var(--font-body); font-size: 13px; font-weight: 400;
  color: var(--text-nav); line-height: 21px; padding: 4px 0;
}
.mega-nav__cats a:hover, .mega-nav__product:hover { color: #fff; }
.mega-nav__product { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.mega-nav__product-price { color: var(--accent-on-dark); font-weight: 600; white-space: nowrap; font-size: 12px; }

/* Mobile menu drawer (live Dawn: 40rem from left, black) */
.mobile-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 100%; max-width: 400px;
  background: var(--bg-dark); color: var(--text-on-dark); z-index: calc(var(--z-drawer) + 1);
  display: flex; flex-direction: column;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.52,0,.61,.99), visibility 0s linear .3s;
}
.mobile-drawer.open { transform: translateX(0); visibility: visible; transition: transform .3s cubic-bezier(.52,0,.61,.99); }
.mobile-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-on-dark);
}
.mobile-drawer__title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 500; }
.mobile-drawer__nav { flex: 1; overflow-y: auto; padding: var(--space-3) 0; }
.mobile-drawer__item { margin: 0; }
.mobile-drawer__parent {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 14px var(--space-5); font-family: var(--font-heading); font-size: 17px;
  font-weight: 500; color: var(--text-on-dark); text-align: left;
}
.mobile-drawer__parent:hover { color: #fff; }
.mobile-drawer__retractor { display: inline-flex; color: var(--text-nav); transition: transform .25s ease; }
.mobile-drawer__parent[aria-expanded="true"] .mobile-drawer__retractor { transform: rotate(180deg); }
.mobile-drawer__retractor svg { width: 12px; height: 12px; }
.mobile-drawer__submenu { padding: 0 var(--space-3) var(--space-4); }
.mobile-drawer__submenu-col { padding: var(--space-2) var(--space-2) var(--space-3); }
.mobile-drawer__submenu-title {
  font-family: var(--font-heading); font-size: 14px; font-weight: 600;
  color: rgb(218,218,218); margin-bottom: var(--space-2); letter-spacing: .02em;
}
.mobile-drawer__submenu .mobile-drawer__link { font-size: 13px; padding: 8px var(--space-3); }
.mobile-drawer__link {
  display: block; padding: 10px var(--space-5); font-family: var(--font-heading);
  font-size: 14px; font-weight: 400; color: var(--text-nav);
}
.mobile-drawer__link--parent { font-size: 17px; font-weight: 500; color: var(--text-on-dark); }
.mobile-drawer__link:hover, .mobile-drawer__link--parent:hover { color: #fff; }
.mobile-drawer__utility {
  padding: var(--space-4) var(--space-5); background: rgba(255,255,255,.03);
  border-top: 1px solid var(--border-on-dark);
}
.mobile-drawer__account {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; font-size: 1.4rem; color: var(--text-on-dark);
}
.mobile-drawer__account svg { width: 2rem; height: 2rem; }
.mobile-drawer__socials { display: flex; gap: var(--space-2); padding-top: var(--space-3); }
.mobile-drawer__socials a {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-nav);
}
.mobile-drawer__socials a:hover { color: #fff; }
.mobile-drawer__socials svg { width: 2rem; height: 2rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--bg-dark); color: var(--text-on-dark);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
/* Dark glassmorphism overlay — matches the live brand treatment so the
   header sits on a dark scrim and the hero text stays readable. */
.hero__media::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(0,0,0) 0%, rgba(0,0,0,.6) 60%, rgba(255,255,255,0) 100%);
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; min-height: 540px; padding-block: var(--space-8); }
.hero__eyebrow { color: var(--accent-on-dark); margin-bottom: var(--space-4); }
.hero__title { font-size: var(--fs-5xl); font-weight: var(--fw-heading-display); line-height: 1.05; max-width: 14ch; }
.hero__support { margin-top: var(--space-5); font-size: var(--fs-lg); color: var(--text-on-dark); opacity: .85; max-width: var(--measure); }
.hero__ctas { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero__proof { margin-top: var(--space-7); display: flex; gap: var(--space-6); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-on-dark); opacity: .9; }
.hero__proof span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__proof svg { width: 18px; height: 18px; }

/* ---------- Brand wall ---------- */
.brandwall { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: center; padding-block: var(--space-6); }
.brandwall img { height: 44px; width: auto; filter: grayscale(1); opacity: .7; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.brandwall a:hover img { filter: grayscale(0); opacity: 1; }

/* ---------- Product card ---------- */
.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--border-light); }
.card__media { position: relative; aspect-ratio: 4/5; background: var(--bg-muted); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); z-index: 2; }
.badge { padding: .25rem .6rem; border-radius: var(--radius-sm); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.badge--sale { background: var(--sale); }
.badge--finance { background: var(--finance); }
.badge--new { background: var(--new); }
.card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex-grow: 1; }
.card__title { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); line-height: 1.4; }
.card__specs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.spec-chip { font-size: var(--fs-xs); font-weight: 600; padding: .2rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); }
.card__price { margin-top: auto; }
.price { font-size: var(--fs-lg); font-weight: var(--fw-body-bold); color: var(--accent); }
.price--was { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: line-through; margin-left: var(--space-2); }
.price--exvat { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.card__stock { font-size: var(--fs-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.card__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock--in { color: var(--new); }
.stock--backorder { color: var(--warning); }
.stock--soldout { color: var(--sale); }

/* ---------- Category tiles ---------- */
.tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/2; display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.tile:hover img { transform: scale(1.05); }
.tile__label { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-5) var(--space-4) var(--space-3); background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--fs-lg); }
.tile--dark .tile__label { color: #fff; }

/* ---------- Guides strip ---------- */
.guide-card { display: block; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.guide-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.guide-card__media { aspect-ratio: 16/9; background: var(--bg-muted); overflow: hidden; }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.guide-card__body { padding: var(--space-4); }
.guide-card__kicker { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.guide-card__title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-heading); margin-top: var(--space-2); line-height: 1.3; }
.guide-card__body p { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--bg-dark); color: var(--text-on-dark); }
.newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; padding-block: var(--space-8); }
.newsletter h2 { color: var(--text-on-dark); font-size: var(--fs-3xl); }
.newsletter p { margin-top: var(--space-3); color: var(--text-on-dark); opacity: .8; }
.newsletter__form { display: flex; gap: var(--space-3); }
.newsletter__form input { flex: 1; min-width: 0; padding: .85rem 1.25rem; border-radius: var(--radius-pill); border: 1px solid var(--border-on-dark); background: rgba(255,255,255,.06); color: var(--text-on-dark); }
.newsletter__form input::placeholder { color: var(--text-on-dark); opacity: .6; }

/* ---------- Footer (1:1 with live: trust strip → navy newsletter →
   5-col black footer → SECURE PAYMENTS + Feefo → dark-gray bottom) ---------- */
.footer { background: var(--bg-dark); color: var(--text-on-dark); }

/* Trust-badge logo strip (live color-scheme-4 + top-line border) */
.footer-trust { background: #000; border-top: 1px solid rgba(53,53,53,.5); }
.footer-trust__logos {
  display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;
  padding: 10px 0;
}
.footer-trust__logos img { height: auto; line-height: 0; padding: 10px; max-width: 110px; object-fit: contain; }

/* Newsletter (live color-scheme-5 navy, custom-newletter) */
.footer__newsletter { border-top: 1px solid rgba(255,255,255,.12); }
.custom-newletter {
  display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 10px;
  padding-block: 24px;
}
@media (min-width: 750px) { .custom-newletter { padding-block: 32px; } }
.footer__newsletter-title { color: var(--text-on-dark); font-size: var(--fs-2xl); margin: 0; }
.newsletter__subheading p { color: rgba(255,255,255,.85); margin: 0; }
.newsletter-form_display-button { font-weight: 700; }
.newsletter-form_container { display: none; }
.custom-newletter:not(.is-revealed) .newsletter-form_container { display: none; }
.custom-newletter.is-revealed .newsletter-form_container { display: flex; }
.custom-newletter.is-revealed .newsletter-form_display-button { display: none; }
.footer__newsletter-form { display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.newsletter-form__field { display: flex; align-items: center; gap: 8px; }
.newsletter-form__field input {
  flex: 1; min-width: 0; padding: .85rem 1.25rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-on-dark); background: rgba(255,255,255,.06); color: var(--text-on-dark);
}
.newsletter-form__field input::placeholder { color: var(--text-on-dark); opacity: .6; }
.newsletter-form__button {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--bg-dark);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: transform var(--dur-fast) var(--ease);
}
.newsletter-form__button:hover { transform: scale(1.07); }
.newsletter-form__button svg { width: 16px; height: 12px; }
.consent_privacy-container { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-xs); color: rgba(255,255,255,.75); }
.consent_privacy-container input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent-on-dark); flex: none; }
.consent_privacy-label { line-height: 1.45; }

/* Footer main (live color-scheme-4 black, 5 columns) */
.footer__main { background: #000; padding-block: 36px 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-7); padding-block: var(--space-7) var(--space-8); }
.footer__image-wrapper { margin-bottom: var(--space-5); }
.footer__image-wrapper img { display: block; max-width: 250px; height: auto; }
.footer__col-title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 500; margin-bottom: var(--space-4); color: var(--text-on-dark); }
.footer__links li { margin-bottom: .6rem; }
.footer__links a { font-size: 1.4rem; color: rgba(255,255,255,.75); }
.footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: .3rem; }
.footer__socials { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.footer__socials .list-social__item { margin: 0; }
.footer__socials .list-social__link {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  color: rgba(255,255,255,.75);
}
.footer__socials .list-social__link:hover { color: #fff; }
.footer__socials svg { width: 2rem; height: 2rem; display: block; }

/* SECURE PAYMENTS + Feefo (live color-scheme-4) */
.footer__payments { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: var(--space-3); padding-block: var(--space-5); border-top: 1px solid rgba(255,255,255,.12); }
.footer__payment--label { font-size: 10px; text-align: center; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.footer__payments .list-payment { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; padding: 0; margin: 0; }
.footer__payments .list-payment__item { display: inline-flex; }
.footer__payments .list-payment__item svg { width: 38px; height: 24px; display: block; filter: grayscale(1) brightness(1.6); }
.footer__payments .list-payment__item img { width: 38px; height: 24px; object-fit: contain; filter: grayscale(1) brightness(1.6); }
.feefo-logo { display: inline-flex; justify-content: center; padding-block: 2rem 2rem; width: 100%; }
.feefo-logo img { height: 38px; width: auto; }

/* Footer bottom (live color-scheme-3 dark gray) */
.footer__bottom { background: var(--bg-muted); background: #353535; color: #fff; padding-block: var(--space-5); font-size: var(--fs-sm); }
.footer__bottom .container { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; text-align: center; }
.footer__bottom p { color: rgba(255,255,255,.85); margin: 0; }
.footer__bottom a { color: rgba(255,255,255,.85); }
.footer__bottom a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; }
  .custom-newletter { flex-direction: column; justify-content: center; text-align: center; }
  .newsletter-form_display-button { width: 100%; }
  .newsletter-form_display-button .btn { width: 100%; }
  .footer__newsletter-form { width: 100%; }
  .footer-trust__logos { gap: 4px; }
  .footer-trust__logos img { max-width: 80px; padding: 6px; }
}

/* ---------- Cart drawer + search (minimal, no-JS fallback to plain links) ---------- */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; background: var(--bg-surface); z-index: var(--z-drawer); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); display: flex; flex-direction: column; }
.drawer--open { transform: translateX(0); }
.drawer__header { padding: var(--space-5); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.drawer__title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 700; text-transform: uppercase; }
.drawer__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text-muted); }
.drawer__body { padding: var(--space-5); flex: 1; overflow-y: auto; }
.drawer__footer { padding: var(--space-5); border-top: 1px solid var(--border); }
.drawer__subtotal { display: flex; justify-content: space-between; margin-bottom: var(--space-4); font-size: var(--fs-lg); }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: var(--z-overlay); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.overlay--open { opacity: 1; pointer-events: auto; }

/* ---------- Responsive (mobile-first, Dawn 990px breakpoint) ---------- */
@media (min-width: 990px) {
  .header__inner { grid-template-areas: "logo nav actions"; grid-template-columns: auto auto 1fr; column-gap: 2rem; }
  .header__logo { justify-self: start; }
  .header__logo img { width: 300px; height: auto; }
  .header__nav { display: flex; justify-content: flex-start; margin-left: -.6rem; }
  .menu-toggle { display: none; }
  .header__actions { grid-area: actions; justify-self: end; }
}
@media (max-width: 640px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .grid-tiles { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; }
  .card__title { font-size: var(--fs-xs); }
}

/* ==========================================================================
   HOMEPAGE — live-match rebuild (2026-08-05)
   Mirrors scottcountry.co.uk section-by-section: hero slideshow, payment
   strip, delivery banner, brand wall, collections, collage, categories,
   Feefo, news.
   ========================================================================== */

/* ---------- Hero slideshow ---------- */
.hero-slider { position: relative; background: var(--bg-dark); color: var(--text-on-dark); }
.hero-slider__viewport { position: relative; overflow: hidden; }
.hero-slide { position: relative; display: none; min-height: 720px; align-items: center; }
.hero-slide.is-active { display: flex; animation: heroIn .6s var(--ease-out) both; }
@keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }
.hero-slide__media { position: absolute; inset: 0; }
.hero-slide__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-slide__media .hero-slide__mobile { display: none; }
/* Dark glassmorphism scrim — header legibility + text contrast (live treatment). */
.hero-slide__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.55) 100%); }
.hero-slide__inner { position: relative; width: 100%; display: flex; align-items: center; min-height: 560px; }
.hero-slide__box { max-width: 560px; padding: var(--space-7); border-radius: var(--radius-lg); box-shadow: var(--shadow-drop); }
.color-scheme-3 { background: rgba(255,255,255,.94); color: var(--text-primary); }
.color-scheme-3 .hero-slide__kicker { color: var(--accent); }
.color-scheme-4 { background: rgba(8,8,8,.78); color: #fff; backdrop-filter: blur(6px); }
.color-scheme-4 .hero-slide__kicker { color: var(--accent-on-dark); }
.hero-slide__kicker { text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-xs); font-weight: 700; margin-bottom: var(--space-3); }
.hero-slide__title { font-size: var(--fs-4xl); font-weight: var(--fw-heading-display); line-height: 1.1; }
.color-scheme-4 .hero-slide__title { color: #fff; }
.hero-slide__box .btn { margin-top: var(--space-5); }
.hero-slider__nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-5); padding-block: var(--space-5); z-index: 3; }
.hero-slider__arrow { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.14); border: 1px solid var(--border-on-dark); transition: background-color var(--dur-fast) var(--ease); }
.hero-slider__arrow:hover { background: rgba(255,255,255,.28); }
.hero-slider__arrow svg { width: 20px; height: 20px; }
.hero-slider__dots { display: flex; gap: var(--space-2); align-items: center; }
.hero-slider__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hero-slider__dot:hover { background: rgba(255,255,255,.8); }
.hero-slider__dot.is-active { background: var(--accent-on-dark); transform: scale(1.25); }

/* ---------- Payment logo strip ---------- */
.pay-strip-section { background: var(--bg-dark); border-top: 1px solid var(--border-on-dark); }
.pay-strip { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-block: var(--space-5); }
.pay-strip .list-payment { display: flex; gap: var(--space-4); align-items: center; }
.pay-strip .list-payment__item { display: inline-flex; }
.pay-strip .list-payment__item svg { width: 44px; height: 27px; display: block; filter: grayscale(1) brightness(1.9); }
.pay-strip__note { font-size: var(--fs-xs); color: var(--text-on-dark); opacity: .65; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Delivery banner (live: navy color-scheme-5) ---------- */
.delivery-banner { border-block: 1px solid rgba(255,255,255,.12); }
.delivery-banner__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding-block: var(--space-4); text-align: center; flex-wrap: wrap; }
.delivery-banner__inner img { width: 24px; height: 24px; flex: none; }
.delivery-banner__inner p { font-weight: 600; font-size: var(--fs-sm); color: #fff; }

/* ---------- Brand wall ---------- */
.brand-wall__head { display: flex; justify-content: flex-end; margin-bottom: var(--space-5); }
.brand-wall__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); }
.brand-card { display: block; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.brand-card__media { aspect-ratio: 4/3; background: var(--bg-muted); overflow: hidden; }
.brand-card__media img { width: 100%; height: 100%; object-fit: cover; }
.brand-card__body { padding: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.brand-card__logo { height: 40px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.brand-card:hover .brand-card__logo { filter: grayscale(0); opacity: 1; }
.brand-card__cta { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }

/* ---------- Collection / sub-collection tiles ---------- */
.grid-tiles--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tile__label { display: flex; flex-direction: column; gap: 2px; }
.tile__title { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--fs-lg); }
.tile__shop { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-on-dark); }

/* ---------- Collage (live: black color-scheme-4) ---------- */
.collage__subtitle { max-width: var(--measure); margin: calc(-1 * var(--space-4)) 0 var(--space-7); color: var(--text-secondary); }
.collage__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.collage-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.collage-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-drop); }
.collage-card__media { aspect-ratio: 4/3; background: var(--bg-muted); overflow: hidden; }
.collage-card__media img { width: 100%; height: 100%; object-fit: cover; }
.collage-card__body { padding: var(--space-5); }
.collage-card__title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-heading); line-height: 1.3; }
.collage-card__price { color: var(--accent); font-weight: var(--fw-body-bold); font-size: var(--fs-lg); margin-top: var(--space-2); }
.collage-card__cta { margin-top: var(--space-4); }

/* ---------- Category SEO copy ---------- */
.section-category__seo { margin-top: var(--space-6); max-width: 68ch; font-size: var(--fs-base); line-height: 1.65; color: var(--text-secondary); }

/* ---------- Feefo ---------- */
.feefo__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-7); }
.feefo__score { text-align: right; }
.feefo__stars { display: inline-flex; gap: 2px; color: #f0b429; }
.feefo__star { width: 22px; height: 22px; }
.feefo__star--empty { color: rgba(18,18,18,.16); }
.feefo__stars--sm .feefo__star { width: 16px; height: 16px; }
.feefo__value { font-size: var(--fs-3xl); font-weight: var(--fw-heading); margin-top: var(--space-2); }
.feefo__value strong { font-size: var(--fs-5xl); }
.feefo__count { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }
.feefo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.feefo__review { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.feefo__review-title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-base); margin-top: var(--space-3); line-height: 1.35; }
.feefo__review-text { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-2); }
.feefo__review-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-3); }

/* ---------- News (live: dark-gray color-scheme-3) ---------- */
.section-news { border-top: 1px solid rgba(255,255,255,.12); }

/* ---------- Product card quick-add ---------- */
.card__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }
.card__quick { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-on-dark); background: var(--accent); border-radius: var(--radius-pill); padding: .5rem 1rem; transition: background-color var(--dur-fast) var(--ease); }
.card__quick:hover { background: var(--accent-hover); }

/* ---------- Homepage responsive ---------- */
@media (max-width: 1024px) {
  .hero-slide, .hero-slide__inner { min-height: 560px; }
  .hero-slide__box { max-width: 460px; padding: var(--space-6); }
  .hero-slide__title { font-size: var(--fs-3xl); }
}
@media (max-width: 640px) {
  .hero-slide, .hero-slide__inner { min-height: 480px; }
  .hero-slide__media .hero-slide__desktop { display: none; }
  .hero-slide__media .hero-slide__mobile { display: block; }
  /* padding-top reserves the header's own height (already accounted for in
     min-height via the negative-margin pull-up above) plus a buffer, so a
     long wrapping title (e.g. 4-word product names) can never grow tall
     enough to render underneath the transparent sticky header. */
  /* padding-bottom must clear the absolutely-positioned .hero-slider__nav
     bar (bottom:0, ~92px tall: 24px+24px padding-block + 44px arrows), or
     the CTA button sits underneath/overlapping the prev/next arrows. */
  .hero-slide__inner { align-items: flex-end; padding-top: calc(var(--header-h) + var(--space-5)); padding-bottom: 108px; }
  .hero-slide__box { max-width: none; width: 100%; padding: var(--space-5); }
  .hero-slide__title { font-size: var(--fs-2xl); }
  .hero-slider__nav { gap: var(--space-3); }
  .brand-wall__grid { grid-template-columns: repeat(2, 1fr); }
  .grid-tiles--4 { grid-template-columns: repeat(2, 1fr); }
  .collage__grid { grid-template-columns: 1fr; }
  .feefo__score { text-align: left; }
  .feefo__value strong { font-size: var(--fs-3xl); }
  .card__actions { flex-direction: column; align-items: flex-start; }
  .card__quick { width: 100%; text-align: center; }
}

/* ---------- Collection page (Dawn-style 1:1: count, sort, filters, related) ---------- */
.collection-page__title { font-size: var(--fs-4xl); margin-bottom: var(--space-3); }
.collection-page__intro { color: var(--text-secondary); margin-bottom: var(--space-6); }
.collection-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-4); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
}
.collection-count { font-size: var(--fs-sm); color: var(--text-muted); }
.collection-sort select {
  font: inherit; color: var(--text-primary); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: .5rem 2.25rem .5rem .75rem; background: var(--bg-surface);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23121212' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
}
.collection-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); align-items: start; }
.collection-filters { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.collection-filters__toggle { display: none; }
.collection-filters__group { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.collection-filters__heading { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-3); }
.collection-filter { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); padding: .3rem 0; cursor: pointer; }
.collection-filter input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.collection-filter:hover { color: var(--text-primary); }
.collection-filters__clear { width: 100%; }
.collection-grid .grid-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.collection-empty { color: var(--text-muted); padding: var(--space-6) 0; }
.collection-related { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--border); }
.collection-related__title { font-size: var(--fs-3xl); margin-bottom: var(--space-5); }
.collection-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); }
@media (max-width: 1024px) {
  .collection-layout { grid-template-columns: 1fr; }
  .collection-filters { position: static; }
  .collection-filters__toggle {
    display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    width: 100%; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-weight: 600; margin-bottom: var(--space-4);
  }
  .collection-filters__panel { display: none; }
  .collection-filters__panel.is-open { display: block; }
}
@media (max-width: 640px) {
  .collection-toolbar { flex-direction: column; align-items: stretch; }
  .collection-sort select { width: 100%; }
  .collection-grid .grid-cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .collection-related__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Collection buying-guides (SEO internal linking) ---------- */
.collection-guides { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--border); }
.collection-guides__title { font-size: var(--fs-3xl); margin-bottom: var(--space-5); }
.collection-guides__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
@media (max-width: 640px) { .collection-guides__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sitemap page ---------- */
.sitemap-list { columns: 3; column-gap: var(--space-7); margin-block: var(--space-4); }
.sitemap-list li { margin-bottom: .55rem; break-inside: avoid; }
.sitemap-list a { font-size: var(--fs-sm); }
@media (max-width: 640px) { .sitemap-list { columns: 1; } }

/* ==========================================================================
   Manual carousel — reusable, SEO-ready (content stays in DOM), Dawn-style
   ========================================================================== */
[data-carousel] { position: relative; }
.carousel {
  display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex: 0 0 auto; width: clamp(220px, 24vw, 300px); }
.carousel.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.carousel__arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-light);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary);
  transition: background-color .2s ease, transform .2s ease;
}
.carousel__arrow:hover { background: var(--bg-muted); transform: translateY(-1px); }
.carousel__arrow svg { width: 18px; height: 18px; }
.carousel__arrow:disabled { opacity: .35; cursor: default; transform: none; }
.carousel__dots { display: flex; gap: 6px; align-items: center; }
.carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(18,18,18,.2); transition: background-color .2s ease, transform .2s ease; }
.carousel__dot.is-active { background: var(--accent); transform: scale(1.3); }
/* On dark sections */
.scheme-dark .carousel__arrow, .scheme-gray .carousel__arrow { color: #fff; border-color: rgba(255,255,255,.25); }
.scheme-dark .carousel__arrow:hover, .scheme-gray .carousel__arrow:hover { background: rgba(255,255,255,.12); }
.scheme-dark .carousel__dot, .scheme-gray .carousel__dot { background: rgba(255,255,255,.35); }
.scheme-dark .carousel__dot.is-active, .scheme-gray .carousel__dot.is-active { background: var(--accent-on-dark); }
@media (max-width: 640px) {
  .carousel > * { width: clamp(180px, 62vw, 280px); }
}
@media (prefers-reduced-motion: reduce) { .carousel { scroll-behavior: auto; } }

/* Desktop presentation: product sections are readable grids, while mobile keeps
   native horizontal browsing with manual controls. No automatic movement. */
@media (min-width: 990px) {
  [data-carousel] { overflow: visible; }
  [data-carousel] .carousel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
  [data-carousel] .carousel > * { width: auto; min-width: 0; }
  [data-carousel] .carousel__nav { display: none; }
}

/* Mobile/tablet slideshow (<990px): the track spans the FULL slideshow width and
   the prev/next buttons overlay it absolutely — so translateX(-100%) moves by the
   real visible width and slide content never lands off-screen. min-width:0 on the
   grid item (slideshow-component) and the flex track lets the slides resolve 100%
   to the actual column width instead of the content's max-content width. */
@media (max-width: 989px) {
  .announcement-bar { min-width: 0; }
  .announcement-bar-slider { position: relative; display: block; min-width: 0; width: 100%; }
  .announcement-bar-slider .slider { min-width: 0; width: 100%; }
  .announcement-bar .slider--everywhere { width: 100%; overflow: hidden; }
  .announcement-bar .slider-button { position: absolute; top: 0; height: 100%; z-index: 2; }
  .announcement-bar .slider-button--prev { left: 0; }
  .announcement-bar .slider-button--next { right: 0; }
  .announcement-bar .slideshow__slide { flex: 0 0 100%; min-width: 0; width: 100%; overflow: hidden; }
  .announcement-bar .announcement-bar__announcement { min-width: 0; padding-inline: 4px; overflow: hidden; }
  .announcement-bar .announcement-bar__message { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}