/* Theme: cyber white (pet shop)
   Clean pearl-white surfaces, a hot-pink primary taken from the Jiao Didi logo,
   cyan neon accents and deep navy "night" bands for a futuristic but warm feel. */
:root{
  --c-ink-rgb:13,20,36;
  --c-primary:#d6246e;
  --c-primary-hover:#b51d5d;
  --c-ink:#0d1424;
  --c-text:#1b2338;
  --c-muted:#5a6478;
  --c-link:#d6246e;
  --c-accent:#00c2d1;
  --c-accent-ink:#077682;
  --c-accent-light:#3ff0ff;
  --c-line:#06c755;
  --c-line-hover:#05a647;
  --c-bg:#f5f8fc;
  --c-surface:#ffffff;
  --c-surface-alt:#eef3f9;
  --c-photo-bg:#eef3f9;
  --c-border:#dde5ef;
  --c-step-line:#bfe9ef;
  --c-focus-ring:rgba(214,36,110,.18);
  --c-topbar:#0d1424;
  --c-topbar-text:#d8e6f5;
  --c-footer:#0d1424;
  --c-footer-text:#b9c6d8;
  --c-dot:rgba(0,194,209,.18);
  --font-latin:"Outfit","Noto Sans TC",system-ui,sans-serif;
  --contact-bg:linear-gradient(150deg,#0d1424 0%,#1a1f4a 55%,#5a1446 100%);
  --hero-bg:radial-gradient(900px 420px at 85% 10%,rgba(255,95,162,.16),transparent 60%),radial-gradient(800px 420px at 10% 90%,rgba(0,194,209,.14),transparent 60%),linear-gradient(180deg,#ffffff 0%,#f2f6fb 100%);
  --font-head:"Noto Sans TC",system-ui,-apple-system,"Microsoft JhengHei",sans-serif;
  --font-body:"Noto Sans TC",system-ui,-apple-system,"Microsoft JhengHei",sans-serif;
  --radius:14px;
  --radius-lg:22px;
  --radius-btn:999px;
  --max-w:1240px;
  --shadow-sm:0 1px 2px rgba(13,20,36,.06);
  --shadow-md:0 8px 22px rgba(13,20,36,.08);
  --shadow-lg:0 18px 44px rgba(13,20,36,.12);
  --glow-pink:0 0 0 1px rgba(255,95,162,.35),0 10px 30px rgba(255,95,162,.18);
  --glow-cyan:0 0 0 1px rgba(0,194,209,.35),0 10px 30px rgba(0,194,209,.18);
}

/* cyber details: thin neon lines and glows, kept to decoration only */
.topbar{border-bottom:1px solid rgba(63,240,255,.25)}
.site-header{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
/* logo.jpg has a white background: multiply blends it away on the light header / footer card */
.logo img,.footer-logo img{mix-blend-mode:multiply}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#3ff0ff 30%,#ff5fa2 70%,transparent);opacity:.55;pointer-events:none}
.hero::before{background-image:linear-gradient(rgba(0,194,209,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,194,209,.09) 1px,transparent 1px);background-size:36px 36px}
.hero-kicker .dot{background:#ff5fa2;box-shadow:0 0 0 4px rgba(255,95,162,.2),0 0 12px rgba(255,95,162,.8)}
.hero h1{background:linear-gradient(100deg,#0d1424 0%,#0d1424 45%,#d6246e 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-media img{box-shadow:var(--glow-cyan),var(--shadow-lg)}
.float-card{border:1px solid rgba(0,194,209,.35)}
.sec-eyebrow{color:var(--c-accent-ink)}
.sec-dark .sec-eyebrow,.stats .sec-eyebrow{color:var(--c-accent-light)}
.stats{background:linear-gradient(120deg,#0d1424 0%,#141c3a 60%,#2a1238 100%)}
.stat strong{color:var(--c-accent-light);text-shadow:0 0 18px rgba(63,240,255,.45)}
.sec-dark{background:linear-gradient(160deg,#0d1424 0%,#151b3d 100%)}
@media (hover:hover){
  .card:hover,.cat-card:hover,.store:hover{box-shadow:var(--glow-pink)}
}
/* 公正店照片是直的，卡片只露出招牌和店門口那一段 */
.store-img img[alt="公正店"]{object-position:50% 70%}
/* 「撥打電話」跳出的門市選單 */
.call-pick{width:min(92vw,380px);border:0;border-radius:18px;padding:20px;background:var(--c-surface);color:var(--c-text);box-shadow:var(--glow-pink)}
.call-pick::backdrop{background:rgba(10,20,35,.55)}
.call-pick-h{margin:0 0 12px;font-weight:700;font-size:1.1rem;color:var(--c-ink);text-align:center}
.call-pick-opt{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;margin-bottom:8px;border:1px solid var(--c-border);border-radius:12px;color:var(--c-text);text-decoration:none}
.call-pick-opt strong{color:var(--c-ink)}
.call-pick-opt span{color:var(--c-primary);font-weight:700}
.call-pick-opt small{grid-column:1/-1;color:var(--c-muted)}
.call-pick-opt:hover,.call-pick-opt:focus-visible{border-color:var(--c-primary);background:var(--c-surface-alt)}
.call-pick-close{display:block;width:100%;margin-top:4px;padding:10px;border:0;border-radius:12px;background:var(--c-surface-alt);color:var(--c-muted);font:inherit;cursor:pointer}
/* 頁尾「聯絡我們」第一列的總電話跟建工店重複，客戶 11/8 說不要（build.py 一定會輸出這列，先用 CSS 藏起來） */
.footer-contact li:first-child{display:none}
/* 最上方公告列的總電話，客戶 11/8 圈起來說取消（build.py 一定會輸出，先用 CSS 藏起來） */
.tb-phone{display:none}
/* 減少動態的手機原本只顯示電話，電話拿掉後改顯示營業時間，不然整條會空掉 */
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .topbar .tb-line .tb-hours{display:inline}
  .topbar .tb-line .tb-hours::before{content:none}
}