/*
 * 質感升級 override 層。
 * 只覆寫既有 class 的視覺屬性（圓角/陰影/hover/focus），不新增/刪除任何
 * DOM 元素、不動文字內容、不動連結與資料綁定。
 * 這份檔案透過 <link> 排在 style.css 之後載入，同特異度時靠載入順序
 * 覆蓋舊規則，避免直接改動兩萬多行的 style.css 本體。
 */

/* ---------- Header sticky ----------
 * 修正紀錄：一開始以為 style.css 完全沒有接住 main.js 那段
 * scroll>300px 幫 .header-sticky 加 .sticky class 的邏輯（純 grep
 * "header-sticky"/"header-middle" 沒找到東西），後來實際在瀏覽器量測
 * 才發現漏看了 style.css:17807 其實已經有一份完整的 `.sticky { position:
 * fixed; top:0; left:0; width:100%; box-shadow; background:#fff;
 * animation: fadeInDown }` ——sticky 效果本來就是有做的，不是死碼。
 *
 * 但這份原本的實作有個真的 bug：position:fixed 會讓 header 整個脫離文件
 * 排版流，一旦 class 加上去，header 原本佔的那塊空間會瞬間消失，底下內容
 * 跟著網頁一起「跳」上去一段（跳動幅度＝header 高度），在 300px 那個切換
 * 點附近會有明顯的跳動/閃爍感——這才是使用者會感覺「header 好像重複跳出來」
 * 的真正原因。改用 position:sticky 就是為了解決這個：sticky 元素會一直
 * 保留自己在排版流中的空間，不會有這種瞬間塌陷/跳動的問題。
 *
 * 這裡故意讓外層 <header class="main-header-area"> 才是 sticky 的元素，
 * 而不是內層 .header-middle：sticky 貼頂的有效範圍受限於它自己的容器
 * 高度，.header-middle 的容器如果還是 .header-middle 自己（~64px），
 * 隨便捲一點點就會超出範圍、恢復成正常捲動；外層 header 的容器是
 * .main-wrapper（等於整頁高度），才能整頁範圍都固定住。
 * 內層原本 .sticky 的 position:fixed 要蓋掉，避免兩層都在搶著定位打架
 * （這也是最早卡住量測不到高度、量出 0.625px 那次的原因）。
 *
 * 順帶修正的既有小 bug：style.css 原本 `html, body { height: 100%; }`
 * 會把 body 的版面高度鎖死在一個螢幕高，即使內容更長也一樣（靠
 * overflow:visible 讓內容照樣溢出顯示、頁面仍能捲動，但這種「明明內容
 * 溢出、容器高度卻沒跟著長高」的狀態對任何用到 position:sticky 的地方
 * 都是地雷，例如 style.css 裡 `.single-product-content.with-sticky`
 * 也是靠 sticky 讓側欄跟捲動，同樣的鎖高問題）。改成 min-height:100%
 * 保留「內容不足一頁時至少撐滿版面」原意，拿掉鎖高副作用。
 */
body {
  height: auto;
  min-height: 100%;
}

.main-header-area {
  position: sticky;
  top: 0;
  z-index: 999;
}
.header-sticky.sticky {
  position: static;
  animation: none;
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(23, 25, 28, 0.08);
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}
@media (max-width: 991.98px) {
  .header-middle.sticky {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
@media (min-width: 992px) {
  .main-nav > ul > li > a {
    transition: line-height 0.3s ease;
  }
  .header-sticky.sticky .main-nav > ul > li > a {
    line-height: 64px;
  }
}

.header-right > ul > li:not(:last-child) {
  padding-right: 22px;
}
.header-right > ul > li.minicart-wrap {
  padding-right: 18px;
}
.minicart-btn,
.mobile-menu_btn {
  border-radius: 0.5rem;
  padding: 6px 10px;
  transition: background-color 0.2s ease;
}
.minicart-btn:hover,
.mobile-menu_btn:hover {
  background-color: var(--bs-whisper);
}
.main-nav > ul > li:not(:last-child) {
  padding-right: 38px;
}

/* ---------- 按鈕 ---------- */
.btn-custom-size {
  border-radius: 0.5rem;
}
.btn-custom-size:before {
  border-radius: 0.5rem;
}
.btn-custom-size:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(23, 25, 28, 0.16);
}
.btn-custom-size:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn.btn-outline-secondary,
.btn.btn-dark,
.btn.btn-primary {
  border-radius: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.btn.btn-outline-secondary:hover,
.btn.btn-dark:hover,
.btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(23, 25, 28, 0.14);
}
.btn.btn-outline-secondary:active,
.btn.btn-dark:active,
.btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ---------- 首頁 Hero／Special Deals 輪播箭頭 ---------- */
/*
 * .custom-button-prev/next 本身就是箭頭 sprite 圖（20x58px，上下兩格分別是
 * 預設/hover 兩種狀態，靠 background-position 上下切換）。放大按鈕本身的
 * 點擊區時改用固定像素位移而非百分比，確保兩個 frame 還是對得準置中。
 */
.custom-button-prev,
.custom-button-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  background-position: center 7.5px;
  box-shadow: 0 2px 10px rgba(23, 25, 28, 0.18);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.custom-button-prev:hover,
.custom-button-next:hover {
  background-color: #fff;
  background-position: center -21.5px;
  box-shadow: 0 4px 14px rgba(23, 25, 28, 0.24);
}

.special-deals-button-next i,
.special-deals-button-prev i {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(23, 25, 28, 0.15);
}

/* ---------- 卡片：產品／分類 ---------- */
.product-item {
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(23, 25, 28, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.product-item:hover {
  box-shadow: 0 10px 24px rgba(23, 25, 28, 0.12);
  transform: translateY(-2px);
}

.img-zoom-effect {
  border-radius: 0.75rem;
}

.product-content {
  gap: 12px;
}
.price-box .price-box-holder {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--bs-whisper);
  border-radius: 999px;
  padding: 4px 14px;
}
.product-add-action ul li a i {
  border-radius: 0.5rem;
}

.blog-img img,
.blog-list-img img,
.blog-detail-item .navigation-img img {
  border-radius: 0.75rem;
}
.blog-detail-item .navigation-img {
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 4px 14px rgba(23, 25, 28, 0.12);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-detail-item .navigation-img:hover {
  box-shadow: 0 10px 24px rgba(23, 25, 28, 0.18);
  transform: translateY(-2px);
}
.page-navigation ul.prev-nav li .navigation-img,
.page-navigation ul.next-nav li .navigation-img {
  max-width: 140px;
}

.product-category-img {
  border-radius: 0.75rem;
}

/* ---------- 篩選側欄 ---------- */
.widgets-area {
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(23, 25, 28, 0.05);
}

/* ---------- 表單 ---------- */
.nice-select {
  border-radius: 0.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nice-select.open,
.nice-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(232, 100, 27, 0.15);
}
.nice-select .list {
  border-radius: 0.5rem;
  overflow: hidden;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
input[type='search'],
select,
textarea {
  border-radius: 0.5rem;
}
input[type='text']:focus,
input[type='email']:focus,
input[type='tel']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
select:focus,
textarea:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(232, 100, 27, 0.15);
  outline: none;
}

.quantity .cart-plus-minus,
.cart-plus-minus-box {
  border-radius: 0.5rem;
  overflow: hidden;
}

/* ---------- 產品詳情：圖片與分頁 ---------- */
.single-product-slider {
  border-radius: 1rem;
  overflow: hidden;
}
.single-product-thumbs .swiper-slide {
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.single-product-thumbs .swiper-slide-thumb-active {
  border-color: var(--bs-primary);
}
.product-tab-nav {
  border-radius: 0.5rem 0.5rem 0 0;
  overflow: hidden;
}
.product-tab-content {
  background-color: #fff;
  border: 1px solid var(--bs-border-color);
  border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 30px;
}
.product-info-card {
  background-color: var(--bs-whisper);
  border-radius: 0.75rem;
  padding: 18px 22px 6px;
  margin-bottom: 18px;
}

/* ---------- 導覽／浮動元件 ---------- */
.drop-menu {
  border-radius: 0.75rem;
  overflow: hidden;
}

.scroll-to-top {
  border-radius: 0.75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* ---------- FAQ 手風琴 ---------- */
.frequently-area .frequently-item > ul > li.has-sub,
.frequently-area .frequently-item > ul > li.children {
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(23, 25, 28, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.frequently-area .frequently-item > ul > li.has-sub:hover,
.frequently-area .frequently-item > ul > li.children:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 6px 16px rgba(23, 25, 28, 0.08);
}
.frequently-area .frequently-item > ul > li.has-sub.open,
.frequently-area .frequently-item > ul > li.children.open {
  border-color: var(--bs-primary);
}
.frequently-area .frequently-item > ul > li.has-sub > a i,
.frequently-area .frequently-item > ul > li.children > a i {
  display: inline-block;
  transition: transform 0.3s ease, color 0.2s ease;
}
/* 原本開合是靠 :before 換字元瞬間切換圖示方向，改成同一個字元用 transform
   平滑轉 180 度，才會有旋轉動畫；否則換字元+又轉向會互相打架變回原方向 */
.frequently-area .frequently-item > ul > li.has-sub.open > a > i:before,
.frequently-area .frequently-item > ul > li.children.open > a > i:before {
  content: '\e688';
}
.frequently-area .frequently-item > ul > li.has-sub.open > a i,
.frequently-area .frequently-item > ul > li.children.open > a i {
  transform: rotate(180deg);
}

/* ---------- 購物車／結帳 ---------- */
.cart-page-total > ul {
  border-radius: 0.75rem;
  overflow: hidden;
}
.cart-page-total a {
  border-radius: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}
.cart-page-total a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(23, 25, 28, 0.16);
}
.product-thumbnail img,
.product-item_img img {
  border-radius: 0.5rem;
}
.checkbox-form .checkout-form-list input[type='text'],
.checkbox-form .checkout-form-list input[type='password'],
.checkbox-form .checkout-form-list input[type='email'] {
  border-radius: 0.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.checkbox-form .checkout-form-list input[type='text']:focus,
.checkbox-form .checkout-form-list input[type='password']:focus,
.checkbox-form .checkout-form-list input[type='email']:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(232, 100, 27, 0.15);
  outline: none;
}
.your-order {
  border-radius: 0.75rem;
  overflow: hidden;
}
button.order-button-payment {
  border-radius: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}
button.order-button-payment:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(23, 25, 28, 0.16);
}

/* ---------- Footer ---------- */
.widget-item li,
.widget-item a,
.widget-item p,
.widget-contact-info ul li {
  line-height: 1.9;
}
.widget-list-item > li:not(:last-child) {
  padding-bottom: 14px;
}
.footer-links.widget-list-item {
  gap: 6px 24px;
}

/* ---------- 分頁 ---------- */
.page-item .page-link {
  border-radius: 0.5rem;
  margin-inline: 2px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.page-item .page-link:hover {
  transform: translateY(-1px);
}

/* ================================================================
 * Header / Footer — 粗獷工業風 Industrial Heavy-Duty（2026-08 改版）
 * 只覆寫既有 class 的視覺屬性，不動 DOM／連結／資料綁定，延續本檔一貫做法。
 * 唯二例外（在 Layout.astro 直接改的兩行，非本檔範圍）：
 *   1. <head> 補上 Barlow Condensed / Anton 這兩個 Google Fonts。
 *   2. footer-top 原本內嵌 style="background-color: var(--bs-navy)"
 *      改成 var(--ind-black)（沿用同一種「內嵌 style 直接讀 CSS 變數」
 *      的既有寫法，不新增元素）。
 * ================================================================ */
:root {
  --ind-steel: #3c3f42;
  --ind-steel-dark: #2c2e30;
  --ind-black: #0f1011;
  --ind-hazard: #f2b807;
  --ind-ink: #f2efe9;
  --ind-font-display: 'Anton', 'Barlow Condensed', 'Noto Sans TC', sans-serif;
  --ind-font-nav: 'Barlow Condensed', 'Noto Sans TC', sans-serif;
}

/* ---- Header：鋼板灰 + 警示斜紋 + 橙色粗邊 ---- */
.main-header-area {
  background-color: var(--ind-steel);
  border-bottom: 4px solid var(--bs-primary);
}
.main-header-area::before {
  content: '';
  display: block;
  height: 6px;
  background-image: repeating-linear-gradient(45deg, var(--ind-hazard) 0 14px, var(--ind-black) 14px 28px);
}
.header-sticky.sticky {
  background-color: var(--ind-steel);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* logo 換成鉚接鋼板銘牌，圖片本身背景色（#f6f6f7）與銘牌底色對齊，接縫才不會露白 */
.header-logo {
  background-color: #f6f6f7;
  border: 2px solid var(--bs-primary);
  border-radius: 4px;
  padding: 6px 16px;
}

/* 導覽文字：Barlow Condensed 粗體 + 加大字距，淺色以對比鋼板底色 */
.main-nav > ul > li > a {
  color: var(--ind-ink);
  font-family: var(--ind-font-nav);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.05em;
}
.main-nav > ul > li:hover > a {
  color: var(--ind-hazard);
}
.drop-menu {
  border-radius: 2px;
  border-top: 3px solid var(--bs-primary);
}

/* 購物車／漢堡選單：鉚接圓形徽章 */
.minicart-btn,
.mobile-menu_btn {
  background-color: var(--ind-black);
  border: 2px solid var(--bs-primary);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.minicart-btn i,
.mobile-menu_btn i {
  color: var(--ind-ink);
}
.minicart-btn:hover,
.mobile-menu_btn:hover {
  background-color: var(--ind-steel-dark);
}

/* ---- Footer：黑底 + 警示黃標題 + 橙色圖示 ---- */
.footer-area .footer-bottom {
  background-color: var(--ind-black);
}
.widget-title {
  color: var(--ind-hazard);
  font-family: var(--ind-font-nav);
  font-size: 17px;
  letter-spacing: 0.06em;
}
.widget-contact-info ul li i,
.widget-list-item > li i {
  color: var(--bs-primary);
}
.social-link ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.social-link ul li a:hover {
  background-color: var(--bs-primary);
  color: #fff;
}

/* ================================================================
 * 全站內容區 — 粗獷工業風延伸（2026-08 第二輪）
 * 範圍：每一頁的 breadcrumb/標題區、按鈕、卡片、表單、FAQ 手風琴、
 * 產品詳情圖片/分頁、購物車結帳、分頁元件。做法不變：只覆寫既有
 * class 的視覺屬性，靠載入順序覆蓋前面「精密工程白／質感升級」那兩輪
 * 的圓角＋柔和陰影，不動 DOM。
 *
 * 這裡額外重新定義 --bs-whisper（原本 style.css 裡的冷灰色淺底色
 * token，全站約十幾個地方拿來當淺色底：price 標籤底色、
 * product-info-card、nice-select hover、products/[id].astro 的
 * related-products 區塊底色…）。改成偏鋼灰的暖中性色，等於一行覆寫
 * 讓全站所有用到這個 token 的淺色底同步變成工業風的底色，不用一個一個
 * class 改。
 * ================================================================ */
:root {
  --bs-whisper: #efece5;
  --ind-sub: #6b6f73;
  --ind-line-soft: rgba(15, 16, 17, 0.14);
}

/* ---- Breadcrumb／頁面標題區：跟 header 同一套鋼板灰＋警示斜紋語言 ---- */
.breadcrumb-area {
  background-color: var(--ind-steel);
  border-bottom: 4px solid var(--bs-primary);
  position: relative;
}
.breadcrumb-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-image: repeating-linear-gradient(45deg, var(--ind-hazard) 0 14px, var(--ind-black) 14px 28px);
}
.breadcrumb-area .breadcrumb-item,
.breadcrumb-area .breadcrumb-item * {
  color: var(--ind-sub);
}
.breadcrumb-area .breadcrumb-item ul li:last-child {
  color: var(--ind-ink);
}
.breadcrumb-area .breadcrumb-item a:hover {
  color: var(--ind-hazard);
}
.breadcrumb-heading {
  font-family: var(--ind-font-nav);
  color: var(--ind-ink);
  border-left: 4px solid var(--bs-primary);
  padding-left: 16px;
  letter-spacing: 0.04em;
}

/* ---- 按鈕：銳角＋粗邊＋工業字體 ---- */
.btn-custom-size,
.btn-custom-size:before,
.btn.btn-outline-secondary,
.btn.btn-dark,
.btn.btn-primary {
  border-radius: 3px;
}
.btn-custom-size,
.btn.btn-outline-secondary,
.btn.btn-dark,
.btn.btn-primary {
  font-family: var(--ind-font-nav);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-width: 2px;
}

/* ---- 產品／分類卡片：銳角、加粗邊框、硬陰影 ---- */
.product-item {
  border-radius: 3px;
  border-width: 2px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.product-item:hover {
  border-color: var(--bs-primary);
  box-shadow: 6px 6px 0 0 var(--ind-steel);
  transform: translate(-2px, -2px);
}
.img-zoom-effect,
.product-category-img,
.product-thumbnail img,
.product-item_img img {
  border-radius: 3px;
}
.price-box .price-box-holder {
  border-radius: 3px;
  font-family: var(--ind-font-nav);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ---- 部落格／作品集卡片 ---- */
.blog-img img,
.blog-list-img img,
.blog-detail-item .navigation-img img,
.blog-detail-item .navigation-img {
  border-radius: 3px;
}

/* ---- 篩選側欄／表單 ---- */
.widgets-area {
  border-radius: 3px;
}
.nice-select,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
input[type='search'],
select,
textarea {
  border-radius: 2px;
}
.nice-select .list {
  border-radius: 2px;
}
.quantity .cart-plus-minus,
.cart-plus-minus-box {
  border-radius: 2px;
}

/* ---- 產品詳情：圖片／分頁 ---- */
.single-product-slider {
  border-radius: 3px;
  border-width: 2px;
}
.single-product-thumbs .swiper-slide {
  border-radius: 2px;
  border-width: 2px;
}
.product-tab-nav {
  border-radius: 3px 3px 0 0;
  font-family: var(--ind-font-nav);
}
.product-tab-nav .tab-btn.active {
  color: var(--ind-hazard);
}
.product-tab-content {
  border-radius: 0 0 3px 3px;
  border-width: 2px;
}
.product-info-card {
  border-radius: 3px;
  border-left: 4px solid var(--bs-primary);
}

/* ---- FAQ 手風琴：銳角＋警示黃開啟指示 ---- */
.frequently-area .frequently-item > ul > li.has-sub,
.frequently-area .frequently-item > ul > li.children {
  border-radius: 3px;
  border: 2px solid var(--bs-border-color);
  box-shadow: none;
}
.frequently-area .frequently-item > ul > li.has-sub:hover,
.frequently-area .frequently-item > ul > li.children:hover {
  box-shadow: none;
}
.frequently-area .frequently-item > ul > li.has-sub.open,
.frequently-area .frequently-item > ul > li.children.open {
  border-color: var(--ind-hazard);
}
.frequently-area .frequently-item > ul > li.has-sub.open > a,
.frequently-area .frequently-item > ul > li.children.open > a {
  color: var(--ind-steel);
}

/* ---- 購物車／結帳 ---- */
.cart-page-total > ul,
.your-order {
  border-radius: 3px;
}
.cart-page-total a,
button.order-button-payment {
  border-radius: 3px;
  font-family: var(--ind-font-nav);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ---- 分頁 ---- */
.page-item .page-link {
  border-radius: 2px;
}
.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* ================================================================
 * 產品詳情主圖／縮圖 — 統一長寬比，解決客供圖比例不一致（2026-08）
 * 主圖：固定 4:3 容器 + contain + 純色留白（不裁切、版面高度固定）
 * 縮圖：固定 1:1 容器 + cover 裁切（縮圖本來就不需要看全貌，裁切換取排列整齊）
 * 對應比較頁：商品圖裁切版型 Artifact，方案 03 + 方案 02 組合
 * ================================================================ */
.single-product-slider .single-img {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ind-black);
}
.single-product-slider .single-img .img-full {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.single-product-thumbs .swiper-slide {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.single-product-thumbs .swiper-slide .img-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
}