.elementor-23 .elementor-element.elementor-element-41b88c4{--display:flex;--position:fixed;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;--z-index:999;}body:not(.rtl) .elementor-23 .elementor-element.elementor-element-41b88c4{left:0px;}body.rtl .elementor-23 .elementor-element.elementor-element-41b88c4{right:0px;}.elementor-23 .elementor-element.elementor-element-1d816b1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-23 .elementor-element.elementor-element-41b88c4{--width:100vw;}}/* Start custom CSS for html, class: .elementor-element-b34aae4 *//*
=============================================================
  WATCH ESTATE — HEADER CSS
  วิธีใช้: WordPress → Appearance → Additional CSS
           (หรือ Elementor → Settings → Custom CSS)
=============================================================
*/

/* ── Design tokens ───────────────────────────────────────── */
:root {
  --we-ink:       #0a0908;
  --we-ink2:      #100e0c;
  --we-gold:      #cda349;
  --we-gold-soft: #d8b977;
  --we-cream:     #efe2c4;
  --we-text:      #cbc4b6;
  --we-muted:     #8a8175;
  --we-line:      rgba(205,163,73,.26);
  --we-line-soft: rgba(255,255,255,.09);
  --we-ease:      cubic-bezier(.16,1,.3,1);

  /* Header sizes — ปรับที่นี่ที่เดียว */
  --hdr-h:        90px;   /* ก่อน scroll */
  --hdr-h-sm:     66px;   /* หลัง scroll */
  --logo-h:       44px;   /* ก่อน scroll */
  --logo-h-sm:    32px;   /* หลัง scroll */
  --hdr-mob-h:    76px;   /* mobile ก่อน scroll */
  --hdr-mob-h-sm: 62px;   /* mobile หลัง scroll */
  --logo-mob-h:   38px;   /* mobile ก่อน scroll */
  --logo-mob-h-sm:30px;   /* mobile หลัง scroll */
}

/* ── Reset body scroll when drawer open ──────────────────── */
body.we-no-scroll { overflow: hidden; }

/* ── Elementor wrapper: ล้าง background / overflow / spacing ── */
[data-elementor-type="header"],
[data-elementor-type="header"] .elementor-section,
[data-elementor-type="header"] .elementor-container,
[data-elementor-type="header"] .e-con,
[data-elementor-type="header"] .elementor-column,
[data-elementor-type="header"] .elementor-widget-wrap,
[data-elementor-type="header"] .elementor-widget-container {
  background: transparent !important;
  overflow: visible !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Header ──────────────────────────────────────────────── */
.we-hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: transparent;
  border-bottom: 1px solid transparent;
  pointer-events: auto;
  transition:
    background  .6s var(--we-ease),
    border-color .6s var(--we-ease);
}
.we-hdr.scrolled {
  background: rgba(10,9,8,.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: var(--we-line-soft);
}

/* ── Nav bar ─────────────────────────────────────────────── */
.we-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hdr-h);
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 48px;
  transition: height .6s var(--we-ease);
}
.we-hdr.scrolled .we-nav { height: var(--hdr-h-sm); }

/* ── Logo ─────────────────────────────────────────────────── */
.we-nav-logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
  transition: height .6s var(--we-ease);
}
.we-hdr.scrolled .we-nav-logo img { height: var(--logo-h-sm); }

/* ── Desktop nav links ───────────────────────────────────── */
.we-nav-links {
  display: flex;
  gap: 38px;
  list-style: none;
  margin: 0; padding: 0;
}
.we-nav-links a {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(231,225,212,.85);
  font-weight: 400;
  position: relative;
  padding: 6px 0;
  text-decoration: none;
  transition: color .35s;
}
.we-nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--we-gold);
  transition: width .5s var(--we-ease);
}
.we-nav-links a:hover { color: #fff; }
.we-nav-links a:hover::after,
.we-nav-links a.current-menu-item::after { width: 100%; }

/* ── Cart icon ───────────────────────────────────────────── */
.we-cart {
  display: flex;
  align-items: center;
  color: rgba(231,225,212,.85);
  text-decoration: none;
  padding: 4px;
  flex-shrink: 0;
  transition: color .35s;
}
.we-cart:hover { color: var(--we-gold); }
.we-cart svg {
  transition: transform .35s var(--we-ease);
}
.we-cart:hover svg { transform: scale(1.08); }

/* ── WordPress Admin Bar offset ─────────────────────────── */
.admin-bar .we-hdr   { top: 32px; }
.admin-bar .we-drawer { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .we-hdr   { top: 46px; }
  .admin-bar .we-drawer { top: 46px; }
}

/* ── Burger button ───────────────────────────────────────── */
/* Force reset WordPress theme button styles */
.we-burger,
.we-burger:hover,
.we-burger:focus,
.we-burger:active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--we-cream) !important;
  -webkit-appearance: none;
  appearance: none;
}
.we-burger {
  position: relative;
  z-index: 1002;
  pointer-events: all;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 36px; height: 36px;
  cursor: pointer;
  padding: 4px 0;
  order: -1;
  flex-shrink: 0;
}
.we-burger span {
  height: 1px;
  background: var(--we-cream);
  display: block;
  width: 100%;
  transform-origin: center;
  transition:
    transform  .55s cubic-bezier(.77,0,.175,1),
    opacity    .3s ease,
    width      .4s var(--we-ease);
}
/* Line 1: top — shorter at rest */
.we-burger span:nth-child(1) { width: 70%; }
/* Line 3: bottom — full */
.we-burger span:nth-child(3) { width: 100%; }

/* X state — smooth cross like AP */
.we-burger.open span:nth-child(1) {
  width: 100%;
  transform: translateY(7px) rotate(45deg);
}
.we-burger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.we-burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.we-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8,7,6,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  /* เปิด: 1s / ปิด: .5s (JS toggles class ทำให้ transition กลับ) */
  transition: opacity 1s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 90px 30px 52px;
  overflow-y: auto;
}
.we-drawer.open {
  opacity: 1;
  pointer-events: auto;
}

/* Close button — force reset + fade in */
.we-drawer-close,
.we-drawer-close:hover,
.we-drawer-close:focus,
.we-drawer-close:active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.we-drawer-close {
  position: absolute;
  top: 22px; right: 28px;
  color: var(--we-cream);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s ease .25s, color .25s, transform .4s var(--we-ease);
}
.we-drawer.open .we-drawer-close { opacity: .75; }
.we-drawer-close:hover { color: var(--we-gold) !important; opacity: 1 !important; transform: rotate(90deg); }

/* Drawer nav links — AP stagger: fade up from below */
.we-dlinks {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.we-dm {
  font-family: 'Raleway', sans-serif;
  font-size: 24px;
  font-weight: 300;
  color: rgba(255,255,255,.72);
  padding: 18px 0;
  border-bottom: 1px solid var(--we-line-soft);
  letter-spacing: .08em;
  width: min(400px, 100%);
  text-align: center;
  text-decoration: none;
  /* ตำแหน่งซ่อน: อยู่บน fade ลงมาตอนเปิด */
  opacity: 0;
  transform: translateY(-24px);
  transition:
    opacity   .9s ease,
    transform 1s cubic-bezier(.16,1,.3,1),
    color     .3s ease;
}
.we-dm:hover { color: #fff; }

/* เปิด: stagger ลงมาทีละบรรทัด */
.we-drawer.open .we-dm { opacity: 1; transform: translateY(0); }
.we-drawer.open .we-dm:nth-child(1) { transition-delay: .15s; }
.we-drawer.open .we-dm:nth-child(2) { transition-delay: .25s; }
.we-drawer.open .we-dm:nth-child(3) { transition-delay: .35s; }
.we-drawer.open .we-dm:nth-child(4) { transition-delay: .45s; }
.we-drawer.open .we-dm:nth-child(5) { transition-delay: .55s; }
.we-drawer.open .we-dm:nth-child(6) { transition-delay: .65s; }
.we-drawer.open .we-dm:nth-child(7) { transition-delay: .75s; }

/* ปิด: ทุก item fade ขึ้นพร้อมกัน ไม่มี delay */
.we-drawer:not(.open) .we-dm {
  transition-delay: 0s !important;
  transition-duration: .7s !important;
}

/* Drawer bottom */
.we-dbottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 48px;
}
.we-dlogo {
  height: 140px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 1s ease .88s, transform 1.1s cubic-bezier(.16,1,.3,1) .88s;
}
.we-drawer.open .we-dlogo { opacity: 1; transform: translateY(0); }

.we-dfoot {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--we-muted);
  text-align: center;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .9s ease 1.0s, transform 1s cubic-bezier(.16,1,.3,1) 1.0s;
}
.we-drawer.open .we-dfoot { opacity: 1; transform: translateY(0); }
.we-drawer:not(.open) .we-dfoot,
.we-drawer:not(.open) .we-dlogo {
  transition-delay: 0s !important;
  transition-duration: .6s !important;
}

/* close button fade */
.we-drawer:not(.open) .we-drawer-close {
  transition-delay: 0s !important;
  transition-duration: .5s !important;
}

/* Drawer overlay ปิดช้า */
.we-drawer:not(.open) {
  transition-duration: .8s !important;
}
.we-dfoot a {
  display: block;
  margin-top: 8px;
  color: var(--we-gold);
  text-decoration: none;
  transition: color .25s;
}
.we-dfoot a:hover { color: var(--we-gold-soft); }

/* ── Backdrop ────────────────────────────────────────────── */
/* Drawer เต็มจอแล้ว ไม่ต้องใช้ backdrop แยก */
.we-backdrop { display: none; }

/* ── Header Overlap: ให้ Elementor จัดการ padding ─────────
   เปิด: Theme Builder → Header → Settings → Header Overlap → Yes
   ──────────────────────────────────────────────────────────── */

/* ── Responsive: Tablet (≤1024px) ───────────────────────── */
@media (max-width: 1024px) {
  .we-nav-links { display: none; }
  .we-burger    { display: flex; }

  /* Logo absolute center between burger & cart */
  .we-nav {
    position: relative;
    padding: 0 22px;
    height: var(--hdr-mob-h);
  }
  .we-hdr.scrolled .we-nav { height: var(--hdr-mob-h-sm); }

  .we-nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .we-nav-logo img {
    height: var(--logo-mob-h);
  }
  .we-hdr.scrolled .we-nav-logo img { height: var(--logo-mob-h-sm); }
}

/* ── Responsive: Mobile (≤480px) ────────────────────────── */
@media (max-width: 480px) {
  .we-nav { padding: 0 16px; }
  .we-dm  { font-size: 20px; padding: 15px 0; }
}/* End custom CSS */