/* =========================================
   Header 主選單字體
========================================= */
.ct-header [data-items="primary"] .menu > li > a,
.ct-header [data-items="primary"] > ul > li > a {
  font-family: "Noto Sans TC", "Noto Sans", system-ui, sans-serif !important;
  font-size: 18px;
  line-height: 1.15;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* =========================================
   Hero 遮罩與文字
========================================= */
.ct-hero-section [class*="overlay"],
.ct-hero-section .ct-media-container:before,
.ct-hero-section .ct-image-container:before {
  opacity: 0.6 !important;
  background-color: #000 !important;
}

.ct-hero-section,
.ct-hero-section * {
  color: #fff !important;
}

.ct-hero-section h1,
.ct-hero-section h2,
.ct-hero-section p {
  font-weight: 800 !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.85) !important;
}

/* =========================================
   產品資訊 Mega Menu（menu-item-1793）
========================================= */
:root {
  --gold-1: rgba(191, 161, 94, 0.7);
  --gold-2: rgba(214, 188, 130, 0.55);
  --panel-bg: rgba(255, 255, 255, 0.88);
  --panel-border: rgba(255, 255, 255, 0.42);
  --text-strong: #111;
  --text: #222;
  --text-sub: rgba(17, 17, 17, 0.86);
}

.ct-header .menu > li#menu-item-1793 {
  position: relative;
}

.ct-header .menu > li#menu-item-1793 > .sub-menu {
  position: fixed !important;
  top: 111px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;

  width: min(1400px, calc(100vw - 80px)) !important;
  max-width: none !important;
  padding: 36px 52px !important;

  background: var(--panel-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid var(--panel-border);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.16);

  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  column-gap: 40px !important;
  row-gap: 20px !important;

  align-items: start !important;
  align-content: start !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 99999 !important;
  overflow: hidden;

  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s !important;
}

.ct-header .menu > li#menu-item-1793:hover > .sub-menu,
.ct-header .menu > li#menu-item-1793:focus-within > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s !important;
}

.ct-header .menu > li#menu-item-1793 > .sub-menu > li {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: initial !important;
}

/* 第二層標題 */
.ct-header .menu > li#menu-item-1793 > .sub-menu > li > a,
.ct-header .menu > li#menu-item-1793 > .sub-menu > li > a.ct-menu-link {
  position: relative !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;

  width: fit-content !important;
  min-width: 0 !important;
  max-width: calc(100% - 36px) !important;

  height: 64px !important;
  padding: 0 0 18px 0 !important;
  margin: 0 auto 16px auto !important;
  box-sizing: border-box !important;

  color: var(--text-strong) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em;
  line-height: 1.15 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  z-index: 1 !important;
}

.ct-header .menu > li#menu-item-1793 > .sub-menu > li > a::after,
.ct-header .menu > li#menu-item-1793 > .sub-menu > li > a.ct-menu-link::after {
  content: "";
  position: absolute;
  left: 50% !important;
  bottom: 0;
  transform: translateX(-50%) !important;

  width: 140px !important;
  max-width: calc(100vw - 40px) !important;
  height: 1px;
  background: linear-gradient(to right, var(--gold-1), var(--gold-2));
  opacity: 0.85;

  transition: width 240ms ease, opacity 240ms ease, filter 240ms ease;
}

.ct-header .menu > li#menu-item-1793 > .sub-menu > li:hover > a::after,
.ct-header .menu > li#menu-item-1793 > .sub-menu > li:hover > a.ct-menu-link::after {
  width: 180px !important;
  max-width: calc(100vw - 40px) !important;
  opacity: 0.98;
  filter: brightness(1.08);
}

/* 第二層箭頭不佔位 */
.ct-header .menu > li#menu-item-1793 > .sub-menu > li > .ct-toggle-dropdown-desktop,
.ct-header .menu > li#menu-item-1793 > .sub-menu > li > button.ct-toggle-dropdown-desktop {
  position: absolute !important;
  right: 10px !important;
  top: 32px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* 第三層 */
.ct-header .menu > li#menu-item-1793 > .sub-menu > li > .sub-menu {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  width: 100% !important;
  text-align: left !important;
}

.ct-header .menu > li#menu-item-1793 > .sub-menu > li > .sub-menu > li {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

.ct-header .menu > li#menu-item-1793 > .sub-menu > li > .sub-menu > li > a {
  display: block !important;
  width: 100% !important;
  color: rgba(17, 17, 17, 0.78) !important;
  font-size: 16px !important;
  font-weight: 550 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: color 180ms ease, transform 180ms ease;
  text-align: left !important;
  white-space: nowrap !important;
}

.ct-header .menu > li#menu-item-1793 > .sub-menu > li > .sub-menu > li > a:hover {
  color: #111 !important;
  transform: translateX(2px);
}

/* 五金文具欄位稍寬 */
.ct-header .menu > li#menu-item-1793 > .sub-menu > li:nth-child(4) {
  min-width: 220px !important;
}

/* Mega Menu RWD */
@media (max-width: 1100px) {
  .ct-header .menu > li#menu-item-1793 > .sub-menu {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 40px !important;
  }
}

@media (max-width: 700px) {
  .ct-header .menu > li#menu-item-1793 > .sub-menu {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 30px !important;
  }
}

@media (max-width: 520px) {
  .ct-header .menu > li#menu-item-1793 > .sub-menu > li {
    min-width: 100% !important;
  }
}

/* =========================================
   WooCommerce 商品規格表：通用
========================================= */
.woocommerce table.shop_attributes {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td,
.woocommerce-tabs .shop_attributes th,
.woocommerce-tabs .shop_attributes td,
.woocommerce-tabs .shop_attributes td p {
  vertical-align: middle !important;
}

.woocommerce table.shop_attributes th,
.woocommerce-tabs .shop_attributes th {
  width: 18% !important;
  white-space: nowrap;
}

.woocommerce table.shop_attributes td,
.woocommerce-tabs .shop_attributes td {
  width: 82% !important;
}

.woocommerce table.shop_attributes td {
  white-space: normal !important;
}

/* =========================================
   一般商品：顏色圓點
========================================= */
.spec-color {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
  background: #ddd;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.spec-color:last-child {
  margin-right: 0;
}

.spec-color[data-value="透明白"] { background: #fff; border-color: rgba(0, 0, 0, 0.25); }
.spec-color[data-value="透明紅"] { background: #d0483c; }
.spec-color[data-value="透明黃"] { background: #fede5a; }
.spec-color[data-value="透明藍"] { background: #3083ff; }
.spec-color[data-value="透明綠"] { background: #009960; }

.spec-color[data-value="白"] { background: #fff; border-color: rgba(0, 0, 0, 0.25); }
.spec-color[data-value="紅"] { background: #d0483c; }
.spec-color[data-value="黃"] { background: #fede5a; }
.spec-color[data-value="藍"] { background: #3083ff; }
.spec-color[data-value="綠"] { background: #009960; }
.spec-color[data-value="黑"] { background: #222; }
.spec-color[data-value="透明"] { background: linear-gradient(135deg, #fff, #e9e9e9); border-color: rgba(0, 0, 0, 0.25); }
.spec-color[data-value="粉紅"] { background: #edb0b7; }
.spec-color[data-value="粉藍"] { background: #b4c9e4; }
.spec-color[data-value="粉綠"] { background: #88c6b9; }
.spec-color[data-value="果凍藍"] { background: #2092db; }
.spec-color[data-value="果凍紫"] { background: #aa7fc6; }
.spec-color[data-value="果凍綠"] { background: #48b0bb; }
.spec-color[data-value="果凍白"] { background: #d3d2d0; border-color: rgba(0,0,0,.22); }
.spec-color[data-value="乾燥玫瑰粉"] { background: #e26e71; }
.spec-color[data-value="檸檬黃"] { background: #fef133; }
.spec-color[data-value="藍紫色"] { background: #7062ba; }
.spec-color[data-value="藍綠色"] { background: #48b1ac; }

.spec-color:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

/* =========================================
   全站顏色圓點 tooltip 樣式統一
========================================= */
.spec-color,
.e310-dot {
  position: relative !important;
}

.spec-color::after,
.e310-dot::after {
  position: absolute !important;
  left: 50% !important;
  top: -8px !important;
  transform: translate(-50%, -100%) !important;

  padding: 6px 10px !important;
  border-radius: 8px !important;
  background: rgba(55, 55, 55, 0.96) !important;
  color: #fff !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;

  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  z-index: 999 !important;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important;
}

.spec-color::after {
  content: attr(data-value) !important;
}

.e310-dot::after {
  content: attr(data-name) !important;
}

.spec-color::before,
.e310-dot::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -8px !important;
  transform: translateX(-50%) !important;

  border: 6px solid transparent !important;
  border-top-color: rgba(55, 55, 55, 0.96) !important;

  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease !important;
  z-index: 999 !important;
}

.spec-color:hover::after,
.e310-dot:hover::after {
  opacity: 1 !important;
  transform: translate(-50%, -112%) !important;
}

.spec-color:hover::before,
.e310-dot:hover::before {
  opacity: 1 !important;
}

/* =========================================
   全站商品顏色順序：紅 黃 藍 綠 黑
   僅作用在顏色列，避免誤傷其他內容
========================================= */
.woocommerce table.shop_attributes tr th:first-child + td,
.woocommerce-tabs .shop_attributes tr th:first-child + td {
  /* 保留預設，不直接改 */
}

.woocommerce table.shop_attributes td .spec-color,
.woocommerce-tabs .shop_attributes td .spec-color {
  order: 0 !important;
  flex: 0 0 auto !important;
}

.woocommerce table.shop_attributes td p:has(.spec-color),
.woocommerce table.shop_attributes td > div:has(.spec-color),
.woocommerce table.shop_attributes td .value:has(.spec-color),
.woocommerce-tabs .shop_attributes td p:has(.spec-color),
.woocommerce-tabs .shop_attributes td > div:has(.spec-color),
.woocommerce-tabs .shop_attributes td .value:has(.spec-color) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
}

.woocommerce table.shop_attributes td p:has(.spec-color) .spec-color,
.woocommerce table.shop_attributes td > div:has(.spec-color) .spec-color,
.woocommerce table.shop_attributes td .value:has(.spec-color) .spec-color,
.woocommerce-tabs .shop_attributes td p:has(.spec-color) .spec-color,
.woocommerce-tabs .shop_attributes td > div:has(.spec-color) .spec-color,
.woocommerce-tabs .shop_attributes td .value:has(.spec-color) .spec-color {
  display: inline-block !important;
}

.woocommerce table.shop_attributes td .spec-color:nth-of-type(1),
.woocommerce-tabs .shop_attributes td .spec-color:nth-of-type(1) {
  order: 1 !important;
}

.woocommerce table.shop_attributes td .spec-color:nth-of-type(2),
.woocommerce-tabs .shop_attributes td .spec-color:nth-of-type(2) {
  order: 4 !important;
}

.woocommerce table.shop_attributes td .spec-color:nth-of-type(3),
.woocommerce-tabs .shop_attributes td .spec-color:nth-of-type(3) {
  order: 3 !important;
}

.woocommerce table.shop_attributes td .spec-color:nth-of-type(4),
.woocommerce-tabs .shop_attributes td .spec-color:nth-of-type(4) {
  order: 2 !important;
}

.woocommerce table.shop_attributes td .spec-color:nth-of-type(5),
.woocommerce-tabs .shop_attributes td .spec-color:nth-of-type(5) {
  order: 5 !important;
}

/* =========================================
   E310 四欄主表
========================================= */
.e310-attr-4col {
  width: 100%;
  table-layout: fixed;
}

.e310-attr-4col th,
.e310-attr-4col td {
  vertical-align: middle !important;
}

.e310-attr-4col .e310-col-td,
.e310-attr-4col .e310-span3-td,
.e310-attr-4col .e310-span4-td,
.e310-attr-4col td {
  text-align: center !important;
}

.e310-price {
  display: inline-block;
}

.e310-pack {
  text-align: center !important;
  line-height: 1.8;
}

.e310-single-color {
  display: flex;
  justify-content: center;
  align-items: center;
}

.e310-colors {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

.e310-dot {
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.e310-dot[data-name="透明白"] {
  border-color: rgba(0, 0, 0, 0.28) !important;
}

.e310-dot:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

/* E310 包裝方式置中修正 */
.e310-attr-4col td.e310-col-td > .e310-pack {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  gap: 0 !important;
  text-align: center !important;
  padding: 0 !important;
}

.e310-attr-4col td.e310-col-td > .e310-pack > div {
  width: 100% !important;
  text-align: center !important;
}

/* =========================================
   一般商品：規格標籤
========================================= */
.spec-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px 8px 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.06);
  border: 1px solid rgba(17, 17, 17, 0.1);
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.spec-chip:hover {
  transform: translateY(-2px);
  background: rgba(17, 17, 17, 0.09);
  border-color: rgba(17, 17, 17, 0.16);
}

/* =========================================
   CH110 五欄主表
========================================= */
.ch110-attr-5col {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.ch110-attr-5col th,
.ch110-attr-5col td {
  vertical-align: middle !important;
  box-sizing: border-box;
}

/* 左側欄位名稱 */
.ch110-attr-5col th {
  width: 90px !important;
  min-width: 90px !important;
  padding: 0 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* 只有「包裝方式」左欄允許兩行 */
.ch110-attr-5col tr:nth-child(4) > th {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* 右側五欄儲存格 */
.ch110-attr-5col td.ch110-col-td {
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* 前四列的右側儲存格高度統一 */
.ch110-attr-5col tr:nth-child(1) td.ch110-col-td,
.ch110-attr-5col tr:nth-child(2) td.ch110-col-td,
.ch110-attr-5col tr:nth-child(3) td.ch110-col-td {
  height: 72px !important;
}

.ch110-attr-5col tr:nth-child(4) td.ch110-col-td {
  height: 84px !important;
}

/* 型號 / 規格 / 定價：置中 */
.ch110-attr-5col td.ch110-col-td > .ch110-model,
.ch110-attr-5col td.ch110-col-td > .ch110-spec,
.ch110-attr-5col td.ch110-col-td > .ch110-price {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-weight: 400 !important;
}

/* 規格可上下排列 */
.ch110-attr-5col td.ch110-col-td > .ch110-spec {
  flex-direction: column !important;
  line-height: 1.45 !important;
}

/* 包裝方式整格置中 */
.ch110-attr-5col tr:nth-child(4) td.ch110-col-td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* 包裝方式：兩行左對齊，但整體位置往右微調 */
.ch110-attr-5col tr:nth-child(4) td.ch110-col-td > .ch110-pack {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  box-sizing: border-box !important;
  padding-left: 18px !important;
}

/* 尺寸 / 材質 / 產地 */
.ch110-attr-5col .ch110-span5-td {
  padding: 14px 16px !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  box-sizing: border-box;
}

/* 字級 */
.ch110-model {
  font-size: 16px !important;
}

.ch110-spec,
.ch110-price {
  font-size: 15px !important;
}

.ch110-pack,
.ch110-attr-5col .ch110-span5-td,
.ch110-attr-5col th {
  font-size: 14px !important;
}

/* =========================================
   商品列表：隱藏加入購物車按鈕
========================================= */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.ct-product-card .button,
.ct-product-card .add_to_cart_button {
  display: none !important;
}

/* =========================================
   首頁 8 張圖：圓角 + 輕微浮起
========================================= */
.home-8cards .elementor-widget-image,
.home-8cards .elementor-widget-image .elementor-widget-container,
.home-8cards .elementor-widget-image a {
  display: block !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer;
}

.home-8cards .elementor-widget-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 20px !important;
}

.home-8cards .elementor-widget-image:hover,
.home-8cards .elementor-widget-image:hover .elementor-widget-container {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1) !important;
}

/* =========================================
   RWD：CH110
========================================= */
@media (max-width: 1024px) {
  .ch110-model {
    font-size: 15px !important;
  }

  .ch110-spec,
  .ch110-price,
  .ch110-pack,
  .ch110-attr-5col .ch110-span5-td,
  .ch110-attr-5col th {
    font-size: 14px !important;
  }
}

@media (max-width: 767px) {
  .ch110-attr-5col th {
    width: 72px !important;
    min-width: 72px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
  }

  .ch110-attr-5col tr:nth-child(1) td.ch110-col-td,
  .ch110-attr-5col tr:nth-child(2) td.ch110-col-td,
  .ch110-attr-5col tr:nth-child(3) td.ch110-col-td {
    height: 60px !important;
  }

  .ch110-attr-5col tr:nth-child(4) td.ch110-col-td {
    height: 72px !important;
  }

  .ch110-attr-5col td.ch110-col-td > .ch110-model,
  .ch110-attr-5col td.ch110-col-td > .ch110-spec,
  .ch110-attr-5col td.ch110-col-td > .ch110-price,
  .ch110-attr-5col td.ch110-col-td > .ch110-pack {
    padding: 0 12% !important;
  }

  .ch110-model {
    font-size: 13px !important;
  }

  .ch110-spec,
  .ch110-price,
  .ch110-pack,
  .ch110-attr-5col .ch110-span5-td {
    font-size: 12px !important;
  }
}
.single-product .jp-relatedposts {
  display: none !important;
}