.newsletter-signup.focused button svg,
.newsletter-signup:hover button svg {
  color: #222;
  background-color: #e9e9e9
}

#KDF,
.curved-bottom,
.ribbon,
.slider,
.slider-list {
  overflow: hidden
}

#KD,
#KDM {
  left: 140px
}

:root {
  --bs-gray-100: #F5F5F5;
  --bs-gray-200: #E9E9E9;
  --bs-gray-300: #828282;
  --bs-gray-400: #4F4F4F;
  --bs-gray-500: #333333;
  --bs-gray-600: #222222
}

.text-gray-100 {
  color: var(--bs-gray-100) !important
}

.text-gray-200 {
  color: var(--bs-gray-200) !important
}

.text-gray-300 {
  color: var(--bs-gray-300) !important
}

.text-gray-400 {
  color: var(--bs-gray-400) !important
}

.text-gray-500 {
  color: var(--bs-gray-500) !important
}

.text-gray-600 {
  color: var(--bs-gray-600) !important
}

.border-gray-100 {
  border-color: var(--bs-gray-100) !important
}

.border-gray-200 {
  border-color: var(--bs-gray-200) !important
}

.border-gray-300 {
  border-color: var(--bs-gray-300) !important
}

.border-gray-400 {
  border-color: var(--bs-gray-400) !important
}

.border-gray-500 {
  border-color: var(--bs-gray-500) !important
}

.border-gray-600 {
  border-color: var(--bs-gray-600) !important
}

.bg-gray-100 {
  background-color: var(--bs-gray-100) !important
}

.bg-gray-200 {
  background-color: var(--bs-gray-200) !important
}

.bg-gray-300 {
  background-color: var(--bs-gray-300) !important
}

.bg-gray-400 {
  background-color: var(--bs-gray-400) !important
}

.bg-gray-500 {
  background-color: var(--bs-gray-500) !important
}

.bg-gray-600 {
  background-color: var(--bs-gray-600) !important
}

.font-roboto,
.text-12,
.text-14,
.text-16,
.text-18,
.text-34 {
  font-family: Roboto, sans-serif
}

.font-dm-sans,
.swal2-title,
.text-20,
.text-22,
.text-24,
.text-32,
.text-40,
.text-48,
.text-80 {
  font-family: "DM Sans", sans-serif
}

.text-12,
.text-14,
.text-16,
.text-18,
.text-20,
.text-22,
.text-24,
.text-32,
.text-34,
.text-40,
.text-48,
.text-80 {
  margin-bottom: 0
}

.text-12,
.text-14,
.text-16,
.text-18,
.text-22,
.text-32,
.text-40 {
  font-weight: 400
}

.text-24,
.text-48,
.text-80 {
  font-weight: 500
}

.text-12 {
  font-size: 12px
}

.text-14 {
  font-size: 14px
}

.text-16 {
  font-size: 16px
}

.text-18 {
  font-size: 18px
}

.text-20 {
  font-size: 20px;
  font-weight: 300
}

.text-24 {
  font-size: 24px
}

.text-32 {
  font-size: 32px
}

.text-34 {
  font-size: 34px;
  font-weight: 600
}

.text-40,
.text-48 {
  font-size: 40px
}

.text-80 {
  font-size: 80px
}

.text-gold {
  color: #bc873a
}

.cookie-consent,
.z-index-10 {
  z-index: 10 !important
}

.navbar-brand a img {
  width: 220px
}

.language-toggle::after,
.ow_tr td:first-child,
.slider-list-item:not(.slider-list-item-active) {
  display: none
}

.language-dropdown {
  width: 120px
}

.language-dropdown::before {
  content: "";
  position: absolute;
  top: -50px !important;
  left: 45px !important;
  border-width: 0 15px 15px;
  border-style: solid;
  border-color: transparent transparent var(--bs-gray-200);
  display: block;
  width: 10px !important
}

.offcanvas.offcanvas-start,
.ow_table {
  width: 100%
}

.offcanvas {
  background-color: #fff
}

.btn-close:before {
  background: 0 0;
  font-size: 1.5rem
}

.offcanvas-header {
  padding-left: 15px;
  padding-right: 15px
}

.offcanvas-nav .offcanvas-header .btn-close {
  margin: 0
}

.autocomplete,
.map-autocomplete,
.navbar-autocomplete {
  position: relative;
  display: inline-block
}

.autocomplete input {
  padding: 10px;
  width: 200px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box
}

.autocomplete .suggestions,
.map-autocomplete .map-suggestions,
.navbar-autocomplete .navbar-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 11;
  background-color: #f5f5f5;
  display: none;
  overflow-y: auto;
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
  overflow: hidden
}

.navbar-autocomplete .navbar-search-suggestions {
  position: relative !important
}

.map-autocomplete .map-suggestions,
.navbar-autocomplete .navbar-search-suggestions {
  background-color: #fff !important;
  border: 1px solid #e9e9e9;
  border-top: 0
}

.autocomplete .suggestions a,
.map-autocomplete .map-suggestions p,
.navbar-autocomplete .navbar-search-suggestions a {
  display: block;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  color: #333;
  transition: background-color .3s;
  box-sizing: border-box
}

.autocomplete .suggestions a:hover,
.map-autocomplete .map-suggestions p:hover,
.navbar-autocomplete .navbar-search-suggestions a:hover {
  background-color: #f0f0f0
}

.autocomplete .view-all,
.map-autocomplete .view-all,
.navbar-autocomplete .view-all {
  text-align: center;
  padding: 5px;
  color: #007bff;
  cursor: pointer
}

.autocomplete .view-all:hover {
  text-decoration: underline
}

.autocomplete-opened .badge,
.map-autocomplete-opened .map-badge input {
  border-radius: .4rem .4rem 0 0 !important;
  border-bottom: 0
}

.btn-black {
  background-color: #222;
  color: #fff;
  font-weight: 400
}

.btn-black:hover {
  background-color: #333;
  color: #fff;
  transform: none !important;
  box-shadow: none !important
}

.ribbon {
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 150px;
  height: 150px
}

.curved-bottom,
.nav-control,
.slider,
.slider-list {
  position: relative
}

.ribbon-inner {
  color: #fff;
  background-color: #f8573d;
  text-align: center;
  width: 200%;
  transform: translateY(-50%) translateX(-50%) translateX(35px) rotate(-45deg);
  margin-top: 35px;
  line-height: 2;
  text-transform: uppercase
}

.hr-lightgray {
  color: #e9e9e9
}

/* The search-and-filter panel is overlaid on the map. Leaflet stacks its own
   control corners at z-index 1000 (leaflet.css), so an unpositioned overlay
   loses to them however late it appears in the markup — the panel would take
   clicks in some places and pass them to the map in others. Google's API set no
   such z-index, which is why this rule is new with the Leaflet port. The zoom
   buttons are moved to the top right in store-map.js so the two do not fight
   over the same corner. */
.marker-modal {
  width: 550px;
  position: relative;
  z-index: 1001
}

#map {
  height: 650px;
  width: 100%;
  border-radius: .8rem
}

/* Leaflet inherits the page's font stack rather than its own sans-serif default,
   so the attribution credit does not read as a foreign element on the page. */
.leaflet-container {
  font-family: inherit
}

/* The overlay shown when the map turns a gesture down — see
   bindCooperativeGestures() in assets/js/store-map.js. It covers the map the way
   Google's did, so the message is unmissable rather than a caption someone has
   to go looking for.

   pointer-events: none matters: the overlay appears *during* the gesture it is
   explaining, and must not swallow the click that follows it. Being inert also
   keeps the zoom buttons reachable while it is up, which is why it can sit above
   Leaflet's control corners without stealing from them. */
.store-map-hint {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease
}

.store-map-hint.is-visible {
  opacity: 1;
  visibility: visible
}

/* The overlay is feedback on a gesture that just happened, so for a reader who
   has asked for less motion it should simply be there rather than fade in. */
@media (prefers-reduced-motion: reduce) {
  .store-map-hint {
    transition: none
  }
}

/* Opening hours are several lines ("E - R 09:00 - 20:00", "L - P 10:00 - 20:00",
   a parking note). The old markup carried each in its own <p>; the rebuilt map
   writes them with textContent instead of innerHTML, so the newlines have to
   survive in CSS. */
#open,
.store-map-hours {
  white-space: pre-line
}

.curved-top {
  border-radius: 50% 50% 0 0/40px 40px 0 0
}

.curved-bottom::before {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 0;
  width: 100%;
  height: 100px;
  border-radius: 50% 50% 0 0;
  background-color: #fff;
  z-index: 5
}

.curve-2::before {
  bottom: -85px
}

.custom-bullet {
  background-color: #999
}

.slider {
  display: block;
  width: 100%;
  height: 100vh;
  max-height: 800px
}

.nav-control {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 4px;
  transition: .2s;
  cursor: pointer;
  border: 1px solid #e9e9e9;
  border-radius: 4px
}

.nav-control-active {
  background-color: #e9e9e9
}

.slider-list {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  transition: background-color .5s, opacity .5s
}

.slider-list::before {
  content: '';
  display: block
}

.slider-list-item {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  will-change: transform;
  z-index: 1
}

.slider-list-item .slider-image {
  position: absolute;
  display: block;
  width: 134%;
  height: 134%;
  top: -19%;
  left: -18%;
  right: 0;
  bottom: 0;
  z-index: 1
}

.slider-list-item-active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  z-index: 2
}

.slider-arrow-next svg,
.slider-arrow-prev svg {
  fill: transparent;
  transition: fill .1s
}

.category-presentation:hover .arrow-svg,
.slider-arrow-next:hover svg,
.slider-arrow-prev:hover svg {
  fill: #E9E9E9
}

.category-presentation:hover .arrow-svg path,
.newsletter-signup.focused button svg path,
.newsletter-signup:hover button svg path,
.slider-arrow-next:hover svg path,
.slider-arrow-prev:hover svg path {
  stroke: #222222
}

@media screen and (max-width:1366px) {
  .curved-bottom::before {
    bottom: -50px;
    height: 80px
  }
}

@media screen and (min-width:1280px) {
  .w-lg-25 {
    width: 25%
  }

  .w-lg-50 {
    width: 50%
  }
}

@media only screen and (max-width:992px) {
  .marker-modal {
    width: auto
  }

  .navbar-brand a img {
    width: 190px
  }
}

@media only screen and (min-width:768px) {
  .slider-list-item .slider-image img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
  }
}

@media only screen and (max-width:768px) {
  .fs-sm-10 {
    font-size: 10px !important
  }

  .fs-sm-12 {
    font-size: 12px !important
  }

  .fs-sm-14 {
    font-size: 14px !important
  }

  .fs-sm-16 {
    font-size: 16px !important
  }

  .fs-sm-18 {
    font-size: 18px !important
  }

  .fs-sm-20 {
    font-size: 20px !important
  }

  .fs-sm-23 {
    font-size: 23px !important
  }

  .fs-sm-24 {
    font-size: 24px !important
  }

  .fs-sm-26 {
    font-size: 26px !important
  }

  .fs-sm-40 {
    font-size: 40px !important
  }

  .top-sm-65 {
    top: 65% !important
  }

  .top-sm-85 {
    top: 85% !important
  }

  .top-sm-90 {
    top: 90% !important
  }

  .w-sm-75 {
    width: 75%
  }

  .about-numbers-sm {
    max-width: 119px
  }

  .product-price-box {
    height: 130px !important
  }

  .bottom-curve {
    width: calc(100% - 1.6rem) !important
  }

  .product-image {
    max-width: 150px !important
  }

  .slider-list-item .slider-image {
    position: absolute;
    display: block;
    width: initial;
    height: initial;
    top: initial;
    left: initial;
    right: initial;
    bottom: initial;
    z-index: initial
  }

  .curved-bottom::before {
    bottom: -40px;
    height: 55px
  }

  .map-suggestions {
    position: relative !important
  }

  .parallax-section {
    background-size: 100% 100% !important
  }
}

#KD,
#KDT,
.bottom-curve,
.topcurve {
  position: absolute
}

.custom-slide img {
  transition: transform .5s ease-in-out;
  transform-origin: bottom center
}

.custom-slide-animation img {
  transform: rotate(180deg)
}

.newsletter-signup:hover button svg {
  transition: background-color .2s ease-in
}

.newsletter-signup.focused {
  border-radius: 8px;
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .5)
}

.category-presentation img {
  transition: transform .3s ease-out, box-shadow .3s ease-out
}

.category-presentation.first-category img:hover {
  transform: scale(1.6) rotate(10deg)
}

.category-presentation.second-category:hover .border {
  background: radial-gradient(circle at bottom right, #fff -100%, transparent 50%);
  background-position: right bottom;
  background-repeat: no-repeat
}

.category-presentation.third-category:hover .border {
  background: radial-gradient(circle at top left, #fff -170%, transparent 50%);
  background-position: right bottom;
  background-repeat: no-repeat
}

.category-presentation.second-category img {
  position: relative;
  transition: transform .3s ease-in-out;
  transform: translateX(-60px)
}

.category-presentation.third-category img {
  position: relative;
  transition: transform .3s ease-in-out;
  transform: translateX(60px)
}

.category-presentation:hover img {
  transform: translateX(0)
}

.products-hero {
  padding-top: 4.5rem;
  padding-bottom: 5rem
}

.product-image {
  max-width: 220px;
  padding-top: 10px
}

.nav-tabs .nav-item a.active {
  background-color: #222;
  color: #fff !important;
  font-weight: 400
}

.nav-tabs .nav-item a:hover {
  transform: none;
  box-shadow: none
}

.category-img,
.category-sm-image {
  width: 60px;
  height: 60px
}

.sort-select:focus-visible {
  outline: 0
}

.about-numbers {
  max-height: 160px
}

.size-select .page-item .page-link.selected,
.size-select .page-item .page-link:hover {
  background-color: var(--bs-gray-600);
  color: #fff !important;
  border-radius: 5px;
  transform: scale(1.1);
  z-index: 10
}

.map-search-image,
.search-image {
  height: 40px;
  margin-right: .4rem
}

.swal2-title {
  color: var(--bs-gray-600);
  font-size: 40px;
  font-weight: 400
}

.swal2-html-container {
  color: var(--bs-gray-300) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  font-family: "DM Sans", sans-serif !important
}

.swal2-confirm {
  background-color: #222 !important;
  color: #fff !important;
  font-weight: 400 !important;
  border: 0 !important
}

.swal2-confirm:focus {
  box-shadow: none !important
}

.ow_td {
  padding-right: 0 !important
}

.loader {
  width: 25px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #222;
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: 1s linear infinite l3
}

@keyframes l3 {
  to {
    transform: rotate(1turn)
  }
}

input[type=text].valid-input {
  border: 1px solid #00963f !important
}

.invalid-input {
  border: 1px solid #e3000e !important
}

.bottom-curve {
  bottom: -1px;
  left: .8rem;
  width: calc(100% - 1.5rem);
  z-index: 9
}

.topcurve {
  top: -1px;
  left: .8rem;
  width: calc(100% - 1.6rem);
  z-index: 9
}

#KDF {
  position: relative;
  height: 100%
}

#KDT {
  left: 10px;
  top: calc(50% - 15px);
  height: 20px;
  width: 140px
}

#KD {
  top: calc(50% - 20px);
  width: 35px
}

#KDM,
.header-black-img {
  top: 0;
  height: 100%;
  position: absolute;
  overflow: hidden
}

#KDM {
  width: 0
}

#KDP {
  position: absolute;
  left: 0;
  max-width: unset
}

.slider-image .m2 {
  left: -9%;
  top: -13%;
  width: 110% !important;
  height: 110% !important
}

.header-black-img {
  left: 0;
  background: #222;
  width: 100%;
  border-radius: .8rem;
  z-index: -1
}

.header-black-img .g1 {
  position: absolute;
  width: 43em;
  bottom: -24em;
  left: -18em;
  max-width: 1000px;
  min-width: 200px
}

.header-black-img .g2 {
  position: absolute;
  width: 21%;
  top: -20%;
  left: 51%;
  max-width: 400px;
  min-width: 200px
}

.header-black-img .g3 {
  position: absolute;
  width: 44em;
  top: -19em;
  right: -24em;
  max-width: 1000px;
  min-width: 200px
}

.z-index-2 {
  z-index: 2;
  position: relative
}

.toode {
  top: 2rem
}

.switch-container {
  display: flex;
  align-items: center
}

.switch-label {
  margin-right: 10px
}

/* Scoped to the product page's size toggle this was written for
   (product.php:186-187). As a bare `.switch` it also matched the cookie
   consent modal's toggles — Silktide wraps each one in <label class="switch">
   — and drew this 1px box around all three of them. `.switch` is generic
   enough that any third-party widget can land on it, so the fix is to say
   which switch is meant rather than to unset the box again further down. */
.switch-container .switch {
  position: relative;
  width: 150px;
  height: 56px;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
  overflow: hidden
}

.switch-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  border-radius: 5px;
  padding: 25px;
  background-color: #e9e9e9;
  transition: .3s
}

.switch-text[data-checked=false] {
  left: 50%;
  color: #e9e9e9;
  background-color: transparent
}

@media screen and (max-width:1200px) {
  .toode {
    top: 6.4rem
  }
}

@media screen and (max-width:992px) {
  .toode {
    width: 45%;
    left: 33%;
    top: -3rem
  }
}

@media screen and (max-width:570px) {
  .toode {
    width: 78%;
    left: 10%;
    top: .1rem
  }
}

.parallax-section {
  background-size: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  height: 100%
}

.content {
  text-align: center;
  color: #fff
}

.product-price-box {
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

@media (max-width:1700px) {
  .splat {
    display: none;
  }
}

#conseno-main {
  z-index: 1050 !important;
}

.modal-backdrop.show {
  z-index: 1054 !important;
}

.word-spacing-big {
  word-spacing: 0.5rem;
}

.letter-spacing-big {
  letter-spacing: .12em;
}

.high-contrast *,
.high-contrast *::after,
.high-contrast *::before,
.high-contrast .bg-gray-600,
.high-contrast .bg-gray-500,
.high-contrast .bg-gray-100 {
  background-color: #000 !important;
  color: #FFFF00 !important;
}

.high-contrast .bottom-curve,
.high-contrast .subtract {
  display: none;
}

.high-contrast .toggle-accessibility {
  margin-top: 1rem;
}

.high-contrast .swiper-wrapper,
.high-contrast .swiper-slide,
.high-contrast .slider-list *,
.high-contrast .image-wrapper.bg-full *,
.high-contrast .swiper-slide::before {
  background-color: unset !important;
}

.high-contrast .bg-cover {
  background-image: none !important;
}

.high-contrast .btn,
.high-contrast .border,
.high-contrast .form-control,
.high-contrast .form-select,
.high-contrast .form-check-input,
.high-contrast .form-control:focus,
.high-contrast .form-check-input:checked {
  border-color: #FFFF00 !important;
}

.high-contrast .form-floating label {
  background: transparent !important;
}

.high-contrast input:focus-visible {
  outline: none !important;
}

.high-contrast a:hover {
  background-color: #FFFF00 !important;
  color: #000 !important;
}

.high-contrast .text-gray-600,
.high-contrast .text-gray-500,
.high-contrast .text-gray-400,
.high-contrast .text-gray-300,
.high-contrast .text-gray-200 {
  color: #FFFF00 !important;
}

.high-contrast .form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='yellow' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.high-contrast .form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.5' fill='yellow'/%3e%3c/svg%3e");
}

.high-contrast .wrapper.bg-soft-primary.angled.lower-start:after,
.high-contrast .wrapper.bg-soft-primary.angled.upper-start:before,
.high-contrast .wrapper.bg-light.angled.lower-end:after,
.high-contrast .wrapper.bg-light.angled.upper-end:before {
  border-left-color: #000 !important;
  border-right-color: #000 !important
}

.font-large * {
  font-size: 101% !important;
}

.font-extra-large * {
  font-size: 102% !important;
}


.letter-spacing * {
  letter-spacing: .12em !important;
}

.word-spacing * {
  word-spacing: 0.5rem !important;
}

.paragraph-spacing p {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}

footer a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

:focus-visible {
  outline: Highlight auto 1px !important
}

/* --- The same fix for the old card ---------------------------------------- */
/* pcadmin-sections/pages/default/components/product-card.php — the card the
   homepage carousel uses. It has the identical defect for the identical reason:
   the grey price box sits under an image whose height follows its aspect ratio,
   so a row mixing a 450x450 can with a 450x321 bottle staggered the boxes by
   63px. Measured on /et/avaleht before this rule.
   Fixed on the image itself rather than on its <figure>, because selecting a
   parent would need :has() and the height is what actually varies.

   `!important` AND the `figure` prefix are both load-bearing, and the plain
   `.product-image { height: … }` this started as did nothing at all: style.css
   carries `figure img { width: 100%; max-width: 100%; height: auto !important }`,
   which outranks an unflagged declaration however late it is loaded. Matching
   its weight and beating its specificity is what makes the height stick.
   (Core's listing card needed neither — its images are not inside a <figure>,
   which is why the same fix worked there unqualified.) */
figure img.product-image {
  height: 230px !important;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  figure img.product-image {
    height: 160px !important;
  }
}

/* --- Language switcher: the globe ----------------------------------------- */
/* The old navbar's language control was the globe at assets/img/language.svg,
   with ET / RU inside the dropdown it opened
   (snus-empire-old/includes/navbar.php:183-196). Core's switcher shows the
   active code and a caret instead. Its dropdown does the work worth keeping —
   it translates the current URL into the target language — so only the
   trigger's face is restyled: the code and the caret are hidden and the globe
   becomes the link's own background. The <a> carries aria-label="Language",
   so hiding the text leaves the control named.

   40px is the icon's own size: the old page set no dimensions on the <img>, so
   it drew at the intrinsic 40x40 of assets/img/language.svg. */
.nav-language-switcher .lang-trigger {
  width: 40px;
  height: 40px;
  background: url("../img/language.svg") center center / 40px 40px no-repeat;
}

.nav-language-switcher .lang-trigger > span {
  display: none;
}

/* --- Cookie consent: the site's black, not Silktide's purple -------------- */
/* The consent banner, its preferences modal and its floating cookie icon all
   draw their accent from #533BE2 — the stock Silktide colour shipped in
   pcadmin/public/core/components/consent/consent.css. It was the only purple on
   a site whose buttons, active tabs and dialogs are #222 (.swal2-confirm above,
   .nav-tabs .nav-item a.active before it).

   The component drives every accented surface from custom properties on
   #silktide-wrapper, so recolouring is a matter of redeclaring two of them —
   nothing here restyles a button, a link or the icon directly.

   The `html` prefixes are load-bearing. pc_render_consent() emits consent.css
   from the body end (pcadmin/core/functions/scripts.php:231), so it is later in
   the document than this file and wins on order at equal specificity. The extra
   element selector beats it on specificity instead, which order cannot undo.
   Overriding in the component itself was not an option: pcadmin is shared core.

   #222 rather than #000 because #222 is the black the rest of the site draws
   (it is --bs-gray-600 at the top of this file). */
html #silktide-wrapper {
  --primaryColor: #222;
  --cookieIconColor: #222;
}

/* The switches need the two greys below, or black costs them their states.
   Their pills are the one place the accent has to stay *distinguishable* rather
   than just on-brand, and both stock greys were picked to sit against purple:

   - Off took --textColor (#4B494B). Against #222 that is nearly the same pill,
     so on and off stopped being tellable apart at a glance. #767676 is the
     lightest grey that still carries the white "OFF" label at WCAG AA (4.5:1);
     the site's own #828282 gray-300 reaches only 3.8:1.
   - The locked "necessary" switch faded its pill to 65% opacity, which turns
     #222 into rgb(111,111,111) — indistinguishable from the off grey above.
     It gets the muted-but-clearly-dark #4F4F4F (--bs-gray-400) at full opacity
     instead. cursor: not-allowed is left alone, so the switch still reads as
     locked; only the fade that collided is replaced.

   Neither rule touches an unlocked checked pill: `input:checked + .switch__pill`
   in consent.css is more specific than the first, and the second is scoped to
   :disabled, so an on switch the visitor can flip stays solid #222. */
html #silktide-modal .switch__pill {
  background: #767676;
}

html #silktide-modal .switch input:disabled + .switch__pill {
  opacity: 1;
  background: #4F4F4F;
}

/* The language switcher's globe.

   The 2023 site's navbar used assets/img/language.svg as the whole trigger
   (`<img alt="Localization">`); core's pc_language_switcher() renders the
   current language code and a caret instead, so the globe this site has always
   shown went missing at the rebuild. Core is shared by every client on it and
   is not edited for one — the icon is added back here, as a ::before on core's
   own trigger, which collides with none of its rules.

   The code is KEPT beside the globe rather than replaced by it. The old site
   showed the globe alone, so nothing told a visitor which language they were
   already reading; the button's accessible name comes from aria-label either
   way, so the text costs no screen-reader clarity and buys sighted clarity.

   GEOMETRY. The file is a 40x40 viewBox whose circle spans x=11..29 — the art
   is 45% of its own canvas, so drawing it at 1:1 in a 22px box yields a 10px
   globe. mask-size: 200% scales it to ~20px within the box, and the circle
   being centred means the overflow that scaling creates is empty margin, not
   clipped artwork.

   A mask rather than a background-image: the SVG hardcodes stroke="#222222",
   which would vanish on a dark header. Masking paints currentColor instead, so
   the globe always matches the nav text beside it. */
.nav-language-switcher .lang-trigger::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("../img/language.svg") no-repeat center;
  -webkit-mask-size: 200%;
  mask: url("../img/language.svg") no-repeat center;
  mask-size: 200%;
}

/* ...and room between it and the divider.

   The `<span class="border ... ms-2">` that separates the icon group from the
   switcher carries Bootstrap's ms-2 on its own left, so the search icon gets
   8px of air before the line. Core's <li> adds nothing on the other side, so
   the globe sat flush against it — measured 10px before the divider and 0px
   after. The same token on this side makes the divider sit centred between the
   two icons rather than glued to one. */
.nav-language-switcher {
  margin-left: .5rem;
}

/* The reCAPTCHA attribution sits on the newsletter band's dark background, where
   the theme's link colour disappears. */
.newsletter-recaptcha-notice a { color: inherit; text-decoration: underline; }