/* 福樂寵前台 介面翻新層（2026-10，方案見 UI-REFRESH-PLAN.md）
   只蓋外觀、不動結構與文字；由 quote/template/nav.php 最上面那一行掛進來，拿掉那一行就完全回到原樣。
   舊的 main.css 一個字都不改。量法與截圖：tools/ftp-tool/shot-ui.mjs（手機 390／平板 768／電腦 1366／大螢幕 1920 都要看）。 */

/* ══ 批一之一：內頁橫幅（十一個內頁共用 .sh-banner）
   原本高度是用背景圖的比例撐出來的（電腦 535px、手機 271px），英文當主標。
   改成：高度跟著標題走、中文當主標、英文變小字；插畫留在右下角，視窗變窄時跟著縮小，不會壓到標題。 */
.sh-banner { display: flex !important; align-items: flex-end; box-sizing: border-box; height: auto !important; min-height: 306px; padding: 118px 0 40px !important; margin-bottom: 28px; overflow: hidden; background-color: #fffcf3; }
.sh-banner .bgcover { position: absolute; inset: 0; height: auto !important; padding: 0 !important; background-size: auto 535px !important; background-position: right bottom !important;
  /* 背景圖左半邊還有別的小動物，大螢幕會跑出來跟標題撞在一起：只露出右邊那一排 */
  -webkit-mask-image: linear-gradient(to right, transparent calc(100% - 800px), #000 calc(100% - 760px)); mask-image: linear-gradient(to right, transparent calc(100% - 800px), #000 calc(100% - 760px)); }
.sh-banner .container { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; flex: 0 1 auto; margin-right: auto !important; margin-left: auto !important; }
.sh-banner h1 { display: flex; flex-direction: column-reverse; gap: 8px; max-width: calc(100% - 700px); min-width: 320px; margin: 0 !important; padding: 0 !important; }
.sh-banner .t-ti { font-family: "Noto Sans TC", sans-serif !important; font-size: 40px !important; line-height: 1.25 !important; font-weight: 700 !important; text-wrap: balance; }
.sh-banner .e-ti { margin: 0 !important; font-size: 15px !important; line-height: 1.2 !important; letter-spacing: .32em; text-transform: uppercase; color: #f39800 !important; }
.sh-banner .e-ti::before, .sh-banner .e-ti::after { display: none !important; }
.sh-banbg { display: none !important; }
.area-intro { margin-top: 4px; }

/* ══ 批一之二：分類列與搜尋列 */
.top-mbx { margin: 0 !important; padding: 0 !important; }
#top-menu-ul { margin: 0 0 20px !important; }
.shoplist-item { margin-top: 0 !important; padding-top: 0 !important; }
.sel-bx { width: fit-content; max-width: 100%; margin: 0 auto 34px !important; padding: 12px; background: #fff; border-radius: 18px; box-shadow: 0 2px 12px rgba(120, 90, 30, .08); }
.sel-bx select, .sel-bx input[type=text] { background-color: #fff !important; border-color: #e6dccb !important; color: #3a3834 !important; font-family: "Noto Sans TC", sans-serif !important; font-size: 16px !important; }
.sel-bx .search-btn { background: #f39800 !important; border-color: #f39800 !important; }

/* ══ 批一之三：店家卡片（推薦商家、醫療熱點、地區頁、特色頁、搜尋結果、首頁推薦共用 .shop-list） */
.shop-list { gap: 26px; }
.shop-list li { width: calc((100% - 78px) / 4) !important; margin: 0 !important; background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(120, 90, 30, .08); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.shop-list li:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(120, 90, 30, .14); }
.shop-list li a { width: 100%; padding-bottom: 18px; }
.shop-list .img-bx { height: auto !important; margin: 0 0 14px !important; aspect-ratio: 1 / 1; overflow: hidden; }
.shop-list .img-bx img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; }
.shop-list .cla { top: 12px !important; right: auto !important; bottom: auto !important; left: 12px !important; width: auto !important; height: auto !important; padding: 4px 12px; border-radius: 999px; background: #f39800 !important; }
.shop-list .cla span { position: static !important; transform: none !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4; white-space: nowrap; }
.shop-list .pos { top: auto !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: auto !important; height: auto !important; padding: 6px 14px !important; border-radius: 14px 0 0 0 !important; background: #fff !important; font-size: 14px !important; }
.shop-list .more-btn { display: none !important; }
.shop-list .flex-tibx, .shop-list .sh-des { padding: 0 18px; }
.shop-list .ti { font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; }
.shop-list .sh-des { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 8px !important; font-size: 14.5px !important; line-height: 1.65 !important; color: #6b655c !important; }

/* ══ 批二之一：消息內頁（news-info）——原本日期 36px 當主角、標題只有 20px（手機 13px）綠色小字。
   改成標題當主角、日期變上面的小字；內文限寬比較好讀；長網址會換行，不再凸出手機畫面。 */
.newsinfo-item { margin-top: 150px !important; }
/* 🔴 寬度要自己給滿：原站的容器在平板是「80% 寬、沒有內距」，只寫 max-width 或 width:auto 會讓文字貼到螢幕左邊（10-11 上線後在 768 寬抓到） */
.newsinfo-item > .container { box-sizing: border-box; width: min(892px, 100%) !important; max-width: none !important; margin-right: auto !important; margin-left: auto !important; padding-right: 24px !important; padding-left: 24px !important; }
.newsinfo-item .ti-bx { margin-bottom: 36px !important; padding-bottom: 26px !important; }
.newsinfo-item .ti-bx .ti { font-size: 15px !important; line-height: 1.4 !important; letter-spacing: .06em; color: #8a8478 !important; }
.newsinfo-item .ti-bx .ti::before, .newsinfo-item .ti-bx .ti::after { display: none !important; }
.newsinfo-item .ti-bx h1.da { margin: 10px 0 0 !important; font-family: "Noto Sans TC", sans-serif !important; font-size: 32px !important; line-height: 1.4 !important; font-weight: 700 !important; color: #2b2b2b !important; text-wrap: balance; }
.editor_box a { overflow-wrap: anywhere; }

/* ══ 批二之二：店家內頁（shop-info）——店家介紹裡連續三張以上的照片，電腦與平板排成兩欄（不裁切、照原比例），
   手機維持一欄。原本每張都滿版直排，九張照片就把頁面拉到一萬六千像素高。舊瀏覽器不認得 :has 就維持原樣。 */
@media (min-width: 768px) {
  .shopinfo-item .editor_box p:has(> img:nth-of-type(3)) { column-count: 2; column-gap: 16px; }
  .shopinfo-item .editor_box p:has(> img:nth-of-type(3)) > img { display: block; width: 100% !important; height: auto !important; margin: 0 0 16px; border-radius: 14px; break-inside: avoid; }
}

/* ══ 批三之一：首頁——區塊標題跟內頁一致（中文大、英文小），區塊之間的空白收小。
   「關於平台」那塊黃色波浪上下各凸出約 200px，所以它前後的間距不能收到太小。 */
.indexPage .index-ti { display: flex; flex-direction: column-reverse; gap: 10px; }
.indexPage .index-ti .t-ti { font-family: "Noto Sans TC", sans-serif !important; font-size: 40px !important; line-height: 1.25 !important; font-weight: 700 !important; }
.indexPage .index-ti .e-ti { margin: 0 !important; font-size: 15px !important; line-height: 1.2 !important; letter-spacing: .32em; text-transform: uppercase; }
.indexPage .shop-item { margin-top: 36px !important; padding-top: 44px !important; padding-bottom: 120px !important; }
.indexPage .shop-item > .index-ti, .indexPage .news-item > .index-ti { margin-bottom: 44px !important; }
.indexPage .news-item { margin-top: 310px !important; }

/* ══ 批三之二：登入、註冊、忘記密碼、申請商家、會員中心各頁（修改資料頁共用 .forgot-item、會員中心共用 .accountinfo-item）
   ——標題中文大、英文小；卡片往上提。登入後的頁面用 tools/ftp-tool/member-pages-preview.mjs 看。 */
:is(.login-item, .register-item, .forgot-item, .shopapply-item, .accountinfo-item) { margin-top: 150px !important; }
:is(.login-item, .register-item, .forgot-item, .shopapply-item, .accountinfo-item) :has(> .e-ti) { display: flex; flex-direction: column-reverse; gap: 8px; }
:is(.login-item, .register-item, .forgot-item, .shopapply-item, .accountinfo-item) .t-ti { font-family: "Noto Sans TC", sans-serif !important; font-size: 30px !important; line-height: 1.3 !important; font-weight: 700 !important; }
:is(.login-item, .register-item, .forgot-item, .shopapply-item, .accountinfo-item) .e-ti { margin: 0 !important; font-size: 14px !important; line-height: 1.2 !important; letter-spacing: .32em; text-transform: uppercase; }

/* 小筆電與平板橫放：卡片三欄；插畫縮小，標題才放得下 */
@media (max-width: 1199px) {
  .sh-banner { min-height: 236px; padding: 108px 0 30px !important; }
  /* 插畫往左讓 110px：這個寬度右上角「申請成為商家」圓章比較大，會蓋到最右邊那隻 */
  .sh-banner .bgcover { background-size: auto 332px !important; background-position: right 110px bottom !important; -webkit-mask-image: linear-gradient(to right, transparent calc(100% - 610px), #000 calc(100% - 580px)); mask-image: linear-gradient(to right, transparent calc(100% - 610px), #000 calc(100% - 580px)); }
  .sh-banner h1 { max-width: calc(100% - 590px); min-width: 260px; }
  .sh-banner .t-ti { font-size: 32px !important; }
  .shop-list li { width: calc((100% - 52px) / 3) !important; }
}
/* 平板直放：插畫再小一號，八到十個字的標題（例如「台北市中山區寵物旅館」）才不會撞到 */
@media (max-width: 991px) {
  .sh-banner { min-height: 196px; padding: 100px 0 26px !important; }
  .sh-banner .bgcover { background-size: auto 250px !important; background-position: right 20px bottom !important; -webkit-mask-image: linear-gradient(to right, transparent calc(100% - 400px), #000 calc(100% - 372px)); mask-image: linear-gradient(to right, transparent calc(100% - 400px), #000 calc(100% - 372px)); }
  .sh-banner h1 { max-width: calc(100% - 300px); min-width: 0; }
  .shop-list li { width: calc((100% - 26px) / 2) !important; }
}
/* 手機：標題在上、插畫在下面一排，標題再長也不會撞到 */
@media (max-width: 767px) {
  .sh-banner { display: block !important; min-height: 0; padding: 92px 0 56px !important; margin-bottom: 18px; }
  .sh-banner .bgcover { background-size: auto 180px !important; background-position: right 16px bottom !important; -webkit-mask-image: none; mask-image: none; }
  .sh-banner h1 { max-width: calc(100% - 84px); min-width: 0; gap: 6px; }
  .sh-banner .t-ti { font-size: 26px !important; }
  .sh-banner .e-ti { font-size: 11px !important; }
  #top-menu-ul { margin: 0 0 12px !important; }
  .indexPage .index-ti { gap: 6px; }
  .indexPage .index-ti .t-ti { font-size: 26px !important; }
  .indexPage .index-ti .e-ti { font-size: 11px !important; }
  .indexPage .shop-item { margin-top: 24px !important; padding-top: 32px !important; padding-bottom: 70px !important; }
  .indexPage .shop-item > .index-ti, .indexPage .news-item > .index-ti { margin-bottom: 24px !important; }
  .indexPage .news-item { margin-top: 200px !important; }
  :is(.login-item, .register-item, .forgot-item, .shopapply-item, .accountinfo-item) { margin-top: 100px !important; }
  :is(.login-item, .register-item, .forgot-item, .shopapply-item, .accountinfo-item) .t-ti { font-size: 24px !important; }
  :is(.login-item, .register-item, .forgot-item, .shopapply-item, .accountinfo-item) .e-ti { font-size: 11px !important; }
  .newsinfo-item { margin-top: 100px !important; }
  .newsinfo-item .ti-bx { margin-bottom: 22px !important; padding-bottom: 18px !important; }
  .newsinfo-item .ti-bx .ti { font-size: 13px !important; }
  .newsinfo-item .ti-bx h1.da { margin-top: 6px !important; font-size: 22px !important; }
  .sel-bx { width: auto; margin-bottom: 22px !important; }
  .shop-list { gap: 14px; }
  .shop-list li { width: calc((100% - 14px) / 2) !important; border-radius: 16px; }
  .shop-list .flex-tibx, .shop-list .sh-des { padding: 0 12px; }
  .shop-list .ti { font-size: 16px !important; }
  .shop-list .sh-des { font-size: 13.5px !important; -webkit-line-clamp: 2; }
  .shop-list .cla { top: 8px !important; left: 8px !important; padding: 3px 9px; }
  .shop-list .cla span { font-size: 12px !important; }
}