/* BuildKitly UI-fix sprint: global header / footer / a11y chrome / global typography.
   Owner: agent A (header/footer/global). Complements bk-header.css, bk-footer.css, bk-lang.css and
   bk-motion.css without editing them. Hooks are the custom classes set on the Elementor elements
   (.bk-hdr-*, .bk-ftr-*), so every translation of Site Header 69 / Site Footer 70 is covered.
   `:not(#bk-m)` = one-ID specificity booster (same convention as bk-motion.css) where Elementor's
   per-element rules (.elementor-69 .elementor-element.elementor-element-x …) would otherwise win. */

/* =============================================================================================
   0. Safety net: the header and footer never widen the page
   ============================================================================================= */
.elementor-location-header .e-con.bk-hdr:not(#bk-m),
.elementor-location-footer .e-con.bk-ftr:not(#bk-m) { max-width: 100%; overflow-x: clip; }
.elementor-location-header .bk-hdr-main > .elementor-element:not(#bk-m) { min-width: 0; }
.elementor-location-header .e-con.bk-hdr-ann:not(#bk-m) { background-color: var(--e-global-color-primary, #20252B); }

/* Dark-mode toggle was a dead <div> (no dark theme exists): removed from every header. */
.elementor-location-header .bk-hdr-mode:not(#bk-m) { display: none !important; }

/* =============================================================================================
   1. Announcement bar: readable size + contrast (12px+, ≥4.5:1 on #20252B)
   ============================================================================================= */
.elementor-location-header .bk-hdr-ann .bk-hdr-ann-text .elementor-heading-title:not(#bk-m) { color: #D5DAE1; } /* 11.6:1 */
/* Hit area of the "Meet the collection" link (visual unchanged, stays inside the bar/header gap) */
.elementor-location-header .bk-hdr-ann .bk-hdr-ann-link .elementor-button:not(#bk-m) { position: relative; }
.elementor-location-header .bk-hdr-ann .bk-hdr-ann-link .elementor-button::before {
  content: ""; position: absolute; inset: -13px -6px;
}
@media (max-width: 767px) {
  .elementor-location-header .e-con.bk-hdr-ann:not(#bk-m) {
    --gap: 4px 14px; --row-gap: 4px; --column-gap: 14px;
    --padding-left: 14px; --padding-right: 14px;
  }
  .elementor-location-header .bk-hdr-ann .bk-hdr-ann-text.elementor-element:not(#bk-m) {
    width: auto; max-width: none; --container-widget-width: auto; --flex-grow: 1; --flex-shrink: 1; flex: 1 1 auto; min-width: 0;
  }
  .elementor-location-header .bk-hdr-ann .bk-hdr-ann-text .elementor-heading-title:not(#bk-m) { font-size: 12px; line-height: 1.45; }
  .elementor-location-header .bk-hdr-ann .bk-hdr-ann-link .elementor-button:not(#bk-m) { font-size: 12px; }
}

/* =============================================================================================
   2. Hamburger below 1200px (Elementor's own switch is at 1024; 1025–1199 overflowed in every language)
   ============================================================================================= */
@media (min-width: 1025px) and (max-width: 1199px) {
  .elementor-location-header .bk-hdr-nav.elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main:not(#bk-m) { display: none; }
  .elementor-location-header .bk-hdr-nav.elementor-nav-menu--dropdown-tablet .elementor-menu-toggle:not(#bk-m) { display: flex; }
  .elementor-location-header .bk-hdr-nav.elementor-nav-menu--dropdown-tablet nav.elementor-nav-menu--dropdown:not(#bk-m) { display: block; }
  .elementor-location-header .bk-hdr-main > .bk-hdr-nav.elementor-element:not(#bk-m) { --order: 99999; --flex-grow: 0; order: 99999; flex-grow: 0; }
  .elementor-location-header .bk-hdr-main > .e-con.bk-hdr-actions:not(#bk-m) { --flex-grow: 1; flex-grow: 1; }
  .elementor-location-header .e-con.bk-hdr-main:not(#bk-m) { --min-height: 76px; }
  .elementor-location-header .bk-hdr-account.elementor-element:not(#bk-m) { display: none; } /* same as tablet */
}

/* =============================================================================================
   3. Hamburger range (≤1199): 44px tap targets for toggle / search / language / cart
   ============================================================================================= */
@media (max-width: 1199px) {
  .elementor-location-header .bk-hdr-nav .elementor-menu-toggle:not(#bk-m) {
    width: 44px; height: 44px; padding: 0; margin-right: -10px; justify-content: center;
  }
  .elementor-location-header .bk-hdr-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown:not(#bk-m) { margin-top: 16px !important; }
  .elementor-location-header .e-con.bk-hdr-actions:not(#bk-m) { --gap: 2px; --row-gap: 2px; --column-gap: 2px; }
  .elementor-location-header .bk-hdr-search a.elementor-icon:not(#bk-m) {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  }
  .elementor-location-header .bk-hdr-cart .elementor-icon-list-item > a:not(#bk-m) {
    min-width: 44px; min-height: 44px; justify-content: center;
  }
  .elementor-location-header .bk-hdr-lang.elementor-element .cpel-switcher__toggle > a:not(#bk-m) {
    min-height: 44px; padding: 4px 20px 4px 8px;
  }
  .elementor-location-header .bk-hdr-lang.elementor-element .cpel-switcher__toggle .cpel-switcher__code:not(#bk-m) { padding-left: 0; }
}

/* =============================================================================================
   4. Phones (≤767): the header row fits 320–430 (logo shrinks, gaps tighten)
   ============================================================================================= */
@media (max-width: 767px) {
  .elementor-location-header .e-con.bk-hdr-main:not(#bk-m) {
    --gap: 6px; --column-gap: 6px; --row-gap: 6px; --flex-wrap: nowrap; flex-wrap: nowrap;
    --padding-left: max(6px, calc(5% - 10px)); --padding-right: max(14px, 5%);
  }
  .elementor-location-header .bk-hdr-logo.elementor-element:not(#bk-m) { --flex-shrink: 1; flex: 0 1 auto; min-width: 96px; }
  .elementor-location-header .bk-hdr-logo img:not(#bk-m) { width: 178px; max-width: 100%; height: auto; }
  .elementor-location-header .e-con.bk-hdr-actions:not(#bk-m) { --gap: 0px; --row-gap: 0px; --column-gap: 0px; --flex-shrink: 0; }
  .elementor-location-header .bk-hdr-nav.elementor-element:not(#bk-m) { --flex-shrink: 0; }
}
/* ≤359: the search icon (a link to /themes/, also in the menu) gives its room to the logo */
@media (max-width: 359px) {
  .elementor-location-header .bk-hdr-search.elementor-element:not(#bk-m) { display: none; }
}

/* Body scroll lock while the mobile menu is open (class set by bk-fix-header.js) */
html.bk-nav-open, html.bk-nav-open body { overflow: hidden; }
html.bk-nav-open .elementor-location-header .bk-hdr-nav nav.elementor-nav-menu--dropdown {
  max-height: var(--bk-dd-max, calc(100vh - 140px)); overflow-y: auto; overscroll-behavior: contain;
}

/* =============================================================================================
   5. Hover hints: logo links and the language toggle
   ============================================================================================= */
.elementor-location-header .bk-hdr-logo a,
.elementor-location-footer .bk-ftr-logo a { transition: opacity var(--bk-motion-dur, 180ms) var(--bk-motion-ease, ease); }
.elementor-location-header .bk-hdr-logo a:is(:hover, :focus-visible),
.elementor-location-footer .bk-ftr-logo a:is(:hover, :focus-visible) { opacity: .72; }
.elementor-location-header .bk-hdr-lang.elementor-element .cpel-switcher__toggle > a:not(#bk-m):hover {
  background-color: var(--e-global-color-secondary, #EEF0F2);
  border-color: var(--e-global-color-border, #DCE0E5);
}

/* =============================================================================================
   6. Footer: 768–900 = logo row + 3 link columns; bigger text + tap targets on touch widths
   ============================================================================================= */
@media (min-width: 768px) and (max-width: 900px) {
  .elementor-location-footer .e-con.bk-ftr:not(#bk-m) { --e-con-grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .elementor-location-footer .bk-ftr > .e-con.bk-ftr-intro:not(#bk-m) { grid-column: 1 / -1; grid-row: auto; }
  .elementor-location-footer .bk-ftr > .e-con.bk-ftr-col:not(#bk-m) { grid-column: auto; grid-row: auto; }
}
.elementor-location-footer .bk-ftr-tagline .elementor-heading-title { text-wrap: balance; }
html:lang(ja) .elementor-location-footer .bk-ftr-tagline .elementor-heading-title { word-break: auto-phrase; }

@media (max-width: 1024px) {
  .elementor-location-footer .bk-ftr .elementor-nav-menu--main .elementor-item:not(#bk-m) { position: relative; }
  .elementor-location-footer .bk-ftr-menu .elementor-nav-menu--main .elementor-item::before {
    content: ""; position: absolute; inset: -10px -6px;
  }
  .elementor-location-footer .bk-ftr-legal .elementor-nav-menu--main .elementor-item::before {
    content: ""; position: absolute; inset: -13px -8px;
  }
}
@media (max-width: 767px) {
  .elementor-location-footer .bk-ftr-copy .elementor-heading-title:not(#bk-m),
  .elementor-location-footer .bk-ftr-legal .elementor-nav-menu .elementor-item:not(#bk-m),
  .elementor-location-footer .bk-ftr-note .elementor-heading-title:not(#bk-m) { font-size: 13px; }
  .elementor-location-footer .bk-ftr-menu .elementor-nav-menu--main .elementor-item:not(#bk-m) { overflow-wrap: anywhere; }
}

/* =============================================================================================
   7. Wide screens: the footer logo's -6px optical offset and the rotated announcement arrow can't
      poke outside the viewport (the 2560 finding); section 0 clips header/footer on the x axis.
   ============================================================================================= */
.elementor-location-header .bk-hdr-ann .bk-hdr-ann-link .elementor-button-icon { display: inline-flex; }

/* =============================================================================================
   8. Small overline labels ≥12px on phones (Kit "accent" global = 11px; eyebrow widgets)
   ============================================================================================= */
@media (max-width: 767px) {
  body[class*="elementor-kit-"] { --e-global-typography-accent-font-size: 12px; }
  .elementor .elementor-widget-heading[class*="-eyebrow"] .elementor-heading-title:not(#bk-m) { font-size: 12px; }
}

/* =============================================================================================
   9. Global headings: balanced line breaks (no orphaned last word), CJK phrase breaking + fonts
   ============================================================================================= */
.elementor :is(h1, h2, h3, h4, h5, h6).elementor-heading-title { text-wrap: balance; }
.elementor :is(p, div, span).elementor-heading-title { text-wrap: pretty; }
html:is(:lang(ja), :lang(zh)) body .elementor :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
  word-break: auto-phrase;
  text-wrap: balance;
}
/* CJK stack for Kit typography (headings, buttons, nav use these vars; body already has a stack).
   Arial = current Kit family; the CJK families only take over for CJK glyphs. */
html:lang(ja) body[class*="elementor-kit-"] { --bk-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP"; }
html:lang(zh) body[class*="elementor-kit-"] { --bk-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC"; }
html:is(:lang(ja), :lang(zh)) body[class*="elementor-kit-"] {
  --e-global-typography-primary-font-family: Arial, var(--bk-cjk);
  --e-global-typography-secondary-font-family: Arial, var(--bk-cjk);
  --e-global-typography-text-font-family: Arial, var(--bk-cjk);
  --e-global-typography-accent-font-family: Arial, var(--bk-cjk);
  --e-global-typography-display-font-family: Arial, var(--bk-cjk);
  --e-global-typography-h3-font-family: Arial, var(--bk-cjk);
  --e-global-typography-small-font-family: Arial, var(--bk-cjk);
  --e-global-typography-button-font-family: Arial, var(--bk-cjk);
}
html:is(:lang(ja), :lang(zh)) :is(.elementor-location-header, .elementor-location-footer) :is(.elementor-heading-title, .elementor-item, .elementor-button) {
  font-family: Arial, var(--bk-cjk), sans-serif;
}

/* =============================================================================================
   10. Hover-lift flicker: while lifted, a transparent strip under the element keeps the pointer
       "inside", so the 2px lift can't toggle :hover at the bottom edge (visual unchanged).
       ::before on links/buttons (their ::after is used by arrow glyphs); ::after on container cards
       (e-con::before is Elementor's background overlay).
   ============================================================================================= */
:is(.bk-lift .elementor-button, .bk-lift a.elementor-icon, .bk-lift .elementor-heading-title > a,
    .bk-lift .elementor-icon-list-item > a, button.bk-lift, a.bk-lift:not(.e-con)) { position: relative; }
:is(.bk-lift .elementor-button, .bk-lift a.elementor-icon, .bk-lift .elementor-heading-title > a,
    .bk-lift .elementor-icon-list-item > a, button.bk-lift, a.bk-lift:not(.e-con)):hover::before,
a.e-con.bk-lift:hover::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; pointer-events: auto;
}

/* =============================================================================================
   11. Skip-link target + back-to-top
   ============================================================================================= */
.bk-skip-target { display: block; height: 0; overflow: hidden; }
.bk-skip-target:focus { outline: none; }

.bk-totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 9990;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid var(--e-global-color-border, #DCE0E5); border-radius: 50%;
  background: var(--e-global-color-surface, #FFFFFF); color: var(--e-global-color-primary, #20252B);
  box-shadow: 0 6px 18px rgba(32, 37, 43, .12);
  cursor: pointer; opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity 180ms cubic-bezier(.2, .7, .2, 1), translate 180ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 180ms, background-color 180ms;
}
.bk-totop.is-visible { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.bk-totop:hover { background: var(--e-global-color-secondary, #EEF0F2); }
.bk-totop:focus-visible { outline: 2px solid var(--bk-ring, #987737); outline-offset: 4px; }
.bk-totop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.bk-nav-open .bk-totop { display: none; }
@media (max-width: 767px) { .bk-totop { right: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .bk-totop { transition: none; translate: none; } }
@media print { .bk-totop { display: none; } }