/* =========================================================================
   Danju — language and display widget (public sites)  v8
   Pill in a bottom corner → one panel (bottom sheet on phones): languages, then display
   options. Self-contained: px units (so it ignores the site's root font size), Danju's colour
   tokens (navy and blue, as the dashboard), light by default and dark with the device or the shop's dark theme.
   ========================================================================= */
#aw-toggle, #aw-panel {
  /* Danju colours: white with a blue tint (light), navy glass with blue (dark) — as the dashboard. */
  --aw-bg: rgba(255, 255, 255, .94);
  --aw-solid: #ffffff;
  --aw-group: rgba(59, 130, 246, .07);
  --aw-hover: rgba(59, 130, 246, .12);
  --aw-text: #0f172a;
  --aw-sub: #475569;
  --aw-line: rgba(15, 23, 42, .1);
  --aw-ring: rgba(59, 130, 246, .22);
  --aw-accent: #2563eb;
  --aw-on: #3b82f6;
  --aw-off: rgba(15, 23, 42, .18);
  --aw-shadow: 0 18px 50px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .08);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
#aw-toggle *, #aw-panel * { box-sizing: border-box; font-family: inherit; letter-spacing: inherit; }

@media (prefers-color-scheme: dark) {
  #aw-toggle, #aw-panel {
    --aw-bg: rgba(10, 18, 38, .94); --aw-solid: rgba(20, 34, 65, .95); --aw-group: rgba(59, 130, 246, .1); --aw-hover: rgba(59, 130, 246, .18); --aw-text: #e8edf8; --aw-sub: #94a8c8;
    --aw-line: rgba(255, 255, 255, .08); --aw-ring: rgba(96, 165, 250, .28); --aw-accent: #60a5fa; --aw-on: #3b82f6; --aw-off: rgba(255, 255, 255, .16); --aw-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
  }
}
/* The shop's own light/dark choice wins over the device setting. */
[data-djs-theme="light"] #aw-toggle, [data-djs-theme="light"] #aw-panel {
  --aw-bg: rgba(255, 255, 255, .94); --aw-solid: #fff; --aw-group: rgba(59, 130, 246, .07); --aw-hover: rgba(59, 130, 246, .12); --aw-text: #0f172a; --aw-sub: #475569;
  --aw-line: rgba(15, 23, 42, .1); --aw-ring: rgba(59, 130, 246, .22); --aw-accent: #2563eb; --aw-on: #3b82f6; --aw-off: rgba(15, 23, 42, .18); --aw-shadow: 0 18px 50px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .08);
}
[data-djs-theme="dark"] #aw-toggle, [data-djs-theme="dark"] #aw-panel {
  --aw-bg: rgba(10, 18, 38, .94); --aw-solid: rgba(20, 34, 65, .95); --aw-group: rgba(59, 130, 246, .1); --aw-hover: rgba(59, 130, 246, .18); --aw-text: #e8edf8; --aw-sub: #94a8c8;
  --aw-line: rgba(255, 255, 255, .08); --aw-ring: rgba(96, 165, 250, .28); --aw-accent: #60a5fa; --aw-on: #3b82f6; --aw-off: rgba(255, 255, 255, .16); --aw-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
}

/* ── The pill ── */
#aw-toggle {
  position: fixed; bottom: 18px; z-index: 2147482999;
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 15px 0 12px; margin: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--aw-bg); color: var(--aw-text); box-shadow: var(--aw-shadow), inset 0 0 0 1px var(--aw-ring);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font-size: 14px; font-weight: 600;
  transition: transform .2s cubic-bezier(.32, .72, 0, 1), box-shadow .2s;
}
#aw-toggle.aw-pos-right { right: 18px; }
#aw-toggle.aw-pos-left { left: 18px; }
#aw-toggle:hover { transform: translateY(-1px); }
#aw-toggle:active { transform: scale(.97); }
#aw-toggle:focus-visible { outline: 3px solid var(--aw-accent); outline-offset: 2px; }
#aw-toggle svg { color: var(--aw-accent); width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#aw-toggle .aw-sr, #aw-panel .aw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#aw-toggle:has(.aw-sr) { width: 40px; padding: 0; justify-content: center; }

/* ── The panel ── */
#aw-panel {
  position: fixed; bottom: 70px; z-index: 2147483000;
  width: 340px; max-width: calc(100vw - 24px); max-height: calc(100vh - 96px); overflow-y: auto;
  padding: 16px; border-radius: 22px;
  background: var(--aw-bg); color: var(--aw-text); box-shadow: var(--aw-shadow), inset 0 0 0 1px var(--aw-line);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  opacity: 0; transform: translateY(8px) scale(.98); transform-origin: bottom right;
  transition: opacity .2s ease, transform .25s cubic-bezier(.32, .72, 0, 1);
}
#aw-panel.aw-pos-right { right: 18px; }
#aw-panel.aw-pos-left { left: 18px; transform-origin: bottom left; }
#aw-panel.aw-open { opacity: 1; transform: none; }
#aw-panel[hidden] { display: none; }

#aw-panel .aw-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; }
#aw-panel h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--aw-text); line-height: 1.2; }
#aw-panel .aw-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--aw-group); color: var(--aw-sub); display: grid; place-items: center; cursor: pointer; padding: 0; }
#aw-panel .aw-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
#aw-panel .aw-x:hover { color: var(--aw-text); }

#aw-panel .aw-group { background: var(--aw-group); border-radius: 14px; overflow: hidden; }
#aw-panel .aw-row {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; margin: 0;
  color: var(--aw-text); text-decoration: none; cursor: pointer; font-size: 15px; font-weight: 400;
}
#aw-panel .aw-row + .aw-row { box-shadow: inset 0 1px 0 var(--aw-line); }
#aw-panel a.aw-row:hover, #aw-panel a.aw-row:focus-visible { background: var(--aw-hover); outline: none; }
#aw-panel a.aw-row[aria-current="true"] { background: var(--aw-hover); }
#aw-panel a.aw-row[aria-current="true"] .aw-name { font-weight: 600; }
#aw-panel .aw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#aw-panel .aw-name { color: var(--aw-text); }
#aw-panel .aw-sub { font-size: 12.5px; color: var(--aw-sub); margin-top: 1px; }
#aw-panel .aw-check { color: var(--aw-accent); flex: none; display: inline-flex; }
#aw-panel .aw-check svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#aw-panel .aw-cap { margin: 18px 4px 8px; font-size: 12.5px; font-weight: 600; color: var(--aw-sub); text-transform: uppercase; letter-spacing: .04em; }

/* Segmented control */
#aw-panel .aw-seg { display: flex; padding: 2px; gap: 2px; border-radius: 9px; background: var(--aw-group); flex: none; }
#aw-panel .aw-seg button {
  min-width: 38px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--aw-text); font-weight: 600; line-height: 1;
}
#aw-panel .aw-seg button[aria-checked="true"] { background: var(--aw-solid); color: var(--aw-accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .15), inset 0 0 0 1px var(--aw-ring); }
#aw-panel .aw-seg button:focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 1px; }

/* Switch */
#aw-panel .aw-switch {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 51px; height: 31px; border-radius: 16px; background: var(--aw-off); position: relative; transition: background .2s;
}
#aw-panel .aw-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .25s cubic-bezier(.32, .72, 0, 1);
}
#aw-panel .aw-switch:checked { background: var(--aw-on); }
#aw-panel .aw-switch:checked::after { transform: translateX(20px); }
#aw-panel .aw-switch:focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 2px; }

#aw-panel .aw-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 4px 0; font-size: 12.5px; color: var(--aw-sub); min-height: 18px; }
#aw-panel .aw-link { border: 0; background: none; padding: 0; color: var(--aw-accent); font-size: 13px; font-weight: 600; cursor: pointer; }

/* Phones: a sheet from the bottom of the screen */
@media (max-width: 560px) {
  #aw-toggle { bottom: 14px; }
  #aw-toggle.aw-pos-right { right: 14px; } #aw-toggle.aw-pos-left { left: 14px; }
  #aw-panel, #aw-panel.aw-pos-left, #aw-panel.aw-pos-right {
    left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 85vh;
    border-radius: 22px 22px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(100%); transform-origin: bottom center;
  }
  #aw-panel.aw-open { transform: none; }
}
@media (prefers-reduced-motion: reduce) { #aw-toggle, #aw-panel, #aw-panel .aw-switch::after { transition: none; } }
@media print { #aw-toggle, #aw-panel { display: none !important; } }

/* =========================================================================
   What the display options do to the page (classes on <html>)
   ========================================================================= */
/* Text size: scales the whole page, so it works on any template (px or rem). */
html.aw-zoom-1 body { zoom: 1.15; }
html.aw-zoom-2 body { zoom: 1.3; }

/* Bolder text and links: heavier text, underlined links, stronger focus rings. */
html.aw-bold body :where(p, li, span, a, td, th, label, dd, dt, figcaption, blockquote, small, div, button, input, select, textarea):not(#aw-panel, #aw-panel *, #aw-toggle, #aw-toggle *) { font-weight: 600 !important; }
html.aw-bold body :where(h1, h2, h3, h4, h5, h6, b, strong):not(#aw-panel *) { font-weight: 800 !important; }
html.aw-bold body a:not(#aw-panel a) { text-decoration: underline !important; text-underline-offset: .15em; text-decoration-thickness: .08em; }
html.aw-bold body :focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px; }

/* Reduce motion (chosen in the widget; the device setting is left to the site's own CSS). */
html.aw-reduce-motion *, html.aw-reduce-motion *::before, html.aw-reduce-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* Text the browser is still translating (see the bottom of accessibility-widget.js) */
html.aw-translating [data-aw-tr] { opacity: .55; transition: opacity .2s; }