:root{
  /* Chuanqi Pet Supplies — navy #0A2540 / teal #00A896 / orange #FF6B35 / trust green #27AE60.
     Component classes keep the old var names (--green = primary navy, --gold = orange CTA)
     so the whole component library recolors from here. */
  --green:#0A2540; --green-dark:#061a30; --green-light:#14456b;   /* primary navy family */
  --gold:#FF6B35; --gold-soft:#ffd9c9;                            /* CTA / accent orange */
  --teal:#00A896; --teal-dark:#00806f; --teal-soft:#d5f2ee;       /* secondary teal */
  --trust:#27AE60;                                                /* certifications / success */
  --cream:#FBF4E9; --cream-2:#FDF9F1;                             /* warm pet-scene sections */
  --ink:#2C3E50; --muted:#7F8C8D;
  --bg:#ffffff; --bg-soft:#f4f7fa; --wa:#25D366; --line:#e6ebf1;
  --orange:#FF6B35; --dark:#0A2540; --line-soft:#eef1f5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter","Open Sans",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:"Poppins","Inter",sans-serif;line-height:1.12;font-weight:800;letter-spacing:-.01em}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.gold{color:var(--gold)}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* Nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-size:1.45rem;color:var(--green);font-weight:800}
.brand .logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(150deg,var(--green),var(--teal));position:relative;flex:0 0 auto;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,168,150,.28)}
.brand .logo::before{content:"";width:26px;height:26px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M226 128c0 35-20 63-45 63s-45-28-45-63 20-63 45-63 45 28 45 63zM376 128c0 35-20 63-45 63s-45-28-45-63 20-63 45-63 45 28 45 63zM130 234c0 30-18 54-40 54s-40-24-40-54 18-54 40-54 40 24 40 54zM462 234c0 30-18 54-40 54s-40-24-40-54 18-54 40-54 40 24 40 54zM256 240c53 0 96 60 96 108 0 34-27 52-58 52-19 0-27-8-38-8s-19 8-38 8c-31 0-58-18-58-52 0-48 43-108 94-108z'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M226 128c0 35-20 63-45 63s-45-28-45-63 20-63 45-63 45 28 45 63zM376 128c0 35-20 63-45 63s-45-28-45-63 20-63 45-63 45 28 45 63zM130 234c0 30-18 54-40 54s-40-24-40-54 18-54 40-54 40 24 40 54zM462 234c0 30-18 54-40 54s-40-24-40-54 18-54 40-54 40 24 40 54zM256 240c53 0 96 60 96 108 0 34-27 52-58 52-19 0-27-8-38-8s-19 8-38 8c-31 0-58-18-58-52 0-48 43-108 94-108z'/%3E%3C/svg%3E") no-repeat center/contain}
.brand small{display:block;font-family:"Inter";font-weight:600;font-size:.6rem;letter-spacing:.02em;color:var(--muted);text-transform:none;margin-top:1px}
.brand .bt{display:flex;flex-direction:column;line-height:1.05}
nav.menu{display:flex;gap:8px;margin-left:auto}
nav.menu a{padding:9px 16px;border:1px solid var(--line);border-radius:10px;font-weight:600;font-size:.95rem;color:var(--ink);transition:.18s}
nav.menu a:hover{border-color:var(--gold)}
nav.menu a.active{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--green-dark)}
.socials{display:flex;gap:14px;align-items:center}
.socials a{color:var(--ink);display:none}  /* shown only when configured in Site Settings */
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--green);cursor:pointer}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;border-radius:12px;padding:15px 28px;font-size:1rem;cursor:pointer;border:0;transition:.18s;text-align:center;justify-content:center}
.btn-gold{background:var(--gold);color:var(--green-dark)}
.btn-gold:hover{background:#e6c14e;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-light)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-2px)}
.btn-navy{background:var(--green);color:#fff}
.btn-navy:hover{background:var(--green-light);transform:translateY(-2px)}
.btn-lg{padding:17px 34px;font-size:1.05rem}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#1faa54;transform:translateY(-2px)}
.btn-outline{background:#fff;color:var(--green);border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--gold)}

/* Hero */
.hero{background:linear-gradient(160deg,var(--green) 0%,var(--green-dark) 100%);color:#fff;position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:72px 0 92px}
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(212,175,55,.55);color:var(--gold);padding:8px 18px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.hero h1{font-size:clamp(2.6rem,5vw,4.1rem);margin:22px 0 18px}
.hero p.lead{font-size:1.18rem;color:#d9e6dd;max-width:30ch;margin-bottom:30px}
.hero-media{position:relative}
.hero-media img{border-radius:18px;width:100%;height:420px;object-fit:cover;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.float-card{position:absolute;left:-18px;bottom:-30px;background:#fff;color:var(--ink);border-radius:16px;padding:18px 22px;display:flex;align-items:center;gap:14px;box-shadow:0 20px 40px rgba(0,0,0,.2)}
.float-card .check{width:46px;height:46px;border-radius:12px;background:#eaf4ee;color:var(--green);display:grid;place-items:center;flex:0 0 auto}
.float-card b{display:block;font-family:"Poppins";font-size:1.25rem;color:var(--green)}
.float-card span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* Page header band (inner pages) */
.page-band{background:linear-gradient(160deg,var(--green) 0%,var(--green-dark) 100%);color:#fff;padding:60px 0}
.page-band h1{font-size:clamp(2.2rem,4vw,3.2rem);margin:14px 0 10px}
.page-band p{color:#d9e6dd;max-width:60ch}

/* Sections */
section.block{padding:84px 0}
.sec-head{max-width:680px;margin:0 auto 52px;text-align:center}
.sec-head h2{font-size:clamp(2rem,3.4vw,2.7rem);color:var(--green);margin:12px 0 14px}
.sec-head p{color:var(--muted);font-size:1.08rem}
.note{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-top:10px}
.bg-soft{background:var(--bg-soft)}

/* Advantage cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,71,42,.1);border-color:#d8e0d9}
.card .ic{width:56px;height:56px;border-radius:14px;background:var(--green);color:var(--gold);display:grid;place-items:center;margin-bottom:18px}
.card h3{font-size:1.3rem;color:var(--green);margin-bottom:10px}
.card p{color:var(--muted);font-size:.98rem}

/* Car cards */
.cars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.car{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.car:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,71,42,.12)}
.car .ph{position:relative;height:210px;background:#fff;padding:6px}
.car .ph img{width:100%;height:100%;object-fit:contain}
.tag{position:absolute;top:14px;left:14px;background:var(--gold);color:var(--green-dark);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:8px}
.car-body{padding:22px;display:flex;flex-direction:column;flex:1}
.car-body h3{font-size:1.2rem;color:var(--ink);margin-bottom:14px}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px;border-top:1px solid var(--line);padding-top:14px}
.specs div span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.specs div b{font-size:.92rem;color:var(--ink)}
.price-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto}
.price-row .lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.price-row .amt{font-family:"Poppins";font-size:1.7rem;color:#d92d20;font-weight:800}
.car-body .btn{width:100%;margin-top:16px;padding:12px}
.car-body .chips{display:none}  /* shown only on mobile list cards */
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px;border:1px dashed var(--line);border-radius:16px}

/* Shipping steps */
.steps{display:flex;justify-content:space-between;gap:14px;position:relative;flex-wrap:wrap}
.steps::before{content:"";position:absolute;top:28px;left:6%;right:6%;height:2px;background:var(--line);z-index:0}
.step{position:relative;z-index:1;text-align:center;flex:1;min-width:120px}
.step .num{width:56px;height:56px;border-radius:50%;background:var(--green);color:var(--gold);font-family:"Poppins";font-size:1.5rem;font-weight:800;display:grid;place-items:center;margin:0 auto 14px;border:4px solid var(--bg-soft)}
.step b{display:block;color:var(--green);font-size:1.05rem}
.ship-foot{text-align:center;margin-top:42px}
.pill{display:inline-flex;gap:10px;align-items:center;background:var(--green);color:#fff;padding:14px 26px;border-radius:999px;font-weight:700}
.pill span{color:var(--gold-soft);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}

/* Testimonials */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.review{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.review .stars{color:var(--gold);font-size:1.05rem;margin-bottom:14px;letter-spacing:2px}
.review p{color:#3a463f;font-size:.98rem;font-style:italic;margin-bottom:20px}
.review .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.review .ava{width:42px;height:42px;border-radius:50%;background:var(--green);color:var(--gold);display:grid;place-items:center;font-family:"Poppins";font-weight:800;flex:0 0 auto}
.review .who b{display:block;font-size:.95rem;color:var(--ink)}
.review .who small{color:var(--muted)}
.vbadge{margin-left:auto;font-size:.6rem;font-weight:800;letter-spacing:.06em;color:var(--green);background:#eaf4ee;padding:5px 8px;border-radius:6px;text-transform:uppercase}
.stat{grid-column:1/-1;background:var(--green);color:#fff;border-radius:18px;padding:34px;display:flex;align-items:center;gap:24px;justify-content:center;text-align:center;flex-wrap:wrap;margin-top:6px}
.stat .big{font-family:"Poppins";font-size:3rem;color:var(--gold);font-weight:800;line-height:1}
.stat p{max-width:38ch;color:#d9e6dd}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 24px;margin-bottom:14px}
details[open]{border-color:var(--gold)}
summary{list-style:none;cursor:pointer;font-family:"Poppins";font-weight:700;font-size:1.12rem;color:var(--green);padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.6rem;color:var(--gold);transition:.2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);padding:0 0 20px;font-size:.98rem}

/* CTA */
.cta{background:linear-gradient(160deg,var(--green) 0%,var(--green-dark) 100%);color:#fff;text-align:center;border-radius:24px;padding:60px 30px;margin:0 24px}
.cta h2{font-size:2.2rem;margin-bottom:14px}
.cta p{color:#d9e6dd;max-width:46ch;margin:0 auto 28px}

/* Footer */
footer{background:var(--green-dark);color:#cdd9d0;padding:56px 0 30px;margin-top:84px}
footer .brand{color:#fff;margin-bottom:16px}
footer .ft-top{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
footer p.desc{max-width:42ch;color:#a8baad}
.ft-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.ft-links a{color:#cdd9d0;font-size:.92rem}
.ft-links a:hover{color:var(--gold)}
.ft-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:22px;font-size:.86rem;color:#94a79b;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* Floating WhatsApp */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;background:var(--wa);color:#fff;display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;box-shadow:0 14px 30px rgba(37,211,102,.4);transition:.2s}
.wa-float:hover{transform:translateY(-3px)}

/* ---------- Inventory page ---------- */
.inv-layout{padding:50px 0 84px}
.inv-tools{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.inv-tools #inv-search{flex:1;min-width:220px;border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-family:inherit;font-size:.98rem}
.inv-tools #inv-search:focus,.inv-tools #inv-sort:focus{outline:0;border-color:var(--gold)}
.inv-tools #inv-sort{border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-family:inherit;font-size:.95rem;background:#fff;cursor:pointer}
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.filters button{padding:10px 20px;border:1px solid var(--line);background:#fff;border-radius:999px;font-weight:600;cursor:pointer;font-size:.92rem;color:var(--ink);transition:.15s}
.filters button:hover{border-color:var(--gold)}
.filters button.active{background:var(--green);color:#fff;border-color:var(--green)}
.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

/* ---------- Car detail page ---------- */
.detail{padding:46px 0 30px}
.detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.gallery .main-img{border-radius:18px;width:100%;height:430px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.gallery .thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.gallery .thumbs img{width:88px;height:64px;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent}
.gallery .thumbs img.active{border-color:var(--gold)}
.detail-info .badge2{display:inline-block;background:#eaf4ee;color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:8px;margin-bottom:14px}
.detail-info h1{font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--ink);margin-bottom:8px}
.detail-info .price{font-family:"Poppins";font-size:2.4rem;color:#d92d20;font-weight:800;margin:6px 0 4px}
.detail-info .price small{font-size:.8rem;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:block;font-family:"Inter"}
.spec-table{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.spec-table .cell{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.spec-table .cell span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;display:block}
.spec-table .cell b{font-size:1.05rem;color:var(--ink)}
.detail-desc{color:#3a463f;margin:8px 0 24px}
.detail-actions{display:flex;gap:12px;flex-wrap:wrap}
.pricing-box{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:30px}
.pricing-box h3{color:var(--green);font-size:1.2rem;margin-bottom:10px}
.pricing-box ul{list-style:none;color:var(--muted);font-size:.95rem}
.pricing-box li{padding:4px 0 4px 22px;position:relative}
.pricing-box li::before{content:"•";color:var(--gold);position:absolute;left:6px;font-weight:800}

/* ---------- Inquiry form (inventory + detail) ---------- */
.inquiry{background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;padding:34px}
.inquiry h3{color:var(--green);font-size:1.5rem;margin-bottom:6px}
.inquiry p.sub{color:var(--muted);margin-bottom:20px;font-size:.95rem}
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:.95rem;background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--gold)}
.field textarea{min-height:90px;resize:vertical}

/* ---------- Admin ---------- */
.admin-wrap{max-width:1000px;margin:0 auto;padding:40px 24px 80px}
.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.admin-head h1{color:var(--green);font-size:1.9rem}
.login-box{max-width:380px;margin:80px auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px}
.login-box h2{color:var(--green);margin-bottom:8px}
.login-box p{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;gap:14px;align-items:center}
.admin-card img{width:80px;height:60px;object-fit:cover;border-radius:8px;background:#eef1ee;flex:0 0 auto}
.admin-card .meta{flex:1;min-width:0}
.admin-card .meta b{display:block;color:var(--ink);font-size:1rem}
.admin-card .meta small{color:var(--muted)}
.admin-card .acts{display:flex;gap:8px}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:600;font-size:.85rem}
.icon-btn.danger{color:#b3261e;border-color:#f0c9c6}
.icon-btn.danger:hover{background:#fdeceb}
.form-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;margin-top:26px}
.form-panel h2{color:var(--green);font-size:1.4rem;margin-bottom:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:14px 26px;border-radius:12px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.2);z-index:100;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}
.toast.err{background:#b3261e}

/* ---------- Visual editor ---------- */
#edit-toggle{position:fixed;left:22px;bottom:22px;z-index:80;background:var(--green);color:#fff;border:0;padding:13px 20px;border-radius:999px;font-weight:700;font-family:"Inter";font-size:.95rem;cursor:pointer;box-shadow:0 14px 30px rgba(26,71,42,.4)}
#edit-toggle:hover{background:var(--green-light)}
#edit-bar{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--green-dark);color:#fff;display:none;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;box-shadow:0 4px 20px rgba(0,0,0,.25);flex-wrap:wrap}
#edit-bar.show{display:flex}
#edit-bar span{font-size:.95rem}
#edit-bar .edit-actions{display:flex;gap:10px}
#edit-bar button{border:0;border-radius:8px;padding:10px 18px;font-weight:700;cursor:pointer;font-family:"Inter";font-size:.9rem}
#edit-bar #edit-save{background:var(--gold);color:var(--green-dark)}
#edit-bar #edit-cancel{background:rgba(255,255,255,.15);color:#fff}
#edit-bar #edit-exit{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
body.edit-mode{padding-top:52px}
body.edit-mode [data-edit]{outline:2px dashed rgba(212,175,55,.6);outline-offset:3px;border-radius:3px;cursor:text;transition:outline .15s}
body.edit-mode [data-edit]:hover,body.edit-mode [data-edit]:focus{outline:2px solid var(--gold);background:rgba(212,175,55,.08)}
body.edit-mode [data-edit-img]{outline:3px dashed var(--gold);outline-offset:3px;cursor:pointer}
body.edit-mode [data-edit-img]::after{content:"📷 click to change"}
/* car cards: clear "edit this car" affordance */
body.edit-mode .car{position:relative;outline:2px dashed var(--gold);outline-offset:3px;cursor:pointer}
body.edit-mode .car *{pointer-events:none}
body.edit-mode .car::after{content:"✏️ Click to edit this car";position:absolute;top:12px;right:12px;background:var(--green);color:#fff;font-family:"Inter";font-size:.74rem;font-weight:700;padding:7px 12px;border-radius:8px;z-index:6;box-shadow:0 4px 12px rgba(0,0,0,.25)}
body.edit-mode .detail .gallery{position:relative}
body.edit-mode .detail .gallery::after{content:"✏️ Click photo to edit this car";position:absolute;top:12px;left:12px;background:var(--green);color:#fff;font-size:.74rem;font-weight:700;padding:7px 12px;border-radius:8px;z-index:6;pointer-events:none}

/* car edit modal */
#car-modal{position:fixed;inset:0;z-index:200;background:rgba(20,40,28,.55);display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 16px}
#car-modal.show{display:flex}
#car-modal .cm-box{background:#fff;border-radius:18px;width:100%;max-width:560px;padding:24px 26px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
#car-modal .cm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
#car-modal .cm-head b{font-family:"Poppins";font-size:1.3rem;color:var(--green)}
#car-modal #cm-close{border:0;background:#eef1ee;width:34px;height:34px;border-radius:50%;font-size:1.2rem;cursor:pointer;line-height:1}
#car-modal label{display:block;font-size:.8rem;font-weight:700;color:var(--ink);margin:12px 0 6px}
#car-modal label small{font-weight:400;color:var(--muted)}
#car-modal input,#car-modal select,#car-modal textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:.95rem;background:#fff}
#car-modal input:focus,#car-modal select:focus,#car-modal textarea:focus{outline:0;border-color:var(--gold)}
#car-modal .cm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#car-modal .cm-check{display:flex;align-items:center;gap:8px;font-weight:600;margin-top:14px}
#car-modal .cm-check input{width:auto}
#car-modal .cm-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
#car-modal .cm-thumb{position:relative}
#car-modal .cm-thumb img{width:80px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
#car-modal .cm-thumb .cm-cover{position:absolute;bottom:2px;left:2px;background:var(--gold);color:var(--green-dark);font-size:.58rem;font-weight:800;padding:2px 5px;border-radius:4px}
#car-modal .cm-thumb .cm-setcover{position:absolute;bottom:2px;left:2px;background:rgba(0,0,0,.6);color:#fff;border:0;font-size:.55rem;font-weight:700;padding:2px 5px;border-radius:4px;cursor:pointer}
#car-modal .cm-thumb .cm-del{position:absolute;top:-7px;right:-7px;background:#b3261e;color:#fff;border:0;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:13px;line-height:1;padding:0}
#car-modal .cm-noimg{color:var(--muted);font-size:.85rem;padding:8px 0}
#car-modal .cm-up{display:inline-block;background:#eef4ef;color:var(--green);border:1px dashed var(--green-light);padding:9px 16px;border-radius:10px;cursor:pointer;font-weight:700;font-size:.85rem;width:auto}
#car-modal .cm-actions{display:flex;gap:10px;margin-top:20px}
@media(max-width:560px){#car-modal .cm-row{grid-template-columns:1fr}}
body.edit-mode .wa-float,body.edit-mode #edit-toggle{display:none}

/* ---------- Mobile: horizontal list cards (like a used-car app) ---------- */
@media(max-width:600px){
  .page-band{padding:30px 0}
  .inv-layout{padding:22px 0 60px}
  .wa-float{padding:0;width:54px;height:54px;border-radius:50%;justify-content:center;gap:0;right:16px;bottom:16px}
  .wa-float .wa-label{display:none}
  .cars,.inv-grid{grid-template-columns:1fr;gap:12px}
  .car{flex-direction:row;align-items:stretch;min-height:120px}
  .car .ph{flex:0 0 132px;width:132px;height:auto;min-height:120px}
  .car .ph img{height:100%}
  .car .tag{font-size:.58rem;padding:4px 8px;top:8px;left:8px}
  .car-body{padding:12px 14px}
  .car-body h3{font-size:1rem;margin-bottom:7px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .car-body .specs{display:flex;flex-wrap:wrap;gap:0 6px;border-top:0;padding-top:0;margin-bottom:8px}
  .car-body .specs div{display:flex;align-items:center}
  .car-body .specs div span{display:none}
  .car-body .specs div b{font-size:.8rem;color:var(--muted);font-weight:600}
  .car-body .specs div:not(:last-child) b::after{content:"·";margin-left:6px;color:#c5cdc7}
  .car-body .specs div:nth-child(3){display:none}  /* condition shown as a chip instead */
  .car-body .chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
  .car-body .chips .chip{border:1px solid var(--line);border-radius:5px;padding:2px 7px;font-size:.64rem;color:var(--muted);background:#fafbfa;white-space:nowrap}
  .car-body .price-row{margin-top:auto;align-items:center}
  .car-body .price-row .amt{font-size:1.4rem}
  .car-body .price-row .lbl{font-size:.6rem}
  .car-body .btn{display:none}
}

/* Lightbox (car detail full-size photo viewer) */
.detail .main-img{cursor:zoom-in}
#lightbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center}
#lightbox.show{display:flex}
#lightbox .lb-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px}
#lightbox .lb-close{position:absolute;top:16px;right:24px;background:none;border:0;color:#fff;font-size:2.6rem;cursor:pointer;line-height:1}
#lightbox .lb-prev,#lightbox .lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:0;color:#fff;font-size:2.4rem;width:52px;height:74px;cursor:pointer;border-radius:8px}
#lightbox .lb-prev:hover,#lightbox .lb-next:hover{background:rgba(255,255,255,.28)}
#lightbox .lb-prev{left:16px}
#lightbox .lb-next{right:16px}
@media(max-width:560px){#lightbox .lb-prev,#lightbox .lb-next{width:40px;height:60px;font-size:1.8rem}}

/* Responsive */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding:56px 0 80px}
  .hero-media{order:-1}
  .grid3,.cars,.reviews,.inv-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr;gap:28px}
  .spec-table,.form-row,.admin-grid{grid-template-columns:1fr}
  footer .ft-top{grid-template-columns:1fr}
  nav.menu,.socials{display:none}
  nav.menu.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:#fff;padding:14px 24px;border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(0,0,0,.08)}
  .nav-toggle{display:block}
  .steps::before{display:none}
}

/* ============ Live chat inquiry widget ============ */
.chat-launcher{position:fixed;right:18px;bottom:18px;z-index:90;width:60px;height:60px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;cursor:pointer;border:0;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:.18s}
.chat-launcher:hover{background:var(--green-dark);transform:translateY(-2px)}
.chat-launcher svg{width:30px;height:30px}
.chat-launcher.hidden{display:none}
.chat-launcher .nudge{position:absolute;top:-8px;right:-4px;background:var(--orange);color:#fff;font-size:11px;font-weight:800;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
.chat-panel{position:fixed;right:18px;bottom:18px;z-index:95;width:360px;max-width:calc(100vw - 28px);height:540px;max-height:calc(100vh - 36px);background:#fff;border-radius:14px;box-shadow:0 20px 54px rgba(0,0,0,.32);display:none;flex-direction:column;overflow:hidden}
.chat-panel.open{display:flex}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.chat-head .ava{width:46px;height:46px;border-radius:50%;background:#111;display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.chat-head .ava .crown{width:30px;height:24px;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7l4 4 6-7 6 7 4-4v11H2z'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7l4 4 6-7 6 7 4-4v11H2z'/%3E%3C/svg%3E") no-repeat center/contain}
.chat-head .nm{font-weight:700;font-size:16px;color:var(--ink);line-height:1.2}
.chat-head .nm small{display:block;font-weight:400;font-size:11px;color:#3ca860}
.chat-head .min{margin-left:auto;background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.chat-body{flex:1;overflow-y:auto;padding:16px;background:#fff;display:flex;flex-direction:column;gap:9px}
.chat-time{align-self:center;background:#9aa0a6;color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px}
.chat-msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.5;word-break:break-word}
.chat-msg.bot{align-self:flex-start;background:#eef0f2;color:var(--ink);border-bottom-left-radius:4px}
.chat-msg.me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
.chat-wa{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:var(--wa);color:#fff;font-size:13px;font-weight:700;padding:8px 14px;border-radius:20px;margin-top:2px}
.chat-wa svg{width:16px;height:16px}
.chat-foot{display:flex;align-items:center;gap:6px;padding:10px 12px;border-top:1px solid var(--line-soft);flex:0 0 auto}
.chat-foot input{flex:1;border:0;background:#f1f3f4;border-radius:22px;padding:11px 16px;font:inherit;font-size:14px;outline:0;color:var(--ink)}
.chat-foot input:focus{background:#eaecee}
.chat-foot .send{background:none;border:0;color:var(--green);cursor:pointer;display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto}
.chat-foot .send:hover{color:var(--green-dark)}
.chat-foot .send svg{width:26px;height:26px}
@media(max-width:480px){.chat-panel{right:8px;left:8px;bottom:8px;width:auto;height:calc(100vh - 16px);max-height:none}}
body.edit-mode .chat-launcher{display:none}

/* ============ Language switcher (i18n.js) ============ */
.lang-switch{display:flex;align-items:center;margin-left:6px}
.lang-select{font:600 .9rem "Open Sans",sans-serif;color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;cursor:pointer;max-width:160px;background:#fff;outline:0}
.lang-select:hover,.lang-select:focus{border-color:var(--green)}
@media(max-width:900px){.lang-switch{margin-left:auto;margin-right:6px}}
html[dir="rtl"]{direction:rtl}

/* ==================================================================
   Chuanqi Pet Supplies — home & B2B components (added on top of base)
   ================================================================== */

/* nav CTA pill (Get a Quote) */
nav.menu a.nav-cta,.nav-quote{background:var(--gold);color:#fff!important;border-color:var(--gold)!important}
nav.menu a.nav-cta:hover,.nav-quote:hover{background:#ff5a1f;border-color:#ff5a1f!important}
.nav-inner .menu{gap:4px}
nav.menu a{font-size:.9rem;padding:8px 12px}

/* ---------- Pet hero (warm scene, dual-channel) ---------- */
.phero{background:radial-gradient(120% 130% at 78% 15%,var(--cream) 0%,var(--cream-2) 42%,#fff 100%);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phero-inner{display:grid;grid-template-columns:1.02fr 1fr;gap:52px;align-items:center;padding:56px 0 66px}
.phero .kick{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold);color:var(--gold);background:#fff;padding:7px 16px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.phero .kick .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.phero .wordmark{font-family:"Poppins";font-size:clamp(2.3rem,4vw,3.1rem);color:var(--green);line-height:1.05;margin:20px 0 6px}
.phero h1{font-size:clamp(1.7rem,3vw,2.35rem);color:var(--ink);margin:0 0 12px}
.phero h1 .hl{color:var(--teal)}
.phero .sub{color:var(--muted);font-size:1.02rem;max-width:46ch;margin-bottom:22px}
.phero .sub b{color:var(--ink)}
.hstats{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 28px}
.hstats .hs b{font-family:"Poppins";font-size:1.7rem;color:var(--green);display:block;line-height:1}
.hstats .hs span{font-size:.74rem;color:var(--muted);font-weight:600}
.hstats .hs .ico{color:var(--teal)}
.dual-cta{display:flex;gap:14px;flex-wrap:wrap}
.dual-cta .btn{flex:1;min-width:220px}
.btn-outnavy{background:#fff;color:var(--green);border:1.5px solid var(--green)}
.btn-outnavy:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.phero-media{position:relative}
.phero-media>img{border-radius:20px;width:100%;height:440px;object-fit:cover;box-shadow:0 26px 54px rgba(10,37,64,.22)}
.hchips{position:absolute;top:24px;right:-6px;display:flex;flex-direction:column;gap:10px}
.hchip{background:rgba(255,255,255,.96);backdrop-filter:blur(4px);border-radius:12px;padding:9px 14px;display:flex;align-items:center;gap:9px;box-shadow:0 8px 22px rgba(10,37,64,.14);font-size:.8rem}
.hchip .ci{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.hchip b{display:block;font-family:"Poppins";font-size:.86rem;color:var(--green);line-height:1}
.hchip span{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
@media(max-width:900px){.phero-inner{grid-template-columns:1fr;padding:40px 0 50px}.phero-media{order:-1}.hchips{position:static;flex-direction:row;flex-wrap:wrap;margin-top:14px}.phero-media>img{height:300px}}

/* ---------- section head w/ side action link ---------- */
.sec-head.left{text-align:left;margin:0 0 30px;max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sec-head.left .st{max-width:640px}
.sec-head.left h2{margin:6px 0 0}
.sec-head .eyebrow.teal{color:var(--teal)}
.sec-link{color:var(--teal);font-weight:700;font-size:.95rem;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.sec-link:hover{color:var(--teal-dark)}

/* ---------- 6 advantage cards (3x2) ---------- */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.adv{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;transition:.2s}
.adv:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(10,37,64,.09);border-color:#d9e2ec}
.adv .ai{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:15px;color:#fff}
.adv h3{font-size:1.12rem;color:var(--green);margin-bottom:8px}
.adv p{color:var(--muted);font-size:.92rem}
.bg-t1{background:var(--teal)}.bg-t2{background:var(--gold)}.bg-t3{background:var(--green)}
.bg-t4{background:var(--trust)}.bg-t5{background:var(--teal-dark)}.bg-t6{background:#3b6fb0}

/* ---------- product category image cards ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.catc{position:relative;border-radius:16px;overflow:hidden;height:270px;display:flex;align-items:flex-end;box-shadow:0 8px 24px rgba(10,37,64,.08);border:1px solid var(--line)}
.catc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.35s}
.catc:hover img{transform:scale(1.06)}
.catc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,37,64,.82) 0%,rgba(10,37,64,.15) 55%,transparent 100%)}
.catc .cc{position:relative;z-index:2;padding:20px;color:#fff;width:100%}
.catc .cc h3{color:#fff;font-size:1.2rem;margin-bottom:2px}
.catc .cc .en{font-size:.78rem;opacity:.85;letter-spacing:.04em}
.catc .cc .explore{margin-top:12px;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#fff;font-weight:700;font-size:.8rem;padding:7px 14px;border-radius:8px}
.catc:nth-child(2) .explore{background:var(--teal)}
.catc:nth-child(3) .explore{background:var(--trust)}
.catc:nth-child(4) .explore{background:#3b6fb0}
@media(max-width:900px){.cat-grid{grid-template-columns:1fr 1fr}.catc{height:210px}}

/* ---------- sourcing 8-step process (on cream card) ---------- */
.proc-card{background:linear-gradient(135deg,var(--cream) 0%,var(--cream-2) 100%);border:1px solid #f0e6d4;border-radius:22px;padding:44px 34px}
.proc{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;position:relative}
.proc::before{content:"";position:absolute;top:30px;left:5%;right:5%;height:2px;background:#e7dcc6;z-index:0}
.pstep{text-align:center;position:relative;z-index:1}
.pstep .pn{width:60px;height:60px;border-radius:16px;background:#fff;border:2px solid var(--gold);color:var(--gold);display:grid;place-items:center;margin:0 auto 12px;position:relative}
.pstep .pn .num{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-family:"Poppins";font-size:.72rem;font-weight:800;display:grid;place-items:center}
.pstep b{display:block;font-size:.9rem;color:var(--green);line-height:1.2}
.pstep span{font-size:.7rem;color:var(--muted)}
@media(max-width:900px){.proc{grid-template-columns:repeat(2,1fr);gap:22px 10px}.proc::before{display:none}}

/* ---------- about / factory strength ---------- */
.fact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:center}
.fact-txt p{color:var(--muted);margin-bottom:18px}
.certs{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0}
.certb{border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:center;min-width:78px;background:#fff}
.certb b{display:block;font-family:"Poppins";color:var(--trust);font-size:1rem;line-height:1}
.certb span{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.fact-photos{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:120px;gap:12px}
.fact-photos .big{grid-column:1;grid-row:1/3}
.fact-photos figure{position:relative;border-radius:12px;overflow:hidden;margin:0}
.fact-photos figure img{width:100%;height:100%;object-fit:cover}
.fact-photos figure figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(10,37,64,.8));color:#fff;font-size:.66rem;padding:14px 8px 6px;font-weight:600}
@media(max-width:900px){.fact-grid{grid-template-columns:1fr}.fact-photos{grid-template-columns:1fr 1fr;grid-auto-rows:110px}.fact-photos .big{grid-column:1;grid-row:auto}}

/* ---------- OEM/ODM customization cards ---------- */
.oem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.oemc{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;transition:.2s}
.oemc:hover{border-color:var(--teal);box-shadow:0 12px 30px rgba(0,168,150,.1)}
.oemc .oi{width:44px;height:44px;border-radius:11px;background:var(--teal-soft);color:var(--teal-dark);display:grid;place-items:center;flex:0 0 auto}
.oemc h3{font-size:1.02rem;color:var(--green);margin-bottom:5px}
.oemc p{color:var(--muted);font-size:.86rem}
@media(max-width:900px){.grid6,.oem-grid{grid-template-columns:1fr}}

/* ---------- resource + inquiry block ---------- */
.ri-grid{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:26px;align-items:stretch}
.res-col h3,.inq-col h3{color:var(--green);font-size:1.2rem;margin-bottom:4px}
.res-col .en,.inq-col .en{font-size:.72rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:16px;display:block}
.res-list{display:flex;flex-direction:column;gap:10px}
.res-item{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:.15s}
.res-item:hover{border-color:var(--teal);transform:translateX(3px)}
.res-item .ri-ic{width:38px;height:38px;border-radius:10px;background:var(--cream);color:var(--gold);display:grid;place-items:center;flex:0 0 auto}
.res-item b{display:block;font-size:.92rem;color:var(--ink)}
.res-item small{color:var(--muted);font-size:.76rem}
.inq-col{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.contact-rows{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.crow{display:flex;gap:12px;align-items:center}
.crow .cic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.crow b{display:block;font-size:.9rem;color:var(--ink)}
.crow small{color:var(--muted);font-size:.76rem}
.inq-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inq-form .full{grid-column:1/-1}
.inq-form label{font-size:.76rem;font-weight:700;color:var(--ink);display:block;margin-bottom:4px}
.inq-form input,.inq-form select,.inq-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:.9rem;background:#fff;box-sizing:border-box}
.inq-form input:focus,.inq-form select:focus,.inq-form textarea:focus{outline:0;border-color:var(--teal)}
.promo{background:linear-gradient(155deg,var(--green),var(--green-light));color:#fff;border-radius:18px;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.promo h3{color:#fff;font-size:1.35rem;line-height:1.25;margin-bottom:8px}
.promo p{color:#c5d6ea;font-size:.9rem}
.promo .pimg{border-radius:14px;overflow:hidden;margin-top:18px;height:150px}
.promo .pimg img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.ri-grid{grid-template-columns:1fr}.inq-form{grid-template-columns:1fr 1fr}}

/* footer multi-column */
.ft-cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.ft-cols h4{color:#fff;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.ft-cols .col a{display:block;color:#a7bcd4;font-size:.86rem;padding:4px 0}
.ft-cols .col a:hover{color:var(--gold)}
@media(max-width:900px){.ft-cols{grid-template-columns:1fr 1fr}}

/* trust badge strip under hero */
.trust-strip{background:var(--green);color:#cfe0f0}
.trust-strip .wrap{display:flex;justify-content:space-around;align-items:center;gap:20px;padding:16px 24px;flex-wrap:wrap}
.trust-strip .ts{display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600}
.trust-strip .ts svg{color:var(--gold);flex:0 0 auto}

/* ---------- Sourcing: 3-tier packages ---------- */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.pkg{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;position:relative}
.pkg.pop{border:2px solid var(--gold);box-shadow:0 20px 44px rgba(255,107,53,.14)}
.pkg .ptag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:8px}
.pkg h3{color:var(--green);font-size:1.35rem;margin-bottom:4px}
.pkg .who{color:var(--muted);font-size:.85rem;margin-bottom:16px;min-height:38px}
.pkg .pprice{font-family:"Poppins";font-size:1.4rem;color:var(--teal);margin-bottom:18px}
.pkg ul{list-style:none;margin:0 0 22px;flex:1}
.pkg li{position:relative;padding:8px 0 8px 26px;color:var(--ink);font-size:.92rem;border-bottom:1px solid var(--line-soft)}
.pkg li::before{content:"✓";position:absolute;left:0;color:var(--trust);font-weight:800}
.pkg li.off{color:#b8c0c8}.pkg li.off::before{content:"–";color:#cbd2d9}
@media(max-width:900px){.pkgs{grid-template-columns:1fr}}

/* ---------- About: story + mission ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.story .simg{border-radius:18px;overflow:hidden;height:380px}
.story .simg img{width:100%;height:100%;object-fit:cover}
.mission{background:linear-gradient(155deg,var(--green),var(--green-light));color:#fff;border-radius:22px;padding:48px;text-align:center}
.mission h2{color:#fff;font-size:1.9rem;margin-bottom:12px}
.mission p{color:#c5d6ea;max-width:60ch;margin:0 auto}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.val{background:rgba(255,255,255,.08);border-radius:14px;padding:22px}
.val b{display:block;font-family:"Poppins";color:var(--gold-soft);font-size:1.05rem;margin-bottom:6px}
.val span{color:#c5d6ea;font-size:.88rem}
@media(max-width:900px){.story{grid-template-columns:1fr}.mission{padding:32px 22px}.vals{grid-template-columns:1fr}}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.contact-info .cbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:16px}
.contact-info .cbox h3{color:var(--green);font-size:1.1rem;margin-bottom:14px}
.cbig{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.cbig:last-child{border:0}
.cbig .ci{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.cbig b{display:block;color:var(--ink);font-size:.95rem}
.cbig small{color:var(--muted);font-size:.85rem}
.cform{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}
.cform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform .fld{margin-bottom:14px}
.cform label{display:block;font-size:.78rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.cform input,.cform select,.cform textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-size:.92rem;background:#fff;box-sizing:border-box}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;border-color:var(--teal)}
@media(max-width:900px){.contact-grid,.cform .grid2{grid-template-columns:1fr}}

/* ==================================================================
   WARM THEME OVERRIDE — match the client mockup (cream / terracotta /
   espresso / teal-green / pastel category tiles). Placed last so it wins.
   ================================================================== */
:root{
  --green:#3A332B; --green-dark:#2A251E; --green-light:#55493A;   /* warm espresso (headings/dark) */
  --gold:#E67E3B; --gold-soft:#F6E6D5;                             /* terracotta CTA */
  --teal:#2EA98B; --teal-dark:#23896f; --teal-soft:#dcf1ea;        /* trust green */
  --trust:#2EA98B;
  --cream:#FBF3E5; --cream-2:#FDF8EF; --cream-3:#F6ECDA;
  --ink:#3A332B; --muted:#8C8172;
  --bg:#ffffff; --bg-soft:#FBF6EC; --wa:#25D366; --line:#ede3d2; --line-soft:#f2ead9;
  --orange:#E67E3B; --dark:#3A332B;
}
body{color:var(--ink)}
.eyebrow{color:#a89a83}                 /* muted gray eyebrows like the mockup */
.eyebrow.teal{color:var(--teal)}
.gold{color:var(--gold)}

/* brand mark warm */
.brand .logo{background:linear-gradient(150deg,#E67E3B,#f0a15f);box-shadow:0 4px 12px rgba(230,126,59,.28)}

/* nav: borderless text links, orange active, orange CTA pill */
.nav-inner .menu{gap:2px}
nav.menu a{border:0;background:transparent;color:#4a4238;font-weight:600;padding:9px 13px;border-radius:8px}
nav.menu a:hover{background:var(--cream-3);color:var(--green)}
nav.menu a.active{background:transparent;color:var(--gold);border:0}
nav.menu a.nav-cta,.nav-quote{background:var(--gold)!important;color:#fff!important;border:0!important;border-radius:999px;padding:10px 20px}
nav.menu a.nav-cta:hover{background:#d56d2a!important;color:#fff!important}

/* buttons */
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#d56d2a;transform:translateY(-2px)}
.btn-navy{background:var(--green);color:#fff}
.btn-navy:hover{background:var(--green-light)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-dark)}
.btn-outnavy{background:#fff;color:#6b5b47;border:1.5px solid #d8c7ac}
.btn-outnavy:hover{background:var(--green);color:#fff;border-color:var(--green)}
.btn-outline{background:#fff;color:var(--green);border:1px solid var(--line)}

/* hero warm */
.phero{background:radial-gradient(125% 135% at 80% 12%,#FBEEDA 0%,#FCF5E9 46%,#fff 100%);border-bottom:1px solid var(--line-soft)}
.phero .kick{border-color:#e6b98f;color:#c96a2e;background:#fff}
.phero .kick .dot{background:var(--gold)}
.phero .wordmark{color:#3a332b}
.phero h1 .hl{color:var(--gold)}
.hstats .hs b{color:var(--green)}
.phero-media>img{box-shadow:0 26px 54px rgba(120,86,45,.22)}
.hchip{box-shadow:0 8px 22px rgba(120,86,45,.14)}
.hchip .ci.bg-t1{background:var(--teal)}
.hchip .ci.bg-t2{background:var(--gold)}
.hchip .ci.bg-t3{background:#6b5b47}
.hchip .ci.bg-t6{background:#5b87c4}

/* trust strip -> light warm (mockup has no dark bar) */
.trust-strip{background:var(--cream-3);color:#7c7266;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.trust-strip .ts svg{color:var(--gold)}

/* advantage icons -> soft tint + colored line icon */
.adv{border-color:var(--line)}
.adv:hover{box-shadow:0 16px 36px rgba(120,86,45,.1);border-color:#e6d8c1}
.adv h3{color:var(--green)}
.adv .ai{color:#fff}
.adv .ai.bg-t1{background:#e0f2ec;color:var(--teal)}
.adv .ai.bg-t2{background:#fce7d8;color:var(--gold)}
.adv .ai.bg-t3{background:#eef2e6;color:#6f9350}
.adv .ai.bg-t4{background:#e2f1e8;color:#2f9e63}
.adv .ai.bg-t5{background:#e2efec;color:var(--teal-dark)}
.adv .ai.bg-t6{background:#e8eff8;color:#5b87c4}

/* section side-link teal */
.sec-link{color:var(--teal)} .sec-link:hover{color:var(--teal-dark)}

/* CATEGORY CARDS -> pastel tiles, dark text, colored explore pill */
.cat-grid .catc{border:1px solid var(--line)}
.catc:nth-child(1){background:#F3E4D0}
.catc:nth-child(2){background:#E1EAD6}
.catc:nth-child(3){background:#D9E9F0}
.catc:nth-child(4){background:#E7E0F0}
.catc img{object-fit:cover}
.catc::after{background:linear-gradient(to top,rgba(255,255,255,.94) 0%,rgba(255,255,255,.55) 30%,transparent 62%)}
.catc .cc{color:#3a332b}
.catc .cc h3{color:#3a332b}
.catc .cc .en{color:#7c7266;opacity:1}
.catc .cc .explore{color:#fff}
.catc:nth-child(1) .explore{background:var(--gold)}
.catc:nth-child(2) .explore{background:#5a9c5f}
.catc:nth-child(3) .explore{background:#5b87c4}
.catc:nth-child(4) .explore{background:#8f7bc0}

/* SOURCING PROCESS -> cream card + tan/brown badges */
.proc-card{background:linear-gradient(135deg,#FBF1DF 0%,#FDF8EF 100%);border:1px solid #f0e3cd}
.proc::before{background:#e8d8ba}
.pstep .pn{background:#EFE0C4;border:2px solid #e3cfa5;color:#9a6f3b}
.pstep .pn .num{background:#9a6f3b;color:#fff}
.pstep b{color:var(--green)}

/* cert badges -> round seals */
.certb{border-radius:50%;width:74px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--teal-soft);background:#fff}
.certb b{color:var(--teal);font-size:.95rem}
.certb span{color:var(--muted)}

/* OEM cards */
.oemc .oi{background:#fce7d8;color:var(--gold)}
.oemc:hover{border-color:var(--gold);box-shadow:0 12px 30px rgba(230,126,59,.12)}
.oemc h3{color:var(--green)}

/* factory captions warm */
.fact-photos figure figcaption{background:linear-gradient(transparent,rgba(58,51,43,.82))}

/* resource + inquiry */
.res-item .ri-ic{background:var(--cream-3);color:var(--gold)}
.res-item:hover{border-color:var(--gold)}
.res-col h3,.inq-col h3{color:var(--green)}
.inq-form input:focus,.inq-form select:focus,.inq-form textarea:focus{border-color:var(--gold)}

/* PROMO panel -> light warm card (mockup) not dark */
.promo{background:linear-gradient(155deg,#F3E7D2,#F8F0E1);color:#4a4238}
.promo h3{color:#3a332b}
.promo p{color:#7c7266}
.promo .pimg{box-shadow:0 8px 20px rgba(120,86,45,.14)}

/* inner-page banners -> warm cream (not dark navy) */
.page-band{background:radial-gradient(120% 140% at 85% 10%,#FBEEDA 0%,#FCF5E9 55%,#F8F0E1 100%);color:#3a332b;border-bottom:1px solid var(--line-soft)}
.page-band h1{color:#3a332b}
.page-band p{color:#7c7266}
.page-band .eyebrow{color:#b98a4e!important}

/* CTA band (sourcing/post) -> warm espresso */
.cta{background:linear-gradient(155deg,#4a4034,#3a332b)}
.mission{background:linear-gradient(155deg,#4a4034,#3a332b)}
.mission .val b{color:#f0c79b}

/* section headings warm */
.sec-head h2,.card h3,.pkg h3,.story h2{color:var(--green)}
.pkg.pop{border-color:var(--gold);box-shadow:0 20px 44px rgba(230,126,59,.14)}
.pkg .ptag{background:var(--gold)}
.pkg .pprice{color:var(--teal)}

/* FOOTER -> warm espresso (premium), links warm */
footer{background:#2A251E}
footer .ft-cols .col a{color:#c4b6a2}
footer .ft-cols .col a:hover{color:var(--gold)}
footer .ft-cols h4{color:#fff}

/* filters + forms accent */
.filters button.active{background:var(--green);border-color:var(--green)}
.filters button:hover{border-color:var(--gold)}
.inv-tools #inv-search:focus,.inv-tools #inv-sort:focus{border-color:var(--gold)}
.car:hover{box-shadow:0 18px 40px rgba(120,86,45,.12)}
.tag{background:var(--gold);color:#fff}
.cform input:focus,.cform textarea:focus,.cform select:focus,.contact-info .cbox{border-color:var(--line)}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--gold)}
.chat-launcher{background:var(--gold)}.chat-launcher:hover{background:#d56d2a}
.wa-float{background:var(--wa)}

/* category tiles: stronger pastel character + readable text band */
.catc{position:relative}
.catc img{height:64%;top:0;bottom:auto;object-fit:cover}
.catc::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;opacity:.14}
.catc:nth-child(1)::before{background:#E6813B}.catc:nth-child(2)::before{background:#5a9c5f}
.catc:nth-child(3)::before{background:#5b87c4}.catc:nth-child(4)::before{background:#8f7bc0}
.catc::after{top:56%;background:linear-gradient(to top,var(--tint,#fff) 0%,var(--tint,#fff) 62%,transparent 100%)}
.catc:nth-child(1){--tint:#F3E4D0}.catc:nth-child(2){--tint:#E1EAD6}
.catc:nth-child(3){--tint:#D9E9F0}.catc:nth-child(4){--tint:#E7E0F0}
.catc .cc{padding:0 20px 20px}
.catc .cc h3{font-size:1.15rem}

/* ===== category cards v2: stacked (image top, clean label bar below) ===== */
.cat-grid .catc{display:flex;flex-direction:column;height:auto;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(120,86,45,.07)}
.cat-grid .catc img{position:static;width:100%;height:190px;object-fit:cover}
.cat-grid .catc::before{content:"";position:static;display:block;height:5px;opacity:1;mix-blend-mode:normal}
.cat-grid .catc:nth-child(1)::before{background:var(--gold)}
.cat-grid .catc:nth-child(2)::before{background:#5a9c5f}
.cat-grid .catc:nth-child(3)::before{background:#5b87c4}
.cat-grid .catc:nth-child(4)::before{background:#8f7bc0}
.cat-grid .catc::after{display:none}
.cat-grid .catc .cc{position:static;padding:16px 18px 18px;display:flex;flex-direction:column;gap:2px}
.cat-grid .catc .cc h3{color:#3a332b;font-size:1.12rem;margin:0}
.cat-grid .catc .cc .en{color:#8c8172;font-size:.78rem;margin-bottom:10px}
.cat-grid .catc .cc .explore{align-self:flex-start;color:#fff;font-size:.8rem;padding:7px 14px;border-radius:8px}

/* ===== hero v2: bigger, immersive, less empty ===== */
.phero-inner{grid-template-columns:1fr 1.08fr;gap:44px;padding:52px 0 60px;align-items:center}
.phero .wordmark{font-size:clamp(2.6rem,4.6vw,3.7rem);margin:18px 0 8px}
.phero h1{font-size:clamp(1.8rem,3vw,2.5rem)}
.phero .sub{font-size:1.05rem;max-width:48ch}
.phero-media>img{height:540px;border-radius:22px;object-fit:cover}
.hchips{top:auto;bottom:24px;right:-10px}
@media(max-width:900px){.phero-media>img{height:340px}.phero-inner{padding:36px 0 44px}}

/* ============================================================
   DESIGNER POLISH v4 — professional type, full-bleed hero,
   refined spacing/shadows (close the gap to the reference).
   ============================================================ */
h1,h2,h3,.brand,.wordmark,.hs b,.amt,.stat .big,.pn,.num,.certb b{font-family:"Poppins","Inter",sans-serif;letter-spacing:-.02em}
body{font-family:"Inter",sans-serif;letter-spacing:-.005em}
.eyebrow{letter-spacing:.16em;font-weight:600}

/* hero: full-bleed image blended into the cream */
.phero{position:relative;overflow:hidden}
.phero-inner{display:block;padding:62px 0 72px;min-height:560px}
.phero-inner>div:first-child{max-width:520px;position:relative;z-index:3}
.phero .wordmark{font-weight:800;letter-spacing:-.03em}
.phero-media{position:absolute;top:0;right:0;bottom:0;width:52vw;max-width:900px;margin:0;z-index:1}
.phero-media>img{width:100%;height:100%;border-radius:0;box-shadow:none;object-fit:cover;object-position:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%);mask-image:linear-gradient(to right,transparent 0,#000 24%)}
.hchips{position:absolute;top:50%;transform:translateY(-50%);right:26px;left:auto;bottom:auto;z-index:4;flex-direction:column}
.hchip{background:rgba(255,255,255,.94);backdrop-filter:blur(6px);box-shadow:0 10px 26px rgba(120,86,45,.18);padding:10px 15px}
.dual-cta .btn{box-shadow:0 10px 24px rgba(230,126,59,.22)}
.btn-outnavy{box-shadow:none}
@media(max-width:900px){
  .phero-inner{display:block;padding:30px 0 38px;min-height:0}
  .phero-inner>div:first-child{max-width:none}
  .phero-media{position:static;width:auto;max-width:none;margin-top:22px;height:300px}
  .phero-media>img{-webkit-mask-image:none;mask-image:none;border-radius:18px}
  .hchips{position:static;transform:none;flex-direction:row;flex-wrap:wrap;margin-top:12px}
}

/* softer premium cards & shadows */
.adv,.oemc,.pkg,.review,.card{border-radius:18px}
.adv{box-shadow:0 4px 18px rgba(120,86,45,.05)}
.adv:hover{box-shadow:0 18px 40px rgba(120,86,45,.1)}
.adv .ai{border-radius:14px;width:52px;height:52px}
.cat-grid .catc{border-radius:18px;box-shadow:0 6px 22px rgba(120,86,45,.08)}
.cat-grid .catc:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(120,86,45,.14);transition:.22s}
section.block{padding:76px 0}
.sec-head{margin-bottom:44px}
.sec-head h2{letter-spacing:-.02em}

/* nav polish */
.brand .bt small{color:#a89a83;font-weight:500;letter-spacing:0}
nav.menu a{font-weight:500}
nav.menu a.nav-cta{font-weight:600;box-shadow:0 8px 20px rgba(230,126,59,.24)}

/* ============================================================
   BILINGUAL (中英对照) THEME — faithful to the reference mockup
   PetSourcing.co · Chinese-primary + English secondary
   ============================================================ */
body{font-family:"Inter","Noto Sans SC",sans-serif}
h1,h2,h3,.brand,.wordmark{font-family:"Poppins","Noto Sans SC",sans-serif}
.zh{font-family:"Noto Sans SC","Poppins",sans-serif}

/* bilingual section heading */
.bihead{text-align:center;max-width:760px;margin:0 auto 42px}
.bihead .zh{display:block;font-size:clamp(1.6rem,2.8vw,2.15rem);font-weight:800;color:#3a332b;letter-spacing:0;line-height:1.2}
.bihead .en{display:block;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:#b3a68f;font-weight:600;margin-top:7px}
.bihead p.desc{color:#8c8172;margin-top:12px;font-size:1rem}
.headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.headrow .bihead{text-align:left;margin:0}
.headrow .more{color:var(--teal);font-weight:600;font-size:.9rem;white-space:nowrap}
.headrow .more .en{font-size:.68rem;color:#b3a68f;letter-spacing:.1em;display:block;text-transform:uppercase}

/* nav — bilingual stacked, PetSourcing.co brand */
.nav-inner{height:78px}
.brand .logo{width:44px;height:44px}
.brand .bt>span:first-child{font-size:1.28rem;font-weight:800;color:#3a332b;line-height:1.05}
.brand .bt small{font-size:.58rem;color:#a89a83;font-weight:500}
nav.menu{gap:0}
nav.menu a{display:flex;flex-direction:column;align-items:center;line-height:1.12;padding:6px 11px;gap:1px;border-radius:8px}
nav.menu a>span:first-child,nav.menu a{font-size:.86rem;font-weight:600;color:#4a4238}
nav.menu a .en{font-size:.58rem;color:#a89a83;font-weight:500;letter-spacing:.02em;text-transform:none}
nav.menu a.active>span:first-child,nav.menu a.active{color:var(--gold)}
nav.menu a.nav-cta{background:var(--gold)!important;border-radius:999px;padding:9px 18px;color:#fff!important}
nav.menu a.nav-cta .en{color:rgba(255,255,255,.85)}
nav.menu a.nav-cta:hover{background:#d56d2a!important}

/* bilingual card titles */
.adv h3 .en,.oemc h3 .en,.pstep b .en,.catc .cc h3 .en,.hchip b .en,.certb .en2{display:block;font-weight:500;letter-spacing:.01em}
.adv h3 .en,.oemc h3 .en{font-size:.72rem;color:#a89a83;margin-top:2px}
.pstep b .en{font-size:.62rem;color:#a89a83;margin-top:1px}
.adv h3,.oemc h3{line-height:1.25}

/* category cards — overlay bilingual label (lifestyle images) */
.cat-grid .catc{display:block;height:270px;position:relative;border-radius:18px;overflow:hidden}
.cat-grid .catc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-grid .catc::before{position:absolute;inset:0;height:100%;opacity:1;mix-blend-mode:normal;background:linear-gradient(to top,rgba(40,34,26,.72) 0%,rgba(40,34,26,.12) 46%,transparent 72%)}
.cat-grid .catc::after{display:none}
.cat-grid .catc .cc{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2;display:block}
.cat-grid .catc .cc h3{color:#fff;font-size:1.18rem;margin:0}
.cat-grid .catc .cc h3 .en{color:rgba(255,255,255,.82);font-size:.74rem;font-weight:500;display:block;margin-top:1px}
.cat-grid .catc .cc .explore{display:inline-flex;margin-top:12px;color:#fff;font-size:.78rem;font-weight:600;padding:7px 14px;border-radius:8px}

/* certification round seals bilingual */
.certb{width:auto;min-width:96px;height:auto;border-radius:14px;padding:14px 12px;border:1px solid var(--line);gap:2px}
.certb b{font-size:.95rem;color:var(--teal)}
.certb .zh2{font-size:.62rem;color:#3a332b;font-weight:600}
.certb .en2{font-size:.56rem;color:#a89a83}

/* light footer (mockup) */
footer{background:#FBF6EC;border-top:1px solid var(--line);color:#8c8172;margin-top:70px}
footer .brand,footer .brand .bt>span:first-child{color:#3a332b}
footer .brand .bt small{color:#a89a83!important}
footer p.desc{color:#8c8172!important}
footer .ft-cols h4{color:#3a332b}
footer .ft-cols .col a{color:#8c8172}
footer .ft-cols .col a:hover{color:var(--gold)}
footer .ft-bottom{border-top:1px solid var(--line);color:#a89a83}
footer .ft-bottom a{color:#8c8172}

@media(max-width:1000px){nav.menu a{padding:6px 8px}nav.menu a,nav.menu a>span:first-child{font-size:.8rem}}

/* bilingual hero bits */
.phero .kick{font-family:"Noto Sans SC","Poppins"}
.phero h1.zh{font-size:clamp(1.6rem,2.7vw,2.2rem);color:#3a332b;font-weight:800;margin:6px 0 8px}
.phero .sub.zh{color:#6b6152;font-size:1.02rem;font-weight:600;margin-bottom:10px}
.phero .lead-txt{color:#8c8172;font-size:.92rem;max-width:46ch;margin-bottom:20px;line-height:1.6}
.phero .lead-txt .en-para{color:#a89a83;font-size:.82rem}
.hstats .hs .en2{display:block;font-size:.58rem;color:#b3a68f;font-weight:500}
.hstats .hs span.zh{font-size:.72rem;color:#6b6152;font-weight:600;display:block}
.hstats .hs b sup{font-size:.6em}
.hstats .hs b i{font-style:normal;font-size:.7em;font-weight:700}
.btn.bi{flex-direction:column;gap:1px;line-height:1.12;padding-top:11px;padding-bottom:11px}
.btn.bi .en{font-size:.64rem;font-weight:500;opacity:.85;letter-spacing:.02em}
.hchip b{font-family:"Noto Sans SC","Poppins";font-size:.82rem}
.hchip b .en,.hchip span.en{display:block;font-size:.6rem;color:#a89a83;text-transform:none;font-weight:500;letter-spacing:0}
.res-item b .en,.crow b .en{display:block;font-size:.66rem;color:#a89a83;font-weight:500}
.res-col h3 .en,.inq-col h3 .en,.promo h3 .en{display:block;font-size:.72rem;color:#b3a68f;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.fact-txt h2 .en,.story h2 .en{display:block;font-size:.8rem;color:#b3a68f;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-top:4px}

/* FIX: category tile ::before must be the dark readability gradient, not the
   solid per-tile color (earlier rule painted solid over the image) */
.cat-grid .catc:nth-child(1)::before,
.cat-grid .catc:nth-child(2)::before,
.cat-grid .catc:nth-child(3)::before,
.cat-grid .catc:nth-child(4)::before{
  content:"";position:absolute;inset:0;height:100%;z-index:1;opacity:1;mix-blend-mode:normal;
  background:linear-gradient(to top,rgba(40,34,26,.78) 0%,rgba(40,34,26,.14) 48%,transparent 74%)}
.cat-grid .catc .cc{z-index:2}
/* colored explore pill per tile */
.cat-grid .catc:nth-child(1) .explore{background:var(--gold)}
.cat-grid .catc:nth-child(2) .explore{background:#5a9c5f}
.cat-grid .catc:nth-child(3) .explore{background:#5b87c4}
.cat-grid .catc:nth-child(4) .explore{background:#8f7bc0}

/* ===== match mockup: 6 advantage cards + 6 OEM cards in ONE horizontal row ===== */
.grid6{grid-template-columns:repeat(6,1fr);gap:16px}
.adv{padding:22px 16px;border-radius:16px}
.adv .ai{width:44px;height:44px;border-radius:12px;margin-bottom:13px}
.adv .ai svg{width:20px;height:20px}
.adv h3{font-size:.96rem;line-height:1.3}
.adv h3 .en{font-size:.66rem;margin-top:2px}
.adv p{font-size:.8rem;line-height:1.5;margin-top:8px}

.oem-grid{grid-template-columns:repeat(6,1fr);gap:16px}
.oemc{flex-direction:column;padding:22px 16px;gap:0;border-radius:16px}
.oemc .oi{width:44px;height:44px;border-radius:12px;margin-bottom:13px}
.oemc h3{font-size:.96rem;line-height:1.3}
.oemc h3 .en{font-size:.66rem;margin-top:2px}
.oemc p{font-size:.8rem;line-height:1.5;margin-top:8px}

@media(max-width:1080px){.grid6,.oem-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid6,.oem-grid{grid-template-columns:repeat(2,1fr)}}

/* footer: 6 columns + social (match mockup) */
.ft-cols{grid-template-columns:1.5fr repeat(6,1fr);gap:24px}
.ft-social{display:flex;gap:12px;margin-top:16px}
.ft-social a{color:#a89a83}
.ft-social a:hover{color:var(--gold)}
.ft-cols h4{font-size:.78rem;margin-bottom:12px}
.ft-cols .col a{font-size:.82rem;padding:3px 0}
@media(max-width:1000px){.ft-cols{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.ft-cols{grid-template-columns:1fr 1fr}}

/* ===== factory grid: big aerial (left, 2 rows) + 6 small in clean 3×2 ===== */
.fact-photos{grid-template-columns:1.5fr 1fr 1fr 1fr;grid-auto-rows:148px;gap:12px}
.fact-photos .big{grid-column:1;grid-row:1 / span 2}
.fact-photos figure{border-radius:12px}
@media(max-width:900px){.fact-photos{grid-template-columns:1fr 1fr;grid-auto-rows:120px}.fact-photos .big{grid-column:1 / span 2;grid-row:auto}}

/* hero stats with leading icon */
.hstats{gap:22px 26px}
.hstats .hs{display:flex;align-items:center;gap:10px}
.hstats .hs .hi{color:var(--teal);flex:0 0 auto;opacity:.9}
.hstats .hs .ht{display:flex;flex-direction:column;line-height:1.15}
.hstats .hs b{font-size:1.6rem}

/* nav 中文/EN toggle */
.lang-toggle{display:flex;align-items:center;gap:4px;font-size:.82rem;font-weight:600;color:#8c8172;margin-left:4px}
.lang-toggle a{color:#8c8172}
.lang-toggle a.on{color:var(--gold)}
.lang-toggle a:hover{color:var(--gold)}
.lang-toggle span{color:#cbbfa8}
@media(max-width:1000px){.lang-toggle{display:none}}

/* ===== nav fit: keep all bilingual items on one line (no wrap) ===== */
.nav-inner{gap:10px}
.brand{font-size:1.2rem}
.brand .bt>span:first-child{font-size:1.14rem}
.brand .bt small{max-width:150px;white-space:normal;line-height:1.18}
nav.menu{gap:0}
nav.menu a{white-space:nowrap;padding:5px 7px}
nav.menu a>span:first-child{white-space:nowrap}
nav.menu a,nav.menu a>span:first-child{font-size:.8rem}
nav.menu a .en{font-size:.56rem}
nav.menu a.nav-cta{padding:8px 14px;margin-left:4px}
@media(max-width:1150px){nav.menu a,nav.menu a>span:first-child{font-size:.75rem}nav.menu a{padding:5px 5px}}

/* real chuanqi logo icon in nav/footer */
.brand img.logo{width:48px;height:40px;object-fit:contain;background:transparent;border-radius:0;box-shadow:none;flex:0 0 auto}
.brand .bt>span:first-child{font-family:"Poppins","Inter";text-transform:lowercase;letter-spacing:-.01em}
footer .brand img.logo{width:52px;height:44px}

/* ============================================================
   Entry modal — dual-channel welcome (buy products / sourcing)
   ============================================================ */
.entry-backdrop{position:fixed;inset:0;z-index:300;background:rgba(40,34,26,.5);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.entry-backdrop.show{opacity:1;visibility:visible}
.entry-card{background:linear-gradient(180deg,#FDF9F1,#FBF3E5);border-radius:22px;max-width:660px;width:100%;
  padding:38px 38px 30px;box-shadow:0 40px 90px rgba(40,34,26,.4);position:relative;
  transform:translateY(16px) scale(.97);transition:transform .4s cubic-bezier(.2,.7,.3,1);text-align:center}
.entry-backdrop.show .entry-card{transform:none}
.entry-card .ec-logo{width:60px;height:50px;object-fit:contain;margin:0 auto 12px;display:block}
.entry-card h2{font-family:"Poppins","Noto Sans SC";font-size:1.55rem;color:#3a332b;margin-bottom:4px}
.entry-card .ec-sub{color:#8c8172;font-size:.9rem;margin-bottom:26px}
.entry-card .ec-sub .en{display:block;font-size:.74rem;color:#b3a68f;letter-spacing:.06em;margin-top:2px}
.entry-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.entry-opt{display:block;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:24px 22px;transition:.22s;position:relative;overflow:hidden}
.entry-opt::after{content:"→";position:absolute;right:20px;bottom:18px;font-size:1.2rem;color:#cbbfa8;transition:.22s}
.entry-opt:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(120,86,45,.16)}
.entry-opt.buy:hover{border-color:var(--gold)} .entry-opt.buy:hover::after{color:var(--gold);transform:translateX(3px)}
.entry-opt.src:hover{border-color:var(--teal)} .entry-opt.src:hover::after{color:var(--teal);transform:translateX(3px)}
.entry-opt .eo-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;margin-bottom:15px}
.entry-opt.buy .eo-ic{background:var(--gold)} .entry-opt.src .eo-ic{background:var(--teal)}
.entry-opt h3{font-family:"Poppins","Noto Sans SC";font-size:1.12rem;color:#3a332b;margin-bottom:3px}
.entry-opt h3 .en{display:block;font-size:.72rem;color:#a89a83;font-weight:500;margin-top:1px}
.entry-opt p{color:#8c8172;font-size:.82rem;line-height:1.5;margin-top:8px;max-width:22ch}
.entry-close{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;border:0;background:#f0e7d6;
  color:#8c8172;font-size:1.2rem;line-height:1;cursor:pointer;transition:.15s}
.entry-close:hover{background:#e6d9c2;color:#3a332b}
.entry-skip{display:inline-block;margin-top:20px;color:#a89a83;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.entry-skip:hover{color:var(--gold)}
@media(max-width:560px){.entry-opts{grid-template-columns:1fr}.entry-card{padding:30px 22px 24px}}

/* ============================================================
   Motion — scroll reveal + hover polish (de-static)
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
header.nav{transition:box-shadow .25s,background .25s}
header.nav.scrolled{box-shadow:0 6px 24px rgba(40,34,26,.08)}
.adv,.oemc,.catc,.pkg,.res-item,.certb{will-change:transform}

/* ============================================================
   PREMIUM ELEVATION v5 — per art-director + brand review
   (espresso ink, real type scale, terracotta eyebrows, borders
   over shadows, one dark section for rhythm)
   ============================================================ */
:root{
  --ink:#2B2320; --green:#2B2320; --green-dark:#20201E; --green-light:#4a4038;
  --gold:#D26A38; --gold-soft:#f2e0d2; --muted:#8C7B6B;
  --cream:#F4EDE1; --cream-2:#FBF7F0; --cream-3:#F0E6D5;
  --bg-soft:#F4EDE1; --line:#E7DECF; --line-soft:#efe6d6;
  --teal:#2E9E86; --teal-dark:#237e6b;
}
body{color:#4A463F;letter-spacing:-.006em}
h1,h2,h3{color:#2B2320}

/* bigger, more confident type scale */
.phero .wordmark{font-size:clamp(3rem,5.4vw,4.3rem);letter-spacing:-.035em}
.phero h1.zh{font-size:clamp(1.95rem,3vw,2.6rem)}
.bihead .zh{font-size:clamp(1.9rem,3.3vw,2.55rem);color:#2B2320}
section.block{padding:100px 0}
.sec-head,.bihead{margin-bottom:48px}

/* bilingual heading: english becomes a small terracotta KICKER above (not a gray caps mirror) */
.bihead{display:flex;flex-direction:column}
.bihead .en{order:-1;color:var(--gold);font-size:.76rem;letter-spacing:.14em;font-weight:600;margin:0 0 8px}
.headrow .bihead{align-items:flex-start}

/* cards: structure via borders, shadows only on hover */
.adv,.oemc{box-shadow:none;border:1px solid var(--line);background:#fff;border-radius:14px}
.adv:hover,.oemc:hover{box-shadow:0 14px 34px rgba(43,35,32,.08);transform:translateY(-3px)}
.certb{box-shadow:none}
.res-item{box-shadow:none}

/* one icon treatment: unified warm chip + terracotta icon (kill pastel rainbow) */
.adv .ai,.oemc .oi{background:#F3E9DA!important;color:var(--gold)!important;border:1px solid #ece0cd}

/* buttons: deeper terracotta, no shadow */
.btn-gold{background:#D26A38;box-shadow:none}
.btn-gold:hover{background:#B4552A}
.dual-cta .btn{box-shadow:none}
nav.menu a.nav-cta{background:#D26A38!important;box-shadow:none}
nav.menu a.nav-cta:hover{background:#B4552A!important}

/* ONE dark full-bleed section for rhythm/gravity → 关于我们/工厂实力 */
#about.bg-soft{background:#22201D}
#about .fact-txt h2{color:#F4EDE1!important}
#about .fact-txt h2 .en{color:#E8823C}
#about .fact-txt p{color:#c9bdb0}
#about .certb{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)}
#about .certb b{color:#E8823C}
#about .certb .zh2{color:#F4EDE1}
#about .certb .en2{color:#a89a83}
#about .btn-navy{background:#D26A38;color:#fff}
#about .btn-navy:hover{background:#B4552A}
#about .fact-photos figure{border:1px solid rgba(255,255,255,.08)}

/* trust strip → thin, quiet */
.trust-strip{background:#EFE6D5;border-color:#e6dbc7}
.trust-strip .ts{color:#6b6152;font-weight:500}

/* hero stats: more air + divider */
.hstats{gap:0}
.hstats .hs{padding-right:22px;margin-right:22px;border-right:1px solid #e6dbc7}
.hstats .hs:last-child{border-right:0;margin-right:0}
.hstats .hs b{font-size:1.7rem;color:#2B2320}
.hstats .hs .hi{color:var(--gold)}

/* ===== motion polish (interaction review) — transform/opacity only ===== */
.cat-grid .catc{overflow:hidden}
.cat-grid .catc img{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.cat-grid .catc:hover img{transform:scale(1.06)}
.fact-photos figure{overflow:hidden}
.fact-photos figure img{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.fact-photos figure:hover img{transform:scale(1.06)}
.btn{transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,background .18s}
.btn:active{transform:translateY(0) scale(.98)}
.adv .ai,.oemc .oi{transition:transform .22s cubic-bezier(.16,1,.3,1),background .2s,color .2s}
.adv:hover .ai,.oemc:hover .oi{transform:scale(1.08) rotate(-2deg)}
.headrow .more:hover{transform:translateX(2px)}
.hchip{animation:bob 5s ease-in-out infinite}
.hchip:nth-child(2){animation-delay:.6s}.hchip:nth-child(3){animation-delay:1.2s}.hchip:nth-child(4){animation-delay:1.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hchip{animation:none}}

/* hero stats: fit all 4 in one row (tighten spacing) */
.hstats{flex-wrap:nowrap;gap:0}
.hstats .hs{padding-right:14px;margin-right:14px;gap:8px}
.hstats .hs .hi svg{width:17px;height:17px}
.hstats .hs b{font-size:1.42rem}
.hstats .hs span.zh{font-size:.68rem}
.hstats .hs .en2{font-size:.55rem}
@media(max-width:560px){.hstats{flex-wrap:wrap;gap:14px 0}.hstats .hs{width:50%;margin:0;border-right:0}}

/* ============================================================
   中文/EN language toggle + mega-menu (nav dropdown)
   ============================================================ */
html:not(.lang-zh) .lz{display:none}
html.lang-zh .le{display:none}
.lang-toggle a{cursor:pointer}

/* headings that used .zh now use .lz/.le → put sizing on the parent */
.bihead{display:block;font-family:"Poppins","Noto Sans SC",sans-serif;font-size:clamp(1.85rem,3.2vw,2.45rem);font-weight:800;color:#2B2320;line-height:1.22;letter-spacing:-.02em}
.headrow .bihead{text-align:left}
.phero h1{font-family:"Poppins","Noto Sans SC",sans-serif;font-size:clamp(1.9rem,2.9vw,2.5rem);font-weight:800;color:#2B2320;line-height:1.14;letter-spacing:-.02em;margin:6px 0 8px}
.phero .sub.zh{color:#6b6152;font-size:1.0rem;font-weight:600;margin-bottom:10px}

/* nav: single language on one line */
nav.menu a{flex-direction:row}
nav.menu a .lz,nav.menu a .le{font-size:.84rem;font-weight:600;color:inherit;letter-spacing:0}
nav.menu a.active .lz,nav.menu a.active .le{color:var(--gold)}
nav.menu a.nav-cta .lz,nav.menu a.nav-cta .le{color:#fff}
/* stat labels small */
.hstats .hs .ht .lz,.hstats .hs .ht .le{font-size:.66rem;color:#6b6152;font-weight:600;display:block;line-height:1.2}

/* mega-menu dropdown under 产品中心 */
.nav-item{display:flex;align-items:center;position:static}
.has-mega .mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 22px 44px rgba(43,35,32,.13);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:45}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:none}
.mega-inner{display:grid;grid-template-columns:repeat(4,1fr) 1.1fr;gap:24px;padding:26px 24px;max-width:1180px}
.mega-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.mega-h{font-family:"Poppins","Noto Sans SC",sans-serif;font-weight:700;color:#2B2320;font-size:.92rem;margin-bottom:6px;padding-bottom:9px;border-bottom:2px solid var(--gold)}
.mega-col>a:not(.mega-h){color:#6b6152;font-size:.82rem;line-height:1.35;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega-col>a:not(.mega-h):hover{color:var(--gold);transform:translateX(2px)}
.mega-cta{background:var(--cream);border-radius:12px;padding:18px 16px;justify-content:center}
.mega-cta a{font-weight:600;font-size:.86rem;padding:5px 0}
.mega-quote{color:var(--gold)!important}
.mega-loading{color:var(--muted);padding:26px;font-size:.9rem}
@media(max-width:1000px){.has-mega .mega{display:none}}

/* FIX: stat labels must obey the toggle (previous rule forced display:block on both) */
.hstats .hs .ht .lz,.hstats .hs .ht .le{display:none}
html:not(.lang-en) .hstats .hs .ht .lz{display:block}
html.lang-en .hstats .hs .ht .le{display:block}

/* ===== GDPR cookie consent ===== */
.cookie-bar{position:fixed;left:18px;right:18px;bottom:18px;z-index:120;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 18px 44px rgba(43,35,32,.16);padding:16px 20px;display:none;
  align-items:center;gap:16px;flex-wrap:wrap;max-width:820px;margin:0 auto}
.cookie-bar.show{display:flex}
.cookie-bar p{margin:0;font-size:.86rem;color:#4a463f;flex:1;min-width:220px}
.cookie-bar a{color:var(--gold);text-decoration:underline}
.cookie-bar .cb-btns{display:flex;gap:10px}
.cookie-bar button{border:0;border-radius:9px;padding:10px 18px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.cb-accept{background:var(--gold);color:#fff}.cb-accept:hover{background:#B4552A}
.cb-decline{background:var(--cream-3);color:#6b6152}
@media(max-width:560px){.cookie-bar{left:8px;right:8px;bottom:8px;padding:14px}}

/* legal pages */
.legal{max-width:820px;margin:0 auto;padding:60px 24px 40px}
.legal h1{color:#2B2320;font-size:2rem;margin-bottom:8px}
.legal .upd{color:var(--muted);font-size:.85rem;margin-bottom:28px}
.legal h2{color:#2B2320;font-size:1.2rem;margin:26px 0 10px}
.legal p,.legal li{color:#4a463f;font-size:.95rem;line-height:1.75}
.legal ul{margin:0 0 14px 20px}

/* ===== FIX: promo card void (image fills the tall card instead of gap) ===== */
.promo{justify-content:flex-start}
.promo .pimg{flex:1;margin-top:18px;height:auto;min-height:180px;border-radius:14px;overflow:hidden}
.promo .pimg img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== FIX: stack the two floating buttons (WhatsApp above live-chat) — no overlap ===== */
.wa-float{right:20px;bottom:88px;padding:0;width:54px;height:54px;border-radius:50%;justify-content:center;gap:0}
.wa-float .wa-label{display:none}
.chat-launcher{right:20px;bottom:20px}
body.edit-mode .wa-float{display:none}
@media(max-width:600px){.wa-float{bottom:84px;right:16px}.chat-launcher{right:16px;bottom:16px}}

/* ===== re-planned resources + inquiry layout ===== */
.res-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:38px}
.inq-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;align-items:start}
.inq-form-col{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.inq-side{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.inq-side .contact-rows{margin-bottom:0}
.inq-side .promo-mini{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.inq-side .promo-mini h4{color:#2B2320;font-size:1.02rem;line-height:1.3;margin-bottom:6px}
.inq-side .promo-mini p{color:var(--muted);font-size:.84rem}
.inq-side .promo-mini .pm-img{margin-top:14px;height:150px;border-radius:12px;overflow:hidden}
.inq-side .promo-mini .pm-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
@media(max-width:900px){.res-strip{grid-template-columns:1fr 1fr}.inq-grid{grid-template-columns:1fr}}
@media(max-width:560px){.res-strip{grid-template-columns:1fr}}

/* ===== resource-center dropdown (nav mega) ===== */
.res-mega .mega-inner{grid-template-columns:1.1fr 1.9fr;gap:30px;align-items:start}
.res-links{display:flex;flex-direction:column;gap:4px}
.res-links>a{color:#6b6152;font-size:.86rem;padding:6px 0;border-bottom:1px solid var(--line-soft)}
.res-links>a:last-child{border-bottom:0}
.res-links>a:hover{color:var(--gold);transform:translateX(2px)}
.res-dl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.res-dl-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:16px 8px;color:#4a463f;font-size:.78rem;font-weight:600;transition:.18s}
.res-dl-card:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.res-dl-card .rd-ic{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold)}
@media(max-width:1000px){.res-mega{display:none}}

/* nav hover: highlight the pointed item in orange (not just active page) */
nav.menu a:hover{background:transparent;color:var(--gold)}
nav.menu a:hover .lz,nav.menu a:hover .le{color:var(--gold)}
nav.menu a.nav-cta:hover .lz,nav.menu a.nav-cta:hover .le{color:#fff}

/* ===== About: factory showcase gallery + certifications (v14/21/22) ===== */
.fac-gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch}
.fac-gallery figure{flex:0 0 min(78%,400px);scroll-snap-align:start;margin:0}
.fac-gallery img{width:100%;height:272px;object-fit:cover;border-radius:14px;box-shadow:0 8px 22px rgba(10,37,64,.1);display:block}
.cert-wrap{margin-top:44px;text-align:center}
.cert-img{max-width:940px;width:100%;height:auto;display:block;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-sizing:border-box}
@media(max-width:600px){.fac-gallery figure{flex:0 0 86%}.fac-gallery img{height:212px}.cert-img{padding:16px}}

/* ===== FAQ page accordion (v17) ===== */
.faq-wrap{max-width:820px;margin:0 auto}
.faq-cat{font-size:1.12rem;color:var(--green);margin:30px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.faq-group:first-child .faq-cat{margin-top:0}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.faq-item[open]{box-shadow:0 8px 22px rgba(10,37,64,.08)}
.faq-item summary{cursor:pointer;padding:16px 20px;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--gold);flex:0 0 auto;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item[open] summary{color:var(--green)}
.faq-a{padding:0 20px 18px;color:var(--muted);line-height:1.65}

/* hero caption overlay on pet image (v15 refined) */
.hero-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:52px 24px 22px;background:linear-gradient(to top,rgba(10,37,64,.74) 0%,rgba(10,37,64,.34) 46%,transparent 100%);color:#fff;font-family:"Baloo 2","Poppins",sans-serif;font-size:1.14rem;font-weight:600;letter-spacing:.02em;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.4);border-radius:0 0 20px 20px;z-index:2}
@media(max-width:900px){.hero-cap{font-size:.98rem;padding:40px 16px 16px;border-radius:0 0 16px 16px}}


/* contact side height match + social block (v3) */
.inq-grid{align-items:stretch}
.inq-side{display:flex;flex-direction:column}
.inq-side .promo-mini{margin-top:auto}
.crow-social{border-bottom:1px solid #efe7d8;padding-bottom:14px!important;margin-bottom:2px}
.crow-social>span:first-child{margin-bottom:2px}

/* 6-language dropdown switcher */
.lang-switch{position:relative;margin-left:8px}
.lang-cur{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 14px;font-size:.82rem;font-weight:600;color:#6b6155;cursor:pointer;font-family:inherit}
.lang-cur:hover{border-color:var(--gold);color:var(--gold)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(10,37,64,.16);padding:6px;display:none;min-width:140px;z-index:200}
.lang-switch.open .lang-menu{display:block}
.lang-menu a{display:block;padding:9px 13px;border-radius:7px;font-size:.86rem;color:#4a463f;text-decoration:none}
.lang-menu a:hover{background:var(--cream)}
.lang-menu a.on{color:var(--gold);font-weight:700;background:var(--cream)}
@media(max-width:1000px){.lang-switch{margin-left:0}}