/* ===== pet_theme 頁頭：兩行版（v5 對齊） ===== */
body.pet-body {
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-weight: 400;
    background: #f6f5f1 !important;
}
body.pet-body::before {
    display: none !important;
}
body.pet-body .main {
    background: transparent !important;
}
body.pet-body .product-card {
    background: #ffffff !important;
    border: 1px solid #e7e4dd !important;
    box-shadow: none !important;
}
body.pet-body .product-thumb {
    background: #eeece6 !important;
}
body.pet-body .container {
    max-width: 1320px;
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
}
body.pet-body .main {
    padding-top: 24px;
}
body.pet-body .design-modules {
    margin-top: 0;
}
@media (max-width: 900px) {
    body.pet-body .container {
        padding-left: 22px;
        padding-right: 22px;
    }
}
@media (max-width: 560px) {
    body.pet-body .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}
.pet-top {
    background: var(--clay-topbar, #0a3936);
    color: rgba(255, 255, 255, .84);
}
.pet-top-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 36px;
    font-size: 12px;
}
.pet-top-msg {
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.pet-top-msg b {
    color: #f4c77d;
    font-weight: 600;
}
.pet-top-locale {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* 這裡的 transform 令本元素自成層疊上下文，幣種／語言選單自身的 z-index:1100 會被關在裡面，
       對外只剩本行的值；必須高於 sticky 導航（.pet-header 的 z-index:40），否則下拉會被白色導航欄整塊蓋住 */
    z-index: 45;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.pet-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(14, 75, 71, .16);
    position: sticky;
    top: 0;
    z-index: 40;
}
.pet-row-1 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
    min-height: 82px;
}
.pet-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
}
.pet-logo-img {
    max-width: 260px;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.pet-logo-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--clay-primary, #0e4b47);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", "PingFang HK", sans-serif;
    font-size: 18px;
    font-weight: 700;
}
.pet-logo-text b {
    display: block;
    font-family: "Inter", "PingFang HK", sans-serif;
    font-size: 17px;
    letter-spacing: .16em;
    color: var(--clay-text, #1d2622);
    line-height: 1.2;
}
.pet-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 560px;
    justify-self: center;
    background: #f5f4f0;
    border: 1px solid #e4e0d7;
    border-radius: 999px;
    padding: 4px 5px 4px 20px;
}
.pet-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    color: var(--clay-text, #1d2622);
}
.pet-search button {
    flex: none;
    border: 0;
    background: var(--clay-primary, #0e4b47);
    color: #fff;
    border-radius: 999px;
    padding: 9px 22px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.pet-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-self: end;
    flex: none;
}
.pet-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--clay-text-secondary, #5c665f);
    font-size: 12.5px;
    transition: color .2s;
    position: relative;
}
.pet-action:hover {
    color: var(--clay-cta, #b07d35);
}
.pet-search-toggle {
    display: none;
}
.pet-cart-count {
    position: absolute;
    top: -8px;
    right: -12px;
    min-width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--clay-cta, #c98a2d);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.pet-burger {
    display: none;
    border: 0;
    background: none;
    color: var(--clay-text, #1d2622);
    cursor: pointer;
}
.pet-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    height: 52px;
    border-top: 1px solid rgba(14, 75, 71, .12);
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.pet-nav::-webkit-scrollbar {
    display: none;
}
.pet-nav a {
    flex: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    padding: 5px 0;
    position: relative;
    color: var(--clay-text, #1d2622);
    background: none;
    border-radius: 0;
    white-space: nowrap;
}
.pet-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: var(--clay-primary, #0e4b47);
    transition: width .2s;
}
.pet-nav a:hover::after {
    width: 100%;
}
.pet-nav .pet-nav-all {
    color: var(--clay-primary, #0e4b47);
    font-weight: 700;
}
.pet-nav .pet-nav-hot {
    color: #c4553a;
    font-weight: 600;
}
.pet-cart .mini-cart {
    display: none;
}
.pet-cart:hover .mini-cart {
    display: block;
}
@media (max-width: 1080px) {
    .pet-search-toggle {
        display: inline-flex;
    }
    .pet-row-1 .pet-search {
        display: none;
    }
    .pet-row-1 {
        grid-template-columns: auto 1fr;
        gap: 18px;
    }
}
@media (max-width: 900px) {
    .pet-action span,
    .pet-mobile-hide {
        display: none;
    }
    .pet-burger {
        display: inline-flex;
    }
    .pet-actions {
        gap: 14px;
    }
    .pet-top-inner {
        justify-content: center;
    }
    .pet-top-locale {
        display: none;
    }
    /* 手機彈層只留輸入框，不顯示熱門詞／熱銷區 */
    body.pet-body .clay-search-overlay .clay-search-hot {
        display: none !important;
    }
}
@media (max-width: 560px) {
    .pet-logo-text b {
        font-size: 14px;
        letter-spacing: .1em;
    }
    .pet-search {
        padding-left: 14px;
    }
    .pet-search button {
        padding: 8px 14px;
        font-size: 12px;
    }
    .pet-nav {
        gap: 22px;
        height: 46px;
    }
}

/* ===== pet 組件：按鈕語言（與 aurora 的方角/玻璃感做出差異） ===== */
body.pet-body .btn,
body.pet-body .btn-primary,
body.pet-body .btn-solid,
body.pet-body .btn-dark {
    border-radius: 999px !important;
    border: 0 !important;
    background: var(--clay-primary, #0e4b47) !important;
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 10px 22px !important;
    box-shadow: 0 5px 14px rgba(14, 75, 71, .14) !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
body.pet-body .btn:hover,
body.pet-body .btn-primary:hover,
body.pet-body .btn-solid:hover,
body.pet-body .btn-dark:hover {
    background: var(--clay-primary-hover, #0a3936) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(14, 75, 71, .2) !important;
}
body.pet-body .btn-outline-dark,
body.pet-body .btn-outline-light {
    border-radius: 999px !important;
    border: 1.5px solid var(--clay-primary, #0e4b47) !important;
    background: transparent !important;
    color: var(--clay-primary, #0e4b47) !important;
    font-weight: 600;
    padding: 9px 22px !important;
    transition: all .2s ease;
}
body.pet-body .btn-outline-dark:hover,
body.pet-body .btn-outline-light:hover {
    background: var(--clay-primary, #0e4b47) !important;
    color: #ffffff !important;
}
body.pet-body .btn-secondary,
body.pet-body .btn-light {
    border-radius: 999px !important;
    border: 1px solid #e7e4dd !important;
    background: #f6f3ec !important;
    color: var(--clay-text, #1d2622) !important;
    font-weight: 500;
}
body.pet-body .mini-cart-view,
body.pet-body .mini-cart-checkout {
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-size: 12px;
    font-weight: 600;
}
body.pet-body .mini-cart-view {
    border: 1.5px solid var(--clay-primary, #0e4b47) !important;
    color: var(--clay-primary, #0e4b47) !important;
    background: #fff !important;
}
body.pet-body .mini-cart-checkout {
    background: var(--clay-primary, #0e4b47) !important;
    color: #fff !important;
}
body.pet-body .quick-add {
    background: var(--clay-primary, #0e4b47) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(14, 75, 71, .22) !important;
    transition: transform .18s ease, background .18s ease !important;
}
body.pet-body .quick-add:hover {
    background: var(--clay-cta, #c98a2d) !important;
    transform: scale(1.08);
}
body.pet-body .fav-btn:hover,
body.pet-body .fav-btn.active {
    color: var(--clay-cta, #c98a2d) !important;
}

/* pet 移動端搜索彈層：確保輸入框明顯可用 */
body.pet-body .clay-search-form input {
    font-size: 16px !important;
}
body.pet-body .clay-search-close {
    width: 40px;
    height: 40px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--clay-border, #e7e4dd);
    border-radius: 50%;
    background: #fff;
}

/* 彈層內搜索框：強制可見（實心白底＋綠邊＋占位文字） */
body.pet-body .clay-search-overlay {
    background: rgba(246, 245, 241, .96);
}
body.pet-body .clay-search-panel {
    width: 100%;
    max-width: 560px;
}
body.pet-body .clay-search-form {
    flex: 1 1 auto;
    min-width: 0;
    background: #ffffff !important;
    border: 1px solid rgba(14, 75, 71, .28) !important;
    box-shadow: 0 10px 30px rgba(14, 75, 71, .08) !important;
}
body.pet-body .clay-search-form input {
    height: 48px;
    font-size: 16px !important;
    color: #1d2622 !important;
}
body.pet-body .clay-search-form input::placeholder {
    color: #9aa29c !important;
    opacity: 1;
}

/* ===== pet 商品卡差異化 ===== */
body.pet-body .product-card {
    background: #ffffff !important;
    border: 1px solid #e7e4dd !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: none !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.pet-body .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(14, 75, 71, .09) !important;
    border-color: rgba(14, 75, 71, .35) !important;
}
body.pet-body .product-card .product-thumb {
    background: #eeece6 !important;
}
body.pet-body .product-card .product-name {
    font-family: "Noto Sans TC", "PingFang TC", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    color: #1d2622;
}
body.pet-body .product-card .product-price .price {
    color: var(--clay-primary, #0e4b47) !important;
    font-weight: 700;
}
body.pet-body .product-card .price-original {
    color: #a6a6a0 !important;
    text-decoration: line-through;
}
body.pet-body .product-card .sale-badge {
    background: #c4553a !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
}

/* ===== pet 分類圓標：圓角卡式 ===== */
body.pet-body .clay-icons .clay-icon {
    text-align: center;
}
body.pet-body .clay-icons .clay-icon-circle {
    width: 96px;
    height: 96px;
    border-radius: 24px !important;
    overflow: hidden;
    border: 1px solid #e7e4dd !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.pet-body .clay-icons .clay-icon:hover .clay-icon-circle {
    transform: translateY(-3px);
    border-color: rgba(14, 75, 71, .4) !important;
    box-shadow: 0 10px 22px rgba(14, 75, 71, .1) !important;
}
body.pet-body .clay-icons .clay-icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.pet-body .clay-icons .clay-icon-name {
    font-size: 13px;
    font-weight: 600;
    color: #1d2622;
    margin-top: 8px;
    display: block;
}
body.pet-body .clay-icons .clay-icon-sub {
    font-size: 10px;
    color: #8a918b;
    display: block;
}

/* ===== pet 手機端合理化 ===== */
@media (max-width: 700px) {
    body.pet-body .clay-icons {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px 8px !important;
    }
    body.pet-body .clay-icons .clay-icon-circle {
        width: 84px;
        height: 84px;
    }
    body.pet-body .clay-pgrid {
        gap: 10px !important;
    }
    body.pet-body .product-card .product-name {
        font-size: 13px;
        min-height: 0;
    }
    body.pet-body .product-card .product-price .price {
        font-size: 15px;
    }
    body.pet-body .module-title {
        font-size: 19px !important;
        padding-top: 22px !important;
    }
}

/* ===== pet 商品列表（PLP） ===== */
body.pet-body .section-title {
    font-family: "Noto Sans TC", "PingFang TC", sans-serif !important;
    font-weight: 700;
    color: #1d2622;
}
body.pet-body .clay-filters-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    color: #707872;
}
body.pet-body .clay-filters-select {
    border-radius: 999px !important;
    border: 1px solid #e7e4dd !important;
    background: #ffffff !important;
    box-shadow: none !important;
}
/* 只有「頂層」分類用膠囊樣式（2026-09-21）。
   原本 .plp-cat 一律 inline-flex，但子選單 .plp-cat-sub 是巢狀在膠囊內，
   會被當成 flex 子項壓縮（實測只剩 84px 寬），子分類就變成一字一行的直排。 */
/* 頂層分類：容器用 block，膠囊只包「那一行」（2026-09-21）
   原本膠囊本身是 inline-flex，巢狀的子選單 .plp-cat-sub 會被當成 flex 子項壓縮
   （實測只剩 79~84px 寬），子分類才會變成一字一行的直排。 */
body.pet-body .plp-side > .plp-cat {
    display: block;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 3px 0;
}
body.pet-body .plp-side > .plp-cat > .plp-cat-row {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e7e4dd !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-size: 13px;
    color: #1d2622;
    transition: all .18s ease;
}
body.pet-body .plp-side > .plp-cat > .plp-cat-row:hover {
    border-color: rgba(14, 75, 71, .45) !important;
    color: var(--clay-primary, #0e4b47) !important;
}
body.pet-body .plp-side > .plp-cat.active > .plp-cat-row {
    background: var(--clay-primary, #0e4b47) !important;
    border-color: var(--clay-primary, #0e4b47) !important;
    color: #ffffff !important;
}
body.pet-body .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
body.pet-body .pagination a,
body.pet-body .pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    border: 1px solid #e7e4dd !important;
    background: #fff !important;
    color: #1d2622 !important;
}
body.pet-body .pagination .active,
body.pet-body .pagination a.active {
    background: var(--clay-primary, #0e4b47) !important;
    border-color: var(--clay-primary, #0e4b47) !important;
    color: #fff !important;
}

/* ===== pet 商品詳情（PDP） ===== */
body.pet-body .detail-wrap {
    background: transparent;
}
body.pet-body .detail-title {
    font-family: "Noto Sans TC", "PingFang TC", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: #1d2622;
}
body.pet-body .detail-thumb {
    background: #ffffff !important;
    border: 1px solid #e7e4dd !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}
body.pet-body .detail-price .price {
    color: var(--clay-primary, #0e4b47) !important;
    font-size: 24px;
    font-weight: 800;
}
body.pet-body .detail-price .price-original {
    color: #a6a6a0 !important;
}
body.pet-body .qty-ctl button {
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #e7e4dd !important;
    color: #1d2622 !important;
}
body.pet-body .qty-ctl button:hover {
    border-color: var(--clay-primary, #0e4b47) !important;
    color: var(--clay-primary, #0e4b47) !important;
}
body.pet-body .tier-chip {
    border-radius: 999px !important;
    border: 1px solid #e7e4dd !important;
    background: #fff !important;
    color: #1d2622 !important;
}
body.pet-body .tier-chip.active,
body.pet-body .tier-chip:hover {
    border-color: var(--clay-primary, #0e4b47) !important;
    color: var(--clay-primary, #0e4b47) !important;
    background: rgba(14, 75, 71, .06) !important;
}
body.pet-body .detail-mobile-bar {
    background: rgba(255, 255, 255, .96) !important;
    border-top: 1px solid #e7e4dd !important;
}

/* 分類下拉（2026-09-20 補上）：pet 桌機導覽原本只有純連結，而且用橫向捲動（面板會被裁掉）。
   改為不捲動、放不下時由 JS 隱藏；面板樣式沿用基底 .clay-dropdown，只補定位與水平微調。 */
.pet-nav{overflow:visible;flex-wrap:nowrap}
.pet-nav .clay-nav-item{position:relative;display:inline-flex;align-items:center;flex:none}
.pet-nav .clay-nav-item > a{display:inline-flex;align-items:center;gap:5px}
.pet-nav .clay-dropdown{top:calc(100% + 12px)}
.pet-nav .clay-nav-item > .clay-dropdown{
    transform:translateX(calc(-50% + var(--dd-shift,0px))) translateY(8px);
}
.pet-nav .clay-nav-item.has-dropdown:hover > .clay-dropdown,
.pet-nav .clay-nav-item.has-dropdown:focus-within > .clay-dropdown{
    transform:translateX(calc(-50% + var(--dd-shift,0px))) translateY(0);
}

/* 中類標題本身就是連結（三層選單），維持標題樣式不要變成藍色底線 */
a.clay-dropdown-group-title{text-decoration:none;color:inherit;display:block}
a.clay-dropdown-group-title:hover{color:var(--clay-primary,currentColor)}

/* 子層分類：恢復成縮排清單（不再套膠囊，避免被壓縮成直排） */
body.pet-body .plp-cat-sub .plp-cat {
    display: block;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.pet-body .plp-cat-sub .plp-cat a {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
}
body.pet-body .plp-cat-sub .plp-cat a:hover {
    background: rgba(14, 75, 71, .06);
}
body.pet-body .plp-cat-sub .plp-cat a.active {
    background: rgba(14, 75, 71, .10) !important;
    color: var(--clay-primary, #0e4b47) !important;
    font-weight: 700;
}

/* 2026-09-22 LOGO 自適應 */
/* 手機／平板版 LOGO 統一尺寸：原本各主題上限差很多（pet 72px／aurora 56px／lumiere 30px／noir 30px），
   手機上有的太大有的太小。這裡依頁頭高度自適應：平板 ≤48px、手機 ≤40px，
   並限制寬度最多 55vw，避免超寬 LOGO 把右側的搜尋／購物車圖示擠掉。桌面值不變。 */
@media (max-width: 1100px) {
    .pet-logo-img { max-height: 48px; max-width: 44vw; width: auto; height: auto; object-fit: contain; }
}
@media (max-width: 767px) {
    .pet-logo-img { max-height: 40px; max-width: 55vw; }
}