/**
 * 寵物店 Pet Shop 模版 — style.css
 * Header / Footer / 全站樣式。首頁區塊（倒數計時、優惠券、賣點、商品）樣式寫於 views/home.php。
 *
 * 顏色一律透過後台注入的全域 CSS 變數取值（front-header.php 的 :root），
 * 所以後台「主題設定 → 顏色」改色會即時生效。注意 secondary 對應 --text。
 */
:root {
    --pet-primary:      var(--primary, #c97b4a);
    --pet-ink:          var(--text, #5a4632);
    --pet-accent:       var(--accent, #f3c64e);
    --pet-header-bg:    var(--header-bg, #ffffff);
    --pet-header-text:  var(--header-text, #5a4632);
    --pet-footer-bg:    var(--footer-bg, #b0824f);
    --pet-footer-text:  var(--footer-text, #fff3e4);
    --pet-btn-bg:       var(--btn-bg, #c97b4a);
    --pet-btn-text:     var(--btn-text, #ffffff);
    --pet-link:         var(--link, #c97b4a);
    --pet-hover:        var(--hover, #a8663a);
    --pet-price:        var(--price, #c0392b);

    /* 裝飾性暖色（跟隨主色調微調，維持一致觀感） */
    --pet-cream:  #fdf6ea;
    --pet-tan:    #e2bfa0;   /* 實色，避免依賴 color-mix（舊瀏覽器亦可） */
    --pet-soft:   #f6ece2;   /* 淺暖色 hover 底，實色以兼容舊瀏覽器 */
    --pet-radius: 16px;
    --pet-pill:   999px;
}

/* ── 全站基礎（以 body[data-template="petshop"] 收窄，不影響其他模版）── */
body[data-template="petshop"] {
    background: var(--pet-cream);
    color: var(--pet-ink);
}
body[data-template="petshop"] .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* 用 :where() 令基礎連結色維持最低優先級，避免蓋過 header/footer/nav 各區的專屬文字色 */
:where(body[data-template="petshop"]) a { color: var(--pet-link); text-decoration: none; }
:where(body[data-template="petshop"]) a:hover { color: var(--pet-hover); }
body[data-template="petshop"] img { max-width: 100%; height: auto; }

/* ── 頂部公告條（可關閉）── */
.pet-announce {
    background: var(--pet-primary);
    color: var(--pet-btn-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    position: relative;
    text-align: center;
}
.pet-announce.is-hidden { display: none; }
.pet-announce-inner {
    padding: 11px 44px;
    line-height: 1.5;
}
.pet-announce-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--pet-btn-text);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    opacity: .85;
}
.pet-announce-close:hover { opacity: 1; }
.pet-announce-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* ── Header ── */
.pet-header {
    background: var(--pet-header-bg);
    color: var(--pet-header-text);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 12px rgba(90, 70, 50, .07);
}
.pet-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    min-height: 42px;
}
.pet-header-utility,
.pet-header-actions { display: flex; align-items: center; gap: 4px; }
.pet-h-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--pet-header-text);
    font-size: 13px;
    font-weight: 500;
    transition: background .2s, color .2s;
}
.pet-h-link:hover {
    background: var(--pet-soft);
    color: var(--pet-primary);
}
.pet-h-link svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.pet-h-cart { position: relative; }
.pet-h-cart-count {
    position: absolute; top: 2px; right: 2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--pet-price); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 17px;
    border-radius: 999px; text-align: center;
}

/* 中央 Logo */
.pet-header-logo { text-align: center; padding: 6px 0 14px; }
.pet-header-logo img { display: inline-block; }
.pet-logo-text {
    font-size: 26px; font-weight: 800; letter-spacing: 1px;
    color: var(--pet-primary);
}

/* 導覽列（品牌主色橫幅，較公告條深一度作區隔；文字用 btn-text 保證對比）*/
/* 先給實色主色作 fallback，再用 color-mix 加深；若瀏覽器不支援 color-mix，
   仍保留實色橫幅（避免變成白底＋白字看不見）*/
.pet-nav-wrap {
    background: var(--pet-primary);
    background: color-mix(in srgb, var(--pet-primary) 85%, #000);
}
.pet-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pet-nav > li > a {
    display: block;
    padding: 13px 18px;
    color: var(--pet-btn-text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    transition: background .2s;
}
.pet-nav > li > a:hover,
.pet-nav > li > a.active {
    background: rgba(0, 0, 0, .16);
    color: var(--pet-btn-text);
}

/* 導覽列子分類下拉（電腦版，滑鼠移入顯示）*/
.pet-nav > li { position: relative; }
.pet-has-children > a::after { content: "▾"; margin-left: 5px; font-size: 11px; opacity: .8; }
.pet-nav-dropdown {
    position: absolute; top: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 190px; margin: 0; padding: 8px 0; list-style: none;
    background: #fff; border-radius: 14px;
    box-shadow: 0 12px 34px rgba(90, 70, 50, .2);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 220;
}
.pet-nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.pet-nav > li.pet-has-children:hover > .pet-nav-dropdown {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.pet-nav-dropdown li { list-style: none; }
.pet-nav-dropdown li a {
    display: block; padding: 10px 20px; color: var(--pet-ink);
    font-size: 14px; font-weight: 600; white-space: nowrap; text-align: left;
}
.pet-nav-dropdown li a:hover { background: var(--pet-soft); color: var(--pet-primary); }

/* Hamburger（手機用） */
.pet-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px; height: 40px;
    background: transparent; border: 0; cursor: pointer;
    border-radius: 10px;
}
.pet-hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--pet-header-text); border-radius: 2px;
    margin: 0 auto;
}

/* ── 手機抽屜 ── */
.pet-overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(40, 28, 18, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
    z-index: 998;
}
.pet-overlay.is-open { opacity: 1; visibility: visible; }
.pet-drawer {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 82%; max-width: 340px;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 999;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.pet-drawer.is-open { transform: translateX(0); }
.pet-drawer-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid #f0e6d6;
}
.pet-drawer-top .brand { font-weight: 800; color: var(--pet-primary); font-size: 18px; }
.pet-drawer-close { background: transparent; border: 0; cursor: pointer; color: var(--pet-ink); padding: 4px; line-height: 0; }
.pet-drawer-search { padding: 14px 18px 4px; }
.pet-drawer-search form { display: flex; align-items: center; gap: 8px; background: var(--pet-cream); border-radius: var(--pet-pill); padding: 4px 6px 4px 16px; }
.pet-drawer-search input { flex: 1; border: 0; background: transparent; outline: none; font-size: 14px; padding: 8px 0; color: var(--pet-ink); }
.pet-drawer-search button { background: var(--pet-primary); border: 0; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pet-drawer-nav { display: flex; flex-direction: column; padding: 10px 0; }
.pet-drawer-nav a {
    padding: 14px 20px; color: var(--pet-ink); font-size: 15px; font-weight: 600;
    border-bottom: 1px solid #f6efe2; display: flex; align-items: center; gap: 10px;
}
.pet-drawer-nav a:hover { background: var(--pet-soft); color: var(--pet-primary); }
.pet-drawer-nav svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* 抽屜子分類（點「▾」展開／收合）*/
.pet-drawer-nav .pet-drawer-group { display: flex; flex-direction: column; }
.pet-drawer-nav .pet-drawer-prow { display: flex; align-items: center; border-bottom: 1px solid #f6efe2; }
.pet-drawer-nav .pet-drawer-prow a { flex: 1; border-bottom: 0; }
.pet-drawer-toggle {
    background: transparent; border: 0; cursor: pointer;
    padding: 14px 20px; color: var(--pet-ink); font-size: 13px; line-height: 1;
    transition: transform .2s ease;
}
.pet-drawer-toggle.is-open { transform: rotate(180deg); }
.pet-drawer-sub { display: none; background: var(--pet-cream); }
.pet-drawer-sub.is-open { display: block; }
.pet-drawer-nav .pet-drawer-sub a {
    padding: 12px 20px 12px 40px; font-size: 14px; font-weight: 500;
    color: #6f6250; border-bottom: 1px solid #f0e7d7;
}
.pet-drawer-nav .pet-drawer-sub a:hover { color: var(--pet-primary); }

/* ── 通用按鈕 ── */
.pet-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--pet-btn-bg); color: var(--pet-btn-text) !important;
    padding: 12px 26px; border-radius: var(--pet-pill);
    font-weight: 700; font-size: 15px; border: 0; cursor: pointer;
    transition: filter .2s, transform .2s;
}
.pet-btn:hover { filter: brightness(.94); transform: translateY(-1px); color: var(--pet-btn-text) !important; }
.pet-btn-outline {
    background: transparent; color: var(--pet-primary) !important;
    border: 2px solid var(--pet-primary);
}
.pet-btn-outline:hover { background: var(--pet-primary); color: #fff !important; }

/* ── WhatsApp 浮動掣 ── */
.whatsapp-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 300;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25d366; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
}
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }

/* ── 回到頂部 ── */
.pet-back-top {
    position: fixed; right: 22px; bottom: 88px; z-index: 260;
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 1px solid #ecdcc6; cursor: pointer;
    color: var(--pet-primary); box-shadow: 0 4px 14px rgba(90, 70, 50, .18);
    display: none; align-items: center; justify-content: center;
}
.pet-back-top.show { display: inline-flex; }
.pet-back-top svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* ── Footer ── */
/* 電子報與頁尾同色系，避免主色與頁尾色兩種深色相撞；用頁尾色 + accent 掣作點綴 */
.pet-newsletter {
    background: var(--pet-footer-bg);
    color: var(--pet-footer-text); text-align: center; padding: 52px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.pet-newsletter h3 { font-size: 26px; font-weight: 800; margin: 0 0 10px; color: var(--pet-footer-text); }
.pet-newsletter p { opacity: .92; margin: 0 0 22px; font-size: 15px; }
.pet-newsletter form { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; background: #fff; border-radius: var(--pet-pill); padding: 6px; }
.pet-newsletter input { flex: 1; border: 0; background: transparent; outline: none; padding: 12px 20px; color: var(--pet-ink); font-size: 14px; }
.pet-newsletter button { background: var(--pet-accent); color: var(--pet-ink); border: 0; border-radius: var(--pet-pill); padding: 12px 26px; font-weight: 800; cursor: pointer; font-size: 14px; }

.pet-footer { background: var(--pet-footer-bg); color: var(--pet-footer-text); padding: 54px 0 26px; }
.pet-footer a { color: var(--pet-footer-text); opacity: .9; }
.pet-footer a:hover { opacity: 1; color: #fff; }
.pet-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
.pet-footer-col h4 { font-size: 16px; font-weight: 800; margin: 0 0 16px; color: #fff; }
.pet-footer-col a { display: block; padding: 5px 0; font-size: 14px; }
.pet-footer-brand { font-size: 22px; font-weight: 800; color: #fff; display: inline-block; margin-bottom: 12px; }
.pet-footer-about { font-size: 14px; line-height: 1.7; opacity: .9; margin: 0 0 16px; }
.pet-footer-contact a { display: block; font-size: 14px; padding: 3px 0; }
.pet-social-block, .pet-fbpage-block { margin-top: 22px; }
.pet-footer-col .pet-social-title {
    font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 10px;
    padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.pet-fbpage { background: #fff; border-radius: 10px; overflow: hidden; max-width: 340px; line-height: 0; }
.pet-fbpage iframe { width: 100%; max-width: 340px; border: 0; }
.pet-social { display: flex; gap: 10px; margin-top: 14px; }
.pet-social-block .pet-social { margin-top: 0; }
.pet-social a {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    display: inline-flex; align-items: center; justify-content: center;
}
.pet-social svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pet-footer-bottom {
    margin-top: 34px; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
    font-size: 13px; opacity: .9;
}

/* ── RWD ── */
@media (max-width: 900px) {
    .pet-footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 768px) {
    .pet-header-utility .pet-h-text,
    .pet-header-actions .pet-h-text { display: none; }
    .pet-nav-wrap { display: none; }
    .pet-hamburger { display: flex; }
    .pet-header-top { padding: 6px 0; }
    .pet-header-logo { padding: 4px 0 10px; }
    .pet-footer-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (min-width: 769px) {
    .pet-hamburger { display: none; }
}