/* ============================================================================
   Site chrome: header, catalogue panel, footer, shortlist drawer.

   Kept in one file because these are the only components that appear on every
   page, and because the previous split let three separate `.dg-logo` rules
   fight each other across main.css.

   The header is two tiers. Tier one is context a buyer wants before they start
   (phone, policies, language); tier two is the working bar (identity, catalogue,
   search, shortlist). Scrolling retires tier one and shortens tier two, so the
   chrome costs 112px when you arrive and 60px once you are reading. Sticky
   offsets elsewhere read --header-h, which is why it is declared here as the
   sum of the two and re-declared on .is-scrolled rather than measured in JS.
   ========================================================================= */

/* Each state gets its OWN token rather than one token that changes value.
   A transitioned property reading var() of an inherited custom property that
   changes does not update at all in Chromium — transitionstart never fires and
   the height simply stays put. Giving the collapsed state its own rule makes the
   state change a cascade change, which transitions normally.

   Breakpoints below override only these four values; both states keep working
   because each reads its own token. */
:root{
  --util-h:44px;   --util-h-sm:0px;
  --bar-h:92px;    --bar-h-sm:68px;
  --header-h:calc(var(--util-h) + var(--bar-h));
}
/* Two classes beat one pseudo-class, so a later :root rule inside a media query
   cannot take the scrolled height back. */
:root.is-scrolled{
  --header-h:calc(var(--util-h-sm) + var(--bar-h-sm));
}

/* --------------------------------------------------------------- the shell */
.dg-header{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard);
}
.is-scrolled .dg-header{
  border-bottom-color:var(--grey-200);
  box-shadow:0 1px 14px rgba(20,20,22,.06);
}

/* ------------------------------------------------------- tier one: utility */
.dg-util{
  height:var(--util-h);
  background:var(--ink);
  color:var(--grey-400);
  /* Deliberately NOT overflow:hidden. The language menu opens downward out of a
     44px bar, and clipping made it invisible AND unhittable — a bug no geometry
     check catches, because getBoundingClientRect reports the full box whether or
     not an ancestor clips it. The collapsed state hides the content with
     opacity + visibility instead, so there is nothing left to clip.
     visibility is delayed to the end of the fade on the way out and applied
     immediately on the way back in, which is what the two transition lists do. */
  transition:height var(--dur-base) var(--ease-exit),
             opacity var(--dur-instant) linear,
             visibility 0s linear 0s;
}
:root.is-scrolled .dg-util{
  height:var(--util-h-sm); opacity:0; visibility:hidden;
  transition:height var(--dur-base) var(--ease-exit),
             opacity var(--dur-instant) linear,
             visibility 0s linear var(--dur-base);
}
.dg-util__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5); height:var(--util-h); white-space:nowrap;
}
.dg-util a{ color:var(--grey-400); text-decoration:none; }
.dg-util a:hover{ color:var(--white); }
.dg-util__tel{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-meta); font-weight:500; color:var(--white)!important;
  transition:color var(--dur-instant) linear;
}
.dg-util__tel svg{ color:var(--accent-text); }
.dg-util__nav ul{
  display:flex; gap:var(--sp-5); list-style:none; margin:0; padding:0;
  font-size:var(--fs-meta);
}
.dg-util__nav a{ transition:color var(--dur-instant) linear; }

/* language ------------------------------------------------------------------ */
.dg-lang{ position:relative; }
/* The flag identifies the language faster than a three-letter code does, so it
   leads; the code stays for anyone who cannot read a 20px flag, and because
   several of these tricolours are easy to confuse at that size. */
.dg-flag{ display:block; border-radius:50%; overflow:hidden; flex:none; }
.dg-lang__flag{ display:inline-flex; flex:none; }
.dg-lang__btn{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:transparent; border:1px solid var(--grey-700); border-radius:var(--radius);
  color:var(--grey-300); font:inherit; font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.04em; padding:6px var(--sp-2); cursor:pointer;
  transition:border-color var(--dur-instant) linear, color var(--dur-instant) linear,
             background-color var(--dur-instant) linear;
}
.dg-lang__btn:hover{ border-color:var(--grey-500); color:var(--white); background:rgba(255,255,255,.06); }
.dg-lang__code{ line-height:1; }
.dg-lang__chev{ transition:transform var(--dur-base) var(--ease-standard); }
.dg-lang__btn[aria-expanded="true"] .dg-lang__chev{ transform:rotate(180deg); }
.dg-lang__list{
  /* z-index must clear .dg-bar (the white bar below) as well as the page. */
  position:absolute; right:0; top:calc(100% + 6px); z-index:70;
  list-style:none; margin:0; padding:var(--sp-1);
  background:var(--white); border:1px solid var(--grey-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2); min-width:186px;
}
.dg-lang__list[hidden]{ display:none; }
.dg-lang__list a{
  display:flex; align-items:center; gap:var(--sp-3); white-space:nowrap;
  padding:9px var(--sp-3); border-radius:var(--radius-sm);
  font-size:var(--fs-meta); font-weight:600; color:var(--text-2)!important;
  transition:background-color var(--dur-instant) linear, color var(--dur-instant) linear;
}
.dg-lang__list a:hover{ background:var(--panel); color:var(--text)!important; }
.dg-lang__list a[aria-current="true"]{ color:var(--accent-text)!important; }

/* ---------------------------------------------------- tier two: working bar */
.dg-bar{ position:relative; background:var(--white); }
.dg-bar__in{
  display:flex; align-items:center; gap:var(--sp-5);
  height:var(--bar-h);
  transition:height var(--dur-base) var(--ease-standard);
}
/* The mark is the one thing here that is not a control, so it gets its own
   breathing room rather than sitting in the same rhythm as the buttons. */
.dg-logo{ margin-inline-end:var(--sp-4); }
:root.is-scrolled .dg-bar__in{ height:var(--bar-h-sm); }
.dg-logo{ flex:0 0 auto; display:block; line-height:0; }
.dg-logo img{
  display:block; width:auto; height:46px;
  transition:height var(--dur-base) var(--ease-standard);
}
.is-scrolled .dg-logo img{ height:36px; }

.dg-catbtn{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  height:60px; padding:0 var(--sp-5);
  /* Outlined. The filled treatment now belongs to the price CTA alone, so the
     catalogue button steps back rather than competing with it. */
  background:var(--white); color:var(--ink);
  border:1px solid var(--grey-300); border-radius:var(--radius);
  font:inherit; font-size:var(--fs-sm); font-weight:800; cursor:pointer;
  transition:background-color var(--dur-instant) linear,
             border-color var(--dur-instant) linear,
             height var(--dur-base) var(--ease-standard);
}
.dg-catbtn:hover{ background:var(--tint-saved); border-color:var(--accent-hover); }
.dg-catbtn:active{ background:var(--accent-hover); }
.dg-catbtn__chev{ transition:transform var(--dur-base) var(--ease-standard); }
.dg-catbtn[aria-expanded="true"] .dg-catbtn__chev{ transform:rotate(180deg); }
.is-scrolled .dg-catbtn{ height:44px; }

/* search -------------------------------------------------------------------- */
.dg-search{
  flex:1 1 auto; min-width:0; position:relative;
  display:flex; align-items:center;
}
.dg-search__ico{
  position:absolute; left:var(--sp-5); color:var(--grey-400); pointer-events:none;
  transition:color var(--dur-instant) linear;
}
.dg-search input[type="search"]{
  width:100%; height:60px;
  padding:0 var(--sp-5) 0 52px;
  background:var(--grey-100);
  border:1px solid var(--grey-200); border-radius:var(--radius);
  font:inherit; font-size:var(--fs-sm); color:var(--text);
  transition:height var(--dur-base) var(--ease-standard),
             border-color var(--dur-instant) linear,
             background-color var(--dur-instant) linear;
}
/* grey-400 on grey-100 is 3.17:1 — under the 4.5:1 a placeholder needs. */
.dg-search input::placeholder{ color:var(--grey-500); }
.dg-search input:hover{ border-color:var(--grey-300); }
.dg-search input:focus{
  outline:none; background:var(--white);
  border-color:var(--accent-text); box-shadow:0 0 0 3px var(--accent-soft);
}
.dg-search input:focus + label + .dg-search__ico,
.dg-search:focus-within .dg-search__ico{ color:var(--accent-text); }
.is-scrolled .dg-search input[type="search"]{ height:44px; }

/* shortlist ----------------------------------------------------------------- */
/* Matched to .dg-callback, and both to .dg-catbtn: same 52px box, same 700
   weight, same radius. They were already identical in height — what made them
   read as different sizes was three treatments in a row (filled, outlined,
   bare). The right-hand pair is now one outlined pair against the filled
   catalogue button. */
.dg-saved{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  height:60px; padding:0 var(--sp-4);
  background:var(--tint-saved); color:var(--ink);
  border:1px solid transparent; border-radius:var(--radius);
  font:inherit; font-size:var(--fs-sm); font-weight:800;
  cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur-instant) linear, color var(--dur-instant) linear,
             border-color var(--dur-instant) linear, height var(--dur-base) var(--ease-standard);
}
.dg-saved:hover{ border-color:var(--accent-hover); }
.dg-saved__ico{ position:relative; display:inline-flex; }
.dg-saved__n{
  position:absolute; top:-6px; right:-8px; min-width:17px; height:17px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 4px; border-radius:9px;
  background:var(--accent); color:var(--white);
  font-size:10px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
  /* Pops only when the number changes; see .is-bump in app.js. */
  transition:transform var(--dur-base) var(--ease-enter);
}
.dg-saved__n[hidden]{ display:none; }
.dg-saved__n.is-bump{ animation:dg-bump 420ms var(--ease-enter); }
@keyframes dg-bump{
  0%{ transform:scale(1) }
  35%{ transform:scale(1.45) }
  100%{ transform:scale(1) }
}

/* A call-back is the low-commitment ask next to the shortlist: outlined, so it
   reads as a peer of "saved" rather than competing with the red catalogue
   button on the other side of the search field. */
.dg-callback{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  height:60px; padding:0 var(--sp-4);
  background:var(--ink); color:var(--white);
  border:1px solid var(--ink); border-radius:var(--radius);
  font:inherit; font-size:var(--fs-sm); font-weight:800; cursor:pointer; white-space:nowrap;
  transition:border-color var(--dur-instant) linear, color var(--dur-instant) linear,
             background-color var(--dur-instant) linear, height var(--dur-base) var(--ease-standard);
}
/* Lime on near-black is 14:1 — the one place a colour this bright is readable. */
.dg-callback svg{ color:var(--lime-400); transition:transform var(--dur-base) var(--ease-enter); }
.dg-callback:hover{ background:var(--grey-900); border-color:var(--grey-900); }
.dg-callback:hover svg{ transform:rotate(-12deg) scale(1.08); }
.is-scrolled .dg-callback{ height:44px; }
.is-scrolled .dg-saved{ height:44px; }

.dg-burger{
  display:none; flex:0 0 auto;
  width:60px; height:60px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--grey-200); border-radius:var(--radius);
  color:var(--text); cursor:pointer;
  transition:background-color var(--dur-instant) linear, border-color var(--dur-instant) linear;
}
.dg-burger:hover{ background:var(--panel); border-color:var(--grey-300); }
:root.is-scrolled .dg-burger{ width:44px; height:44px; }

/* ------------------------------------------------------ the catalogue panel */
.dg-catpanel{
  position:absolute; left:0; right:0; top:100%; z-index:45;
  background:var(--white);
  border-top:1px solid var(--grey-200);
  border-bottom:1px solid var(--grey-200);
  box-shadow:0 18px 40px -24px rgba(20,20,22,.35);
  /* Animated open: grid-template-rows 0fr -> 1fr is the only way to transition
     to a height the content decides. The inner div must own the overflow. */
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-panel) var(--ease-standard),
             opacity var(--dur-base) var(--ease-standard),
             visibility 0s linear var(--dur-panel);
  opacity:0; visibility:hidden;
}
.dg-catpanel[hidden]{ display:grid; }      /* [hidden] must not beat the grid */
.dg-catpanel.is-open{
  grid-template-rows:1fr; opacity:1; visibility:visible;
  transition:grid-template-rows var(--dur-panel) var(--ease-enter),
             opacity var(--dur-instant) linear,
             visibility 0s linear 0s;
}
.dg-catpanel__in{
  overflow:hidden;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--sp-5) var(--sp-6);
  padding:0;
}
.dg-catpanel.is-open .dg-catpanel__in{ padding:var(--sp-6) 0; }
.dg-catpanel__top{
  display:flex; align-items:baseline; gap:var(--sp-2);
  font-size:var(--fs-card); font-weight:600; color:var(--text); text-decoration:none;
  padding-bottom:var(--sp-2); margin-bottom:var(--sp-2);
  border-bottom:1px solid var(--grey-200);
  transition:color var(--dur-instant) linear, border-color var(--dur-instant) linear;
}
.dg-catpanel__top:hover{ color:var(--accent-text); border-bottom-color:var(--accent-text); }
.dg-catpanel__n{
  font-size:var(--fs-micro); font-weight:500; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.dg-catpanel__sub{ list-style:none; margin:0; padding:0; }
.dg-catpanel__sub a{
  display:block; padding:5px 0;
  font-size:var(--fs-sm); color:var(--text-2); text-decoration:none;
  transition:color var(--dur-instant) linear, transform var(--dur-instant) var(--ease-standard);
}
.dg-catpanel__sub a:hover{ color:var(--accent-text); transform:translateX(3px); }
.dg-catpanel__more{ display:none; }

/* ============================================================ subscribe band */
.dg-sub{ background:var(--grey-900); color:var(--grey-300); }
.dg-sub__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-6); flex-wrap:wrap; padding-block:var(--sp-6);
}
.dg-sub__h{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-h2); line-height:var(--lh-h2); color:var(--white); margin:0 0 6px;
}
.dg-sub__copy p{ margin:0; font-size:var(--fs-sm); line-height:var(--lh-sm); }
.dg-sub__copy em{ font-style:normal; color:var(--accent-text); font-weight:600; }
.dg-sub__form{ display:flex; gap:var(--sp-2); flex:0 1 460px; min-width:280px; }
.dg-sub__form input{
  flex:1 1 auto; min-width:0; height:46px; padding:0 var(--sp-4);
  background:rgba(255,255,255,.06);
  border:1px solid var(--grey-700); border-radius:var(--radius);
  font:inherit; font-size:var(--fs-sm); color:var(--white);
  transition:border-color var(--dur-instant) linear, background-color var(--dur-instant) linear;
}
.dg-sub__form input::placeholder{ color:var(--grey-500); }
.dg-sub__form input:hover{ border-color:var(--grey-600); }
.dg-sub__form input:focus{
  outline:none; border-color:var(--accent-text); background:rgba(255,255,255,.1);
}
.dg-sub__form .dg-btn{ flex:0 0 auto; height:46px; }

/* ==================================================================== footer */
.dg-footer{ background:var(--ink); color:var(--grey-300); margin-top:var(--sp-9); }
.dg-footer a{
  color:var(--grey-300); text-decoration:none;
  font-size:var(--fs-sm); line-height:var(--lh-sm);
  transition:color var(--dur-instant) var(--ease-standard);
}
.dg-footer a:hover{ color:var(--white); }
/* On the near-black footer the accent fill is already the readable one
   (7.84:1); it is --accent-text that would fail there, not this. */
.dg-footer .accent{ color:var(--accent-text); }

.dg-footer__in{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:var(--sp-7); padding-block:var(--sp-8) var(--sp-7);
}
.dg-footer__logo{ display:block; line-height:0; margin-bottom:var(--sp-4); }
.dg-footer__logo img{ display:block; width:auto; height:42px; }
.dg-footer__blurb{
  font-size:var(--fs-sm); line-height:var(--lh-sm); margin:0; max-width:36em;
  color:var(--grey-400);
}
.dg-footer__h{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-card); line-height:1.2; letter-spacing:.02em;
  color:var(--white); margin:0 0 var(--sp-4);
}
.dg-footer__links,.dg-footer__contact,.dg-footer__legal{ list-style:none; margin:0; padding:0; }
.dg-footer__links li + li{ margin-top:6px; }
.dg-footer__links a{
  display:inline-flex; align-items:baseline; gap:var(--sp-2);
  transition:color var(--dur-instant) linear, transform var(--dur-instant) var(--ease-standard);
}
.dg-footer__links a:hover{ transform:translateX(3px); }
.dg-footer__n{
  font-size:var(--fs-micro); color:var(--grey-600); font-variant-numeric:tabular-nums;
}
.dg-footer__contact{ margin-top:var(--sp-5); display:grid; gap:var(--sp-3); }
.dg-footer__contact li{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  font-size:var(--fs-sm); line-height:var(--lh-sm);
}
.dg-footer__contact svg{ flex:0 0 auto; margin-top:3px; color:var(--grey-600); }
.dg-footer__contact em{
  display:block; font-style:normal; font-size:var(--fs-micro); color:var(--grey-600);
}

.dg-social{ display:flex; gap:var(--sp-2); list-style:none; margin:var(--sp-5) 0 0; padding:0; }
.dg-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--radius);
  background:rgba(255,255,255,.05); color:var(--grey-300);
  transition:background-color var(--dur-instant) linear,
             color var(--dur-instant) linear,
             transform var(--dur-instant) var(--ease-standard);
}
.dg-social a:hover{ background:var(--accent); color:var(--on-accent); transform:translateY(-2px); }
.dg-social .is-wa:hover{ background:#25D366; color:var(--ink); }

.dg-footer__tags{
  display:flex; align-items:baseline; gap:var(--sp-3) var(--sp-4); flex-wrap:wrap;
  padding-block:var(--sp-5); border-top:1px solid var(--grey-700);
}
.dg-footer__tagsh{ font-size:var(--fs-meta); color:var(--grey-500); }
.dg-footer__tags ul{ display:flex; flex-wrap:wrap; gap:var(--sp-2); list-style:none; margin:0; padding:0; }
.dg-footer__tags a{
  display:inline-block; padding:6px var(--sp-3);
  background:rgba(255,255,255,.05); border-radius:var(--radius);
  font-size:var(--fs-meta); color:var(--grey-400);
  transition:background-color var(--dur-instant) linear, color var(--dur-instant) linear;
}
.dg-footer__tags a:hover{ background:rgba(255,255,255,.12); color:var(--white); }

.dg-footer__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-3) var(--sp-5); padding-block:var(--sp-4);
  border-top:1px solid var(--grey-700);
}
.dg-footer__copy{ margin:0; font-size:var(--fs-meta); color:var(--grey-500); }
.dg-footer__legal{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.dg-footer__legal a{ font-size:var(--fs-meta); }

/* ========================================================= shortlist drawer */
/* Both drawers are called .dg-drawer. The mobile FILTER sheet in filters.css
   declares the same block at the same specificity and is enqueued after this
   file, so on every catalogue page it was winning: the shortlist opened as a
   bottom sheet pinned to the left edge instead of sliding in from the right.
   Each drawer is now namespaced by the data hook its own markup already carries,
   so neither can reach the other and load order stops mattering. */
.dg-drawer[data-saved-drawer][hidden]{ display:none; }
.dg-drawer[data-saved-drawer]{ position:fixed; inset:0; z-index:80; }
[data-saved-drawer] .dg-drawer__scrim{
  position:absolute; inset:0; background:rgba(20,20,22,.5);
  opacity:0; transition:opacity var(--dur-backdrop) var(--ease-standard);
}
[data-saved-drawer] .dg-drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(420px,100%);
  display:flex; flex-direction:column;
  background:var(--white); box-shadow:var(--shadow-panel);
  transform:translateX(100%);
  transition:transform var(--dur-panel) var(--ease-exit);
}
.dg-drawer[data-saved-drawer].is-open .dg-drawer__scrim{ opacity:1; }
.dg-drawer[data-saved-drawer].is-open .dg-drawer__panel{
  transform:translateX(0); transition:transform var(--dur-panel) var(--ease-enter);
}
[data-saved-drawer] .dg-drawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-5); border-bottom:1px solid var(--grey-200);
}
[data-saved-drawer] .dg-drawer__head h2{ margin:0; font-size:var(--fs-h3); line-height:var(--lh-h3); }
[data-saved-drawer] .dg-drawer__x{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:var(--radius); color:var(--text-2); cursor:pointer;
  transition:background-color var(--dur-instant) linear, color var(--dur-instant) linear;
}
[data-saved-drawer] .dg-drawer__x:hover{ background:var(--panel); color:var(--text); }
[data-saved-drawer] .dg-drawer__body{ flex:1 1 auto; overflow-y:auto; padding:var(--sp-3) var(--sp-5); }
[data-saved-drawer] .dg-drawer__empty{
  padding:var(--sp-6) var(--sp-5); margin:0;
  font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--text-3); text-align:center;
}
[data-saved-drawer] .dg-drawer__foot{
  padding:var(--sp-5); border-top:1px solid var(--grey-200);
  display:grid; gap:var(--sp-2);
}
[data-saved-drawer] .dg-drawer__foot[hidden]{ display:none; }
.dg-sv{
  display:flex; gap:var(--sp-3); align-items:center;
  padding:var(--sp-3) 0; border-bottom:1px solid var(--grey-200);
}
.dg-sv:last-child{ border-bottom:0; }
.dg-sv img{
  flex:0 0 auto; width:56px; height:56px; object-fit:contain;
  background:var(--grey-100); border-radius:var(--radius);
}
.dg-sv__t{
  flex:1 1 auto; min-width:0;
  font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--text);
  text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  transition:color var(--dur-instant) linear;
}
.dg-sv__t:hover{ color:var(--accent-text); }
.dg-sv__x{
  flex:0 0 auto; width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:var(--radius);
  color:var(--grey-400); cursor:pointer;
  transition:background-color var(--dur-instant) linear, color var(--dur-instant) linear;
}
.dg-sv__x:hover{ background:var(--accent-soft); color:var(--accent-text); }

/* ============================================================== breakpoints */
@media (max-width:1100px){
  /* The label goes first: the icon and the placeholder already say what it is. */
  .dg-callback span{ display:none; }
  .dg-callback{ padding:0 var(--sp-3); }
}
@media (max-width:900px){
  .dg-util__nav{ display:none; }
  .dg-footer__in{ grid-template-columns:1fr 1fr; gap:var(--sp-6); }
  .dg-footer__brand{ grid-column:1 / -1; }
}
@media (max-width:820px){
  :root{ --bar-h:76px; --bar-h-sm:62px; }
  /* The chevron is a span too, so this has to exclude it or the button
     loses its disclosure affordance along with its label. */
  .dg-catbtn span:not(.dg-catbtn__chev){ display:none; }
  .dg-catbtn{ padding:0 var(--sp-3); }
  .dg-saved__lbl{ display:none; }
  .dg-lang__code{ display:none; }
}
@media (max-width:680px){
  :root{ --util-h:40px; }
  .dg-logo img{ height:34px; }
  .is-scrolled .dg-logo img{ height:28px; }
  .dg-logo{ margin-inline-end:0; }
  .dg-bar__in{ gap:var(--sp-3); }
  .dg-catbtn{ display:none; }
  /* Nothing a burger and a tel: link cannot cover. */
  .dg-callback{ display:none; }
  .dg-burger{ display:inline-flex; }
  /* On a phone the panel is the entire menu, so it needs the utility links and
     has to be able to scroll past the fold rather than run off the bottom. */
  .dg-catpanel__in{ grid-template-columns:1fr; gap:var(--sp-4); }
  .dg-catpanel.is-open .dg-catpanel__in{
    max-height:calc(100vh - var(--header-h) - var(--sp-4));
    overflow-y:auto; padding:var(--sp-5) 0;
  }
  .dg-catpanel__more{ display:block; padding-top:var(--sp-4); border-top:1px solid var(--grey-200); }
  .dg-catpanel__more ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-1); }
  .dg-catpanel__more a{
    display:block; padding:7px 0; font-size:var(--fs-sm); color:var(--text-2); text-decoration:none;
  }
  .dg-catpanel__more a:hover{ color:var(--accent-text); }
  .dg-sub__in{ padding-block:var(--sp-5); }
  .dg-sub__form{ flex:1 1 100%; }
}
@media (max-width:560px){
  .dg-footer__in{ grid-template-columns:1fr; }
  .dg-util__in{ justify-content:space-between; }
}

/* The bar collapses on scroll, which would otherwise animate on first paint for
   anyone landing mid-page via an anchor. */
@media (prefers-reduced-motion:reduce){
  .dg-util,.dg-bar__in,.dg-logo img,.dg-catbtn,.dg-callback,.dg-saved,
  .dg-search input,.dg-catpanel,
  [data-saved-drawer] .dg-drawer__panel,[data-saved-drawer] .dg-drawer__scrim,
  [data-drawer] .dg-drawer__panel,[data-drawer] .dg-drawer__scrim{ transition:none!important; }
}