/**
 * Mega Menu styles (Flatsome + UX Blocks)
 *
 * Usage:
 * - 如果項目有mega菜單，則添加類名：has-mega-menu.
 * - 如果項目需要mega菜單稍居，則添加類名：mega-menu-center.
 * - 聖誕節樣式添加類名：menu-item--xmas
 */

/* 为新的菜单进行样式自定义 */
.header-nav-main {
  justify-content: center;
}

.header-nav-main li.menu-item {
  margin: 0 2px;
}

.header-nav-main li.menu-item .nav-top-link {
  font-weight: 600;
  color: #797979;
  font-size: 14px;
  padding: 5px;
  border-radius: 4px;
  transition: all 0.3s ease;
  border: 2px solid #ffffff00;
  line-height: 1.2 !important;
}
.header-nav-main li.menu-item:hover .nav-top-link {
  background: #FFF5E9;
  color: #2A3031;
  border: 2px solid #2A3031;
}

/* Single-item badge style (e.g. "2026聖誕到會") */
.header-nav-main li.menu-item.menu-item--xmas .nav-top-link,
.header-nav-main li.menu-item .nav-top-link.nav-top-link--xmas {
  background: #4A7943;
  color: #ffffff;
  border-color: transparent;
  border-radius: 8px;
  padding: 6px 12px;
  position: relative;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.18);
}

.header-nav-main li.menu-item.menu-item--xmas:hover .nav-top-link,
.header-nav-main li.menu-item:hover .nav-top-link.nav-top-link--xmas {
  background: #2a7f34;
  color: #ffffff;
  border-color: transparent;
  transform: scale(1.08);
}

.header-nav-main li.menu-item.menu-item--xmas:active .nav-top-link,
.header-nav-main li.menu-item:active .nav-top-link.nav-top-link--xmas {
  transform: scale(0.99);
}

.header-nav-main li.menu-item.menu-item--xmas .nav-top-link::before,
.header-nav-main li.menu-item.menu-item--xmas .nav-top-link::after,
.header-nav-main li.menu-item .nav-top-link.nav-top-link--xmas::before,
.header-nav-main li.menu-item .nav-top-link.nav-top-link--xmas::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.header-nav-main li.menu-item.menu-item--xmas .nav-top-link::before,
.header-nav-main li.menu-item .nav-top-link.nav-top-link--xmas::before {
  left: -10px;
  bottom: -8px;
  width: 25px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2225%22%20height%3D%2228%22%20viewBox%3D%220%200%2025%2028%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11.7249%202.88207C11.5467%202.46742%2011.1057%202.22464%2010.6538%202.3029C10.2019%202.38117%209.86818%202.75813%209.8398%203.20856L9.65565%206.09969C9.56568%207.53823%208.75202%208.8295%207.50488%209.53756L5.7608%2010.5245C5.39694%2010.7272%205.20244%2011.1399%205.27288%2011.5466C5.34332%2011.9533%205.66528%2012.2765%206.07611%2012.345L8.05052%2012.688C9.4696%2012.9342%2010.6637%2013.8778%2011.2322%2015.2023L12.3779%2017.8631C12.5561%2018.2777%2012.9971%2018.5205%2013.449%2018.4422C13.9009%2018.364%2014.2346%2017.987%2014.263%2017.5366L14.4471%2014.6454C14.5371%2013.2069%2015.3508%2011.9156%2016.5979%2011.2076L18.342%2010.2206C18.7059%2010.018%2018.9003%209.60526%2018.8299%209.19855C18.7595%208.79184%2018.4375%208.46859%2018.0267%208.40011L16.0523%208.05718C14.6332%207.81091%2013.4391%206.86737%2012.8706%205.54287L11.7249%202.88207Z%22%20fill%3D%22%23FDF52F%22/%3E%3Cpath%20d%3D%22M13.6167%2019.4113C12.7193%2019.5667%2011.8384%2019.0876%2011.4745%2018.253L10.3287%2015.5922C9.89247%2014.5706%208.97665%2013.8515%207.88%2013.6624L5.90558%2013.3195C5.08927%2013.175%204.44647%2012.5349%204.30559%2011.7215C4.1647%2010.9081%204.5537%2010.0827%205.27385%209.67201L7.01794%208.68505C7.98712%208.13818%208.60664%207.14651%208.67505%206.04416L8.8592%203.15304C8.91372%202.23928%209.58331%201.49827%2010.4871%201.34173C11.3909%201.18519%2012.2654%201.66543%2012.6293%202.50006L13.7751%205.16086C14.2113%206.18245%2015.1272%206.90155%2016.2238%207.09063L18.1982%207.43355C19.0145%207.5781%2019.6573%208.21814%2019.7993%209.03802C19.9413%209.8579%2019.5512%2010.6768%2018.83%2011.081L17.0859%2012.068C16.1167%2012.6149%2015.4972%2013.6065%2015.4288%2014.7089L15.2446%2017.6C15.1901%2018.5138%2014.5205%2019.2548%2013.6167%2019.4113ZM10.8214%203.27199L10.6373%206.16312C10.5257%207.93788%209.53619%209.51893%207.98527%2010.3926L6.24119%2011.3796L8.2156%2011.7225C9.96356%2012.0249%2011.4336%2013.1799%2012.1355%2014.8138L13.2813%2017.4746L13.4654%2014.5835C13.5769%2012.8087%2014.5665%2011.2277%2016.1174%2010.354L17.8615%209.367L15.8871%209.02407C14.1391%208.72172%2012.669%207.56666%2011.9672%205.93279L10.8214%203.27199Z%22%20fill%3D%22%23292B34%22/%3E%3C/svg%3E");
  transform: rotate(-12deg);
}

.header-nav-main li.menu-item.menu-item--xmas .nav-top-link::after,
.header-nav-main li.menu-item .nav-top-link.nav-top-link--xmas::after {
  right: -10px;
  top: -8px;
  width: 22px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2225%22%20viewBox%3D%220%200%2022%2025%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10.8311%202.33149C10.9752%201.99606%2011.332%201.79965%2011.6976%201.86297C12.0631%201.92628%2012.3331%202.23123%2012.356%202.59561L12.505%204.93443C12.5778%206.09817%2013.236%207.14276%2014.2449%207.71555L15.6558%208.51396C15.9502%208.6779%2016.1075%209.01176%2016.0505%209.34078C15.9935%209.66979%2015.7331%209.93129%2015.4007%209.98669L13.8035%2010.2641C12.6555%2010.4633%2011.6896%2011.2266%2011.2296%2012.2981L10.3028%2014.4506C10.1586%2014.786%209.80187%2014.9824%209.43629%2014.9191C9.07072%2014.8558%208.80079%2014.5509%208.77783%2014.1865L8.62886%2011.8477C8.55608%2010.6839%207.89786%209.63933%206.88896%209.06654L5.47806%208.26812C5.18371%208.10418%205.02637%207.77032%205.08335%207.4413C5.14034%207.11229%205.40079%206.85079%205.73313%206.79539L7.33037%206.51798C8.47835%206.31875%209.44431%205.55546%209.90422%204.48398L10.8311%202.33149Z%22%20fill%3D%22%23FDF52F%22/%3E%3Cpath%20d%3D%22M9.30215%2015.7031C10.0281%2015.8288%2010.7407%2015.4412%2011.0351%2014.766L11.962%2012.6135C12.3149%2011.7871%2013.0558%2011.2054%2013.9429%2011.0524L15.5402%2010.775C16.2005%2010.6581%2016.7205%2010.1403%2016.8345%209.48227C16.9485%208.82424%2016.6338%208.15652%2016.0512%207.82432L14.6403%207.0259C13.8563%206.5835%2013.3551%205.78128%2013.2998%204.88952L13.1508%202.5507C13.1067%201.8115%2012.565%201.21204%2011.8339%201.08541C11.1027%200.958781%2010.3953%201.34728%2010.1009%202.02246L9.17403%204.17495C8.82111%205.00138%208.08024%205.58311%207.19309%205.73607L5.59586%206.01349C4.93549%206.13041%204.41548%206.64819%204.30061%207.31144C4.18574%207.9747%204.50133%208.6372%205.08481%208.96418L6.49571%209.76259C7.27975%2010.205%207.78092%2011.0072%207.83626%2011.899L7.98523%2014.2378C8.02934%2014.977%208.57101%2015.5764%209.30215%2015.7031ZM11.5634%202.64693L11.7124%204.98575C11.8026%206.42146%2012.6031%207.70048%2013.8578%208.40728L15.2687%209.20569L13.6714%209.48311C12.2574%209.7277%2011.0682%2010.6621%2010.5004%2011.9838L9.57351%2014.1363L9.42453%2011.7975C9.33431%2010.3618%208.5338%209.08279%207.27916%208.37599L5.86825%207.57757L7.46549%207.30016C8.87953%207.05557%2010.0688%206.12117%2010.6366%204.79942L11.5634%202.64693Z%22%20fill%3D%22%23292B34%22/%3E%3C/svg%3E");
  transform: rotate(12deg);
}
/* keep xmas icon visible even when other items hover */
.header-nav-main li.menu-item.menu-item--xmas>a.nav-top-link::before {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.header-nav-main li.menu-item::after,.header-nav-main li.menu-item::before {
  display: none;
}
@media (max-width: 768px) {
  .header-nav-main li.menu-item .nav-top-link,.header-nav-main li.menu-item .nav-top-link:hover {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

}
/* Only target Flatsome mega menu dropdowns (avoid mini-cart dropdown). */
#header .has-mega-menu > .nav-dropdown {
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  min-width: 940px;
  border:none;
  box-shadow: none;
  margin-top: 6px;
}
#header .has-mega-menu.xx-mega-w-600 > .nav-dropdown {
  min-width: 600px;
}
/* Center aligned mega menu dropdowns */
#header .has-mega-menu.mega-menu-center > .nav-dropdown {
  left: 30%;
  transform: translateX(-30%);
}

/* Mobile: allow dropdown to fit viewport; Flatsome often renders different menu UI on mobile. */
@media (max-width: 768px) {
  #header .has-mega-menu > .nav-dropdown {
    min-width: 0;
    border-radius: 0;
    width: 100%;
    position: relative !important;
  }
  
  #header .has-mega-menu.mega-menu-center > .nav-dropdown {
    left: 0;
    transform: translateX(0);
  }
}



/* =========================
   xx-mega component styles
   (work in frontend dropdown + UX Builder preview)
   ========================= */
.xx-mega .xx-mega__panel {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 16px;
  overflow: hidden;
}

.xx-mega .xx-mega__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  min-height: 300px;
}

@media (max-width: 1099px) {
  .xx-mega .xx-mega__grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

@media (max-width: 999px) {
  .xx-mega .xx-mega__grid {
    grid-template-columns: 1fr;
  }
}

/* Regions: left (festival) + right (scenes) */
.xx-mega .xx-mega__region {
  padding: 16px;
}

/* Region header spacing */
.xx-mega .xx-mega__regionHeader {
  margin: 0 0 10px;
}
/* Opt-in split header: title on left, link/text on right */
.xx-mega .xx-mega__regionHeader.xx-mega__regionHeader--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.xx-mega .xx-mega__regionHeader.xx-mega__regionHeader--split .xx-mega__title,
.xx-mega .xx-mega__regionHeader .xx-mega__title {
  margin: 0;
}

.xx-mega .xx-mega__regionHeader.xx-mega__regionHeader--split .xx-mega__title img {
  display: block;
  height: auto;
  max-width: 100%;
}

.xx-mega .xx-mega__regionHeader.xx-mega__regionHeader--split > p {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

.xx-mega .xx-mega__regionHeader.xx-mega__regionHeader--split > p > a {
  text-decoration: none;
  font-size: 14px;
  color: #FF6700;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.xx-mega .xx-mega__regionHeader.xx-mega__regionHeader--split > p > a:hover {
  color: #d85600;
}

.xx-mega .xx-mega__region--festival {
  background: #fbf0e3;
  border-radius: 8px;
  margin: 6px;
}

.xx-mega .xx-mega__region--scenes {
  background: #fff;
}

/* If festival is hidden/commented and only scenes remains, let it use full width */
.xx-mega .xx-mega__grid > .xx-mega__region--scenes:only-child {
  grid-column: 1 / -1;
}

/* Scenes region uses 3 columns for套餐清单 */
.xx-mega .xx-mega__region--scenes .xx-mega__regionGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xx-mega .xx-mega__region--scenes .xx-mega__regionGrid.xx-mega__regionGrid--two-cols-600 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Region inner 2-col grid */
.xx-mega .xx-mega__regionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

@media (max-width: 999px) {
  .xx-mega .xx-mega__regionGrid {
    grid-template-columns: 1fr;
  }
}

/* Columns inside regions */
.xx-mega .xx-mega__col {
  padding: 0;
}


@media (max-width: 999px) {
  .xx-mega .xx-mega__regionGrid > .xx-mega__col + .xx-mega__col {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 18px;
    margin-top: 18px;
  }
}

/* Titles */

.xx-mega .xx-mega__subtitle {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 400;
  color: #797979;
}

/* List items (left + middle) */
.xx-mega .xx-mega__list {
  display: grid;
  grid-template-columns: 1fr;
}

/* Unified "icon + text" link style */
.xx-mega .xx-mega__item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #2A3031;
  padding: 10px;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}

.xx-mega .xx-mega__item:hover {
  transform: translateY(-1px);
  background: #f7f7f7;
}

.xx-mega .xx-mega__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.6);
}

/* New Layout: 左 1 + 右 2.6（無 :has 時維持與以往一致） */
.xx-mega.xx-mega--new-layout .xx-mega__grid--new-layout {
  grid-template-columns: 1fr 2.6fr;
  gap: 16px;
}

/* 有 :has 時：默認單欄；僅在 DOM 中存在左側「最新單品」時才啟用雙欄 */
@supports selector(:has(*)) {
  .xx-mega.xx-mega--new-layout .xx-mega__grid--new-layout {
    grid-template-columns: 1fr;
  }

  .xx-mega.xx-mega--new-layout .xx-mega__grid--new-layout:has(.xx-mega__region--new-arrivals) {
    grid-template-columns: 1fr 2.6fr;
  }
}

@media (max-width: 1099px) {
  .xx-mega.xx-mega--new-layout .xx-mega__grid--new-layout {
    grid-template-columns: 1fr;
  }
}

/* New Arrivals Region (Left - 1 column) */
.xx-mega.xx-mega--new-layout .xx-mega__region--new-arrivals {
  background: #fbf0e3;
  border-radius: 8px;
  margin: 6px;
}

.xx-mega.xx-mega--new-layout .xx-mega__regionGrid--single-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* Regular Items Region (Right - 3 columns) */
.xx-mega.xx-mega--new-layout .xx-mega__region--regular-items {
  background: #fff;
}

.xx-mega.xx-mega--new-layout .xx-mega__regionGrid--three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

@media (max-width: 999px) {
  .xx-mega.xx-mega--new-layout .xx-mega__regionGrid--three-cols {
    grid-template-columns: 1fr;
  }
}

/* Column spacing for 3-column layout */

/* =========================
   Layout 3: Two card menu
   (Contact / FAQ style)
   ========================= */

/* 自適應寬度 后台创建菜单时填写：.xx-mega-w-auto */
#header .has-mega-menu.xx-mega-w-auto>.nav-dropdown {
  min-width: auto;
  width: auto;
  flex: 0 0 auto;
}

.xx-mega.xx-mega--cards .xx-mega__grid {
  grid-template-columns: 1fr;
  min-height: 0;
}


.xx-mega.xx-mega--cards .xx-mega__cards {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 768px) {
  .xx-mega.xx-mega--cards .xx-mega__cards {
    flex-direction: column;
  }
}

.xx-mega.xx-mega--cards .xx-mega__cardBlock {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: auto;
  flex: 0 0 auto;
  min-width: 160px;
}

.xx-mega.xx-mega--cards .xx-mega__cardBlock > .xx-mega__card {
  flex: 1 1 auto;
  text-decoration: none;
}
.xx-mega.xx-mega--cards .xx-mega__cardBlock>.xx-mega__card:hover {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.xx-mega.xx-mega--cards .xx-mega__card {
  position: relative;
  padding: 0 16px 16px;
  border-radius: 16px;
  /* background: #f3f3f3; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  width: auto;
  flex: 0 0 auto;
  min-width: 160px;
}

.xx-mega.xx-mega--cards .xx-mega__cardHeader {
  margin: 0;
}

.xx-mega.xx-mega--cards .xx-mega__cardHeading {
  margin: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #2A3031;
  line-height: 1.2;
}

.xx-mega.xx-mega--cards .xx-mega__cardTitleImg {
  display: block;
  max-width: 160px;
  height: auto;
}

.xx-mega.xx-mega--cards .xx-mega__cardTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2A3031;
}

.xx-mega.xx-mega--cards .xx-mega__cardKicker {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #2A3031;
}

.xx-mega.xx-mega--cards .xx-mega__cardMedia {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 140px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.xx-mega.xx-mega--cards .xx-mega__cardActions {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xx-mega.xx-mega--cards .xx-mega__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: transform .12s ease, filter .12s ease;
}

.xx-mega.xx-mega--cards .xx-mega__button:hover {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.xx-mega.xx-mega--cards .xx-mega__button--whatsapp {
  background: #25D366;
  color: #fff;
}

.xx-mega.xx-mega--cards .xx-mega__button--faq {
  background: #FFC72C;
  color: #2A3031;
}

/* .xx-mega.xx-mega--cards .xx-mega__card--contact {
  background: #f3f3f3;
}

.xx-mega.xx-mega--cards .xx-mega__card--faq {
  background: #f6e1c9;
} */