/*
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@300;400;500;600&display=swap');
 */
:root {
  --bcsm-col-w:       240px;
  --bcsm-head-h:      64px;
  --bcsm-item-h:      54px;

  --bcsm-bg:          #fafaf8;
  --bcsm-head-bg:     #ffffff;
  --bcsm-text:        #1c1c1a;
  --bcsm-muted:       #9a9a96;
  --bcsm-border:      #e8e6e0;
  --bcsm-accent:      #c9a96e;
  --bcsm-active-bg:   #f5f0e8;
  --bcsm-active-text: #8a6a3a;
  --bcsm-overlay-bg:  rgba(28,28,26,.55);

  --bcsm-font-body:   'Cormorant Garamond', Georgia, serif;
  --bcsm-font-ui:     'Jost', 'Helvetica Neue', sans-serif;

  --bcsm-dur:   .32s;
  --bcsm-ease:  cubic-bezier(.4,0,.2,1);

  --bcsm-z-overlay: 9998;
  --bcsm-z-drawer:  9999;
  --bcsm-z-toggle:  10000;
}

/* =============================================================================
   2. Scoped reset
   ============================================================================= */
.bcsm-drawer *,
.bcsm-drawer *::before,
.bcsm-drawer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =============================================================================
   3. Toggle button
   ============================================================================= */
.bcsm-toggle {
  /* No position:relative — stay in normal document flow, no overlap */
  position: static;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  /* Smooth hide/show */
  transition: opacity .2s ease, visibility .2s ease;
}

/* Hide toggle when sidebar is open — fade out smoothly */
.bcsm-toggle.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Keep space so layout doesn't jump — use visibility not display */
}

/* Also hide the wrapper slot that JS creates (.bcsm-toggle-slot) */
.bcsm-toggle-slot:has(.bcsm-toggle.is-open),
.bcsm-toggle-slot.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

[data-bs-toggle="offcanvas"][data-bs-target="#mobileMenu"],
.js-menu-canvas[data-bs-toggle="offcanvas"],
.header-block__action-btn[data-bs-toggle="offcanvas"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  overflow: hidden !important;
}

.bcsm-toggle__label {
  font-family: var(--bcsm-font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bcsm-text);
  display: none;
}
@media (min-width: 576px) { .bcsm-toggle__label { display: inline; } }

.bcsm-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
}
.bcsm-hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--bcsm-text);
  transform-origin: center;
  transition: transform var(--bcsm-dur) var(--bcsm-ease),
  opacity   var(--bcsm-dur) var(--bcsm-ease),
  width     var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-hamburger span:nth-child(2) { width: 75%; }

.bcsm-toggle.is-open .bcsm-hamburger span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); width: 100%; }
.bcsm-toggle.is-open .bcsm-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.bcsm-toggle.is-open .bcsm-hamburger span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); width: 100%; }

/* =============================================================================
   4. Overlay
   ============================================================================= */
.bcsm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--bcsm-z-overlay);
  background: var(--bcsm-overlay-bg);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity var(--bcsm-dur) var(--bcsm-ease),
  visibility var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-overlay.is-visible { opacity: 1; visibility: visible; }

/* =============================================================================
   5. Drawer shell  (MOBILE default)
   ============================================================================= */
.bcsm-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: var(--bcsm-z-drawer);
  width: var(--bcsm-col-w) !important;
  max-width: 92vw !important;
  height: 100% !important;
  overflow: hidden !important;
  background: var(--bcsm-bg);
  font-family: var(--bcsm-font-ui);
  transform: translateX(-100%);
  transition: transform var(--bcsm-dur) var(--bcsm-ease);
  box-shadow: 4px 0 40px rgba(28,28,26,.12);
  /* reset any flex the theme may inject */
  display: block !important;
  flex-direction: unset !important;
  align-items: unset !important;
}
.bcsm-drawer.is-open { transform: translateX(0); }

/* =============================================================================
   6. Panels  (MOBILE)
   ============================================================================= */

.bcsm-panel {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: var(--bcsm-bg);
  transform: translateX(100%);
  transition: transform var(--bcsm-dur) var(--bcsm-ease);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--bcsm-border) transparent;
}
.bcsm-panel::-webkit-scrollbar       { width: 3px; }
.bcsm-panel::-webkit-scrollbar-track { background: transparent; }
.bcsm-panel::-webkit-scrollbar-thumb { background: var(--bcsm-border); border-radius: 2px; }

/* L1 is always visible */
.bcsm-panel--l1 { transform: translateX(0); }

/* Scrollable nav list inside L1/L2 */
.bcsm-panel--l1 > .bcsm-nav,
.bcsm-panel--l2 > .bcsm-nav { overflow-y: auto; flex: 1; }

/* L2 clips its nested L3 panels */
.bcsm-panel--l2 { overflow: hidden !important; }

/* L3: hoisted to <body> by JS — position:fixed, no overflow clip.
   Default: hidden. Mobile: slides in full-width over drawer.  */
.bcsm-panel--l3,
.bcsm-l3-portal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: var(--bcsm-col-w) !important;
  height: 100vh !important;

  /* Hidden by default — beats .bcsm-panel { display:flex !important } */
  display: none !important;

  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  background: var(--bcsm-bg);
  z-index: calc(var(--bcsm-z-drawer) + 1);   /* above drawer on mobile */
  box-shadow: 4px 0 40px rgba(28,28,26,.15);

  /* Mobile: slide in from right */
  transform: translateX(100%) !important;
  transition: transform var(--bcsm-dur) var(--bcsm-ease),
  opacity   var(--bcsm-dur) var(--bcsm-ease);
  opacity: 1;
}

/* Mobile active — show & slide in */
.bcsm-panel--l3.is-active,
.bcsm-l3-portal.is-active {
  display: flex !important;
  transform: translateX(0) !important;
}

/* L1 slides back when L2 opens */
.bcsm-panel--l1.is-pushed { transform: translateX(-28%); }

/* Any panel slides in when activated (mobile) */
.bcsm-panel.is-active { transform: translateX(0); }

/* =============================================================================
   7. Panel header
   ============================================================================= */
.bcsm-panel__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--bcsm-head-h);
  padding: 0 20px;
  background: var(--bcsm-head-bg);
  border-bottom: 1px solid var(--bcsm-border);
  flex-shrink: 0;
}
/* Gold top bar */
.bcsm-panel__head::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bcsm-accent), transparent);
}

.bcsm-panel__title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--bcsm-font-body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--bcsm-text) !important;
  text-decoration: none;
}
.bcsm-panel__title--link { transition: color var(--bcsm-dur) var(--bcsm-ease); }
.bcsm-panel__title--link:hover { color: var(--bcsm-accent) !important; }

/* =============================================================================
   8. Close button
   ============================================================================= */
.bcsm-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: none;
  border: 1px solid var(--bcsm-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--bcsm-muted) !important;
  flex-shrink: 0;
  transition: color var(--bcsm-dur) var(--bcsm-ease),
  border-color var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-close:hover { color: var(--bcsm-text) !important; border-color: var(--bcsm-text); }
.bcsm-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* =============================================================================
   9. Back button
   ============================================================================= */
.bcsm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--bcsm-font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bcsm-muted) !important;
  transition: color var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-back:hover { color: var(--bcsm-text) !important; }
.bcsm-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* =============================================================================
   10. Navigation list
   ============================================================================= */
.bcsm-nav { list-style: none; flex: 1; }

.bcsm-nav__item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--bcsm-border);
  position: relative;
}
.bcsm-nav__item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--bcsm-accent);
  transition: width var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-nav__item:hover::before { width: 2px; }

.bcsm-nav__item.is-current > .bcsm-nav__link { background: var(--bcsm-active-bg); color: var(--bcsm-active-text) !important; }
.bcsm-nav__item.is-current::before { width: 2px; background: var(--bcsm-active-text); }

/* "View all" row */
.bcsm-nav__item--view-all { border-bottom: 1px solid var(--bcsm-border); margin-bottom: 4px; }
.bcsm-nav__item--view-all .bcsm-nav__link {
  font-size: 11px; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bcsm-accent) !important; padding: 12px 20px;
}
.bcsm-nav__item--view-all .bcsm-nav__link::after { content: ' →'; }

.bcsm-nav__link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--bcsm-item-h);
  padding: 14px 20px;
  font-family: var(--bcsm-font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--bcsm-text) !important;
  text-decoration: none;
  transition: background var(--bcsm-dur) var(--bcsm-ease),
  color var(--bcsm-dur) var(--bcsm-ease),
  padding-left var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-nav__link:hover { background: var(--bcsm-head-bg); padding-left: 24px; }

.bcsm-nav__thumb {
  width: 32px; height: 32px;
  object-fit: cover; border-radius: 2px; flex-shrink: 0;
  filter: grayscale(20%);
  transition: filter var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-nav__item:hover .bcsm-nav__thumb { filter: grayscale(0%); }

.bcsm-nav__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: var(--bcsm-item-h);
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--bcsm-border);
  cursor: pointer;
  color: var(--bcsm-muted) !important;
  transition: background var(--bcsm-dur) var(--bcsm-ease),
  color var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-nav__arrow:hover { background: var(--bcsm-active-bg); color: var(--bcsm-accent) !important; }
.bcsm-nav__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* =============================================================================
   11. Footer
   ============================================================================= */
.bcsm-drawer-footer {
  padding: 20px 20px 28px;
  border-top: 1px solid var(--bcsm-border);
  margin-top: auto;
  flex-shrink: 0;
}
.bcsm-drawer-footer__label {
  font-size: 9px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bcsm-accent);
  margin-bottom: 10px; display: block;
}
.bcsm-drawer-footer__links { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; }
.bcsm-drawer-footer__links a {
  font-size: 11px; font-weight: 400; letter-spacing: .05em;
  color: var(--bcsm-muted) !important; text-decoration: none;
  transition: color var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-drawer-footer__links a:hover { color: var(--bcsm-text) !important; }

/* =============================================================================
   12. Focus / accessibility
   ============================================================================= */
.bcsm-toggle:focus-visible,
.bcsm-close:focus-visible,
.bcsm-back:focus-visible,
.bcsm-nav__arrow:focus-visible,
.bcsm-nav__link:focus-visible {
  outline: 2px solid var(--bcsm-accent);
  outline-offset: 2px;
}

/* =============================================================================
   13. Small mobile
   ============================================================================= */
@media (max-width: 480px) {
  :root { --bcsm-col-w: 100vw; --bcsm-item-h: 52px; }
  .bcsm-drawer { max-width: 100vw !important; }
}

/* =============================================================================
   14. Desktop  ≥ 992px  —  3-column mega menu
   ─────────────────────────────────────────────────────────────────────────────
   L3 panels live in <body> (hoisted by JS at init).
   No overflow:hidden ancestor → position:fixed works perfectly.
   --bcsm-drawer-left is set by JS = drawer.getBoundingClientRect().left
   ============================================================================= */
@media (min-width: 992px) {

  /* ── 1. Drawer shell ─────────────────────────────────────────────── */
  .bcsm-drawer {
    width: auto !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform var(--bcsm-dur) var(--bcsm-ease),
    opacity   var(--bcsm-dur) var(--bcsm-ease);
    box-shadow: 6px 0 48px rgba(28,28,26,.20),
    1px 0 0   rgba(28,28,26,.06) !important;
  }
  .bcsm-drawer.is-open { transform: translateX(0); opacity: 1; }

  /* ── 2. Base panel → flex column ─────────────────────────────────── */
  .bcsm-panel {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: var(--bcsm-col-w) !important;
    height: 100% !important;
    flex-shrink: 0;
    flex-grow: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: none !important;
    flex-direction: column !important;
    border-right: 1px solid var(--bcsm-border);
    transition: none !important;
    background: var(--bcsm-bg);
  }
  .bcsm-panel::-webkit-scrollbar       { width: 3px; }
  .bcsm-panel::-webkit-scrollbar-track { background: transparent; }
  .bcsm-panel::-webkit-scrollbar-thumb { background: var(--bcsm-border); border-radius: 2px; }

  /* ── 3. L1 — always visible ──────────────────────────────────────── */
  .bcsm-panel--l1 {
    display: flex !important;
    transform: none !important;
  }
  .bcsm-panel--l1.is-pushed { transform: none !important; }
  .bcsm-panel--l1 > .bcsm-nav { overflow-y: auto; flex: 1; }

  /* ── 4. L2 — show when active ────────────────────────────────────── */
  .bcsm-panel--l2.is-active-desktop {
    display: flex !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .bcsm-panel--l2 > .bcsm-nav { overflow-y: visible; flex: 1; }

  /* ── 5. L3 — fixed 3rd column (lives in <body>, no overflow clip) ──── */

  /* Reset mobile states first */
  .bcsm-panel--l3,
  .bcsm-panel--l3.is-active {
    position: fixed !important;
    top: 0 !important;
    left: calc(var(--bcsm-drawer-left, 0px) + var(--bcsm-col-w) * 2) !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--bcsm-col-w) !important;
    max-width: var(--bcsm-col-w) !important;
    height: 100dvh !important;

    /* Hidden by default — beats both base and .is-active mobile rule */
    display: none !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: var(--bcsm-bg);
    border-right: 1px solid var(--bcsm-border);
    border-left: 1px solid var(--bcsm-border);
    box-shadow: 4px 0 24px rgba(28,28,26,.10);
    z-index: var(--bcsm-z-drawer);

    /* Slide-in animation (reset mobile transform) */
    transform: translateX(16px) !important;
    opacity: 0;
    transition: transform .22s var(--bcsm-ease),
    opacity   .22s var(--bcsm-ease) !important;
  }

  /* Show only when explicitly active on desktop */
  .bcsm-panel--l3.is-active-desktop {
    display: flex !important;
    transform: translateX(0) !important;
    opacity: 1;
  }

  /* ── 6. Panel headers — sticky ───────────────────────────────────── */
  .bcsm-panel__head {
    min-height: 56px;
    padding: 0 18px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bcsm-head-bg);
  }
  .bcsm-panel__title { font-size: 15px; }

  /* ── 7. Hide back button ─────────────────────────────────────────── */
  .bcsm-back { display: none !important; }

  /* ── 8. Nav sizing ───────────────────────────────────────────────── */
  .bcsm-nav__item--view-all .bcsm-nav__link { padding: 10px 18px; }
  .bcsm-nav__link {
    min-height: 46px;
    padding: 11px 18px;
    font-size: 12.5px;
    letter-spacing: .05em;
  }
  .bcsm-nav__link:hover { padding-left: 22px; }
  .bcsm-nav__arrow { width: 38px; min-height: 46px; }

  /* Hide arrow for items with no children */
  .bcsm-nav__item:not(.has-children) > .bcsm-nav__arrow {
    display: none !important;
  }

  /* ── 9. Active item highlight ────────────────────────────────────── */
  .bcsm-nav__item.is-active-desktop {
    background: var(--bcsm-active-bg);
  }
  .bcsm-nav__item.is-active-desktop > .bcsm-nav__link {
    color: var(--bcsm-active-text) !important;
    padding-left: 22px;
  }
  .bcsm-nav__item.is-active-desktop::before {
    width: 3px !important;
    background: var(--bcsm-accent);
  }
  .bcsm-nav__item.is-active-desktop > .bcsm-nav__arrow {
    color: var(--bcsm-accent) !important;
    background: var(--bcsm-active-bg);
  }

  /* ── 10. Footer hidden ───────────────────────────────────────────── */
  .bcsm-drawer-footer { display: none !important; }

  /* ── 11. Overlay — no blur ───────────────────────────────────────── */
  .bcsm-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* dvh fallback */
@supports not (height: 100dvh) {
  @media (min-width: 992px) {
    .bcsm-drawer    { height: 100vh !important; max-height: 100vh !important; }
    .bcsm-panel--l3 { height: 100vh !important; }
  }
}

/* ── แสดง hamburger ในจอ > 1200px (xl) ──────────────────────────────────
   JS ย้าย .bcsm-toggle ออกจาก div.d-none ไปใส่ .bcsm-toggle-slot
   ที่อยู่ใน flex row เดียวกับ logo — ไม่ต้องแก้ header.tpl
   ────────────────────────────────────────────────────────────────────── */

/* toggle slot ที่ JS สร้างขึ้น — แสดงทุก breakpoint */
.bcsm-toggle-slot {
  display: flex !important;
  align-items: center;
  flex-shrink: 0;
  margin-right: 4px;
}

/* force toggle ให้แสดงเสมอ ไม่ว่าจะอยู่ใน parent ใด */
.bcsm-toggle-slot .bcsm-toggle {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* label "Menu" — ซ่อนในมือถือ แสดงใน ≥576px */
.bcsm-toggle-slot .bcsm-toggle__label {
  display: none;
}
@media (min-width: 576px) {
  .bcsm-toggle-slot .bcsm-toggle__label {
    display: inline !important;
  }
}
/* =============================================================================
   14. Language Bar — Select Dropdown
   ============================================================================= */

.bcsm-lang-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--bcsm-border);
  flex-shrink: 0;
}

.bcsm-lang-bar__label {
  font-family: var(--bcsm-font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bcsm-accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* wrapper = flag + select + chevron */
.bcsm-lang-bar__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* flag inside the wrapper (pointer-events none so clicks hit the select) */
.bcsm-lang-bar__current-flag {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
}

/* chevron arrow on the right */
.bcsm-lang-bar__chevron {
  position: absolute;
  right: 10px;
  width: 14px;
  height: 14px;
  stroke: var(--bcsm-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
  z-index: 1;
}

/* the actual <select> element */
.bcsm-lang-bar__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 32px 7px 38px; /* left room for flag, right room for chevron */
  background: var(--bcsm-head-bg);
  border: 1px solid var(--bcsm-border);
  border-radius: 6px;
  font-family: var(--bcsm-font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--bcsm-text);
  cursor: pointer;
  transition:
    border-color var(--bcsm-dur) var(--bcsm-ease),
    box-shadow   var(--bcsm-dur) var(--bcsm-ease);
  outline: none;
}

.bcsm-lang-bar__select:hover {
  border-color: var(--bcsm-accent);
}

.bcsm-lang-bar__select:focus-visible {
  border-color: var(--bcsm-accent);
  box-shadow: 0 0 0 3px rgba(201,169,110,.20);
}