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

  --bcsm-bg:          #ffffff;
  --bcsm-bg-l2:       #f0f0f0;
  --bcsm-bg-l3:       #f0f0f0;
  --bcsm-head-bg:     #ffffff;
  --bcsm-text:        #2c2c2c;
  --bcsm-muted:       #aaaaaa;
  --bcsm-border:      #e2e2e2;
  --bcsm-accent:      #5bb8e8;
  --bcsm-active-bg:   transparent;
  --bcsm-active-text: #5bb8e8;
  --bcsm-overlay-bg:  rgba(0,0,0,.30);

  --bcsm-font-body:   'Jost', 'Helvetica Neue', Arial, sans-serif;
  --bcsm-font-ui:     'Jost', 'Helvetica Neue', Arial, sans-serif;

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

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

.bcsm-drawer *,
.bcsm-drawer *::before,
.bcsm-drawer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   TOGGLE BUTTON
   ============================================================ */
.bcsm-toggle {
  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;
  transition: opacity .2s ease, visibility .2s ease;
}
.bcsm-toggle.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.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;
  font-weight: 800 !important;
}
.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)
{ font-weight: 800 !important;}
.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); width: 100%;}
.bcsm-toggle.is-open .bcsm-hamburger span:nth-child(3) {
  transform: translateY(-6.25px) rotate(-45deg); width: 100%;}

/* ============================================================
   OVERLAY
   ============================================================ */
.bcsm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--bcsm-z-overlay);
  background: var(--bcsm-overlay-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bcsm-dur) var(--bcsm-ease),
              visibility var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-overlay.is-visible { opacity: 1; visibility: visible; }

/* ============================================================
   DRAWER — MOBILE DEFAULT (slide-in from left)
   ============================================================ */
.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(0,0,0,.12);
  display: block !important;
  flex-direction: unset !important;
  align-items: unset !important;
}
.bcsm-drawer.is-open { transform: translateX(0); }

/* ============================================================
   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; }

.bcsm-panel--l1 { transform: translateX(0); }
.bcsm-panel--l1 > .bcsm-nav,
.bcsm-panel--l2 > .bcsm-nav { overflow-y: auto; flex: 1; }
.bcsm-panel--l2 { overflow: hidden !important; }

.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;
  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);
  box-shadow: 4px 0 40px rgba(0,0,0,.15);
  transform: translateX(100%) !important;
  transition: transform var(--bcsm-dur) var(--bcsm-ease),
              opacity   var(--bcsm-dur) var(--bcsm-ease);
  opacity: 1;
}
.bcsm-panel--l3.is-active,
.bcsm-l3-portal.is-active {
  display: flex !important;
  transform: translateX(0) !important;
}
.bcsm-panel--l1.is-pushed { transform: translateX(-28%); }
.bcsm-panel.is-active { transform: translateX(0); }

/* Panel header — mobile */
.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);
  flex-shrink: 0;
}

.bcsm-panel__title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--bcsm-font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .02em;
  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; }

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

/* 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; }

/* Navigation list */
.bcsm-nav { list-style: none; flex: 1; }
.bcsm-nav__item {
  display: flex;
  align-items: center;
  position: relative;
}
@media (max-width: 991px) {
  .bcsm-panel__title {
    display: none !important;
  }
}

.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: 10px 20px;
  font-family: var(--bcsm-font-ui);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--bcsm-text) !important;
  text-decoration: none;
  transition: color var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-nav__link:hover { color: var(--bcsm-accent) !important; background: none; }

.bcsm-nav__thumb {
  width: 32px; height: 32px;
  object-fit: cover; border-radius: 2px; flex-shrink: 0;
}

.bcsm-nav__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: var(--bcsm-item-h);
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bcsm-muted) !important;
  transition: color var(--bcsm-dur) var(--bcsm-ease);
}
.bcsm-nav__arrow:hover { color: var(--bcsm-accent) !important; }
.bcsm-nav__arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /*margin-bottom: 9px;*/
}

/* 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; 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; }

/* Focus */
.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;
}

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

/* ==========================================================================
   DESKTOP >= 992px — 3-column mega menu matching screenshot
   White L1 | Light-grey L2 | Light-grey L3
   No item borders, clean typography, X close top-right of L1
   ========================================================================== */
@media (min-width: 992px) {

  /* ── 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(0,0,0,.18);
  }
  .bcsm-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
  }

  /* ── Base panel reset ── */
  .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;
    transition: none !important;
    border-right: none;
  }
  .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 — pure white, always shown ── */
  .bcsm-panel--l1 {
    display: flex !important;
    transform: none !important;
    background: #ffffff;
    border-right: 1px solid var(--bcsm-border);
    width: 65% !important;
  }
  .bcsm-panel--l1.is-pushed { transform: none !important; }
  .bcsm-panel--l1 > .bcsm-nav { overflow-y: auto; flex: 1; }

  /* ── L2 — light grey ── */
  .bcsm-panel--l2 {
    background: var(--bg-color);
    border-right: 1px solid #C5C5C5;
  }
  .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; }

  /* ── L3 — light grey, fixed at 3rd column position ── */
  .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;
    display: none !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--bcsm-bg-l3);
    border-left: 1px solid var(--bcsm-border);
    border-right: none;
    box-shadow: none;
    z-index: var(--bcsm-z-drawer);
    transform: translateX(10px) !important;
    opacity: 0;
    transition: transform .2s var(--bcsm-ease),
                opacity   .2s var(--bcsm-ease) !important;
  }
  .bcsm-panel--l3.is-active-desktop {
    display: flex !important;
    transform: translateX(0) !important;
    opacity: 1;
  }

  /* ── Panel head ── */
  .bcsm-panel__head {
    min-height: 54px;
    padding: 0 10px 0 20px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
  }

  /* L1 head: only show close X, push to right */
  .bcsm-panel--l1 .bcsm-panel__head {
    background: #ffffff;
    justify-content: flex-end;
  }

  /* Hide shop name on desktop */
  .bcsm-panel--l1 .bcsm-panel__title {
    display: none !important;
  }

  /* L2 and L3 — no visible header at all */
  .bcsm-panel--l2 .bcsm-panel__head,
  .bcsm-panel--l3 .bcsm-panel__head {
    display: none !important;
  }

  /* Back button hidden on desktop */
  .bcsm-back { display: none !important; }

  /* ── Nav items — no dividers ── */
  .bcsm-nav__item {
  }

  /* ── Nav links ── */
  .bcsm-nav__link {
    /*min-height: 36px;*/
    font-family: 'Montserrat',sans-serif;
    padding: 8px 24px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--navy) !important;
    line-height: 1.4;
  }
  .bcsm-nav__link:hover {
    color: var(--light-blue) !important;
    background: none !important;
  }

  /* L1: slightly larger, proper vertical rhythm */
  .bcsm-panel--l1 .bcsm-nav__link {
    /*padding: 13px 25px;*/
    /*min-height: 42px;*/
    /*font-size: 18px;*/
    /*font-weight: 600;*/
    /*font-family: 'Montserrat',sans-serif;*/
    /*color: var(--navy) !important;*/
    /*margin-bottom: 10px;*/
    /*margin-left: 10px;*/
  }

  /* L2 nav: top padding to align nicely */
  .bcsm-panel--l2 > .bcsm-nav {
    padding-top: 6rem;
  }

  /* L3 nav: same top padding */
  .bcsm-panel--l3 > .bcsm-nav {
    padding-top: 24px;
  }

  /* L1 nav: small top padding (below close-button head) */
  .bcsm-panel--l1 > .bcsm-nav {
    padding-top: 4px;
  }

  /* ── Arrows ── */
  /* Hide all arrows on L1 (hover activates L2) */
  .bcsm-panel--l1 .bcsm-nav__arrow {
    display: flex;
  }
  /* Hide arrows for items without children */
  .bcsm-nav__item:not(.has-children) > .bcsm-nav__arrow {
    display: none !important;
  }
  .bcsm-nav__arrow {
    width: 36px;
    min-height: 36px;
  }

  /* ── Active item highlight (set by hover JS) ── */
  .bcsm-nav__item.is-active-desktop > .bcsm-nav__link {
    color: var(--light-blue) !important;
  }
  .bcsm-nav__item.is-active-desktop::before {
    display: none !important;
  }
  .bcsm-nav__item.is-active-desktop > .bcsm-nav__arrow {
    color: var(--navy) !important;
  }
  .bcsm-nav__item.is-active-desktop > .bcsm-nav__arrow:hover{
    color: var(--light-blue) !important;
  }
  /* ── Close (×) button — L1 only ── */
  .bcsm-panel--l1 .bcsm-close {
    color: #999 !important;
    width: 36px;
    height: 36px;
  }
  .bcsm-panel--l1 .bcsm-close svg {
    width: 18px;
    height: 18px;
  }
  .bcsm-panel--l1 .bcsm-close:hover {
    color: #333 !important;
  }
  .bcsm-panel--l2 .bcsm-close,
  .bcsm-panel--l3 .bcsm-close {
    display: none !important;
  }

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

  /* ── 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; }
  }
}

/* ============================================================
   TOGGLE SLOT
   ============================================================ */
.bcsm-toggle-slot {
  display: flex !important;
  align-items: center;
  flex-shrink: 0;
  margin-right: 4px;
}
.bcsm-toggle-slot .bcsm-toggle {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.bcsm-toggle-slot .bcsm-toggle__label { display: none; }
@media (min-width: 576px) {
  .bcsm-toggle-slot .bcsm-toggle__label { display: inline !important; }
}

/* ============================================================
   LANGUAGE BAR
   ============================================================ */
.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-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.bcsm-lang-bar__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.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;
}
.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;
}
.bcsm-lang-bar__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 32px 7px 38px;
  background: var(--bcsm-head-bg);
  border: 1px solid var(--bcsm-border);
  border-radius: 6px;
  font-family: var(--bcsm-font-ui);
  font-size: 12px;
  color: var(--bcsm-text);
  cursor: pointer;
  outline: none;
  transition: border-color var(--bcsm-dur) var(--bcsm-ease);
}
.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(91,184,232,.20);
}

/* ── Toggle อยู่ใน nav row ────────────────────────────────────── */
.bcsm-toggle--in-nav {
  margin-right: 12px;
  flex-shrink: 0;
}

/* แสดงปกติ แต่ซ่อนเมื่อ drawer เปิด (is-open ถูก handle โดย CSS เดิม) */
.bcsm-toggle--in-nav,
.bcsm-toggle--in-logo {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.bcsm-toggle--in-nav.is-open,
.bcsm-toggle--in-logo.is-open {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}