/* ============================================
   翻新手机B2B外贸多语言网站 — 主样式表
   BEM命名 | CSS Variables | 本地系统字体
   ============================================ */

/* === CSS Variables === */
:root {
    --color-primary: #1a237e;
    --color-primary-light: #283593;
    --color-secondary: #0d47a1;
    --color-cta: #ff6d00;
    --color-cta-hover: #e65100;
    --color-bg: #ffffff;
    --color-bg-alt: #f5f7fa;
    --color-bg-dark: #1a1a2e;
    --color-text: #212121;
    --color-text-light: #616161;
    --color-text-white: #ffffff;
    --color-border: #e0e0e0;
    --color-success: #2e7d32;
    --color-error: #c62828;
    --color-warning: #f57f17;
    --font-primary: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', -apple-system, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --transition: 0.3s ease;
    --container-max: 1200px;
}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-primary);font-size:var(--font-size-base);line-height:1.7;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-secondary)}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}

/* === Container === */
.container{max-width:var(--container-max);margin:0 auto;padding:0 20px}

/* === Section === */
.section{padding:80px 0}
.section--alt{background:var(--color-bg-alt)}
.section__header{text-align:center;margin-bottom:50px}
.section__title{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-text);margin-bottom:12px}
.section__subtitle{font-size:var(--font-size-lg);color:var(--color-text-light);max-width:600px;margin:0 auto}
.section__action{text-align:center;margin-top:40px}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;font-size:var(--font-size-base);font-weight:600;border-radius:var(--radius-sm);border:2px solid transparent;transition:all var(--transition);line-height:1.4}
.btn--lg{padding:16px 36px;font-size:var(--font-size-lg)}
.btn--sm{padding:8px 18px;font-size:var(--font-size-sm)}
.btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn--primary:hover{background:var(--color-primary-light);color:#fff}
.btn--secondary{background:var(--color-secondary);color:#fff;border-color:var(--color-secondary)}
.btn--secondary:hover{background:#1565c0;color:#fff}
.btn--cta{background:var(--color-cta);color:#fff;border-color:var(--color-cta)}
.btn--cta:hover{background:var(--color-cta-hover);color:#fff}
.btn--outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn--outline:hover{background:var(--color-primary);color:#fff}
.btn--full{width:100%}

/* === Header === */
.header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.header__logo{flex-shrink:1;display:flex;align-items:center;max-width:55%}
.header__logo img,.header__logo .logo-svg{height:34px;width:auto;max-width:100%}
@media (max-width:640px){.header__logo img,.header__logo .logo-svg{height:26px}}
.header__logo-text{font-size:var(--font-size-xl);font-weight:700;color:var(--color-primary)}
.header__menu{display:flex;gap:4px;flex-wrap:nowrap}
.header__link{display:block;padding:8px 14px;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);border-radius:var(--radius-sm);transition:all var(--transition);white-space:nowrap}
.header__link:hover{color:var(--color-primary);background:var(--color-bg-alt)}
.header__link--cta{background:var(--color-cta);color:#fff !important;padding:8px 20px}
.header__link--cta:hover{background:var(--color-cta-hover)}
.header__dropdown{position:relative}
.header__arrow{font-size:10px;margin-left:2px;transition:transform .2s}
.header__dropdown:hover .header__arrow{transform:rotate(180deg)}
.header__submenu{display:none!important;position:absolute;top:100%;left:0;min-width:180px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.12);padding:8px 0;z-index:100;list-style:none}
.header__dropdown:hover .header__submenu{display:block!important}
.header__submenu a{display:block;padding:10px 20px;font-size:13px;color:var(--color-text);text-decoration:none;white-space:nowrap;transition:background .15s}
.header__submenu a:hover{background:#f5f7ff;color:var(--color-primary)}
@media (max-width:768px){.header__submenu{position:static;box-shadow:none;background:transparent;padding-left:16px}.header__submenu a{padding:8px 16px}.header__dropdown:active .header__submenu,.header__dropdown:focus-within .header__submenu{display:block!important}}
.header__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:5px}
.header__burger span{display:block;width:24px;height:2px;background:var(--color-text);border-radius:2px;transition:all var(--transition)}

/* === Language Switcher — Pill Dropdown (JS class toggle) === */
.lang-switcher{position:relative;flex-shrink:0}
.lang-switcher__btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--color-bg-alt);border:1.5px solid var(--color-border);border-radius:50px;cursor:pointer;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);transition:all .2s ease;user-select:none;font-family:inherit;line-height:1.5}
.lang-switcher__btn:hover{border-color:var(--color-primary);background:#eef0ff}
.lang-switcher--open .lang-switcher__btn{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(26,35,126,.1);background:#eef0ff}
.lang-switcher__globe{flex-shrink:0;color:var(--color-text-light)}
.lang-switcher__label{white-space:nowrap}
.lang-switcher__chevron{flex-shrink:0;color:var(--color-text-light);transition:transform .2s ease}
.lang-switcher--open .lang-switcher__chevron{transform:rotate(180deg)}
.lang-switcher__menu{position:absolute;top:calc(100% + 6px);right:0;min-width:150px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 8px 30px rgba(0,0,0,.1);padding:6px;z-index:200;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .18s ease;list-style:none;pointer-events:none}
.lang-switcher--open .lang-switcher__menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.lang-switcher__link{display:block;padding:8px 14px;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:400;color:var(--color-text);text-decoration:none;transition:background .15s ease;white-space:nowrap}
.lang-switcher__link:hover{background:var(--color-bg-alt)}
.lang-switcher__item--active .lang-switcher__link{font-weight:600;color:var(--color-primary);background:#eef0ff;position:relative}
.lang-switcher__item--active .lang-switcher__link::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--color-primary);border-radius:3px}

/* === Hero === */
.hero{position:relative;padding:100px 0 80px;overflow:hidden;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary))}
.hero{position:relative;overflow:hidden;padding:80px 0 60px}
.hero__bg{position:absolute;inset:0;opacity:0.05}
.hero__bg-img{width:100%;height:100%;object-fit:cover}
.hero__inner{position:relative;z-index:1;display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.hero__content{flex:1;min-width:300px}
.hero__image{flex:1;min-width:320px;text-align:center}
@media(max-width:768px){.hero{padding:40px 0}.hero__inner{flex-direction:column;text-align:center}.hero__image{order:-1;max-width:280px;margin:0 auto}}
.hero .btn--outline{border-color:#fff;color:#fff}
.hero .btn--outline:hover{background:#fff;color:var(--color-primary)}

/* === Trust Badges === */
.badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.badge-card{text-align:center;padding:32px 24px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:transform var(--transition)}
.badge-card:hover{transform:translateY(-4px)}
.badge-card__icon{margin-bottom:16px;display:flex;justify-content:center}
.badge-card__title{font-size:var(--font-size-xl);font-weight:700;margin-bottom:8px}
.badge-card__desc{color:var(--color-text-light);font-size:var(--font-size-sm);line-height:1.6}

/* === Trust Counters === */
.trust-counters{background:var(--color-primary);padding:50px 0}
.counters-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.counter-item{color:#fff}
.counter-item__number{font-size:var(--font-size-4xl);font-weight:800;line-height:1.2}
.counter-item__suffix{font-size:var(--font-size-2xl);font-weight:700}
.counter-item__label{display:block;font-size:var(--font-size-sm);opacity:0.8;margin-top:4px}

/* === Process === */
.process-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.process-card{background:#fff;border-radius:var(--radius-lg);padding:32px 24px;text-align:center;box-shadow:var(--shadow-sm);transition:all var(--transition);position:relative}
.process-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.process-card__number{position:absolute;top:16px;left:16px;font-size:var(--font-size-sm);font-weight:700;color:var(--color-primary);opacity:0.3}
.process-card__icon{margin-bottom:16px;display:flex;justify-content:center}
.process-card__title{font-size:var(--font-size-lg);font-weight:700;margin-bottom:8px}
.process-card__desc{font-size:var(--font-size-sm);color:var(--color-text-light);line-height:1.6}

/* === Product Grid & Card === */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.product-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:all var(--transition);border:1px solid var(--color-border)}
.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.product-card__image{aspect-ratio:4/3;overflow:hidden;background:var(--color-bg-alt);display:flex;align-items:center;justify-content:center}
.product-card__image img{width:100%;height:100%;object-fit:contain;padding:20px}
.product-card__body{padding:20px}
.product-card__category{display:inline-block;font-size:var(--font-size-xs);font-weight:600;color:var(--color-secondary);text-transform:uppercase;margin-bottom:6px}
.product-card__title{font-size:var(--font-size-lg);font-weight:700;margin-bottom:6px}
.product-card__subtitle{font-size:var(--font-size-sm);color:var(--color-text-light);margin-bottom:12px}
.product-card__specs{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px;font-size:var(--font-size-xs);color:var(--color-text-light)}
.product-card__spec strong{color:var(--color-text)}
.product-card__footer{border-top:1px solid var(--color-border);padding-top:12px}
.product-card__price{font-size:var(--font-size-xl);font-weight:700;color:var(--color-cta)}
.product-card__inquiry{font-size:var(--font-size-sm);color:var(--color-primary);font-weight:600}

/* === FAQ Accordion === */
.faq-accordion{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-item__question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 0;background:none;border:none;font-size:var(--font-size-base);font-weight:600;color:var(--color-text);text-align:left;line-height:1.5}
.faq-item__question:hover{color:var(--color-primary)}
.faq-item__icon{font-size:var(--font-size-xl);font-weight:300;transition:transform var(--transition);flex-shrink:0;margin-left:16px}
.faq-item__question[aria-expanded="true"] .faq-item__icon{transform:rotate(45deg)}
.faq-item__answer{padding:0 0 18px 0;color:var(--color-text-light);line-height:1.7}
.faq-item__answer[hidden]{display:none}

/* === CTA Section === */
.cta-section{padding:80px 0;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;text-align:center}
.cta-section__title{font-size:var(--font-size-3xl);font-weight:700;margin-bottom:12px}
.cta-section__subtitle{font-size:var(--font-size-lg);opacity:0.85;margin-bottom:32px}
.cta-section__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.cta-section .btn--outline{border-color:#fff;color:#fff}
.cta-section .btn--outline:hover{background:#fff;color:var(--color-primary)}

/* === WhatsApp Float === */
.whatsapp-float{position:fixed;bottom:24px;right:24px;z-index:999;width:56px;height:56px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:transform var(--transition);animation:pulse 2s infinite}
.whatsapp-float:hover{transform:scale(1.1)}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.4)}50%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}

/* === Footer === */
.footer{background:var(--color-bg-dark);color:rgba(255,255,255,0.8);padding:60px 0 30px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer__title{color:#fff;font-size:var(--font-size-lg);font-weight:700;margin-bottom:16px}
.footer__desc{font-size:var(--font-size-sm);line-height:1.7}
.footer__social{margin-top:16px}
.footer__social-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:50%;color:#fff;transition:background var(--transition)}
.footer__social-link:hover{background:rgba(255,255,255,0.2);color:#fff}
.footer__links li{margin-bottom:10px;font-size:var(--font-size-sm)}
.footer__links a{color:rgba(255,255,255,0.7)}
.footer__links a:hover{color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;text-align:center;font-size:var(--font-size-xs)}
@media (max-width:768px){.footer__hide-mobile{display:none!important}.footer__grid{grid-template-columns:1fr}}

/* === Page Header === */
.page-header{background:var(--color-bg-alt);padding:40px 0}
.page-header__title{font-size:var(--font-size-3xl);font-weight:700;margin-bottom:8px}
.page-header__desc{font-size:var(--font-size-lg);color:var(--color-text-light)}
.page-header--product{background:#fff;padding:16px 0;border-bottom:1px solid var(--color-border)}

/* === Breadcrumb === */
.breadcrumb{padding:12px 0}
.breadcrumb__list{display:flex;flex-wrap:wrap;gap:4px;font-size:var(--font-size-sm)}
.breadcrumb__item:not(:last-child)::after{content:'/';margin:0 6px;color:var(--color-text-light)}
.breadcrumb__item--active span{color:var(--color-text-light)}
.breadcrumb__item a{color:var(--color-primary)}
.breadcrumb__item a:hover{text-decoration:underline}

/* === Product Filter === */
.product-filter{margin-bottom:32px}
.product-filter__inner{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.filter-tag{padding:8px 20px;border:1px solid var(--color-border);border-radius:30px;font-size:var(--font-size-sm);color:var(--color-text);transition:all var(--transition)}
.filter-tag:hover{border-color:var(--color-primary);color:var(--color-primary)}
.filter-tag--active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* === Pagination === */
.pagination{display:flex;justify-content:center;margin-top:40px}
.pagination__list{display:flex;align-items:center;gap:4px}
.pagination__link{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);transition:all var(--transition)}
.pagination__link:hover{background:var(--color-bg-alt);border-color:var(--color-primary);color:var(--color-primary)}
.pagination__link--active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.pagination__ellipsis{padding:0 8px;color:var(--color-text-light)}

/* === Product Detail === */
.product-detail__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:60px}
.product-detail__gallery{position:sticky;top:90px}
.product-detail__main-image{aspect-ratio:1;background:var(--color-bg-alt);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px}
.product-detail__main-image img{width:100%;height:100%;object-fit:contain}
.product-detail__thumbs{display:flex;gap:8px;overflow-x:auto}
.product-detail__thumb{width:70px;height:70px;border:2px solid transparent;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-bg-alt);cursor:pointer;flex-shrink:0;transition:border-color var(--transition)}
.product-detail__thumb--active{border-color:var(--color-primary)}
.product-detail__thumb img{width:100%;height:100%;object-fit:contain}
.product-detail__title{font-size:var(--font-size-3xl);font-weight:700;margin-bottom:8px}
.product-detail__subtitle{font-size:var(--font-size-lg);color:var(--color-text-light);margin-bottom:24px}
.product-detail__specs{margin-bottom:24px}
.spec-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--color-border)}
.spec-item__label{font-weight:600;color:var(--color-text)}
.spec-item__value{color:var(--color-text-light)}
.spec-item__value--grade{display:inline-block;background:var(--color-cta);color:#fff;padding:2px 12px;border-radius:4px;font-weight:700}
.product-detail__price{margin-bottom:24px;padding:16px;background:var(--color-bg-alt);border-radius:var(--radius-md)}
.product-detail__price-label{font-weight:600}
.product-detail__price-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-cta)}
.product-detail__actions{display:flex;flex-wrap:wrap;gap:12px}
.product-detail__description h2,.product-detail__specs-table h2,.product-detail__shipping h2{font-size:var(--font-size-2xl);margin-bottom:16px}
.product-detail__description,.product-detail__specs-table,.product-detail__shipping{margin-bottom:40px}
.specs-table{width:100%;border-collapse:collapse}
.specs-table th,.specs-table td{padding:10px 16px;border:1px solid var(--color-border);text-align:left}
.specs-table th{background:var(--color-bg-alt);font-weight:600;width:30%}

/* === Content Text === */
.content-text{line-height:1.8}
.content-text h2{font-size:var(--font-size-2xl);margin:40px 0 16px}
.content-text h3{font-size:var(--font-size-xl);margin:28px 0 12px}
.content-text p{margin-bottom:16px}
.content-text ul,.content-text ol{margin-bottom:16px;padding-left:24px}
.content-text li{margin-bottom:8px}
.content-text ul{list-style:disc}
.content-text ol{list-style:decimal}

/* === About === */
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.about-content__image img{width:100%;border-radius:var(--radius-lg)}

/* === Blog === */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.blog-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition);border:1px solid var(--color-border)}
.blog-card:hover{box-shadow:var(--shadow-lg)}
.blog-card__image{aspect-ratio:16/10;overflow:hidden;background:var(--color-bg-alt)}
.blog-card__image img{width:100%;height:100%;object-fit:cover}
.blog-card__body{padding:20px}
.blog-card__date{font-size:var(--font-size-xs);color:var(--color-text-light)}
.blog-card__category{display:inline-block;font-size:var(--font-size-xs);font-weight:600;color:var(--color-primary);background:#e8eaf6;padding:2px 10px;border-radius:50px;margin-bottom:6px}
.blog-card__title{font-size:var(--font-size-lg);font-weight:700;margin:8px 0}
.blog-card__excerpt{font-size:var(--font-size-sm);color:var(--color-text-light);line-height:1.6}

/* === Blog v2 卡片（新布局） === */
.blog-grid-v2{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:28px}
.blog-card-v2{display:block;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
.blog-card-v2:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.1)}
.blog-card-v2--no-image{border-left:4px solid var(--color-primary)}
.blog-card-v2__image{aspect-ratio:16/10;overflow:hidden;background:#f5f5f5}
.blog-card-v2__image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.blog-card-v2:hover .blog-card-v2__image img{transform:scale(1.03)}
.blog-card-v2__body{padding:20px 24px 24px}
.blog-card-v2__meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.blog-card-v2__category{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#2e7d32;background:#e8f5e9;padding:3px 12px;border-radius:50px}
.blog-card-v2__date{font-size:12px;color:#999}
.blog-card-v2__title{font-size:18px;font-weight:700;line-height:1.4;margin:0 0 8px 0;color:#1a1a1a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-v2__excerpt{font-size:14px;color:#777;line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-filter-pill{display:inline-block;padding:8px 20px;border-radius:50px;font-size:13px;font-weight:500;color:#666;background:#f5f5f5;text-decoration:none;transition:all .2s}
.blog-filter-pill:hover{background:#eee;color:#333}
.blog-filter-pill--active{background:var(--color-primary);color:#fff}
.blog-filter-pill--active:hover{background:var(--color-primary);color:#fff}
@media(max-width:768px){.blog-grid-v2{grid-template-columns:1fr;gap:20px}}

/* === Blog Detail === */
.blog-detail__layout{display:grid;grid-template-columns:1fr 300px;gap:48px}
.blog-detail__header{margin-bottom:24px}
.blog-detail__title{font-size:var(--font-size-3xl);font-weight:700;margin-bottom:12px}
.blog-detail__meta{display:flex;align-items:center;gap:16px;font-size:var(--font-size-sm);color:var(--color-text-light)}
.blog-detail__badge{background:#e8f5e9;color:var(--color-success);padding:2px 10px;border-radius:4px;font-size:var(--font-size-xs);font-weight:500}
.blog-detail__featured-image{margin-bottom:32px;border-radius:var(--radius-lg);overflow:hidden}
.blog-detail__featured-image img{width:100%}
.blog-detail__sidebar{position:sticky;top:90px;align-self:start}
.sidebar__title{font-size:var(--font-size-lg);font-weight:700;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--color-primary)}
.sidebar__list li{margin-bottom:10px}
.sidebar__list a{font-size:var(--font-size-sm);color:var(--color-text)}
.sidebar__list a:hover{color:var(--color-primary)}

/* === Contact === */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact-info-card{background:var(--color-bg-alt);padding:24px;border-radius:var(--radius-md);margin-bottom:20px}
.contact-info-card h3{font-size:var(--font-size-lg);margin-bottom:8px}
.form-title{font-size:var(--font-size-2xl);margin-bottom:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-weight:600;margin-bottom:6px;font-size:var(--font-size-sm)}
.required{color:var(--color-error)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 16px;border:2px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base);transition:border-color var(--transition);background:#fff}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--color-primary)}
.form-error{display:block;color:var(--color-error);font-size:var(--font-size-xs);margin-top:4px;min-height:18px}
.form-success{padding:24px;background:#e8f5e9;border-radius:var(--radius-md);text-align:center;color:var(--color-success);font-weight:600}

/* === Quote Table === */
.quote-table-wrapper{overflow-x:auto;margin:20px 0}
.quote-table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}
.quote-table th{background:var(--color-primary);color:#fff;padding:12px 16px;text-align:left;font-weight:600;white-space:nowrap}
.quote-table td{padding:12px 16px;border-bottom:1px solid var(--color-border);vertical-align:middle}
.quote-table tbody tr:nth-child(even){background:var(--color-bg-alt)}
.quote-table__empty{text-align:center;padding:40px;color:var(--color-text-light)}
.quote-info{margin-bottom:20px;line-height:1.8}
.quote-footer ul{list-style:disc;padding-left:20px}
.quote-footer li{margin-bottom:4px;font-size:var(--font-size-sm)}

/* === Shipment Gallery === */
.shipment-gallery{margin-top:40px}
.shipment-gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shipment-gallery__item{border-radius:var(--radius-md);overflow:hidden}
.shipment-gallery__item img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* === 404 === */
.page-404{padding:100px 0;text-align:center}
.page-404__inner{max-width:500px;margin:0 auto}
.page-404__code{font-size:120px;font-weight:900;color:var(--color-primary);line-height:1;opacity:0.3}
.page-404__title{font-size:var(--font-size-3xl);font-weight:700;margin:16px 0}
.page-404__desc{color:var(--color-text-light);margin-bottom:32px}
.page-404__actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* === Empty State === */
.empty-state{text-align:center;padding:60px 20px;color:var(--color-text-light)}
.empty-state p{font-size:var(--font-size-lg)}

/* === Cases Placeholder === */
.cases-placeholder{text-align:center;padding:40px;color:var(--color-text-light);font-size:var(--font-size-lg)}

/* === Rich Text Toolbar === */
.rich-toolbar{display:flex;gap:2px;padding:4px 6px;background:var(--color-bg-alt);border:1px solid var(--color-border);border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;flex-wrap:wrap}
.rich-toolbar button{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;font-size:var(--font-size-xs);font-weight:600;color:var(--color-text);background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;transition:all .15s;font-family:inherit;line-height:1.4;white-space:nowrap}
.rich-toolbar button:hover{background:#e8eaf6;border-color:var(--color-primary);color:var(--color-primary)}
.rich-textarea{border-radius:0 0 var(--radius-sm) var(--radius-sm);margin-top:0}
.toolbar-visible textarea.rich-textarea,
.rich-toolbar + textarea{border-top-left-radius:0;border-top-right-radius:0}

/* === Utils === */
[hidden]{display:none !important}