:root {
  --primary: #CC0000;
  --primary-dark: #990000;
  --primary-light: #fff5f5;
  --dark: #1a1a1a;
  --text: #222;
  --text-muted: #666;
  --text-light: #999;
  --border: #e8e8e8;
  --bg-white: #ffffff;
  --bg-grey: #f8f8f8;
  --font-main: 'DM Sans', sans-serif;
  --font-display: 'DM Serif Display', serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --transition: all 0.22s ease;
}

/* ── TOPBAR ── */

.topbar-text{font-size:13px;color:#333;font-weight:500;letter-spacing:0.02em;}
.topbar-input{background:#fff;border:1px solid #ddd;border-radius:var(--radius-sm);padding:6px 12px;font-size:12px;color:#333;width:115px;font-family:var(--font-main);outline:none;transition:var(--transition);}
.topbar-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(204,0,0,0.08);}
.topbar-submit{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:6px 16px;font-size:12px;font-weight:600;transition:var(--transition);}
.topbar-submit:hover{background:var(--primary-dark);}


/* Lang switcher */

/* ── NAVBAR ── */

.navbar-search{flex:1;max-width:300px;display:flex;align-items:center;background:#f7f7f7;border:1px solid #e8e8e8;border-radius:24px;padding:9px 16px;gap:8px;transition:var(--transition);}
.navbar-search:focus-within{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(204,0,0,0.08);}
.navbar-search input::placeholder{color:#bbb;}
.nav-link:hover{color:var(--primary);background:var(--primary-light);}
.navbar-cta{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 22px;font-size:14px;font-weight:600;margin-left:10px;transition:var(--transition);white-space:nowrap;}
.navbar-cta:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(204,0,0,0.25);}

/* ── HERO ── */

.hero{position:relative;height:560px;overflow:hidden;}
.hero-bg{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,8,16,0.91) 36%,rgba(8,8,16,0.22) 100%);pointer-events:none;}
.hero-content{position:absolute;inset:0;display:flex;align-items:center;padding:0 80px;max-width:1280px;margin:0 auto;left:50%;transform:translateX(-50%);width:100%;}
.hero-text{max-width:530px;}
.hero-motto{font-size:13px;color:rgba(255,150,150,0.9);font-style:italic;margin-bottom:12px;letter-spacing:0.02em;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(204,0,0,0.18);border:1px solid rgba(204,0,0,0.35);border-radius:24px;padding:6px 14px;font-size:12px;color:#ffbbbb;font-weight:500;margin-bottom:20px;}
.hero-badge-dot{width:6px;height:6px;background:var(--primary);border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.4);}}
.hero-title{font-family:var(--font-display);font-size:48px;line-height:1.13;color:#fff;margin-bottom:16px;letter-spacing:-0.3px;}
.hero-title span{color:#ff8080;}
.hero-subtitle{font-size:15px;color:rgba(255,255,255,0.62);line-height:1.75;margin-bottom:34px;max-width:440px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.btn-hero-primary{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:14px 30px;font-size:15px;font-weight:600;transition:var(--transition);font-family:var(--font-main);display:inline-flex;align-items:center;justify-content:center;text-align:center;}
.btn-hero-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 22px rgba(204,0,0,0.4);}
.btn-hero-secondary{background:rgba(255,255,255,0.1);color:#fff;border:1.5px solid rgba(255,255,255,0.35);border-radius:var(--radius-sm);padding:14px 30px;font-size:15px;font-weight:500;font-family:var(--font-main);transition:var(--transition);backdrop-filter:blur(6px);display:inline-flex;align-items:center;justify-content:center;text-align:center;}
.btn-hero-secondary:hover{background:rgba(255,255,255,0.18);transform:translateY(-2px);}

/* ── TRUST BAR ── */

.trust-bar{background:var(--primary);padding:16px 0;}
.trust-bar-inner{max-width:1200px;margin:0 auto;padding:0 28px;display:flex;justify-content:space-around;flex-wrap:wrap;gap:12px;}
.trust-item{text-align:center;}
.trust-num{font-size:22px;font-weight:700;color:#fff;line-height:1.2;}
.trust-label{font-size:12px;color:rgba(255,255,255,0.72);margin-top:2px;}

/* ── INTL STRIP ── */

.intl-strip{background:#fff8f8;border-bottom:1px solid #ffe0e0;padding:12px 0;}
.intl-strip-inner{max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;}
.intl-item{display:flex;align-items:center;gap:7px;font-size:13px;color:#aa1111;font-weight:500;}
.intl-icon{width:16px;height:16px;stroke:var(--primary);fill:none;stroke-width:1.8;}

/* ── SECTIONS ── */

.section-sub{font-size:15px;color:#666;max-width:540px;line-height:1.7;margin-bottom:44px;}

/* ── SERVICES ── */

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.svc-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 22px;transition:var(--transition);position:relative;overflow:hidden;}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);transform:scaleX(0);transition:transform 0.3s ease;transform-origin:left;}
.svc-card:hover{border-color:#ffc0c0;box-shadow:var(--shadow-md);transform:translateY(-3px);}
.svc-card:hover::before{transform:scaleX(1);}
.svc-card.featured{border-color:#ffcccc;background:#fff8f8;}
.svc-card.featured::before{transform:scaleX(1);}
.svc-icon-wrap{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.svc-icon-wrap svg{width:22px;height:22px;fill:none;stroke-width:1.6;}
.svc-title{font-size:16px;font-weight:600;color:#111;margin-bottom:8px;}
.svc-desc{font-size:13px;color:#666;line-height:1.65;margin-bottom:16px;}
.svc-link{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:5px;transition:var(--transition);}
.svc-link svg{width:14px;height:14px;fill:none;stroke-width:2.5;transition:transform 0.2s;}
.svc-card:hover .svc-link svg{transform:translateX(3px);}

/* ── CATEGORIES ── */

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cat-card{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:#fff;transition:var(--transition);cursor:pointer;}
.cat-card:hover{border-color:#ffc0c0;box-shadow:var(--shadow-md);transform:translateY(-2px);}
.cat-thumb{height:88px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;}
.cat-body{padding:14px 16px;border-top:1px solid var(--border);}
.cat-name{font-size:14px;font-weight:600;color:#111;margin-bottom:4px;}
.cat-desc{font-size:12px;color:#888;line-height:1.5;}

/* ── BRANDS ── */

.brands-row{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;}
.brands-inner{max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.brand-pill{background:#f5f5f5;border:1px solid #e8e8e8;border-radius:var(--radius-sm);padding:8px 20px;font-size:14px;font-weight:600;color:#555;transition:var(--transition);}
.brand-pill:hover{background:var(--primary-light);border-color:#ffcccc;color:var(--primary);}

/* ── WHY ── */

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.why-item{padding:22px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition);}
.why-item:hover{border-color:#ffcccc;box-shadow:var(--shadow-sm);}
.why-icon{width:38px;height:38px;background:var(--primary-light);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.why-icon svg{width:18px;height:18px;stroke:var(--primary);fill:none;stroke-width:1.8;}
.why-title{font-size:15px;font-weight:600;color:#111;margin-bottom:6px;}
.why-desc{font-size:13px;color:#666;line-height:1.6;}

/* ── REVIEWS SLIDER ── */

.reviews-section{background:#f8f8f8;padding:72px 0;}
.reviews-slider-wrap{position:relative;overflow:hidden;}
.reviews-track{display:flex;gap:20px;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);}
.review-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;min-width:calc(33.33% - 14px);flex-shrink:0;transition:var(--transition);}
.review-card:hover{border-color:#ffcccc;box-shadow:var(--shadow-md);}
.review-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;}
.review-stars{color:#E6A817;font-size:15px;}
.review-country{font-size:11px;color:#aaa;background:#f5f5f5;padding:3px 9px;border-radius:10px;}
.review-text{font-size:13px;color:#444;line-height:1.7;margin-bottom:18px;font-style:italic;}
.review-author{display:flex;align-items:center;gap:10px;}
.review-avatar{width:38px;height:38px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--primary);flex-shrink:0;}
.review-name{font-size:14px;font-weight:600;color:#111;}
.review-role{font-size:12px;color:#aaa;}
.slider-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px;}
.slider-btn{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);}
.slider-btn:hover{border-color:var(--primary);background:var(--primary-light);}
.slider-btn svg{width:16px;height:16px;stroke:#666;fill:none;stroke-width:2;}
.slider-btn:hover svg{stroke:var(--primary);}
.slider-dots{display:flex;align-items:center;justify-content:center;gap:6px;}
.slider-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d8d8d8;cursor:pointer;flex-shrink:0;transition:background 0.25s ease,width 0.25s ease,border-radius 0.25s ease;}
.slider-dot.active{background:var(--primary);width:20px;border-radius:3px;}
.slider-dot:hover:not(.active){background:#bbb;}

/* ── IMAGE BANNER SLIDER ── */

.banner-slider{position:relative;overflow:hidden;height:300px;}
.banner-track{display:flex;height:100%;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);}
.banner-slide{min-width:100%;height:100%;position:relative;flex-shrink:0;}
.banner-slide img{width:100%;height:100%;object-fit:cover;}
.banner-slide-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,0.55) 30%,rgba(0,0,0,0.1) 100%);display:flex;align-items:center;padding:0 60px;}
.banner-slide-text{color:#fff;}
.banner-slide-text h3{font-family:var(--font-display);font-size:26px;margin-bottom:6px;}
.banner-slide-text p{font-size:14px;color:rgba(255,255,255,0.75);}
.banner-nav{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;}
.banner-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.45);cursor:pointer;flex-shrink:0;transition:background 0.25s ease,width 0.25s ease,border-radius 0.25s ease;}
.banner-dot.active{background:#fff;width:20px;border-radius:3px;}
.banner-dot:hover:not(.active){background:rgba(255,255,255,0.75);}
.banner-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);backdrop-filter:blur(4px);}
.banner-arrow:hover{background:rgba(255,255,255,0.35);}
.banner-arrow svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;}
.banner-prev{left:20px;}
.banner-next{right:20px;}

/* ── CTA BAND ── */

.cta-band::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border:40px solid rgba(255,255,255,0.06);border-radius:50%;}
.cta-band::after{content:'';position:absolute;bottom:-40px;left:-40px;width:180px;height:180px;border:30px solid rgba(255,255,255,0.05);border-radius:50%;}
.cta-inner{position:relative;z-index:1;}
.cta-motto{font-size:14px;color:rgba(255,200,200,0.9);font-style:italic;margin-bottom:10px;}
.cta-title{font-family:var(--font-display);font-size:38px;color:#fff;margin-bottom:10px;}
.cta-sub{font-size:15px;color:rgba(255,255,255,0.72);margin-bottom:32px;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-cta-white{background:#fff;color:var(--primary);border:none;border-radius:var(--radius-sm);padding:14px 30px;font-size:15px;font-weight:600;font-family:var(--font-main);transition:var(--transition);}
.btn-cta-white:hover{background:#f5f5f5;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.15);}
.btn-cta-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.5);border-radius:var(--radius-sm);padding:14px 30px;font-size:15px;font-weight:500;font-family:var(--font-main);transition:var(--transition);}

/* ── FOOTER ── */

.footer-brand img{height:44px;width:auto;margin-bottom:16px;}

/* ── WA FLOAT ── */

.wa-bubble.show{display:block;animation:fadeUp 0.3s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.wa-btn-float{width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,0.4);transition:var(--transition);cursor:pointer;}
.wa-btn-float:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(37,211,102,0.5);}

/* ── RESPONSIVE ── */

@media(max-width:900px){
  .services-grid,.cat-grid,.why-grid,.footer-grid{grid-template-columns:repeat(2,1fr);}
  .hero-title{font-size:36px;}
  .hero{height:480px;}
  .hero-content{padding:0 32px;}
  .navbar-nav{display:none;}
  .review-card{min-width:calc(50% - 10px);}
}

@media(max-width:600px){
  .services-grid,.cat-grid,.why-grid,.footer-grid{grid-template-columns:1fr;}
  .hero-title{font-size:28px;}
  .topbar-form{display:none;}
  .hero-content{padding:0 20px;}
}

@media (max-width: 900px) {
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .equip-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 600px) {
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .equip-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .equip-card {
    padding: 16px !important;
  }
}

@media (max-width: 400px) {
  .equip-grid {
    grid-template-columns: 1fr !important;
  }
}

.repair-hero{background:linear-gradient(135deg,#1a0000 0%,#3d0000 100%);padding:64px 0;}
.repair-hero-inner{max-width:1200px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.repair-hero h1{font-family:"DM Serif Display",serif;font-size:44px;color:#fff;margin-bottom:16px;line-height:1.2;}
.repair-hero h1 em{color:#ff8080;font-style:normal;}
.repair-hero p{font-size:16px;color:rgba(255,255,255,0.7);line-height:1.8;margin-bottom:28px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.repair-stats-box{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:32px;}
.repair-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px;}
.repair-stat{background:rgba(255,255,255,0.08);border-radius:10px;padding:16px;text-align:center;}
.repair-stat-num{font-size:26px;font-weight:700;color:#fff;}
.repair-stat-label{font-size:12px;color:rgba(255,255,255,0.55);margin-top:3px;}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.step-grid::before{content:"";position:absolute;top:24px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(to right,#CC0000,#ffaaaa);z-index:0;}
.step-item{text-align:center;position:relative;z-index:1;padding:0 16px;}
.step-num{width:48px;height:48px;background:#CC0000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;margin:0 auto 16px;}
.step-title{font-size:15px;font-weight:600;color:#111;margin-bottom:6px;}
.step-desc{font-size:13px;color:#666;line-height:1.55;}
.equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.equip-card{background:#fff;border:1px solid #e8e8e8;border-radius:14px;padding:22px;transition:all 0.22s ease;}
.equip-card:hover{border-color:#ffcccc;box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-2px);}
.equip-icon{width:44px;height:44px;background:#fff5f5;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.equip-icon svg{width:22px;height:22px;stroke:#CC0000;fill:none;stroke-width:1.6;}
.equip-title{font-size:15px;font-weight:600;color:#111;margin-bottom:6px;}
.equip-desc{font-size:13px;color:#666;line-height:1.6;}
.brands-accept{font-size:12px;color:#aaa;margin-top:10px;}
.brands-accept span{color:#CC0000;font-weight:600;}

/* ===== INLINE GRID MOBILE FIX ===== */

@media (max-width: 900px) {
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 600px) {
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ===== END INLINE GRID MOBILE FIX ===== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-main);color:var(--text);background:#fff;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:var(--font-main);background:none;border:none;padding:0;}
.topbar{background:#f5f5f5;border-bottom:1px solid #e0e0e0;padding:9px 0;}
.topbar-inner{max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.topbar-text{font-size:13px;color:#333;font-weight:500;}
.topbar-text span{color:var(--primary);font-weight:600;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.topbar-form{display:flex;gap:7px;}
.topbar-input{background:#fff;border:1px solid #ddd;border-radius:var(--radius-sm);padding:6px 12px;font-size:12px;color:#333;width:115px;font-family:var(--font-main);outline:none;}
.topbar-submit{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:6px 16px;font-size:12px;font-weight:600;}
.navbar{background:#fff;border-bottom:1px solid #e8e8e8;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm);}
.navbar-logo img{height:46px;width:auto;}
.navbar-search input{border:none;background:transparent;font-size:13px;color:#333;width:100%;font-family:var(--font-main);outline:none;}
.nav-link{font-size:14px;font-weight:500;color:#555;padding:7px 13px;border-radius:var(--radius-sm);transition:var(--transition);white-space:nowrap;}
.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-light);}
.navbar-cta{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 22px;font-size:14px;font-weight:600;margin-left:10px;transition:var(--transition);}
.navbar-cta:hover{background:var(--primary-dark);}
.container{max-width:1200px !important;margin:0 auto !important;padding:0 28px !important;width:100% !important;box-sizing:border-box !important;}
.section{padding:72px 0;}
.section-white{background:#fff;}
.section-grey{background:#f8f8f8;}
.section-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px;}
.section-title{font-family:var(--font-display);font-size:36px;color:#111;margin-bottom:10px;line-height:1.2;}
.section-sub{font-size:15px;color:#666;max-width:600px;line-height:1.7;margin-bottom:44px;}
.page-hero{background:var(--bg-grey);border-bottom:1px solid var(--border);padding:52px 0 44px;}
.page-hero-tag{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px;}
.page-hero-title{font-family:var(--font-display);font-size:44px;color:#111;margin-bottom:14px;line-height:1.15;}
.page-hero-sub{font-size:16px;color:#555;max-width:600px;line-height:1.75;}
.breadcrumb{font-size:13px;color:#aaa;margin-bottom:20px;}
.breadcrumb a{color:#888;}
.breadcrumb span{color:var(--primary);}
.btn-primary,.btn-outline,.btn-wa,.btn-cta-white,.btn-cta-outline{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:7px;white-space:nowrap;}
.btn-primary{background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:12px 26px;font-size:14px;font-weight:600;font-family:var(--font-main);transition:var(--transition);cursor:pointer;}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary);border-radius:var(--radius-sm);padding:11px 26px;font-size:14px;font-weight:600;font-family:var(--font-main);transition:var(--transition);cursor:pointer;}
.btn-outline:hover{background:var(--primary);color:#fff;}
.btn-wa{background:#25D366;color:#fff;border:none;border-radius:var(--radius-sm);padding:12px 26px;font-size:14px;font-weight:600;font-family:var(--font-main);transition:var(--transition);cursor:pointer;}
.btn-wa:hover{background:#1da851;}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;transition:var(--transition);}
.card:hover{border-color:#ffcccc;box-shadow:var(--shadow-md);}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.cta-band{background:var(--primary);padding:64px 0;text-align:center;position:relative;overflow:hidden;}
.cta-band::before{content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px;border:40px solid rgba(255,255,255,0.06);border-radius:50%;}
.cta-title{font-family:var(--font-display);font-size:36px;color:#fff;margin-bottom:10px;position:relative;z-index:1;}
.cta-sub{font-size:15px;color:rgba(255,255,255,0.75);margin-bottom:32px;position:relative;z-index:1;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}
.btn-cta-white{background:#fff;color:var(--primary);border:none;border-radius:var(--radius-sm);padding:13px 28px;font-size:14px;font-weight:600;font-family:var(--font-main);transition:var(--transition);cursor:pointer;}
.btn-cta-white:hover{background:#f5f5f5;transform:translateY(-1px);}
.btn-cta-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.5);border-radius:var(--radius-sm);padding:13px 28px;font-size:14px;font-weight:500;font-family:var(--font-main);transition:var(--transition);cursor:pointer;}
.btn-cta-outline:hover{border-color:#fff;background:rgba(255,255,255,0.1);}
.footer{background:#f4f4f4;border-top:1px solid #e0e0e0;padding:56px 0 28px;}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.footer-motto-text{font-size:14px;color:var(--primary);font-style:italic;font-weight:500;margin-bottom:10px;}
.footer-tagline{font-size:14px;color:#555;line-height:1.8;margin-bottom:14px;}
.footer-contact{font-size:13px;color:#666;line-height:2.2;}
.footer-contact a{color:#555;transition:var(--transition);}
.footer-contact a:hover{color:var(--primary);}
.footer-countries{margin-top:16px;}
.footer-countries-label{font-size:11px;color:#aaa;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;}
.country-tags{display:flex;gap:6px;flex-wrap:wrap;}
.ctag{background:#eee;border:1px solid #ddd;border-radius:4px;padding:3px 9px;font-size:11px;color:#666;}
.footer-col h4{font-size:14px;font-weight:700;color:#333;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:18px;}
.footer-col a{display:block;font-size:14px;color:#666;margin-bottom:10px;transition:var(--transition);}
.footer-col a:hover{color:var(--primary);padding-left:4px;}
.footer-bottom{border-top:1px solid #ddd;padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-copy{font-size:13px;color:#888;}
.footer-wa{display:inline-flex;align-items:center;gap:8px;background:#0F6E56;color:#fff;padding:9px 18px;border-radius:24px;font-size:13px;font-weight:600;transition:var(--transition);}
.footer-wa:hover{background:#0a5542;}
.footer-wa-dot{width:7px;height:7px;background:#5DCAA5;border-radius:50%;}
.wa-float{position:fixed;bottom:28px;right:28px;z-index:999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.wa-bubble{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:12px 16px;font-size:13px;max-width:220px;box-shadow:0 4px 20px rgba(0,0,0,0.1);display:none;}
.wa-bubble.show{display:block;}
.wa-bubble strong{display:block;font-size:13px;margin-bottom:3px;}
.wa-bubble span{font-size:12px;color:#888;}
.wa-btn-float{width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,0.4);}
.wa-btn-float svg{width:28px;height:28px;fill:#fff;}
.quote-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;}
.form-title{font-family:var(--font-display);font-size:24px;color:#111;margin-bottom:6px;}
.form-sub{font-size:14px;color:#888;margin-bottom:28px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:4px;}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.form-group label{font-size:13px;font-weight:600;color:#444;}
.form-group input,.form-group select,.form-group textarea{border:1px solid #ddd;border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;font-family:var(--font-main);color:#333;outline:none;transition:var(--transition);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(204,0,0,0.08);}
.form-group textarea{resize:vertical;min-height:100px;}
@media(max-width:900px){.grid-3,.grid-4,.footer-grid,.two-col,.form-row{grid-template-columns:1fr 1fr!important;}.navbar-nav{display:none;}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4,.footer-grid,.two-col,.form-row{grid-template-columns:1fr!important;}.topbar-form{display:none;}}

/* ===== MOBILE & TABLET RESPONSIVE FIX v2 ===== */

/* 1. Prevent ALL horizontal scroll - most critical fix */

html {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* 2. Hamburger - hidden by default, shown on mobile */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
  margin-left: auto;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: all 0.28s;
}

/* 3. Mobile nav drawer */

.mobile-nav {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 9999;
  width: 100%;
}

.mobile-nav.open { display: flex; }
.mobile-nav a {
  display: block;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
  text-decoration: none;
}

.mobile-nav a:active { background: #fff5f5; color: #CC0000; }
.mobile-nav .mob-wa {
  margin: 12px 16px 16px;
  background: #CC0000;
  color: #fff !important;
  text-align: center;
  border-radius: 8px;
  border-bottom: none !important;
  font-weight: 600;
  padding: 14px 20px;
}

/* ── TABLET (max 900px) ── */

@media (max-width: 900px) {
  /* Navbar */
  .navbar-motto { display: none; }
  
  .navbar-nav { display: none; }
  .navbar-cta { display: none; }
  .navbar-inner { padding: 0 16px; height: 60px; gap: 12px; }
  .hamburger { display: flex; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; }

  /* Grids */
  .services-grid, .cat-grid, .why-grid,
  .grid-3, .grid-4, .two-col, .form-row { grid-template-columns: repeat(2,1fr) !important; }

  /* Article layout */
  .article-wrap { grid-template-columns: 1fr !important; }
  .article-toc { display: none; }
  .verdict-grid { grid-template-columns: 1fr !important; }
  .article-h1 { font-size: 32px !important; }

  /* Blog layout */
  .blog-hero-inner, .blog-layout, .yt-grid, .featured-post { grid-template-columns: 1fr !important; }

  /* Hero */
  .hero { height: auto !important; min-height: 360px; }
  .hero-content {
    position: relative !important;
    transform: none !important;
    left: 0 !important;
    padding: 44px 28px !important;
    max-width: 100% !important;
  }
  .hero-title { font-size: 34px !important; }
}

/* ── PHONE (max 600px) ── */

@media (max-width: 600px) {
  /* Topbar */
  .topbar-inner { flex-direction: column; align-items: flex-start; padding: 8px 16px; gap: 4px; }
  .topbar-form { display: none !important; }
  .topbar-text { font-size: 12px; white-space: normal; }

  /* Navbar */
  .navbar-logo img { height: 34px !important; }

  /* Hero */
  .hero { min-height: 280px; }
  .hero-content { padding: 32px 16px !important; }
  .hero-title { font-size: 26px !important; line-height: 1.2 !important; }
  .hero-subtitle { font-size: 13px !important; margin-bottom: 24px !important; }
  .hero-buttons { flex-direction: column !important; gap: 10px; }
  .hero-buttons a, .hero-buttons button { width: 100% !important; text-align: center; box-sizing: border-box; }
  .btn-hero-primary, .btn-hero-secondary { width: 100% !important; justify-content: center; }

  /* Sections */
  .section { padding: 40px 0 !important; }
  .container { padding: 0 16px !important; }
  .page-hero { padding: 32px 0 24px !important; }
  .page-hero-title { font-size: 28px !important; line-height: 1.2 !important; }
  .section-title { font-size: 22px !important; }

  /* All grids: single column */
  .services-grid, .cat-grid, .why-grid, .footer-grid,
  .grid-2, .grid-3, .grid-4, .two-col, .form-row,
  .stats-grid, .process-steps { grid-template-columns: 1fr !important; }

  /* Footer */
  .footer { padding: 36px 0 16px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }

  /* CTA band */
  .cta-band { padding: 44px 0 !important; }
  .cta-title { font-size: 22px !important; }
  .cta-actions { flex-direction: column; align-items: center; gap: 10px; }
  .cta-actions button, .cta-actions a { width: 90% !important; }

  /* Blog cards */
  .blog-card { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column; }
  .blog-card-thumb { width: 100% !important; height: 160px !important; }

  /* Trust bar and strips */
  .site-trust-strip-inner { gap: 8px; padding: 0 14px; }
  .intl-strip-inner { gap: 12px; padding: 0 14px; flex-wrap: wrap; justify-content: center; }

  /* Review slider — gap and sizing handled by dedicated @700px block below */

  /* WhatsApp float */
  .wa-float { bottom: 16px; right: 14px; }
  .wa-btn-link { width: 50px !important; height: 50px !important; }
  .wa-bubble { display: none !important; }

  /* Forms */
  input, textarea, select { width: 100% !important; max-width: 100%; }

  /* Page hero */
  .page-hero-sub { font-size: 14px !important; }
}

/* ===== END MOBILE FIX v2 ===== */

/* ── SCROLL FIX: ensure page scrolls on iOS/Android ── */

html, body {
  overflow-x: hidden;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  height: auto !important;
  min-height: 100%;
}

/* Hero overlay must NOT block touch/scroll */

.hero-overlay {
  pointer-events: none;
}

/* Mobile nav WhatsApp button fix */

.mobile-nav .mob-wa {
  white-space: normal !important;
  word-break: break-word;
  display: block !important;
  width: calc(100% - 32px) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 14px 16px !important;
  line-height: 1.4 !important;
}

/* Topbar send me button - bigger on tablet/desktop */

@media (min-width: 768px) {
  .topbar-submit {
    padding: 9px 24px !important;
    font-size: 13px !important;
    height: auto !important;
  }
  .topbar-input {
    padding: 8px 14px !important;
    font-size: 13px !important;
    width: 145px !important;
  }
}

/* Ensure hero content doesn't block scroll on mobile */
@media (max-width: 900px) {
  .hero-content {
    pointer-events: none;
  }
  .hero-content a,
  .hero-content button {
    pointer-events: auto;
  }
}

/* WA bubble should never block scroll */

.wa-float {
  pointer-events: none;
}

.wa-float > *, .wa-float a, .wa-float button {
  pointer-events: auto;
}

/* ===== SAMSUNG / ANDROID CHROME FIXES + REPAIR PAGE v4 ===== */

/* Samsung Internet & Android Chrome: ensure scroll works */

html {
  overflow-x: hidden;
  overflow-y: scroll;               /* force scroll on Samsung */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;              /* allow vertical pan, key for Android */
}

body {
  overflow-x: hidden;
  overflow-y: visible;
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;   /* prevent Samsung auto font resize */
  text-size-adjust: 100%;
}

/* Any element with overflow:hidden must NOT block vertical scroll */

.hero, .banner-slider, .reviews-slider-wrap, .cta-band {
  touch-action: pan-y;
}

/* Hero overlay & content: never block touch */

.hero-overlay,
.hero-bg {
  pointer-events: none;
  touch-action: none;
}

.hero-content {
  touch-action: pan-y;
}

.hero-content a,
.hero-content button {
  touch-action: manipulation;
}

/* WA float: never trap scroll */

.wa-float {
  pointer-events: none;
  touch-action: none;
}

.wa-float > *,
.wa-float a,
.wa-float button,
.wa-btn-float {
  pointer-events: auto;
  touch-action: manipulation;
}

/* ── REPAIR PAGE: stat boxes fix ── */

/* Desktop: 2x2 grid is fine */

.repair-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.repair-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.repair-stat-num {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;      /* CRITICAL: stop text wrapping vertically */
  overflow: hidden;
  text-overflow: ellipsis;
}

.repair-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
  white-space: nowrap;
}

.repair-stat {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  min-width: 0;             /* allow flex/grid children to shrink */
  overflow: hidden;
}

/* ── TABLET 900px ── */

@media (max-width: 900px) {
  /* Repair hero: stack vertically */
  .repair-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 20px !important;
  }
  .repair-hero {
    padding: 44px 0 !important;
  }
  .repair-hero h1 {
    font-size: 34px !important;
  }
  /* Stats: keep 2x2 but bigger cells */
  .repair-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .repair-stat-num {
    font-size: 22px !important;
  }
}

/* ── PHONE 600px ── */

@media (max-width: 600px) {
  /* Repair hero */
  .repair-hero {
    padding: 36px 0 !important;
  }
  .repair-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 0 16px !important;
  }
  .repair-hero h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .repair-hero p {
    font-size: 14px !important;
  }

  /* Stat boxes: 2x2 on phone but properly sized */
  .repair-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .repair-stat {
    padding: 12px 8px !important;
  }
  .repair-stat-num {
    font-size: 20px !important;
    white-space: nowrap !important;
  }
  .repair-stat-label {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .repair-stats-box {
    padding: 18px 14px !important;
  }

  /* General inline grids with style= attribute — collapse on phone */
  /* (the quote form grid inside repair uses inline style) */
}

/* Samsung-specific: fix sticky navbar causing scroll lock */

@supports (-webkit-overflow-scrolling: touch) {
  .navbar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* ===== END v4 ===== */

/* ===== NAVBAR v5 ===== */

.navbar{background:#fff;border-bottom:1px solid #e8e8e8;position:sticky;top:0;z-index:200;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);}
.navbar-inner{max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:20px;height:72px;}
.navbar-logo img{height:46px;width:auto;display:block;}
.navbar-motto{font-size:12px;color:#999;font-style:italic;white-space:nowrap;}
.navbar-search{flex:1;max-width:300px;display:flex;align-items:center;background:#f7f7f7;border:1px solid #e8e8e8;border-radius:24px;padding:9px 16px;gap:8px;}
.navbar-search svg{width:15px;height:15px;stroke:#bbb;fill:none;stroke-width:2;flex-shrink:0;}
.navbar-search input{border:none;background:transparent;font-size:13px;color:#333;width:100%;outline:none;font-family:inherit;}
.navbar-nav{display:flex;align-items:center;gap:2px;margin-left:auto;}
.nav-link{font-size:14px;font-weight:500;color:#555;padding:7px 13px;border-radius:6px;white-space:nowrap;text-decoration:none;display:inline-block;}
.nav-link:hover,.nav-link.active{color:#CC0000;background:#fff5f5;}
.navbar-cta{background:#CC0000;color:#fff;border:none;border-radius:6px;padding:10px 22px;font-size:14px;font-weight:600;margin-left:10px;white-space:nowrap;cursor:pointer;font-family:inherit;}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:8px;background:none;border:none;margin-left:auto;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.hamburger span{display:block;width:22px;height:2px;background:#333;border-radius:2px;transition:all 0.28s ease;pointer-events:none;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mob-drawer{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;background:rgba(0,0,0,0.55);-webkit-tap-highlight-color:transparent;}
.mob-drawer.open{display:block;}
.mob-drawer-inner{position:absolute;top:0;left:0;right:0;background:#fff;border-bottom:3px solid #CC0000;overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:90vh;}
.mob-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #f0f0f0;}
.mob-drawer-header img{height:34px;width:auto;}
.mob-close{background:none;border:none;font-size:26px;color:#666;cursor:pointer;padding:2px 8px;line-height:1;-webkit-tap-highlight-color:transparent;}
.mob-drawer-nav a{display:block;padding:14px 20px;font-size:15px;font-weight:500;color:#333;text-decoration:none;border-bottom:1px solid #f5f5f5;-webkit-tap-highlight-color:rgba(204,0,0,0.08);}
.mob-drawer-nav a:active{background:#fff5f5;color:#CC0000;}
.mob-drawer-wa{display:block;margin:14px 16px 20px;background:#CC0000;color:#fff;text-align:center;border-radius:8px;padding:15px 20px;font-size:15px;font-weight:600;text-decoration:none;border-bottom:none !important;}
@media(max-width:900px){
  .navbar-motto,.navbar-nav,.navbar-cta{display:none;}
  .navbar-inner{padding:0 16px;height:62px;gap:12px;}
  .hamburger{display:flex;}
  /* Fixed navbar on mobile — sticky is unreliable on Android/iOS */
  .navbar{position:fixed !important;top:0;left:0;right:0;z-index:9999 !important;}
  body{padding-top:62px;}
}

@media(max-width:600px){
  .navbar-inner{height:58px;}
  .navbar-logo img{height:34px;}
  body{padding-top:58px;}
}

/* ===== END NAVBAR v5 ===== */

/* ===== SEARCH CLEAN v8 ===== */

.navbar-search {
  flex: 0 1 200px !important;
  min-width: 140px !important;
  max-width: 200px !important;
  display: flex !important;
  align-items: center;
  background: #f7f7f7;
  border: 1px solid #e8e8e8;
  border-radius: 24px;
  padding: 7px 14px;
  gap: 8px;
  position: relative;        /* anchor for dropdown */
  transition: border-color .2s, box-shadow .2s;
}

.navbar-search:focus-within {
  border-color: #CC0000;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(204,0,0,0.08);
}

.navbar-search svg {
  width: 14px; height: 14px;
  stroke: #aaa; fill: none; stroke-width: 2;
  flex-shrink: 0; pointer-events: none;
}

.navbar-search input {
  border: none; background: transparent;
  font-size: 13px; color: #333; width: 100%;
  font-family: inherit; outline: none;
}

.navbar-search input::placeholder { color: #bbb; }
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: -10px; right: -10px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  z-index: 9999 !important;
  display: none;
  overflow: hidden;
  min-width: 220px;
}

.search-dropdown.active { display: block !important; }
.search-item {
  display: block;
  padding: 11px 16px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f5f5f5;
  transition: background .15s, color .15s;
}

.search-item:hover, .search-item.active-item {
  background: #fff5f5;
  color: #CC0000;
}

.search-no-result {
  padding: 12px 16px;
  font-size: 13px;
  color: #aaa;
}

/* Hide search on narrow screens — single clear rule */

@media (max-width: 1100px) {
}

/* ===== END SEARCH CLEAN v8 ===== */

/* ===== AUDIT FIXES v9 ===== */

/* WCAG 2.1 AA — ensure minimum contrast on key text elements */

body { color: #1a1a1a; }
.section-sub, .body, p { color: #444; }

/* Focus rings for keyboard accessibility */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #CC0000;
  outline-offset: 2px;
}

/* Skip-to-content link for screen readers */

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: #CC0000;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus { top: 8px; }

/* font-display: swap for performance */

@font-face { font-display: swap; }

/* Trust badge bar */

.site-trust-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.trust-icon {
  width: 18px;
  height: 18px;
  fill: #CC0000;
  flex-shrink: 0;
}

/* Custom 404 styles */

.not-found-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
}

/* Breadcrumb */

.breadcrumb {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 16px;
}

.breadcrumb a { color: #888; }
.breadcrumb a:hover { color: #CC0000; }

/* Image alt text helper — ensures images never appear broken */

img { object-fit: cover; }
img[alt]::after {
  content: attr(alt);
  display: block;
  font-size: 11px;
  color: #888;
  text-align: center;
  padding: 4px;
}

/* Pricing clarity — "price on request" style */

.price-on-request {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff5f5;
  border: 1px solid #ffcccc;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #CC0000;
  cursor: pointer;
}

/* WhatsApp button — always show phone as fallback */

.wa-fallback {
  display: block;
  font-size: 11px;
  color: #888;
  text-align: center;
  margin-top: 4px;
}

/* ARIA landmark helpers */

main { display: block; }
@media (max-width: 600px) {
  .site-trust-strip-inner { gap: 16px; }
  .trust-item { font-size: 11px; }
}

/* ===== END AUDIT FIXES v9 ===== */

/* ===== TRUST STRIP v9 ===== */

.site-trust-strip {
  background: #f8f8f8;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 0;
}

.site-trust-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px 36px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}

.trust-icon {
  width: 16px;
  height: 16px;
  stroke: #CC0000;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .site-trust-strip-inner { gap: 12px 20px; }
  .trust-item { font-size: 11px; }
}

/* ===== END TRUST STRIP v9 ===== */

.navbar-logo{flex-shrink:0;}
.sbubble{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:5px 13px;font-size:12px;color:#fff;cursor:pointer;}

.sbubble{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:5px 13px;font-size:12px;color:#fff;cursor:pointer;}
.sbubble:hover{background:#CC0000;border-color:#CC0000;}
.sf-btn{background:#fff;border:1px solid #e8e8e8;border-radius:20px;padding:5px 13px;font-size:11px;font-weight:600;color:#666;cursor:pointer;font-family:var(--fs);white-space:nowrap;}
.sf-btn:hover,.sf-btn.active{background:#CC0000;color:#fff;border-color:#CC0000;}
.state-section{margin-bottom:52px;}
.state-section.hidden{display:none;}
.state-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #CC0000;}
.state-flag{font-size:28px;}
.state-name{font-family:var(--fd);font-size:24px;color:#111;margin-bottom:2px;}
.state-meta{font-size:12px;color:#888;}
.inst-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.inst-photo-card{background:#f8f8f8;border-radius:10px;overflow:hidden;border:1px solid #e8e8e8;transition:all .2s;}
.inst-photo-card:hover{border-color:#ffcccc;box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-2px);}
.inst-photo-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:#eee;}
.inst-photo-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.inst-photo-card:hover .inst-photo-wrap img{transform:scale(1.05);}
.inst-view-btn{position:absolute;bottom:8px;right:8px;background:#CC0000;color:#fff;border-radius:4px;padding:4px 10px;font-size:11px;font-weight:600;opacity:0;transition:opacity .2s;text-decoration:none;}
.inst-photo-card:hover .inst-view-btn{opacity:1;}
.inst-caption{font-size:11px;color:#666;padding:7px 9px;line-height:1.4;}
@media(max-width:900px){.inst-grid{grid-template-columns:repeat(3,1fr)!important;}}
@media(max-width:600px){.inst-grid{grid-template-columns:repeat(2,1fr)!important;}}

/* === WOOCOMMERCE & PRODUCT STYLES === */

/* ── PRODUCT FILTER BAR ───────────────────────────────────────────────────── */

.product-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;}
.filter-btn{background:#fff;border:1px solid #e8e8e8;border-radius:20px;padding:7px 16px;font-size:13px;font-weight:600;color:#555;cursor:pointer;font-family:var(--font-main);transition:all 0.2s;}
.filter-btn:hover,.filter-btn.active{background:#CC0000;color:#fff;border-color:#CC0000;}

/* ── PRODUCTS GRID ────────────────────────────────────────────────────────── */

.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px;}
@media(max-width:1100px){.products-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px){.products-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.products-grid{grid-template-columns:1fr;}}

/* ── PRODUCT CARD ─────────────────────────────────────────────────────────── */

.product-card{background:#fff;border:1px solid #e8e8e8;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:all 0.22s;text-decoration:none;}
.product-card:hover{border-color:#ffcccc;box-shadow:0 4px 20px rgba(0,0,0,0.08);transform:translateY(-2px);}
.product-card-img-wrap{display:block;aspect-ratio:1;overflow:hidden;background:#f8f8f8;}
.product-card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s;}
.product-card:hover .product-card-img-wrap img{transform:scale(1.04);}
.product-card-body{padding:16px;display:flex;flex-direction:column;flex:1;gap:6px;}
.product-card-cat{font-size:11px;font-weight:700;color:#CC0000;text-transform:uppercase;letter-spacing:0.06em;}
.product-card-title{font-family:var(--font-main);font-size:14px;font-weight:600;color:#111;line-height:1.4;margin:0;}
.product-card-title a{color:#111;text-decoration:none;}
.product-card-title a:hover{color:#CC0000;}
.product-card-sku{font-size:11px;color:#aaa;}
.product-card-price{font-size:15px;font-weight:700;color:#CC0000;margin-top:4px;}
.product-card-price .amount{font-size:15px;}
.product-card-actions{display:flex;gap:8px;margin-top:auto;padding-top:12px;align-items:stretch;}
.product-card-actions a{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;padding:7px 10px;box-sizing:border-box;}

/* ── SINGLE PRODUCT ───────────────────────────────────────────────────────── */

.product-single-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:60px;}
@media(max-width:768px){.product-single-grid{grid-template-columns:1fr;gap:32px;}}
.product-main-image img{width:100%;border-radius:12px;border:1px solid #e8e8e8;}
.product-no-img{height:300px;background:#f8f8f8;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#aaa;border:1px solid #e8e8e8;}
.product-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.product-thumbs img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:2px solid #e8e8e8;cursor:pointer;transition:border-color 0.2s;}
.product-thumbs img:hover{border-color:#CC0000;}
.product-single-title{font-family:var(--font-display);font-size:32px;color:#111;margin-bottom:8px;line-height:1.2;}
.product-single-sku{font-size:13px;color:#aaa;margin-bottom:8px;}
.product-single-price{font-size:28px;font-weight:700;color:#CC0000;margin-bottom:16px;}
.product-single-desc{font-size:15px;color:#555;line-height:1.75;margin-bottom:24px;}
.product-single-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.product-single-actions a{padding:14px 24px;font-size:14px;font-weight:600;border-radius:6px;text-decoration:none;cursor:pointer;}
.product-single-meta{font-size:13px;color:#888;padding:14px;background:#f8f8f8;border-radius:8px;}
.product-full-desc{border-top:1px solid #e8e8e8;padding-top:40px;margin-top:20px;}
.product-full-desc p,.product-full-desc li{font-size:15px;color:#555;line-height:1.75;}

/* ── WooCommerce overrides ───────────────────────────────────────────────── */

.woocommerce-breadcrumb{display:none;}
.woocommerce .woocommerce-ordering,.woocommerce .woocommerce-result-count{display:none;}
.price ins,.price del{font-size:inherit;}

/* ================================================================
   ADDLER THEME — COMPREHENSIVE MOBILE & TOUCH FIXES
   Covers: iPhone Safari, Android Chrome, all breakpoints
   ================================================================ */

/* ── Base: prevent horizontal overflow on all devices ───────────── */

html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ── Touch targets: minimum 44px for all interactive elements ───── */

button, a, input, select, textarea, .filter-btn, .nav-link,
.mob-drawer-nav a, .footer-wa, .btn-primary, .btn-outline,
.btn-wa, .btn-cta-white, .btn-cta-outline, .navbar-cta {
  -webkit-tap-highlight-color: transparent;
}

button, .btn-primary, .btn-outline, .btn-wa, .btn-cta-white,
.btn-cta-outline, .navbar-cta {
  min-height: 44px;
  cursor: pointer;
}

/* ── Images: never overflow their container ────────────────────── */

img {
  max-width: 100%;
  height: auto;
}

/* ── Hero: full-width text, smaller title on mobile ─────────────── */

@media (max-width: 900px) {
  .hero { height: auto !important; min-height: 380px; }
  .hero-content { padding: 40px 20px !important; }
  .hero-title { font-size: 32px !important; line-height: 1.2 !important; }
  .hero-subtitle { font-size: 14px !important; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions a, .hero-actions button { width: 100% !important; text-align: center; }
}

/* ── Single product: stack image + details on mobile ──────────── */

@media (max-width: 768px) {
  .product-single-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .product-single-title { font-size: 24px !important; }
  .product-single-actions { flex-direction: column; }
  .product-single-actions a { width: 100% !important; text-align: center; }
}

/* ── Repair step grid: 2 cols on tablet, 1 col on phone ─────────── */

@media (max-width: 900px) {
  .step-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
  .step-grid { grid-template-columns: 1fr !important; }
  .equip-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Repair hero: responsive ────────────────────────────────────── */

@media (max-width: 600px) {
  .repair-hero { padding: 40px 0 !important; }
  .repair-hero h1 { font-size: 28px !important; }
  .repair-hero p { font-size: 14px !important; }
  .repair-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Installations: filter bar wraps on mobile ───────────────────── */

@media (max-width: 600px) {
  .inst-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .state-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sf-btn { font-size: 11px !important; padding: 5px 10px !important; }
}

/* ── Contact form: full width on mobile ──────────────────────────── */

@media (max-width: 600px) {
  .quote-form { padding: 20px 16px !important; }
  .form-row { grid-template-columns: 1fr !important; }
}

/* ── CTA band: stack buttons on mobile ───────────────────────────── */

@media (max-width: 600px) {
  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions button, .cta-actions a { width: 90% !important; }
  .cta-title { font-size: 24px !important; }
}

/* ── Footer: single column on mobile ────────────────────────────── */

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
  .footer { padding: 36px 0 20px !important; }
  .container { padding: 0 16px !important; }
}

/* ── Products grid: responsive ───────────────────────────────────── */

@media (max-width: 900px) {
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .product-filter-bar { gap: 6px; }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr !important; }
}

/* ── Navbar: ensure hamburger works on all mobiles ──────────────── */

@media (max-width: 900px) {
  .navbar-motto, .navbar-search, .navbar-nav, .navbar-cta { display: none !important; }
  .hamburger { display: flex !important; }
  .navbar-inner { padding: 0 16px !important; height: 62px !important; }
  .navbar-logo img { height: 36px !important; }
}

/* ── Trust strip: hide on very small screens ─────────────────────── */

@media (max-width: 480px) {
  .site-trust-strip { display: none; }
}

/* ── iPhone Safari specific fixes ───────────────────────────────── */

@supports (-webkit-touch-callout: none) {
  /* Prevent zoom on input focus in iOS */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], select, textarea {
    font-size: 16px !important;
  }
  /* navbar fixed on mobile — no sticky override needed */
}

/* ── Safe area insets for iPhone X+ notch ────────────────────────── */

@media (max-width: 900px) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .wa-float {
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: calc(14px + env(safe-area-inset-right));
  }
}

/* ── Section padding: reduce on mobile ──────────────────────────── */

@media (max-width: 600px) {
  .section { padding: 40px 0 !important; }
  .page-hero { padding: 32px 0 24px !important; }
  .page-hero-title { font-size: 26px !important; line-height: 1.2 !important; }
  .page-hero-sub { font-size: 14px !important; }
  .section-title { font-size: 22px !important; }
}

/* ── Two-column inline grids: collapse on mobile ────────────────── */

@media (max-width: 900px) {
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* END MOBILE FIXES */

/* ── Hide plugin watermarks ─────────────────────────────────────── */

.wpcwl-watermark,
.wpcw-watermark,
[class*="wpclever"] img,
[class*="wpclever-watermark"],
.wcwl-watermark,
a[href*="wpclever.net"],
img[src*="wpclever"],
.wpcwl img { 
  display: none !important; 
}

/* ================================================================
   MOBILE LAYOUT CRITICAL FIXES
   ================================================================ */

/* ── Hero: fix text visibility on mobile ────────────────────────── */

@media (max-width: 900px) {
  .hero {
    height: auto !important;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-bg {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .hero-overlay {
    position: absolute !important;
    inset: 0;
  }
  .hero-content {
    position: relative !important;
    z-index: 2;
    padding: 50px 20px 40px !important;
    max-width: 100% !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .hero-text {
    max-width: 100% !important;
  }
  .hero-title {
    font-size: 30px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }
  .hero-subtitle, .hero-sub {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }
  .hero-motto { font-size: 12px !important; }
  .hero-badge { font-size: 11px !important; margin-bottom: 12px !important; }
  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start;
  }
  .btn-hero-primary, .btn-hero-secondary {
    width: 100% !important;
    text-align: center !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 600px) {
  .hero { min-height: 420px; }
  .hero-title { font-size: 26px !important; }
  .hero-content { padding: 40px 16px 32px !important; }
}

/* ── Stats / intl strip: wrap nicely on mobile ──────────────────── */

@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .intl-strip-inner {
    gap: 10px !important;
    padding: 0 12px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .intl-item {
    font-size: 11px !important;
    gap: 4px;
  }
  .site-trust-strip-inner {
    gap: 10px !important;
    padding: 10px 12px !important;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .trust-item { white-space: nowrap; }
}

/* ── Category cards: 2 col on mobile ────────────────────────────── */

@media (max-width: 600px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .cat-thumb { height: 80px !important; font-size: 12px !important; }
  .cat-name { font-size: 13px !important; }
  .cat-desc { font-size: 11px !important; }
}

/* ── Services grid on mobile ────────────────────────────────────── */

@media (max-width: 600px) {
  .services-grid, .why-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Review slider: full width on mobile ────────────────────────── */

@media (max-width: 699px) {
  .reviews-track { gap: 0 !important; }
  .review-card {
    min-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }
  .reviews-slider-wrap { padding: 0 !important; }
}

/* ── Repair hero two-col: stack on mobile ────────────────────────── */

@media (max-width: 768px) {
  .repair-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px;
    padding: 0 16px !important;
  }
}

/* ── General card padding on mobile ─────────────────────────────── */

@media (max-width: 600px) {
  .card { padding: 16px !important; }
  .section-tag { font-size: 11px !important; }
}

/* ================================================================
   FOOTER & MOBILE DRAWER FIXES
   ================================================================ */

/* ── Footer: single column on all mobile widths ─────────────────── */

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-col { width: 100%; }
  .footer-col h4 { margin-bottom: 12px !important; }
  .footer-col a { 
    display: inline-block; 
    margin-bottom: 8px !important;
    margin-right: 16px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .footer-wa { align-self: center; }
}

/* ── Mobile drawer: open from below navbar, not from top ─────────── */

.mob-drawer {
  display: none;
  position: fixed;
  top: 0;               /* overlay starts at top */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: rgba(0,0,0,0.5);
}

/* The actual panel slides in from top, but starts BELOW the navbar */

.mob-drawer-inner {
  position: absolute;
  top: 62px;            /* just below navbar height on mobile */
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 3px solid #CC0000;
  overflow-y: auto;
  max-height: calc(100vh - 62px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  animation: slideDown 0.25s ease;
}

@keyframes slideDown {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ── Mob drawer header: clean on mobile ────────────────────────────*/

.mob-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.mob-drawer-header img { height: 30px; width: auto; }
.mob-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.mob-drawer-nav a:hover,
.mob-drawer-nav a:active { 
  background: #fff5f5; 
  color: #CC0000 !important; 
}

.mob-drawer-wa {
  margin: 12px 16px 16px !important;
  background: #CC0000 !important;
  color: #fff !important;
  text-align: center;
  border-radius: 8px;
  font-weight: 600 !important;
  padding: 15px 20px !important;
  border-bottom: none !important;
}

.mob-drawer-wa:hover { background: #990000 !important; }

/* Hamburger open state animation */

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Footer: center-aligned on mobile ───────────────────────────── */

@media (max-width: 768px) {
  .footer-grid {
    text-align: center !important;
  }
  .footer-grid > div:first-child img {
    margin: 0 auto 14px !important;
  }
  .footer-motto-text { text-align: center; }
  .footer-tagline    { text-align: center; }
  .footer-contact    { text-align: center; }
  .footer-contact a  { display: inline-block; }
  .footer-countries  { display: flex; flex-direction: column; align-items: center; }
  .country-tags      { justify-content: center; }
  .footer-col        { text-align: center; }
  .footer-col a      { 
    display: block !important; 
    margin-right: 0 !important;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* ================================================================
   MOBILE DRAWER — CLEAN IMPLEMENTATION (v2)
   Top is set via JS using CSS variable --nav-bottom
   ================================================================ */

.mob-drawer {
  display: none;
  position: fixed;
  top: var(--nav-bottom, 62px);
  left: 0; right: 0; bottom: 0;
  z-index: 9998;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 3px solid #CC0000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.mob-drawer.open { display: block; }
.mob-drawer-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.mob-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.mob-drawer-header img { height: 30px; }
.mob-close { background: none; border: none; font-size: 26px; color: #666; cursor: pointer; line-height: 1; padding: 4px; }
.mob-drawer-nav { display: flex; flex-direction: column; }
.mob-drawer-nav a {
  display: flex !important; align-items: center;
  padding: 15px 20px !important; font-size: 16px !important;
  font-weight: 500; color: #333 !important;
  border-bottom: 1px solid #f5f5f5;
  text-decoration: none; min-height: 52px;
}

.mob-drawer-nav a:active { background: #fff5f5; color: #CC0000 !important; }
.mob-drawer-wa {
  margin: 16px !important;
  background: #CC0000 !important;
  color: #fff !important;
  text-align: center; border-radius: 10px;
  font-weight: 700 !important; padding: 16px 20px !important;
  font-size: 16px !important;
  border-bottom: none !important; display: block !important;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(204,0,0,0.3);
}

/* ================================================================
   FOOTER CENTER ALIGNED ON MOBILE — v2 (higher specificity)
   ================================================================ */

@media screen and (max-width: 768px) {
  .footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer .footer-grid > div,
  .footer .footer-col {
    text-align: center !important;
    width: 100% !important;
  }
  .footer .footer-grid > div img {
    margin: 0 auto 14px !important;
    display: block !important;
  }
  .footer .footer-motto-text,
  .footer .footer-tagline,
  .footer .footer-contact,
  .footer .footer-countries-label { text-align: center !important; }
  .footer .footer-contact a { display: block !important; }
  .footer .country-tags { justify-content: center !important; }
  .footer .footer-col a {
    display: block !important;
    margin-right: 0 !important;
    text-align: center !important;
  }
  .footer .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }
}

/* ================================================================
   LIVE SEARCH DROPDOWN
   ================================================================ */

#navSearch { position: relative; }
.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 340px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 9999;
  overflow: hidden;
  max-height: 420px;
  overflow-y: auto;
}

.search-dropdown.active { display: block; }
.search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.15s;
}

.search-item:last-child { border-bottom: none; }
.search-item:hover,
.search-item.focused {
  background: #fff5f5;
}

.search-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid #eee;
}

.search-item-no-img {
  width: 48px;
  height: 48px;
  background: #f8f8f8;
  border-radius: 6px;
  flex-shrink: 0;
}

.search-item-info { flex: 1; min-width: 0; }
.search-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.search-item-cat {
  font-size: 11px;
  color: #CC0000;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.search-no-result {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: #888;
}

/* Search loading indicator */

.navbar-search input:focus {
  outline: none;
}

#navSearch:focus-within .navbar-search {
  border-color: #CC0000;
  box-shadow: 0 0 0 3px rgba(204,0,0,0.08);
}

/* ════════════════════════════════════════════════════════
   BLOG PAGE — addler-main.css  (written fresh Apr 2026)
   ════════════════════════════════════════════════════════ */

/* ── Blog Hero ───────────────────────────────────────── */
.blog-hero{background:linear-gradient(135deg,#1a0000 0%,#CC0000 100%);padding:64px 0;color:#fff;}
.blog-hero-inner{max-width:1200px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center;}
.blog-hero h1{font-family:var(--font-display);font-size:42px;line-height:1.15;margin-bottom:14px;color:#fff;}
.blog-hero p{font-size:15px;color:rgba(255,255,255,0.8);line-height:1.7;margin-bottom:24px;}
.blog-search-bar{display:flex;gap:0;max-width:440px;}
.bsi{flex:1;padding:12px 16px;border:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);font-size:14px;font-family:var(--font-main);outline:none;color:#222;}
.bsb{background:#fff;color:var(--primary);border:none;border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:12px 20px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font-main);transition:var(--transition);}
.bsb:hover{background:#ffe0e0;}
.yt-hero-box{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-lg);padding:28px;backdrop-filter:blur(8px);}
.yt-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,0.8);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;}
.yt-label svg{width:18px;height:18px;fill:#FF0000;}
.yt-hero-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.35;}
.yt-hero-sub{font-size:13px;color:rgba(255,255,255,0.7);line-height:1.6;margin-bottom:20px;}
.yt-btn{background:#FF0000;color:#fff;border:none;border-radius:var(--radius-sm);padding:12px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-main);display:inline-flex;align-items:center;gap:8px;transition:var(--transition);}
.yt-btn svg{width:16px;height:16px;fill:#fff;}
.yt-btn:hover{background:#cc0000;transform:translateY(-1px);}

/* ── Stats Bar ───────────────────────────────────────── */
.stats-bar{background:#fff;border-bottom:1px solid var(--border);padding:20px 0;}
.stats-inner{max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.si{text-align:center;flex:1;min-width:100px;}
.sn{font-size:22px;font-weight:700;color:var(--primary);font-family:var(--font-display);line-height:1;}
.sl{font-size:12px;color:#888;margin-top:3px;}

/* ── Translate Strip ─────────────────────────────────── */
.translate-strip{background:#fffbf0;border-bottom:1px solid #f0e0c0;padding:12px 0;}
.translate-inner{max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.translate-label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#555;white-space:nowrap;}
.translate-label svg{width:16px;height:16px;stroke:#888;fill:none;stroke-width:1.5;flex-shrink:0;}

/* ── Blog Layout Grid ────────────────────────────────── */
.blog-layout{max-width:1200px;margin:0 auto;padding:36px 28px 64px;display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;}

/* ── Filter Row ──────────────────────────────────────── */
.blog-filter-row{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:20px;}
.blog-filter-group{display:flex;flex-direction:column;gap:6px;}
.blog-filter-label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.06em;}
.blog-select-wrap{position:relative;display:inline-flex;align-items:center;}
.blog-cat-select{appearance:none;-webkit-appearance:none;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 36px 8px 12px;font-size:13px;font-family:var(--font-main);color:#333;cursor:pointer;outline:none;transition:var(--transition);}
.blog-cat-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(204,0,0,0.08);}
.blog-select-arrow{position:absolute;right:10px;pointer-events:none;color:#aaa;width:14px;height:14px;}
.source-tabs{display:flex;gap:6px;}
.src-tab{padding:7px 14px;border-radius:20px;font-size:13px;font-weight:500;color:#666;background:#f5f5f5;cursor:pointer;transition:var(--transition);user-select:none;}
.src-tab.active,.src-tab:hover{background:var(--primary);color:#fff;}

/* ── Category Pill Tabs ──────────────────────────────── */
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;}
.cat-tab{padding:7px 15px;border-radius:20px;font-size:13px;font-weight:500;color:#666;background:#f5f5f5;border:1px solid transparent;cursor:pointer;transition:var(--transition);user-select:none;white-space:nowrap;}
.cat-tab.active{background:var(--primary-light);color:var(--primary);border-color:#ffcccc;font-weight:600;}
.cat-tab:hover:not(.active){background:#eee;}

/* ── Featured Post ───────────────────────────────────── */
.featured-post{display:grid;grid-template-columns:260px 1fr;gap:0;border:1px solid #ffcccc;border-radius:var(--radius-lg);overflow:hidden;background:#fffafa;margin-bottom:32px;}
.featured-img{background:linear-gradient(135deg,#fff0f0,#f5f0ff);display:flex;align-items:center;justify-content:center;font-size:52px;min-height:200px;}
.featured-body{padding:28px 24px;}
.feat-badge{display:inline-flex;align-items:center;gap:5px;background:var(--primary-light);color:var(--primary);border:1px solid #ffcccc;border-radius:20px;padding:4px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px;}
.feat-title{font-size:17px;font-weight:700;color:#111;line-height:1.4;margin-bottom:10px;}
.feat-title a{color:#111;}
.feat-title a:hover{color:var(--primary);}
.feat-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;color:#888;margin-bottom:12px;}
.feat-meta svg{width:13px;height:13px;stroke:#bbb;fill:none;stroke-width:2;}
.feat-excerpt{font-size:14px;color:#555;line-height:1.65;margin-bottom:16px;}
.read-link{font-size:13px;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:4px;}
.read-link:hover{text-decoration:underline;}

/* ── Section Divider ─────────────────────────────────── */
.section-divider{display:flex;align-items:center;gap:14px;margin:32px 0 20px;}
.sd-line{flex:1;height:1px;background:#e8e8e8;}
.sd-label{font-size:12px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap;}

/* ── Blog Grid ───────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;display:grid;grid-template-columns:120px 1fr;transition:var(--transition);}
.blog-card:hover{border-color:#ffcccc;box-shadow:var(--shadow-md);transform:translateY(-2px);}
.blog-card-img{background:#f8f8f8;display:flex;align-items:center;justify-content:center;font-size:32px;min-height:130px;flex-shrink:0;}
.scope-src-badge{font-size:10px;background:#f0f0ff;border:1px solid #d8d8ee;border-radius:10px;padding:2px 8px;color:#555;white-space:nowrap;}
.blog-card-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;}
.blog-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:11px;color:#999;}
.blog-meta svg{width:11px;height:11px;stroke:#ccc;fill:none;stroke-width:2;}
.blog-cat-pill{background:var(--primary-light);color:var(--primary);border-radius:10px;padding:2px 8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;}
.blog-date{color:#aaa;font-size:11px;}
.blog-views,.blog-rtime{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#bbb;}
.blog-title{font-size:14px;font-weight:600;color:#111;line-height:1.4;}
.blog-title a{color:#111;}
.blog-title a:hover{color:var(--primary);}
.blog-excerpt{font-size:12px;color:#777;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.blog-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;}
.blog-tag{background:#f5f5f5;color:#777;border-radius:8px;padding:2px 7px;font-size:10px;font-weight:500;}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:80px;}
.sw{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;overflow:hidden;}
.sw-title{font-size:13px;font-weight:700;color:#111;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #f0f0f0;}
.trending-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #f5f5f5;}
.trending-item:last-child{border-bottom:none;padding-bottom:0;}
.tn{width:22px;height:22px;background:var(--bg-grey);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#888;flex-shrink:0;}
.tt a{font-size:13px;font-weight:600;color:#111;line-height:1.4;display:block;}
.tt a:hover{color:var(--primary);}
.tv{font-size:11px;color:#aaa;margin-top:2px;}
.cat-list{display:flex;flex-direction:column;gap:2px;}
.cat-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:var(--radius-sm);font-size:13px;color:#444;cursor:pointer;transition:var(--transition);}
.cat-item:hover{background:var(--primary-light);color:var(--primary);}
.cat-count{background:#f0f0f0;color:#888;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:600;}
.tag-cloud{display:flex;flex-wrap:wrap;gap:6px;}
.tc-tag{background:#f5f5f5;color:#666;border-radius:10px;padding:5px 11px;font-size:12px;cursor:pointer;transition:var(--transition);}
.tc-tag:hover{background:var(--primary-light);color:var(--primary);}

/* ── YouTube Section ─────────────────────────────────── */
.yt-section{background:#111;padding:64px 0;}
.yt-header{display:flex;align-items:center;gap:16px;margin-bottom:36px;}
.yt-icon{width:48px;height:48px;background:#FF0000;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.yt-icon svg{width:24px;height:24px;fill:#fff;}
.yt-header-text h2{font-family:var(--font-display);font-size:28px;color:#fff;margin-bottom:4px;}
.yt-header-text p{font-size:14px;color:#888;}
.yt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;}
.yt-card{background:#1c1c1c;border-radius:var(--radius-md);overflow:hidden;transition:var(--transition);}
.yt-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,0.5);}
.yt-thumb{position:relative;height:160px;background:#333;overflow:hidden;}
.yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.yt-play svg{width:48px;height:48px;background:rgba(255,0,0,0.85);border-radius:50%;padding:12px;transition:var(--transition);}
.yt-card:hover .yt-play svg{background:#FF0000;}
.yt-dur{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.8);color:#fff;border-radius:4px;padding:2px 6px;font-size:11px;font-weight:600;}
.yt-card-body{padding:14px;}
.yt-card-title{font-size:14px;font-weight:600;color:#eee;line-height:1.4;margin-bottom:8px;}
.yt-card-meta{display:flex;justify-content:space-between;font-size:11px;color:#666;}
.yt-cta{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;}
.yt-sub-btn{background:#FF0000;color:#fff;border:none;border-radius:var(--radius-sm);padding:13px 24px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-main);display:inline-flex;align-items:center;gap:8px;transition:var(--transition);}
.yt-sub-btn svg{width:16px;height:16px;fill:#fff;}
.yt-sub-btn:hover{background:#cc0000;transform:translateY(-1px);}

/* ── Blog Responsive ─────────────────────────────────── */
@media (max-width:1050px){
  .blog-hero-inner{grid-template-columns:1fr;gap:32px;}
  .yt-hero-box{display:none;}
  .blog-layout{grid-template-columns:1fr;padding:28px 20px 48px;}
  .sidebar{position:static;}
  .blog-grid{grid-template-columns:1fr;}
  .yt-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .blog-hero{padding:44px 0;}
  .blog-hero h1{font-size:30px;}
  .stats-inner{justify-content:center;gap:20px 32px;}
  .blog-filter-row{flex-direction:column;align-items:flex-start;}
  .featured-post{grid-template-columns:1fr;}
  .featured-img{min-height:120px;font-size:40px;}
  .blog-card{grid-template-columns:1fr;}
  .blog-card-img{min-height:90px;font-size:28px;}
  .yt-grid{grid-template-columns:1fr;}
  .blog-layout{padding:20px 16px 40px;}
}

/* ── Single Post ─────────────────────────────────────── */
.post-wrap{max-width:760px;margin:0 auto;padding:48px 28px 80px;}
.post-header{margin-bottom:32px;}
.post-cat-pill{display:inline-block;background:var(--primary-light);color:var(--primary);border-radius:10px;padding:4px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;}
.post-title{font-family:var(--font-display);font-size:38px;color:#111;line-height:1.2;margin-bottom:14px;}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:#999;padding-bottom:20px;border-bottom:1px solid #f0f0f0;}
.post-meta svg{width:13px;height:13px;stroke:#ccc;fill:none;stroke-width:2;}
.post-thumb{width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius-md);margin-bottom:32px;}
.post-content{font-size:16px;line-height:1.8;color:#333;}
.post-content h2{font-family:var(--font-display);font-size:26px;color:#111;margin:36px 0 14px;}
.post-content h3{font-size:19px;font-weight:700;color:#111;margin:28px 0 10px;}
.post-content p{margin-bottom:18px;}
.post-content ul,.post-content ol{padding-left:24px;margin-bottom:18px;}
.post-content li{margin-bottom:6px;}
.post-content img{width:100%;border-radius:var(--radius-sm);margin:20px 0;}
.post-content a{color:var(--primary);text-decoration:underline;}
.post-content blockquote{border-left:3px solid var(--primary);background:#fff8f8;padding:16px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:24px 0;font-style:italic;color:#555;}
.post-content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;}
.post-content th{background:#f5f5f5;padding:10px 14px;text-align:left;font-weight:600;border:1px solid #e8e8e8;}
.post-content td{padding:10px 14px;border:1px solid #e8e8e8;}
.post-content tr:nth-child(even) td{background:#fafafa;}
.post-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#888;margin-bottom:24px;transition:var(--transition);}
.post-back:hover{color:var(--primary);}
.post-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
@media(max-width:700px){
  .post-wrap{padding:28px 16px 56px;}
  .post-title{font-size:26px;}
  .post-content{font-size:15px;}
}