:root{
 --bg-cream:#FFF8F0;
 --bg-warm:#FEF7F0;
 --accent-red:#E07A5F;
 --accent-dark:#C4674F;
 --text-dark:#2D3748;
 --text-light:#718096;
 --border:#E8DDD5;
 --gold:#D4AF37;
 --success:#48BB78;
}
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
body{
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
 background:var(--bg-cream);
 color:var(--text-dark);
 line-height:1.6;
}
.lang-switch{
 position:fixed;
 top:20px;
 right:20px;
 z-index:1000;
 display:flex;
 gap:8px;
 background:white;
 padding:8px 12px;
 border-radius:30px;
 box-shadow:0 2px 12px rgba(0,0,0,0.08);
}
.lang-switch button{
 padding:6px 14px;
 border:none;
 background:transparent;
 cursor:pointer;
 font-size:13px;
 font-weight:500;
 border-radius:20px;
 transition:all 0.3s;
}
.lang-switch button.active{
 background:var(--accent-red);
 color:white;
}
header{
 background:white;
 padding:16px 40px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 border-bottom:1px solid var(--border);
 position:sticky;
 top:0;
 z-index:100;
}
.logo{
 font-size:24px;
 font-weight:700;
 color:var(--text-dark);
 text-decoration:none;
 letter-spacing:-0.5px;
}
.logo span{
 color:var(--accent-red);
}
nav{
 display:flex;
 gap:32px;
}
nav a{
 text-decoration:none;
 color:var(--text-dark);
 font-size:14px;
 font-weight:500;
 transition:color 0.3s;
}
nav a:hover{
 color:var(--accent-red);
}
.breadcrumb{
 padding:16px 40px;
 font-size:14px;
 color:var(--text-light);
}
.breadcrumb a{
 color:var(--accent-red);
 text-decoration:none;
}
.breadcrumb a:hover{
 text-decoration:underline;
}
.btn{
 display:inline-block;
 padding:14px 36px;
 background:var(--accent-red);
 color:white;
 text-decoration:none;
 font-size:14px;
 font-weight:600;
 border-radius:8px;
 transition:all 0.3s;
 border:none;
 cursor:pointer;
}
.btn:hover{
 background:var(--accent-dark);
 transform:translateY(-2px);
 box-shadow:0 8px 20px rgba(224,122,95,0.3);
}
.btn-outline{
 background:transparent;
 border:2px solid var(--accent-red);
 color:var(--accent-red);
}
.btn-outline:hover{
 background:var(--accent-red);
 color:white;
}
.container{
 max-width:1200px;
 margin:0 auto;
 padding:0 40px;
}
.products-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
 gap:24px;
 padding:40px 0;
}
.product-card{
 background:white;
 border-radius:16px;
 overflow:hidden;
 transition:all 0.3s;
 border:1px solid var(--border);
 text-decoration:none;
 color:inherit;
 display:block;
}
.product-card:hover{
 transform:translateY(-6px);
 box-shadow:0 20px 40px rgba(0,0,0,0.08);
}
.product-card .image{
 height:260px;
 background:var(--bg-warm);
 display:flex;
 align-items:center;
 justify-content:center;
 position:relative;
 overflow:hidden;
}
.product-card .image img{
 width:100%;
 height:100%;
 object-fit:cover;
}
.product-card .badge{
 position:absolute;
 top:12px;
 left:12px;
 background:var(--accent-red);
 color:white;
 padding:4px 12px;
 font-size:11px;
 font-weight:600;
 border-radius:4px;
}
.product-card .content{
 padding:20px;
}
.product-card .category{
 font-size:11px;
 color:var(--accent-red);
 font-weight:600;
 letter-spacing:1px;
 text-transform:uppercase;
 margin-bottom:6px;
}
.product-card h3{
 font-size:16px;
 font-weight:600;
 margin-bottom:8px;
}
.product-card .price{
 font-size:20px;
 font-weight:700;
 color:var(--text-dark);
}
.product-card .price .original{
 font-size:14px;
 color:var(--text-light);
 text-decoration:line-through;
 margin-left:8px;
 font-weight:400;
}
.product-card .rating{
 display:flex;
 align-items:center;
 gap:6px;
 margin-top:8px;
 font-size:13px;
 color:var(--gold);
}
.product-detail{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:60px;
 padding:40px 0;
}
.product-gallery{
 position:relative;
}
.product-gallery .main-image{
 width:100%;
 height:500px;
 background:white;
 border-radius:16px;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
 border:1px solid var(--border);
}
.product-gallery .main-image img{
 width:100%;
 height:100%;
 object-fit:cover;
}
.product-gallery .thumbnails{
 display:flex;
 gap:12px;
 margin-top:16px;
}
.product-gallery .thumb{
 width:80px;
 height:80px;
 background:white;
 border-radius:8px;
 border:2px solid var(--border);
 cursor:pointer;
 transition:border-color 0.3s;
 overflow:hidden;
}
.product-gallery .thumb:hover,
.product-gallery .thumb.active{
 border-color:var(--accent-red);
}
.product-gallery .thumb img{
 width:100%;
 height:100%;
 object-fit:cover;
}
.product-info h1{
 font-size:32px;
 font-weight:700;
 margin-bottom:12px;
}
.product-info .tagline{
 font-size:14px;
 color:var(--accent-red);
 font-weight:600;
 letter-spacing:1px;
 margin-bottom:16px;
}
.product-info .price-block{
 margin-bottom:24px;
}
.product-info .price{
 font-size:36px;
 font-weight:700;
}
.product-info .price .original{
 font-size:20px;
 color:var(--text-light);
 text-decoration:line-through;
 margin-left:12px;
 font-weight:400;
}
.product-info .description{
 color:var(--text-light);
 margin-bottom:24px;
 line-height:1.8;
}
.product-info .specs{
 background:var(--bg-warm);
 border-radius:12px;
 padding:20px;
 margin-bottom:24px;
}
.product-info .specs h3{
 font-size:14px;
 font-weight:600;
 margin-bottom:12px;
 color:var(--text-dark);
}
.product-info .specs table{
 width:100%;
 border-collapse:collapse;
}
.product-info .specs td{
 padding:8px 0;
 border-bottom:1px solid var(--border);
 font-size:14px;
}
.product-info .specs td:first-child{
 color:var(--text-light);
 width:100px;
}
.product-info .specs td:last-child{
 font-weight:500;
}
.product-info .actions{
 display:flex;
 gap:12px;
 margin-bottom:24px;
}
.product-info .actions .btn{
 flex:1;
 text-align:center;
}
.reviews{
 padding:60px 0;
}
.reviews h2{
 font-size:28px;
 margin-bottom:24px;
}
.reviews-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:24px;
}
.review-card{
 background:white;
 border-radius:12px;
 padding:24px;
 border:1px solid var(--border);
}
.review-card .stars{
 color:var(--gold);
 font-size:16px;
 margin-bottom:12px;
}
.review-card .text{
 font-size:14px;
 line-height:1.7;
 margin-bottom:16px;
 color:var(--text-dark);
}
.review-card .author{
 font-size:13px;
 font-weight:600;
 color:var(--text-light);
}
footer{
 background:#1A1A2E;
 color:white;
 padding:60px 40px;
 margin-top:60px;
}
.footer-content{
 max-width:1200px;
 margin:0 auto;
 display:grid;
 grid-template-columns:2fr 1fr 1fr 1fr;
 gap:40px;
}
.footer-brand .logo{
 color:white;
 margin-bottom:16px;
 display:inline-block;
}
.footer-brand p{
 color:rgba(255,255,255,0.6);
 font-size:14px;
 line-height:1.7;
}
.footer-links h4{
 font-size:14px;
 font-weight:600;
 margin-bottom:16px;
}
.footer-links a{
 display:block;
 color:rgba(255,255,255,0.6);
 text-decoration:none;
 font-size:14px;
 padding:6px 0;
 transition:color 0.3s;
}
.footer-links a:hover{
 color:white;
}
.footer-bottom{
 max-width:1200px;
 margin:40px auto 0;
 padding-top:24px;
 border-top:1px solid rgba(255,255,255,0.1);
 text-align:center;
 font-size:13px;
 color:rgba(255,255,255,0.5);
}
.hero{
 background:linear-gradient(135deg,var(--bg-cream) 0%,var(--bg-warm) 100%);
 padding:80px 40px;
 text-align:center;
}
.hero h1{
 font-size:48px;
 font-weight:700;
 margin-bottom:16px;
}
.hero h1 span{
 color:var(--accent-red);
}
.hero p{
 font-size:18px;
 color:var(--text-light);
 max-width:600px;
 margin:0 auto 32px;
}
@media (max-width:768px){
 .product-detail{
 grid-template-columns:1fr;
 gap:32px;
}
 
 .reviews-grid{
 grid-template-columns:1fr;
}
 
 .footer-content{
 grid-template-columns:1fr;
 text-align:center;
}
 
 nav{
 display:none;
}
 
 .hero h1{
 font-size:32px;
}
 
 
 .product-card img,
 .product-grid img,
 .products-grid img{
 width:100% !important;
 height:auto !important;
 min-height:200px;
 object-fit:contain !important;
 background:#f5f5f5;
}
 
 
 img{
 background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
 min-height:150px;
}
 
 img[src*="leash"]{
 background:linear-gradient(135deg,#FFF8F0 0%,#E8DDD5 100%);
}
 
 img[src*="bed"]{
 background:linear-gradient(135deg,#FEF7F0 0%,#E8D5C4 100%);
}
 
 .product-card{
 padding:12px;
}
 
 .product-card > div:first-child{
 height:200px !important;
 min-height:200px;
}
 
 .hero{
 min-height:50vh;
 padding:40px 20px;
}
 
 .features-grid{
 grid-template-columns:1fr;
 gap:16px;
}
 
 .products-grid{
 grid-template-columns:1fr 1fr;
 gap:12px;
}
 
 .product-card h3{
 font-size:14px;
}
 
 .product-card .price{
 font-size:16px;
}
}
[data-lang="en"] .zh-only{display:none}
[data-lang="zh"] .en-only{display:none}
.product-card img,
.products-grid img,
.product-gallery img{
 transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.product-card:hover img,
.products-grid a:hover img{
 transform:scale(1.05);
 box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
@keyframes imageLoad{
 from{
 opacity:0;
 transform:scale(0.95);
}
 to{
 opacity:1;
 transform:scale(1);
}
}
.product-card img,
.hero img,
.product-gallery img{
 animation:imageLoad 0.5s ease-out;
}
.product-card::after{
 content:'';
 position:absolute;
 top:0;
 left:-100%;
 width:50%;
 height:100%;
 background:linear-gradient(
 90deg,
 transparent,
 rgba(255,255,255,0.3),
 transparent
 );
 transition:left 0.5s ease;
 pointer-events:none;
}
.product-card:hover::after{
 left:100%;
}
.hero{
 position:relative;
 overflow:hidden;
}
.hero img{
 transition:transform 0.5s ease;
}
.product-gallery .main-image{
 overflow:hidden;
 border-radius:16px;
 box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.product-gallery .main-image:hover img{
 transform:scale(1.02);
}
.thumb{
 transition:all 0.3s ease;
 border:2px solid transparent;
 cursor:pointer;
}
.thumb:hover{
 border-color:var(--accent-red);
 transform:translateY(-2px);
}
.thumb.active{
 border-color:var(--accent-red);
 box-shadow:0 2px 10px rgba(224,122,95,0.3);
}
img[data-src]{
 background:linear-gradient(135deg,#FFF8F0 0%,#E8DDD5 100%);
 min-height:200px;
}
img.onerror{
 background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
 display:flex;
 align-items:center;
 justify-content:center;
}
@media (max-width:768px){
 .product-card:hover img{
 transform:none;
}
 
 .product-card::after{
 display:none;
}
 
 
 .product-card:active img{
 transform:scale(0.98);
 transition:transform 0.1s ease;
}
}
@keyframes fadeInUp{
 from{
 opacity:0;
 transform:translateY(30px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}
.product-card,
.reviews-grid > div{
 animation:fadeInUp 0.6s ease-out;
 animation-fill-mode:both;
}
.product-card:nth-child(1){animation-delay:0.1s}
.product-card:nth-child(2){animation-delay:0.2s}
.product-card:nth-child(3){animation-delay:0.3s}
.product-card:nth-child(4){animation-delay:0.4s}
.product-card:nth-child(5){animation-delay:0.5s}
.btn{
 transition:all 0.3s ease;
 position:relative;
 overflow:hidden;
}
.btn:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 25px rgba(224,122,95,0.4);
}
.btn:active{
 transform:translateY(0);
}
.price{
 position:relative;
 display:inline-block;
}
.price::after{
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 width:0;
 height:2px;
 background:var(--accent-red);
 transition:width 0.3s ease;
}
.product-card:hover .price::after{
 width:100%;
}
@keyframes starShine{
 0%,100%{opacity:1}
 50%{opacity:0.7}
}
.reviews-grid > div:hover{
 transform:translateY(-5px);
 box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.footer-bottom a{
 transition:all 0.3s ease;
}
.footer-bottom a:hover{
 transform:scale(1.1);
 display:inline-block;
}
.lang-switch button{
 transition:all 0.3s ease;
}
.lang-switch button:hover{
 background:var(--accent-red);
 color:white;
}
@keyframes shimmer{
 0%{background-position:-200% 0}
 100%{background-position:200% 0}
}
.skeleton{
 background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
 background-size:200% 100%;
 animation:shimmer 1.5s infinite;
}
@media (max-width:768px){
 .product-card,
 .reviews-grid > div{
 animation:none;
}
 
 .btn:hover{
 transform:none;
}
}