header-drawer {
  justify-self: start;
  margin-left: -1.2rem;
}

@media screen and (min-width: 990px) {
  header-drawer {
    display: none;
  }
}

.menu-drawer-container {
  display: flex;
}

.list-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
}

summary.list-menu__item {
  padding-right: 2.7rem;
}

.list-menu__item {
  display: flex;
  align-items: center;
  line-height: 1.3;
}

.list-menu__item--link {
  text-decoration: none;
  padding-bottom: 1rem;
  padding-top: 1rem;
  line-height: 1.8;
}

@media screen and (min-width: 750px) {
  .list-menu__item--link {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
}

summary.menu-drawer__menu-item > a.list-menu__item {
  padding: 0;
}
/* === 修正：先把語法錯誤補上（否則下面規則不會生效） === */
.header__inline-menu .list-menu--inline > li + li > a,
.header__inline-menu .list-menu--inline > li + li > .amg-trigger{
  border-left:1px solid var(--line) !important;
}

/* === Header 底線總清除（避免雙線/陰影）=== */
#easystore-section-header .header-wrapper,
#easystore-section-header .header-wrapper *,
.easystore-section-header-sticky #easystore-section-header .header-wrapper,
.easystore-section-header-sticky #easystore-section-header .header {
  border-bottom: 0 !important;
  box-shadow: none !important;   /* 很多主題用陰影當底線 */
}
#easystore-section-header .header-wrapper::before,
#easystore-section-header .header-wrapper::after,
#easystore-section-header .header__inline-menu::before,
#easystore-section-header .header__inline-menu::after{
  content: none !important;
  background: none !important;
}

#easystore-section-header .header-wrapper{
  position: relative;
}
#easystore-section-header .header-wrapper::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: var(--line);
}


/* === 打開 MegaMenu 時，避免面板再補一條頂線 === */
#AMGMENU .amg-shell{
  border-top:0 !important;
  margin-top:0 !important;
  box-shadow:none !important;
}

/* === 強制把 Header 的灰色底線「加回來」且拉滿整個螢幕 === */

/* 1) sticky + 一般狀態都套用，先建立定位與層級 */
#easystore-section-header .header-wrapper{
  position: relative !important;    /* 讓 ::after 有定位基準 */
  z-index: 2;                       /* 蓋過下方背景或陰影 */
}

/* 2) 解除先前可能被你（或主題）關掉的偽元素 */
#easystore-section-header .header-wrapper::after{
  content: "" !important;           /* 有些規則曾 content:none；這裡強制打開 */
  display: block !important;
}

/* 3) 真正的底線（滿版） */
#easystore-section-header .header-wrapper::after{
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  height: 1px !important;
  background: var(--line) !important; /* #e6e6e6 */
  pointer-events: none;
}

/* 4) 關掉會「搶畫面」的其他線/陰影來源（避免看起來像兩條） */
#easystore-section-header .header,
#easystore-section-header .header__inline-menu,
#easystore-section-header .header__inline-menu .list-menu--inline,
.easystore-section-header-sticky #easystore-section-header .header,
.easystore-section-header-sticky #easystore-section-header .header-wrapper {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* 5) 打開 MegaMenu 時不要再加一條頂線疊到 header 的底線 */
#AMGMENU .amg-shell{
  border-top: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}
.qs__input:focus {
  border-bottom: 2px solid var(--brand-red) !important;
}
/* ========== 1) 搜尋框底線：收合短灰線 → 展開加長變紅（不跑版） ========== */
:root{
  --qs-width: 220px;     /* 你原本展開寬度 */
  --qs-left: 20px;       /* 底線起點：與放大鏡對齊，必要時微調 36~44px */
  --qs-bottom: 8px;      /* 底線距底的距離，與導覽底線對齊時可調 6~10px */
}

#easystore-section-header .nav-quicksearch .qs{ position:relative; }
#easystore-section-header .qs__input{
  border:0 !important; box-shadow:none !important; /* 避免與容器偽元素雙線 */
  width:0; max-width:var(--qs-width);
  transition: width .22s ease;
}

/* 收合：短灰線；hover/聚焦：加長且變紅 */
#easystore-section-header .nav-quicksearch .qs::after{
  content:""; position:absolute; left:var(--qs-left); bottom:var(--qs-bottom);
  height:2px; width:var(--qs-collapsed); background:var(--line);
  transition: width .22s ease, background .22s ease;
}
#easystore-section-header .nav-quicksearch .qs:hover::after,
#easystore-section-header .nav-quicksearch .qs:focus-within::after{
  width:var(--qs-width); background:var(--brand-red);
}
/* 展開時輸入框變寬（保留你原本的互動） */
#easystore-section-header .qs:hover .qs__input,
#easystore-section-header .qs__input:focus{ width:var(--qs-width); }
/* 面板：白底、柔陰影、圓角小一點更俐落 */
#AMGMENU .amg-shell{
  width:min(1200px,96vw);
  border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  overflow:hidden;
  grid-template-columns: 320px 1fr !important;
}

/* 中欄 */
#AMGMENU .amg-mid{
  background:#fff;
  border-right:1px solid var(--line);
  padding:8px 0 10px !important;
}
#AMGMENU .amg-subitem{
  padding:12px 18px !important;
  border-bottom:1px solid #f0f0f0 !important;
  transition:background .15s ease, padding-left .15s ease;
}
#AMGMENU .amg-subitem:hover{ background:#fafafa; padding-left:22px !important; }
#AMGMENU .amg-sublink{ font-size:15px; font-weight:700; color:#222; text-decoration:none; }

/* 右欄（標題 + 條列） */
#AMGMENU .amg-right{
  background:#fff;
  padding:16px 20px !important;
  border-left:1px solid var(--line);
}

#AMGMENU .amg-grandgrid{ display:block !important; }
#AMGMENU .amg-grandlink{
  display:block; padding:10px 0 !important; border-bottom:1px solid #eee !important;
  color:#222 !important; text-decoration:none !important; font-size:14.5px;
  transition:color .15s ease, padding-left .15s ease;
}
#AMGMENU .amg-grandlink:hover{ color:#9F353A !important; padding-left:4px !important; }

/* 三欄：中(2nd) / 右(3rd) / 最右(4th) */
#AMGMENU .amg-shell{
  display:grid !important;
  grid-template-columns: 260px 300px minmax(340px,1fr) !important;
  gap:0;
}

/* 第四層容器預設隱藏，互動時顯示 */
#AMGMENU .amg-great{
  background:#fff !important;
  padding:16px 22px !important;
  display:none; opacity:0; transform:translateX(6px);
  border-left:1px solid #e3e3e3 !important;
  transition:opacity .18s ease, transform .18s ease;
}
#AMGMENU .amg-great.is-shown{ display:block; opacity:1; transform:none; }

/* 單一面板切換 */
#AMGMENU .amg-greatpane{ display:none; }
#AMGMENU .amg-greatpane.is-active{ display:block; }

#AMGMENU .amg-greattitle,
#AMGMENU .amg-greattitle a{
  margin:0 0 10px !important;
  font-weight:800 !important;
  color:#9F353A !important;
}

/* 第四層清單（藝人名單） */
#AMGMENU .amg-greatlink{
  display:block !important;
  padding:8px 0 !important;
  border-bottom:1px solid #eee !important;
  color:#222 !important; text-decoration:none !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .16s ease, padding-left .16s ease, background .16s ease;
}
#AMGMENU .amg-greatlink:hover{
  color:#9F353A !important; background:#fafafa !important; padding-left:4px !important;
}
/* === 第四欄：等寬欄、齊頭對齊、統一底線長度 === */
:root{ --artist-col: 180px; --artist-gap: 16px; --artist-pad-x: 18px; --artist-line: #f0f0f0; }

#AMGMENU .amg-great{
  padding:0 !important;
  border-left:1px solid #e3e3e3 !important;
}

/* 標題緊貼清單，無雙線 */
#AMGMENU .amg-greattitle,
#AMGMENU .amg-greattitle a{
  margin:0 !important;
  padding:10px var(--artist-pad-x) 6px !important;
  font-weight:700; font-size:14px;
  color:#9F353A !important; text-decoration:none;
  border:0 !important;
}

/* 兩欄（寬時三欄）固定欄寬，欄間距一致 */
#AMGMENU .amg-greatgrid{
  display:grid !important;
  grid-template-columns: repeat(2, var(--artist-col));
  column-gap: var(--artist-gap);
  row-gap: 0;
  padding:0 var(--artist-pad-x) 8px !important;
  margin:0 !important;
}
@media (min-width: 1280px){
  #AMGMENU .amg-greatgrid{
    grid-template-columns: repeat(3, var(--artist-col));
  }
}

/* 每列：底線等長、左側縮排等寬（文字齊頭） */
#AMGMENU .amg-greatlink{
  display:block !important;
  width:100% !important;              /* 充滿單一欄（=固定寬） */
  padding:8px 0 8px 14px !important;  /* 左縮排14px配合圓點 */
  line-height:1.4 !important;
  font-size:14px; color:#222 !important;
  border-bottom:1px solid var(--artist-line) !important;
  text-decoration:none !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  position:relative;
  transition:color .15s ease, background .15s ease;
}

/* 左側小圓點（固定寬度，保證齊頭） */
#AMGMENU .amg-greatlink::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:#cfcfcf;
}
#AMGMENU .amg-greatlink:hover{
  color:#9F353A !important; background:#fafafa !important;
}
#AMGMENU .amg-greatlink:hover::before{ background:#9F353A; }


/* ===== Megamenu 最終覆寫：不截斷、可換行、欄位可捲動、層級最高 ===== */
#easystore-section-header .header-wrapper{ position:relative; z-index:1000; }

#AMGMENU{
  position:absolute; top:100%; left:var(--amg-left,0);
  width:min(1120px,96vw);
  z-index:10000; /* 讓面板永遠蓋過商品卡片 */
}

#AMGMENU .amg-shell{
  display:grid !important;
  grid-template-columns: 260px 300px minmax(340px,1fr) !important; /* 左/中/右 */
  gap:0 !important;
  overflow:visible !important; /* 關掉任何裁切 */
  border-radius:12px;
}

/* 每一欄最高 60vh，內容多才出捲軸（不整塊跳動） */
#AMGMENU .amg-mid,
#AMGMENU .amg-right,
#AMGMENU .amg-great{ max-height:60vh; overflow:auto; scrollbar-gutter:stable; }

/* —— 關鍵：禁止截字／省略，允許換行 —— */
#AMGMENU .amg-subitem,
#AMGMENU .amg-grandlink,
#AMGMENU .amg-greatlink,
#AMGMENU .amg-list a,
#AMGMENU .list-menu__item--link{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  line-height: 1.45 !important;
}

/* 清掉任何可能造成裁切的效果 */
#AMGMENU, #AMGMENU .amg-shell, #AMGMENU .amg-right, #AMGMENU .amg-mid, #AMGMENU .amg-great{
  clip-path:none !important;
  -webkit-mask-image:none !important;
}

/* 欄位邊界與內距統一（看起來更整齊） */
#AMGMENU .amg-mid{
  padding:6px 0 10px !important;
  border-right:1px solid var(--line) !important;
}
#AMGMENU .amg-right{
  padding:6px 22px 10px !important;
  border-left:1px solid var(--line) !important;
}
#AMGMENU .amg-great{
  padding:0 !important;
  border-left:1px solid var(--line) !important;
}

/* 列項共同樣式（字體/底線/互動感一致） */
#AMGMENU .amg-subitem,
#AMGMENU .amg-grandlink,
#AMGMENU .amg-greatlink{
  text-decoration:none !important;
  border-bottom:1px solid #eee !important;
  color:#222 !important;
  transition:color .15s ease, background .15s ease, padding-left .15s ease;
  padding:8px 0 8px 18px !important;
  position:relative;
}
#AMGMENU .amg-subitem::before,
#AMGMENU .amg-grandlink::before,
#AMGMENU .amg-greatlink::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:#cfcfcf;
}
#AMGMENU .amg-subitem:hover,
#AMGMENU .amg-grandlink:hover,
#AMGMENU .amg-greatlink:hover{
  color:var(--brand-red,#9F353A) !important; background:#fafafa !important; padding-left:22px !important;
}
#AMGMENU .amg-subitem:hover::before,
#AMGMENU .amg-grandlink:hover::before,
#AMGMENU .amg-greatlink:hover::before{ background:var(--brand-red,#9F353A); }


/* === 1) 藝人欄：改為單欄直式清單 =============================== */
#AMGMENU .amg-great{ padding:0 !important; border-left:1px solid var(--line) !important; }
#AMGMENU .amg-greatgrid{
  display:block !important;       /* 取消原本的 grid 多欄 */
  padding:0 18px 10px !important;
}
#AMGMENU .amg-greatlink{
  display:block !important;
  padding:10px 12px 10px 22px !important; /* 左邊留給圓點 */
  border-bottom:1px solid #eee !important;
  line-height:1.45 !important;
  color:#222 !important; text-decoration:none !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  position:relative; transition:color .15s ease, background .15s ease;
}
#AMGMENU .amg-greatlink::before{
  content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:#cfcfcf;
}
#AMGMENU .amg-greatlink:hover{ color:var(--brand-red,#9F353A) !important; background:#fafafa !important; }
#AMGMENU .amg-greatlink:hover::before{ background:var(--brand-red,#9F353A); }


/* === 3) 面板更明顯：白卡 + 邊框 + 陰影 + 頂端品牌色細線 ================= */
#AMGMENU{ z-index:10000; }
#AMGMENU .amg-shell{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 20px 60px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06);
  border-radius:14px; overflow:visible !important;
  position:relative;
}

/* 讓整個面板邊界跟內容保持距離，看起來不會和背景融合 */
#AMGMENU{ padding-top:6px; }

/* 內縮距離可調整：18~28px 看喜好 */
:root{ --artist-line-inset: 18px; --artist-line:#eee; }

/* 徽章寬度與右側距離可調 */
:root{ --enter-badge-w: 56px; --enter-badge-right: 14px; }

/* 與前兩欄統一：滿版底線 + 一致內距/圓點位置 */
:root{ --mm-pad-x: 22px; --mm-item-py: 10px; }


#AMGMENU .amg-greatlink{
  display:block !important;
  padding: var(--mm-item-py) var(--mm-pad-x) var(--mm-item-py) calc(var(--mm-pad-x) + 12px) !important; /* 左側給圓點 */
  border-bottom:1px solid #eee !important;   /* 滿版底線 */
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  position:relative;
  line-height:1.45 !important;
  color:#222 !important; text-decoration:none !important;
}
/* 關掉先前做短線的偽元素 */
#AMGMENU .amg-greatlink::after{ content:none !important; }

/* 左側圓點與前兩欄對齊 */
#AMGMENU .amg-greatlink::before{
  content:""; position:absolute; left: var(--mm-pad-x); top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:#cfcfcf;
}
#AMGMENU .amg-greatlink:hover{
  color:var(--brand-red,#9F353A) !important; background:#fafafa !important;
}
#AMGMENU .amg-greatlink:hover::before{ background:var(--brand-red,#9F353A); }
#AMGMENU .amg-title,
#AMGMENU .amg-grandtitle,
#AMGMENU .amg-greattitle{
  font-weight:800 !important;   /* 粗體 */
  color:var(--brand-red,#9F353A); 
  letter-spacing:.02em;
}
/* ===== 藝人欄：短線 150px（左對齊文字） ===== */
:root{
  --artist-pad-x: 22px;   /* 左右內距，需跟其他欄一致 */
  --artist-line-w: 150px; /* 分隔線長度 */
  --artist-line: #eee;    /* 分隔線顏色 */
}

#easystore-section-header #AMGMENU .amg-greatlink{
  border-bottom: 0 !important;          /* 關掉原本滿版底線 */
  position: relative !important;
  padding: 10px var(--artist-pad-x) 10px calc(var(--artist-pad-x) + 12px) !important; /* 左邊給圓點 */
}

/* 固定長度 150px 的短線（左對齊） */
#easystore-section-header #AMGMENU .amg-greatlink::after{
  content: "" !important;
  position: absolute !important;
  left: var(--artist-pad-x) !important;  /* 與文字左邊對齊 */
  bottom: 0 !important;
  width: min(var(--artist-line-w), calc(100% - 2*var(--artist-pad-x))) !important; /* 窄螢幕時不會溢出 */
  height: 1px !important;
  background: var(--artist-line) !important;
}

/* 圓點維持原位（與其他欄一致） */
#easystore-section-header #AMGMENU .amg-greatlink::before{
  content:"" !important;
  position:absolute !important;
  left: var(--artist-pad-x) !important;
  top:50% !important; transform:translateY(-50%) !important;
  width:6px !important; height:6px !important; border-radius:50% !important; background:#cfcfcf !important;
}
#easystore-section-header #AMGMENU .amg-greatlink:hover::before{
  background: var(--brand-red,#9F353A) !important;
}

#AMGMENU .amg-viewall:hover{
  color:#000; background:var(--brand-red,#9F353A); border-color:var(--brand-red,#9F353A);
}
#AMGMENU .amg-viewall{
  display:inline-block;
  margin:4px var(--mm-pad-x,22px) 10px var(--mm-pad-x,22px);
  padding:4px 10px;
  font-size:12.5px; font-weight:700; line-height:1;
  color:var(--brand-red,#9F353A);
  background:rgba(159,53,58,.10);
  border:1px solid rgba(159,53,58,.30);
  border-radius:999px; text-decoration:none; white-space:nowrap;
}
#AMGMENU .amg-viewall:hover{
  color:#fff; background:var(--brand-red,#9F353A); border-color:var(--brand-red,#9F353A);
}
/* === MegaMenu 欄寬調整：中(2nd) / 右(3rd) / 最右(4th=藝人) === */
:root{
  /* 你可以改這四個數字微調 */
  --mm-col-mid:   260px;   /* 中欄 amg-mid（第二層） */
  --mm-col-right: 380px;   /* 右欄 amg-right（第三層）← 拉大 */
  --mm-great-min: 200px;   /* 最右 amg-great 最小寬度（藝人欄）← 縮小 */
  --mm-great-max: 240px;   /* 最右 amg-great 最大寬度（藝人欄） */
}

#AMGMENU .amg-shell{
  display: grid !important;
  grid-template-columns: var(--mm-col-mid) var(--mm-col-right) minmax(var(--mm-great-min), var(--mm-great-max)) !important;
  gap: 0 !important;
}

/* 螢幕更寬時再把第三層多給一點、藝人欄維持小巧 */
@media (min-width: 1440px){
  :root{
    --mm-col-right: 420px;   /* 第三層再寬一些 */
    --mm-great-max: 340px;   /* 藝人欄上限小幅放寬，仍小於第三層 */
  }
}

/* === 藝人清單內部欄寬（讓整體看起來更精簡） === */
:root{
  --artist-col: 150px;   /* 每欄卡片寬（比原本小一點） */
  --artist-gap: 12px;
  --artist-pad-x: 16px;
}

/* 固定為兩欄；真的很寬的螢幕才變三欄 */
#AMGMENU .amg-greatgrid{
  display: grid !important;
  grid-template-columns: repeat(2, var(--artist-col)) !important;
  column-gap: var(--artist-gap) !important;
  row-gap: 0 !important;
  padding: 0 var(--artist-pad-x) 8px !important;
}
@media (min-width: 1500px){
  #AMGMENU .amg-greatgrid{
    grid-template-columns: repeat(3, var(--artist-col)) !important;
  }
}


/* 「進入 XXX」那一列不要圓點（含你做成徽章的版本） */
#AMGMENU .amg-right .amg-grandpane > .amg-grandlink:not([aria-haspopup="true"])::before,
#AMGMENU .amg-right .amg-grandpane > .amg-viewall::before{
  display:none !important;
}


#AMGMENU .amg-great .amg-greatlink{
  transition: color .15s ease, background .15s ease;
}
#AMGMENU .amg-great .amg-greatlink:hover{
  background: transparent !important;
  color: var(--brand-red,#9F353A) !important;
  text-decoration: underline; /* 不想要底線就刪掉這行 */
}
/* ========== FIX 1：第三層「進入 XXX」圓點不要重疊 ========== */
/* 右欄第三層每列留出左內距，圓點位置固定 */
#easystore-section-header #AMGMENU .amg-right .amg-grandgrid > a{
  position: relative !important;
  display: block !important;
  padding: 10px 12px 10px 22px !important;  /* ← 左 22px 給圓點 */
  line-height: 1.4 !important;
}




/* ========== FIX 2：第四層 hover 移除底色、只換字色（可選加底線） ========== */
#easystore-section-header #AMGMENU .amg-great .amg-greatlink{
  transition: color .15s ease, background .15s ease;
}
#easystore-section-header #AMGMENU .amg-great .amg-greatlink:hover{
  background: transparent !important;          /* ← 不要底色 */
  color: var(--brand-red,#9F353A) !important;  /* ← 只換字色 */
  text-decoration: underline;                  /* 想不要底線就刪這行 */
}


/* ========== FIX 3A（建議）：第四層很多項目 → 直向捲動 ========== */
#easystore-section-header #AMGMENU .amg-great{
  max-height: 360px !important;   /* 可改 320~420 視內容長度 */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}
/* 捲動條樣式（可省略） */
#easystore-section-header #AMGMENU .amg-great::-webkit-scrollbar{ width:8px; }
#easystore-section-header #AMGMENU .amg-great::-webkit-scrollbar-thumb{ background:#ddd; border-radius:4px; }

/* ========== FIX 3B（可選）：若想改成往右展開，改用這組並關掉 3A ========== */
/*
#easystore-section-header #AMGMENU .amg-great{
  max-height: none !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  white-space: nowrap !important;
}
#easystore-section-header #AMGMENU .amg-greatgrid{
  display: grid !important;
  grid-auto-flow: column !important;      // 橫向排
  grid-auto-columns: 160px !important;    // 每欄寬，可改 140~180
  column-gap: 14px !important;
}
#easystore-section-header #AMGMENU .amg-greatlink{
  display:block !important; width:100% !important;
  white-space: nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
*/

/************** 第三層（第 2 欄）— 圓點只給有下一層的列，並保證不重疊 **************/
#AMGMENU .amg-shell > :nth-child(2) a{
  position:relative !important;
  display:block !important;
  padding:10px 12px 10px 22px !important; /* ← 左側給圓點空間 */
  line-height:1.4 !important;
}

/* 有下一層：通常會有 data-target 或 .js-amg-open-great 其中之一 */
#AMGMENU .amg-shell > :nth-child(2) a[data-target],
#AMGMENU .amg-shell > :nth-child(2) a.js-amg-open-great{
  padding-left:22px !important;
}
#AMGMENU .amg-shell > :nth-child(2) a[data-target]::before,
#AMGMENU .amg-shell > :nth-child(2) a.js-amg-open-great::before{
  content:"" !important;
  position:absolute !important;
  left:10px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:#cfcfcf;
}
#AMGMENU .amg-shell > :nth-child(2) a[data-target]:hover::before,
#AMGMENU .amg-shell > :nth-child(2) a.js-amg-open-great:hover::before{
  background:var(--brand-red,#9F353A);
}

/* 沒下一層（包含「進入 XXX」）→ 一律關掉圓點 */
#AMGMENU .amg-shell > :nth-child(2) a:not([data-target]):not(.js-amg-open-great)::before{
  display:none !important;
}

/************** 第四層（第 3 欄）— 移除 hover 底色、變字色；清單可捲動 **************/
#AMGMENU .amg-shell > :nth-child(3){
  max-height: 360px !important;   /* 想更高就改 380/400 */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

/* 任何在第 3 欄的連結 hover 一律不要底色、只變字色（擋掉舊規則） */
#AMGMENU .amg-shell > :nth-child(3) a:hover{
  background: transparent !important;
  color: var(--brand-red,#9F353A) !important;
  text-decoration: underline; /* 不想底線就刪掉 */
}

/************** （可選）第四層改成往右展開 — 開這組就把上面捲動那 4 行註解掉 **************/
/*
#AMGMENU .amg-shell > :nth-child(3){
  max-height:none !important;
  overflow-x:auto !important; overflow-y:hidden !important;
  white-space:nowrap !important;
}
#AMGMENU .amg-shell > :nth-child(3) .amg-greatgrid{
  display:grid !important;
  grid-auto-flow:column !important;     // 橫向排
  grid-auto-columns:160px !important;   // 每欄寬（140~180 自行微調）
  column-gap:14px !important;
}
#AMGMENU .amg-shell > :nth-child(3) a{
  display:block !important; width:100% !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
*/
/* 擴寬整個面板，給第一欄更多空間 */
#AMGMENU{ width:min(1280px,96vw) !important; }

/* 欄寬配比：第一欄更寬，第三欄（藝人）稍窄 */
:root{
  --mm-col-mid:   250px;   /* 第1欄（分類）←加寬 */
  --mm-col-right: 250px;   /* 第2欄（第3層） */
  --mm-great-min: 180px;   /* 第3欄（藝人）←縮小 */
  --mm-great-max: 220px;
}
#AMGMENU .amg-shell{
  grid-template-columns: var(--mm-col-mid)
                         var(--mm-col-right)
                         minmax(var(--mm-great-min), var(--mm-great-max)) !important;
}

/* 第1欄：禁止換行，超出才用省略號（搭配上面加寬） */
#AMGMENU .amg-shell > :nth-child(1) a,
#AMGMENU .amg-mid .amg-sublink{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* （可選）若仍覺得擠，開啟這行把第1欄字級小一點 */
// #AMGMENU .amg-shell > :nth-child(1) .amg-sublink{ font-size:14px !important; }

/* === 讓面板「貼內容寬」：去掉固定寬，改成 inline-grid === */
#AMGMENU{
  width:auto !important;                       /* 不要固定 1280 */
  max-width:min(1280px,96vw) !important;       /* 仍保留最大寬度上限 */
}
#AMGMENU .amg-shell{
  display:inline-grid !important;              /* ← 關鍵：變成會收縮的 inline-grid */
  width:max-content !important;                /* 以內容寬為主 */
  column-gap:0 !important;
}

/* === 欄寬：第一、二欄維持設定；第三欄依內容收縮（並加上上限） === */
:root{
  --mm-col-mid:   360px;   /* 第 1 欄（分類）依你要改 */
  --mm-col-right: 340px;   /* 第 2 欄（第 3 層） */
  --mm-great-max: 240px;   /* 第 3 欄（藝人）最大寬 */
}
#AMGMENU .amg-shell{
  grid-template-columns:
    var(--mm-col-mid)
    var(--mm-col-right)
    max-content !important;                     /* 第 3 欄依內容 */
}
#AMGMENU .amg-shell > :nth-child(3){
  width:max-content !important;                 /* 讓第 3 欄貼內容 */
  max-width:var(--mm-great-max) !important;     /* 但不要超過上限 */
  overflow-y:auto !important; overflow-x:hidden !important; /* 清單多時直向捲動 */
}

/* === 若第 3 欄根本沒內容，就完全藏起來（新瀏覽器支援） === */
#AMGMENU .amg-shell > :nth-child(3):has(.amg-greatgrid:empty){
  display:none !important;
}

/* 1) 第二欄欄寬跟著內容，最多 520px（可自行調整） */
#AMGMENU .amg-shell{
  grid-template-columns:
    var(--mm-col-mid)          /* 第1欄 */
    fit-content(520px)         /* 第2欄：依內容收縮，最多 520px */
    max-content !important;    /* 第3欄 */
}
/* ===== Megamenu 圓角修復（貼在最底，覆蓋舊規則） ===== */

/* 外框：真的裁成圓角（關鍵是 overflow:hidden） */
#AMGMENU .amg-shell{
  position: relative !important;
  border-radius: 12px !important;      /* 想要更圓可改 14~16px */
  overflow: hidden !important;          /* ★ 把子元素裁進圓角 */
  background: #fff !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

/* 先前若有把殼設成 overflow:visible/clip-path 的規則 → 強制關掉 */
#AMGMENU, 
#AMGMENU .amg-shell, 
#AMGMENU .amg-right, 
#AMGMENU .amg-mid, 
#AMGMENU .amg-great{
  clip-path: none !important;
  -webkit-mask-image: none !important;
}

/* 左/右端欄位各自帶角，避免內層白底把外角看起來「破掉」 */
#AMGMENU .amg-mid{
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  background-clip: padding-box !important;
}
#AMGMENU .amg-great{
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  background-clip: padding-box !important;
}

/* 中間欄位也加上 background-clip，邊框不會蓋到圓角邊緣 */
#AMGMENU .amg-right{ 
  background-clip: padding-box !important;
}

/* 若有放頂部細線/偽元素，讓它也遵守圓角（避免直角壓過） */
#AMGMENU .amg-shell::before{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  pointer-events:none;
}
/* ===== 最右側圓角/縫隙修復（貼在最底） ===== */

/* 外殼一定要裁進圓角 */
#AMGMENU .amg-shell{
  border-radius:12px !important;
  overflow:hidden !important;
  position:relative !important;
  background:#fff !important;
}

/* 端點欄位帶角，避免子層白底把圓角看起來切掉 */
#AMGMENU .amg-shell > :first-child{
  border-top-left-radius:12px !important;
  border-bottom-left-radius:12px !important;
  background-clip:padding-box !important;
}
#AMGMENU .amg-shell > :last-child{
  border-top-right-radius:12px !important;
  border-bottom-right-radius:12px !important;
  background-clip:padding-box !important;
  border-right:0 !important;         /* 防止 1px 直角線衝到圓角 */
}

/* 只有兩欄時：第二欄就是最後一欄 → 也給它右角 */
#AMGMENU .amg-shell > :nth-child(2):last-child{
  border-top-right-radius:12px !important;
  border-bottom-right-radius:12px !important;
  background-clip:padding-box !important;
  border-right:0 !important;
}

/* 若第三欄是空殼，把它直接隱藏，讓第二欄成為 :last-child */
#AMGMENU .amg-great:has(.amg-greatgrid:empty){
  display:none !important;
}

/* 任何可能破壞圓角的裁切/遮罩一律關掉 */
#AMGMENU, #AMGMENU .amg-right, #AMGMENU .amg-mid, #AMGMENU .amg-great{
  clip-path:none !important;
  -webkit-mask-image:none !important;
}
/* === 外殼裁圓角（關鍵） === */
#AMGMENU .amg-shell{
  border-radius:12px !important;
  overflow:hidden !important;      /* 把所有子層裁進圓角 */
  background:#fff !important;
  position:relative !important;
}

/* === 中間這欄（第 2 欄）一律直角，避免「撞角」視覺 === */
#AMGMENU .amg-shell > :nth-child(2){
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
  background-clip:padding-box !important;
  border-right:0 !important;       /* 防 1px 直線頂到圓角 */
}

/* === 最右邊那欄才吃右側圓角（有第三欄時給第三欄） === */
#AMGMENU .amg-shell > :last-child{
  border-top-right-radius:12px !important;
  border-bottom-right-radius:12px !important;
  background-clip:padding-box !important;
  border-right:0 !important;
}

/* 若第三欄是空殼就藏掉，讓第二欄自然成為 :last-child，但仍保持直角 */
#AMGMENU .amg-great:empty,
#AMGMENU .amg-great:has(.amg-greatgrid:empty){
  display:none !important;
}

/* 關掉任何會破壞圓角的裁切/遮罩（保險） */
#AMGMENU, #AMGMENU .amg-right, #AMGMENU .amg-mid, #AMGMENU .amg-great{
  clip-path:none !important;
  -webkit-mask-image:none !important;
}


/* === Megamenu：縮短左欄版型（單行不縮寫） === */

/* 1) 整體面板別太寬（可再調小） */
#AMGMENU{
  width: min(1200px, 92vw) !important;
}

/* 2) 三欄比例：左欄固定窄一點，其餘平均 */
#AMGMENU .amg-shell{
  display: grid !important;
  grid-template-columns: 295px 1fr 1fr !important; /* ← 左欄從 260/280 縮到 230px */
  gap: 0 !important;
}

/* 3) 左欄本體也鎖 295px，避免被其他規則撐寬 */
#AMGMENU .amg-mid{
  width: 295px !important;
  min-width: 295px !important;
  max-width: 295px !important;
}

/* 4) 單列：保持單行完整、不出現 …；左右內距緊一點 */
#AMGMENU .amg-subitem{
  white-space: nowrap !important;   /* 單行 */
  overflow: visible !important;     /* 不裁切 */
  text-overflow: clip !important;   /* 不顯示 ... */
  padding: 7px 28px 7px 9px !important; /* 右側預留箭頭，但整體更緊湊 */
  line-height: 1.55 !important;
  font-size: 16px; font-weight: 600;
}

/* 5) 左側圓點基準（如有） */
#AMGMENU .amg-subitem::before{
  left: 18px !important;
}

/* 6) 把「原本就有的箭頭」往文字靠近（針對不同主題寫多個可能 selector） */
#AMGMENU .amg-subitem > summary::after,
#AMGMENU .amg-subitem > a::after,
#AMGMENU .amg-subitem .icon-caret{
  right: 20px !important;           /* ← 從 20~24px 改成 10px */
  margin-left: 8px !important;      /* 若是內嵌 icon，用這個拉近 */
  font-size: 12px !important;
  color: #999 !important;
  position: absolute !important;    /* 有些主題是相對定位，統一一下 */
  top: 50% !important; transform: translateY(-50%) !important;
}

/* hover 時箭頭跟著變色（視覺一致） */
#AMGMENU .amg-subitem:hover > summary::after,
#AMGMENU .amg-subitem:hover > a::after,
#AMGMENU .amg-subitem:hover .icon-caret{
  color: var(--brand-red,#9F353A) !important;
}

/* 7) 防止右兩欄被內容撐爆、維持平均 */
#AMGMENU .amg-right,
#AMGMENU .amg-great{ min-width: 0 !important; }

/* 中欄（.amg-right）標題加粗 */
#AMGMENU .amg-right .amg-title,
#AMGMENU .amg-right .amg-grandtitle { 
  font-weight: 800 !important;
}

/* 三欄列高一致（可留你原本的值） */
#AMGMENU .amg-subitem,
#AMGMENU .amg-grandlink,
#AMGMENU .amg-greatlink{
  line-height: 1.45 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* 右兩欄啟用直向捲動（高度由 JS 對齊左欄） */
#AMGMENU .amg-right,
#AMGMENU .amg-great{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  min-width: 0 !important;
}
/* === 中欄標題：粗體 + 不要底線 === */
#AMGMENU .amg-right .amg-grandtitle,
#AMGMENU .amg-right .amg-grandtitle a {
  font-weight: 1000 !important;   /* 粗體 */
  font-size: 15px !important;
  color: #222 !important;        /* 深一點，跟子選項有層級差 */
  text-decoration: none !important; /* 移掉底線 */
}

/* 滑鼠移過去也不要底線，只改字色 */
#AMGMENU .amg-right .amg-grandtitle:hover,
#AMGMENU .amg-right .amg-grandtitle a:hover {
  text-decoration: none !important;
  color: var(--brand-red, #9F353A) !important; /* 只變紅色，不加底線 */
}
@supports (-webkit-touch-callout: none) {
  #AMGMENU .amg-shell{
    grid-template-columns: 295px 360px minmax(300px,1fr) !important;
  }
}