/**
 * 專案自管樣式（勿放進 styles/css/，該目錄為切版產出，可能被覆蓋）
 */

/* 表單／API 錯誤提示紅字（blade 多處使用 text-danger，主樣式未內建） */
.text-danger {
  --tw-text-opacity: 1;
  color: rgb(var(--m-quaternary-rgb) / var(--tw-text-opacity, 1));
}

/*
 * 地圖標記：left/top 應對齊「圓點中心」，而非整塊（圓點＋標籤）中心。
 * 否則後台焦點百分比與前台視覺會有水平落差。
 */
.brandsMap__container .brandsMap__wrapper .brandsMap__link {
  --map-dot-size: 18px;
  --tw-translate-x: calc(var(--map-dot-size) / -2);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y));
}
.brandsMap__container .brandsMap__wrapper .brandsMap__link.left {
  /* 標籤在左、圓點在右：以圓點中心為錨點 */
  --tw-translate-x: calc(-100% + var(--map-dot-size) / 2);
}
@media (max-width: 768px) {
  .brandsMap__container .brandsMap__wrapper .brandsMap__link {
    --map-dot-size: 16px;
  }
}

/*
 * 相關產品：外層為 flex（左右箭頭 + swiper）。
 * 若不給 .swiper 明確佔寬，會塌成 min-content（單字直排）。
 */
.swiper-container.relatedProducts > .swiper {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.swiper-container.relatedProducts .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

/*
 * 商品卡：維持圖區比例；勿對卡片設 min-width:0（會讓 flex/swiper 塌縮）。
 */
.productsCard {
  width: 100%;
}
.productsCard a.img {
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.productsCard a.img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.productsCard .info .wrap {
  width: 100%;
}

/*
 * 表單送出按鈕：disabled + 轉圈圈（contacts / cart / member 等共用）
 */
.btn-loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: btn-loading-spin 0.6s linear infinite;
}
@keyframes btn-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/*
 * 產品列表／搜尋「排列方式」標籤：切版寫死在 CSS content，改由 data-sort-label 帶入語系。
 */
section#products .container-1540 .products--content .filterResult .sort-area .form_select.v1 .form_select__control button.form_select-selected .form_select-selected__info::before,
section#search .container-1540 .products--content .filterResult .sort-area .form_select.v1 .form_select__control button.form_select-selected .form_select-selected__info::before {
  content: attr(data-sort-label);
}

/*
 * 編輯器內容 prose（前台 + 後台 TinyMCE 共用）
 *
 * - 前台容器：class="editor" / "news-post--editor editor"
 * - 後台 TinyMCE：body_class 掛相同 class，content_css 經 editor.css @import 本檔
 * - Tailwind preflight 會重置標題字級與 border；此處補回通用內容樣式
 * - 個案樣式請用 inline style 或模板 class，前後台會跟著 HTML 走
 */
.editor,
.news-post--editor {
  font-family: 'Noto Sans TC Variable', sans-serif;
  font-size: clamp(1rem, 0.7778rem + 0.463vw, 1.125rem);
  line-height: 150%;
  color: var(--color-gray-800, #1f2937);
}

.editor h1,
.editor h2,
.editor h3,
.editor h4,
.editor h5,
.editor h6,
.news-post--editor h1,
.news-post--editor h2,
.news-post--editor h3,
.news-post--editor h4,
.news-post--editor h5,
.news-post--editor h6 {
  font-family: 'Noto Sans TC Variable', sans-serif;
  font-weight: 600;
  line-height: 150%;
  color: var(--color-gray-900, #111827);
  margin: 1em 0 0.5em;
}

.editor h1,
.news-post--editor h1 { font-size: 2rem; }
.editor h2,
.news-post--editor h2 { font-size: 1.75rem; }
.editor h3,
.news-post--editor h3 { font-size: 1.375rem; }
.editor h4,
.news-post--editor h4 { font-size: 1.25rem; }
.editor h5,
.news-post--editor h5 { font-size: 1.125rem; }
.editor h6,
.news-post--editor h6 { font-size: 1rem; }

.editor p,
.news-post--editor p {
  margin: 0 0 1em;
}

/*
 * 編輯器 inline style 優先
 *
 * 切版 .news-post--editor span { font-style: normal; font-weight: 400 }
 * 會蓋掉 em/i/strong 傳給內層 span 的樣式。先改回 inherit，
 * 再對語意標籤與常見 inline 寫法加 !important 保險。
 * （任意 font-size/color 的 inline 本身已高於 class，無需也不宜用 !important 重寫數值）
 */
.editor span,
.news-post--editor span {
  font-style: inherit;
  font-weight: inherit;
}

.editor em,
.editor i,
.news-post--editor em,
.news-post--editor i {
  font-style: italic !important;
}

.editor strong,
.editor b,
.news-post--editor strong,
.news-post--editor b {
  font-weight: bolder !important;
}

.editor [style*="font-style: italic"],
.editor [style*="font-style:italic"],
.editor [style*="font-style: oblique"],
.editor [style*="font-style:oblique"],
.news-post--editor [style*="font-style: italic"],
.news-post--editor [style*="font-style:italic"],
.news-post--editor [style*="font-style: oblique"],
.news-post--editor [style*="font-style:oblique"] {
  font-style: italic !important;
}

.editor [style*="font-weight: bold"],
.editor [style*="font-weight:bold"],
.editor [style*="font-weight: 700"],
.editor [style*="font-weight:700"],
.news-post--editor [style*="font-weight: bold"],
.news-post--editor [style*="font-weight:bold"],
.news-post--editor [style*="font-weight: 700"],
.news-post--editor [style*="font-weight:700"] {
  font-weight: bold !important;
}

.editor [style*="text-decoration: underline"],
.editor [style*="text-decoration:underline"],
.news-post--editor [style*="text-decoration: underline"],
.news-post--editor [style*="text-decoration:underline"] {
  text-decoration: underline !important;
}

.editor [style*="text-decoration: line-through"],
.editor [style*="text-decoration:line-through"],
.news-post--editor [style*="text-decoration: line-through"],
.news-post--editor [style*="text-decoration:line-through"] {
  text-decoration: line-through !important;
}

.editor ul,
.editor ol,
.news-post--editor ul,
.news-post--editor ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

.editor ul { list-style: disc; }
.editor ol { list-style: decimal; }
.news-post--editor ul { list-style: disc; }
.news-post--editor ol { list-style: decimal; }

.editor a,
.news-post--editor a {
  color: var(--m-secondary, #0b6e4f);
  text-decoration: underline;
}

.editor img,
.news-post--editor img {
  max-width: 100%;
  height: auto;
}

.editor table,
.news-post--editor table {
  border-collapse: collapse;
  max-width: 100%;
  margin-top: 15px;
  margin-bottom: 20px;
}

.editor table td,
.editor table th,
.news-post--editor table td,
.news-post--editor table th {
  border: 1px solid #d9d9d9;
  padding: 10px;
  vertical-align: middle;
}

.editor .video-wrap,
.news-post--editor .video-wrap {
  max-width: 960px;
}

.editor .max-w-800,
.news-post--editor .max-w-800 {
  max-width: 800px;
}

/*
 * 商品卡角標：手機版縮小／換行，避免長英文標籤蓋住產品圖。
 */
.productsCard a.img {
  position: relative;
  overflow: hidden;
}
.productsCard a.img .badge {
  z-index: 2;
  max-width: calc(100% - 8%);
  pointer-events: none;
}
@media (max-width: 640px) {
  .productsCard a.img .badge {
    left: 3%;
    top: 3%;
    gap: 4px;
    max-width: calc(100% - 6%);
  }
  .productsCard a.img .badge .badge-item {
    font-size: 11px;
    line-height: 1.3;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    padding-top: 1px;
    padding-bottom: 1px;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }
}