/*
Theme Name: Fuzzhop Fable
Description: Fable Pets 风格重设计 — 暖米色高级宠物品牌主题，WooCommerce 兼容。
Version: 1.0.0
Author: Lux
Text Domain: fuzzhop-fable
*/

:root{
  --cream:#F7F2E9;
  --cream-2:#EFE7D6;
  --card:#FFFFFF;
  --ink:#211D17;
  --muted:#6E655A;
  --line:rgba(33,29,23,.12);
  --accent:#B45F33;
  --accent-soft:rgba(180,95,51,.12);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --r:20px;
  --shadow:0 10px 40px rgba(33,29,23,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
::selection{background:var(--accent);color:#fff}

/* ---------- 公告栏 ---------- */
.f-announce{background:var(--ink);color:var(--cream);text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.06em;padding:10px 16px}

/* ---------- 页头 ---------- */
.f-header{position:sticky;top:0;z-index:50;background:rgba(247,242,233,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.f-header-in{max-width:1280px;margin:0 auto;padding:0 32px;height:72px;display:flex;align-items:center;gap:32px}
.f-logo{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em}
.f-nav{flex:1}
.f-nav ul{display:flex;gap:28px;list-style:none}
.f-nav a{font-size:14.5px;font-weight:500;color:var(--ink);opacity:.85}
.f-nav a:hover{opacity:1;color:var(--accent)}
.f-icons{display:flex;gap:6px;align-items:center;margin-left:auto}
.f-ic{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:background .2s}
.f-ic:hover{background:rgba(33,29,23,.07)}
.f-cart-n{position:absolute;top:2px;right:0;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.f-lang{display:flex;background:rgba(33,29,23,.07);border-radius:999px;padding:3px;margin-right:4px}
.f-lang a{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;color:var(--muted);white-space:nowrap}
.f-lang a.on{background:var(--ink);color:var(--cream)}
.f-burger{display:none;background:none;border:0;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.f-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px}
.f-mnav{display:none;border-top:1px solid var(--line);padding:12px 32px}
.f-mnav.open{display:block}
.f-mnav ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.f-mnav a{display:block;padding:10px 0;font-weight:600}

/* ---------- Hero（视频背景） ---------- */
.f-hero{position:relative;min-height:min(70vh,620px);display:flex;align-items:flex-end;overflow:hidden;background:#141210;color:#fff}
.f-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.f-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.25) 0%,rgba(20,18,16,.05) 35%,rgba(20,18,16,.55) 100%)}
.f-hero-in{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:0 32px 72px}
.f-hero-kick{font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.85;margin-bottom:14px}
.f-hero h1{font-family:var(--serif);font-size:clamp(44px,7vw,84px);font-weight:500;line-height:1.04;letter-spacing:-.02em;max-width:12em}
.f-hero h1 em{font-style:italic}
.f-hero p{margin-top:16px;font-size:clamp(15px,2vw,18px);max-width:34em;opacity:.92}
.f-hero-cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;padding:15px 32px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;box-shadow:var(--shadow)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{box-shadow:var(--shadow)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(1.06);box-shadow:var(--shadow)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35)}

/* ---------- 通用区块 ---------- */
.f-sec{padding:56px 0}
.f-sec-head{text-align:center;max-width:640px;margin:0 auto 48px}
.f-kick{font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.f-sec-head h2{font-family:var(--serif);font-size:clamp(30px,4.4vw,48px);font-weight:500;line-height:1.12;letter-spacing:-.015em}
.f-sec-head h2 em{font-style:italic}
.f-sec-head p{margin-top:14px;color:var(--muted);font-size:16.5px}

/* ---------- 媒体评价 ---------- */
.f-press{background:var(--ink);color:var(--cream);padding:34px 0;overflow:hidden}
.f-press-row{display:flex;gap:64px;width:max-content;animation:f-drift 36s linear infinite;margin:0 auto}
.f-press blockquote{font-family:var(--serif);font-size:19px;font-style:italic;white-space:nowrap;opacity:.92}
.f-press cite{display:block;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-top:6px}
@keyframes f-drift{to{transform:translateX(-50%)}}

/* ---------- 分类磁贴 ---------- */
.f-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.f-cat{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;display:flex;align-items:flex-end;background:var(--cream-2)}
.f-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.f-cat:hover img{transform:scale(1.05)}
.f-cat-in{position:relative;z-index:1;width:100%;padding:26px;background:linear-gradient(180deg,transparent,rgba(20,18,16,.62));color:#fff}
.f-cat-in .n{font-size:12px;font-weight:700;letter-spacing:.18em;opacity:.8}
.f-cat-in h3{font-family:var(--serif);font-size:27px;font-weight:500;margin:4px 0 2px}
.f-cat-in p{font-size:14px;opacity:.88}
.f-cat-in .go{display:inline-flex;margin-top:12px;font-size:13.5px;font-weight:700;letter-spacing:.04em;border-bottom:2px solid #fff;padding-bottom:2px}

/* ---------- 商品 ---------- */
.f-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.f-prod{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:transform .25s,box-shadow .25s;position:relative;display:block}
.f-prod:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.f-prod-img{aspect-ratio:1/1;overflow:hidden;background:var(--cream-2);position:relative}
.f-prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.f-prod:hover .f-prod-img img{transform:scale(1.06)}
.f-badge{position:absolute;top:14px;left:14px;z-index:2;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.f-badge.sale{background:var(--accent);color:#fff}
.f-badge.new{background:var(--ink);color:var(--cream)}
.f-prod-in{padding:18px 20px 22px}
.f-prod-cat{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.f-prod h3{font-family:var(--serif);font-size:19px;font-weight:500;margin:6px 0 4px}
.f-prod .stars{color:#D99A3D;font-size:13px;letter-spacing:.1em}
.f-prod-price{margin-top:8px;font-weight:700;font-size:16.5px}
.f-prod-price del{color:var(--muted);font-weight:400;margin-right:8px}
.f-sec-cta{text-align:center;margin-top:44px}

/* ---------- 品牌故事 ---------- */
.f-story{background:var(--cream-2);border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;margin:0 24px}
.f-story-img{min-height:480px;background-size:cover;background-position:center}
.f-story-in{padding:72px 64px;display:flex;flex-direction:column;justify-content:center}
.f-story-in h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);font-weight:500;line-height:1.14;letter-spacing:-.015em}
.f-story-in h2 em{font-style:italic;color:var(--accent)}
.f-story-in p{margin-top:18px;color:var(--muted);font-size:16.5px;max-width:30em}
.f-story-in .btn{margin-top:30px;align-self:flex-start}

/* ---------- 评价 ---------- */
.f-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.f-rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;gap:16px}
.f-rev .stars{color:#D99A3D;letter-spacing:.12em}
.f-rev p{font-family:var(--serif);font-size:18px;line-height:1.5;flex:1}
.f-rev .who{display:flex;align-items:center;gap:12px}
.f-rev .who img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.f-rev .who b{display:block;font-size:14.5px}
.f-rev .who span{font-size:13px;color:var(--muted)}

/* ---------- 页脚 ---------- */
.f-footer{background:var(--ink);color:var(--cream);margin-top:40px}
.f-foot-news{max-width:640px;margin:0 auto;text-align:center;padding:72px 32px 56px}
.f-foot-news h3{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:500}
.f-foot-news p{opacity:.7;margin-top:10px}
.f-news-form{display:flex;gap:10px;margin-top:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 6px 6px 24px}
.f-news-form input{flex:1;background:none;border:0;color:#fff;font-size:15px;outline:none;min-width:0}
.f-news-form input::placeholder{color:rgba(247,242,233,.5)}
.f-news-form button{background:var(--cream);color:var(--ink);border:0;border-radius:999px;padding:13px 30px;font-weight:700;font-size:14.5px;cursor:pointer}
.f-news-ok{margin-top:14px;color:#9BD49B;font-weight:600}
.f-foot-grid{max-width:1280px;margin:0 auto;padding:20px 32px 48px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;border-top:1px solid rgba(255,255,255,.12)}
.f-foot-brand .f-logo{color:var(--cream)}
.f-foot-brand p{opacity:.65;font-size:14.5px;margin-top:12px}
.f-foot-col h4{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:16px}
.f-foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.f-foot-col a{font-size:14.5px;opacity:.85}
.f-foot-col a:hover{opacity:1;color:#fff}
.f-foot-base{max-width:1280px;margin:0 auto;padding:22px 32px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;font-size:13px;opacity:.6;flex-wrap:wrap;gap:8px}

/* ---------- WooCommerce 适配 ---------- */
.woocommerce span.onsale,.woocommerce ul.products li.product .onsale,.woocommerce div.product .onsale{display:none!important}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{background:var(--card);border-radius:var(--r);border:1px solid var(--line);overflow:hidden;padding:0 0 20px!important;margin:0!important;width:auto!important;float:none!important}
.woocommerce ul.products li.product a img{margin:0;border-radius:0;aspect-ratio:1/1;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-size:18px!important;font-weight:500;padding:14px 20px 4px!important}
.woocommerce ul.products li.product .price{padding:0 20px!important;color:var(--ink)!important;font-weight:700;font-size:16px!important}
.woocommerce ul.products li.product .button{margin:12px 20px 0!important;background:var(--ink);color:#fff;border-radius:999px;padding:12px 26px;font-weight:600}
.woocommerce ul.products li.product .button:hover{background:#000}
.woocommerce div.product .product_title{font-family:var(--serif);font-size:clamp(30px,4vw,44px);font-weight:500}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink);font-size:26px;font-weight:700}
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:var(--ink);color:#fff;border-radius:999px;padding:15px 34px;font-weight:600}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:#000;color:#fff}
.woocommerce-message,.woocommerce-info{border-top-color:var(--accent)}
.woocommerce-page .f-main>.wrap{padding-top:48px;padding-bottom:72px}

/* ---------- 登录 / 注册（沿用 fuzzhop-studio 老设计） ---------- */
.woocommerce-account h1{display:none!important}
.woocommerce-account #customer_login{display:block!important;max-width:632px;margin:70px auto 0}
.woocommerce-account #customer_login .u-column1{background:transparent!important;padding:0!important;width:100%!important;float:none!important;margin:0!important}
.woocommerce-account #customer_login .u-column1 h2{font:56px/1 Georgia,'Times New Roman',serif;letter-spacing:-.065em;text-align:center;margin:0 0 42px}
.woocommerce-account #customer_login .u-column1 form.login{background:transparent;border:0;padding:0;margin:0;min-height:0;width:auto!important;float:none!important}
.woocommerce-account #customer_login form .form-row{margin-bottom:22px}
.woocommerce-account #customer_login form label{font-size:14px;margin-bottom:9px;display:block}
.woocommerce-account #customer_login form input.input-text{min-height:58px;border:1px solid #d9dfe8;background:#fff;font-size:15px;padding:15px 18px;border-radius:6px;width:100%}
.woocommerce-account #customer_login .woocommerce-form-login{position:relative}
.woocommerce-account #customer_login .woocommerce-form-login .woocommerce-LostPassword{position:absolute;top:104px;right:0;margin:0;font-size:14px;line-height:1.2}
.woocommerce-account #customer_login .woocommerce-form-login .woocommerce-LostPassword:before{content:'Forgot password? ';font-size:14px}
.woocommerce-account #customer_login .woocommerce-form-login .woocommerce-LostPassword a{font-size:0}
.woocommerce-account #customer_login .woocommerce-form-login .woocommerce-LostPassword a:after{content:'Reset';font-size:14px}
.woocommerce-account #customer_login .woocommerce-form-login__rememberme{display:none}
.woocommerce-account #customer_login .woocommerce-form-login__submit{width:100%!important;min-height:60px;background:#adc4fa!important;color:#13213e!important;font-size:15px;border:0!important;border-radius:2px!important;margin:2px 0 18px;float:none!important}
.woocommerce-account #customer_login .fh-signup-toggle{text-align:left;font-size:14px;margin:0}
.woocommerce-account #customer_login .fh-signup-toggle a{color:inherit;text-decoration:underline}
.woocommerce-account #customer_login .u-column2{display:none!important}
.woocommerce-account #customer_login.is-registering .u-column1{display:none!important}
.woocommerce-account #customer_login.is-registering .u-column2{display:block!important;width:100%!important;float:none!important;margin:0!important;background:transparent!important;padding:0!important}
.woocommerce-account #customer_login .u-column2 h2{display:block!important;font:56px/1 Georgia,'Times New Roman',serif;letter-spacing:-.065em;text-align:center;margin:0 0 42px}
.woocommerce-account #customer_login .u-column2 form.register{background:transparent!important;border:0!important;padding:0!important;margin:0;min-height:0;width:auto!important;float:none!important}
.woocommerce-account #customer_login .u-column2 .woocommerce-form-register__submit{width:100%!important;min-height:60px;background:#adc4fa!important;color:#13213e!important;border:0!important;border-radius:2px!important;float:none!important}
.woocommerce-account #customer_login .fh-login-toggle{text-align:left;font-size:14px}
.woocommerce-account #customer_login .fh-login-toggle a{color:inherit;text-decoration:underline}
@media(max-width:760px){
.woocommerce-account #customer_login{margin-top:38px;padding:0 18px}
.woocommerce-account #customer_login .u-column1 h2,.woocommerce-account #customer_login .u-column2 h2{font-size:45px;margin-bottom:30px}
.woocommerce-account #customer_login .woocommerce-form-login .woocommerce-LostPassword{position:static;margin:-8px 0 18px;text-align:right}
}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
.f-prods,.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
.f-revs{grid-template-columns:1fr;max-width:560px;margin:0 auto}
.f-story{grid-template-columns:1fr;margin:0}
.f-story-img{min-height:320px}
.f-foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
.f-nav{display:none}
.f-burger{display:flex}
/* 页头小屏：压缩间距防止溢出（360px视口精算） */
.f-header-in{gap:8px;height:60px;padding:0 16px}
.f-logo{font-size:20px;white-space:nowrap;flex-shrink:0}
.f-burger{flex-shrink:0}
.f-icons{gap:0;flex-shrink:0}
.f-ic{width:34px;height:34px}
.f-lang{margin-right:2px;flex-shrink:0}
.f-lang a{padding:4px 8px;font-size:11px}
.f-cats{grid-template-columns:1fr}
.f-cat{aspect-ratio:16/10}
.f-sec{padding:60px 0}
.wrap{padding:0 20px}
.f-header-in{padding:0 20px}
.f-hero-in{padding:0 20px 56px}
.f-foot-grid{grid-template-columns:1fr}
.f-story-in{padding:44px 28px}
}
@media(prefers-reduced-motion:reduce){
.f-press-row{animation:none}
*{scroll-behavior:auto}
}

}

/* ---------- Fable 式商品卡片：hover 换图 + Quick Add ---------- */
.woocommerce ul.products li.product .f-card-media{
  position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--cream-2);
}
.woocommerce ul.products li.product .f-media-link{display:block;width:100%;height:100%}
.woocommerce ul.products li.product .f-media-link>img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;margin:0;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.woocommerce ul.products li.product .f-hover-img{
  position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none;
}
.woocommerce ul.products li.product .f-hover-img img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;margin:0;
}
.woocommerce ul.products li.product .f-card-info{padding:14px 20px 20px}
.woocommerce ul.products li.product .f-card-info .woocommerce-loop-product__title{padding:0 0 4px!important}
.woocommerce ul.products li.product .f-card-info .price{padding:0!important}
@media (hover:hover) {
  .woocommerce ul.products li.product:hover .f-hover-img{opacity:1}
  .woocommerce ul.products li.product:hover .f-media-link>img{transform:scale(1.05)}
  .f-quick-add{
    position:absolute;left:14px;right:14px;bottom:14px;z-index:3;
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    color:var(--ink);text-align:center;padding:13px 20px;border-radius:999px;
    font-weight:600;font-size:14px;letter-spacing:.02em;
    box-shadow:0 10px 28px rgba(33,29,23,.18);
    transform:translateY(calc(100% + 20px));opacity:0;
    transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .3s ease,background .2s,color .2s;
  }
  .woocommerce ul.products li.product:hover .f-quick-add{transform:translateY(0);opacity:1}
  .f-quick-add:hover{background:var(--ink);color:#fff}
}
@media (hover:none) {
  .f-quick-add{display:none}
}
.woocommerce ul.products li.product .f-media-link{position:relative}
.woocommerce ul.products li.product .f-hover-img{top:0;left:0;right:0;bottom:0}