/* 「返回商店」按鈕：videos/、reels/ 兩個頁面共用同一份CSS(用<link>各自
   引用，不是複製貼上)，之後要改樣式只需要改這一個檔案，不用兩邊分別改。
   顏色刻意用商店(shop.fish88.tw)的深藏青(#042C53)+金色(#FAC775)視覺語言
   (跟商店導覽列.wc-block-cart的按鈕同一組色碼)，不沿用這兩個頁面自己的
   淺藍(#1479c9系)配色──這個按鈕本質是「離開這個頁面、去另一個網站」的
   入口，用商店自己的顏色能讓使用者直覺聯想到「這會帶我去商店」，跟頁面
   本身的內容區塊做出明確區隔，不會被誤認成頁面內的一般功能按鈕。 */

/* 【2026-08-17改版，實測發現】原本按鈕獨立佔一行、放在標題上方
   (.back-to-shop-bar是跟h1同層的獨立區塊，margin-bottom:14px)，
   頁面頂部因此多出一整行的空白。改成標題+按鈕同一行：flex row +
   justify-content:space-between，標題靠左、按鈕靠右。h1本身
   flex:1 1 auto + min-width:0，讓標題文字在空間不夠時可以正常
   換行縮窄，不會把按鈕擠出容器或跟按鈕重疊；按鈕flex-shrink:0，
   永遠維持自己的內容尺寸，不會被壓扁變形。 */
.back-to-shop-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.back-to-shop-row h1{
  flex: 1 1 auto;
  min-width: 0;
}

/* 按鈕尺寸縮小(原本padding:10px 18px/font-size:13px)，避免跟標題
   競爭視覺重量──現在跟標題同一行，維持原本的大尺寸會比標題本身
   還搶眼。文字拆成圖示(←)+文字(返回商店)兩個span，讓窄螢幕斷點
   可以只隱藏文字span、保留圖示，不用整顆按鈕消失或另外做文字節錄。 */
.back-to-shop-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #042C53;
  border: 1.5px solid #FAC775;
  color: #FAC775;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.back-to-shop-btn:hover,
.back-to-shop-btn:focus-visible{
  background: #FAC775;
  color: #042C53;
  transform: translateY(-1px);
}

/* 按鈕視覺尺寸縮小後，實際可點擊區塊可能小於44px的觸控目標建議
   尺寸，用透明的::before在按鈕正中央撐出至少44×44px的熱區，
   不放大按鈕本身看起來的大小(視覺上還是小巧的縮小版按鈕，但手指
   點擊/誤觸範圍有保障)。 */
.back-to-shop-btn::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

@media(max-width: 600px){
  .back-to-shop-row{ gap: 10px; }
}

/* 【窄螢幕斷點】實測390px手機寬度下，兩個頁面的標題(「來來釣具
   草屯店・影片導購」/「來來釣具草屯店・電捲報價」，長度接近)在
   縮小字級(19px，見videos/style.css、reels/style.css各自的
   @media(max-width:600px)規則)後仍需要跟按鈕同時塞進扣掉header
   左右padding的可用寬度，容易擠壓。480px以下把按鈕文字隱藏、
   只留圖示(←)，讓按鈕寬度縮到最小，標題能拿到最多空間，同一行
   也不會擠壓或換行。 */
@media(max-width: 480px){
  .back-to-shop-btn-text{ display: none; }
  .back-to-shop-btn{ padding: 6px 10px; gap: 0; }
}