/*
Theme Name: KEI Japan Wide v5.2.1
Theme URI: https://example.com/
Author: KEI JAPAN
Description: Широкая информационная тема каталога японских кей-каров.
Version: 5.2.1
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: kei-japan
*/
:root{
  --bg:#F3F6F9;
  --card:#FFFFFF;
  --ink:#17212B;
  --muted:#65717D;
  --line:#DCE3EA;
  --blue:#0B5CAB;
  --blue-dark:#08477F;
  --navy:#0B1F33;
  --navy-2:#123E63;
  --red:#D92D3A;
  --red-dark:#B82330;
  --green:#247A4A;
  --green-soft:#EAF6EF;
  --amber:#A86400;
  --amber-soft:#FFF5DD;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
html,body{width:100%!important;max-width:none!important}
body{
  margin:0!important;
  padding:0!important;
  background:var(--bg)!important;
  color:var(--ink);
  font:15px/1.55 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
body>*{max-width:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{
  width:calc(100% - 40px)!important;
  max-width:1560px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0;
  padding-right:0;
}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:var(--navy);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.admin-bar .site-header{top:32px}
.head{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:18px;
}
.logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  width:245px;
  height:58px;
  overflow:hidden;
}
.logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}
.nav{
  display:flex;
  align-items:center;
  gap:2px;
  flex:1;
}
.nav a{
  padding:7px 10px;
  border-radius:7px;
  color:#E8EEF3;
  font-size:14px;
}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.feedback-button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:7px 12px;
  border-radius:8px;
  background:var(--red);
  color:#fff!important;
  font-size:13px;
  font-weight:850;
  white-space:nowrap;
}
.feedback-button:hover{background:var(--red-dark)}
.header-search{flex:0 1 310px}
.header-search .searchform{width:100%;flex:none}
.mobile-menu-toggle{display:none}
.mobile-menu{display:none}
.searchform{display:flex;flex:0 1 330px}
.searchform input{
  width:100%;
  height:36px;
  background:#172A3B;
  border:1px solid #3A4C5D;
  color:#fff;
  border-radius:8px;
  padding:7px 11px;
  font-size:14px;
  outline:none;
}
.searchform input:focus{border-color:#77B4EA;box-shadow:0 0 0 2px rgba(119,180,234,.16)}

/* HOME HERO */
.hero{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:linear-gradient(118deg,var(--navy) 0%,var(--navy-2) 55%,#145E9E 100%);
  color:#fff;
  padding:25px 0 26px;
}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:end}
.hero .eyebrow{
  grid-column:1/-1;
  color:#FFB9C0;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.hero h1{
  grid-column:1;
  font-size:clamp(32px,3.2vw,48px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:0 0 9px;
  max-width:850px;
}
.hero p{
  grid-column:1;
  max-width:850px;
  margin:0;
  color:#D4E1EA;
  font-size:15px;
  line-height:1.55;
}
.stats{
  grid-column:2;
  grid-row:2/4;
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:7px;
  align-self:center;
}
.stat{
  min-width:88px;
  text-align:center;
  padding:9px 11px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.075);
  color:#EAF1F6;
  font-size:12px;
}
.stat b{display:block;font-size:18px;color:#fff}

/* MAIN HOME LAYOUT */
.layout{
  display:grid;
  grid-template-columns:190px minmax(0,1fr) 255px;
  gap:16px;
  padding:16px 0 42px;
  align-items:start;
}
.layout>main{min-width:0}
.side{
  position:sticky;
  top:72px;
  align-self:start;
}
.admin-bar .side{top:104px}
.box,.model-card,.article-card,.compare-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:11px;
}
.box{padding:13px;margin-bottom:10px}
.box h3{margin:0 0 8px;font-size:15px}
.side-links{display:grid;gap:2px}
.side-links a{padding:6px 7px;border-radius:6px;color:#394550;font-size:13px}
.side-links a:hover{background:#EEF3F7;color:var(--blue)}
.section-title{
  font-size:23px;
  line-height:1.2;
  margin:2px 0 10px;
  letter-spacing:-.02em;
}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.filters select,.filters input{
  min-height:38px;
  padding:8px 10px;
  border:1px solid #D1D9E0;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
}

/* MODEL CARDS */
.model-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
}
.model-card{
  min-width:0;
  overflow:hidden;
  transition:.16s ease;
}
.model-card:hover{
  border-color:#B7C8D8;
  box-shadow:0 7px 22px rgba(11,31,51,.07);
  transform:translateY(-1px);
}
.model-photo{
  display:block;
  height:148px;
  background:#E8EDF1;
  position:relative;
  overflow:hidden;
}
.model-photo:empty{display:none}
.model-photo img{width:100%;height:100%;object-fit:cover;display:block}
.model-photo .badge{
  position:absolute;
  top:8px;
  left:8px;
  background:rgba(11,31,51,.88);
  color:#fff;
  padding:3px 6px;
  border-radius:5px;
  font-size:10px;
  font-weight:900;
}
.model-body{padding:11px}
.model-body h2,.model-body h3{
  font-size:16px;
  line-height:1.25;
  margin:0 0 3px;
}
.model-body h2 a:hover,.model-body h3 a:hover{color:var(--blue)}
.muted{color:var(--muted)}
.model-body>.muted{
  font-size:12.5px;
  line-height:1.4;
  min-height:35px;
}
.spec-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-top:8px;
}
.spec{
  min-width:0;
  background:#F3F6F8;
  padding:6px 7px;
  border-radius:6px;
  font-size:12px;
}
.spec small{display:block;color:#75818B;font-size:10px}
.spec b{display:block;overflow:hidden;text-overflow:ellipsis}
.score{font-size:17px;font-weight:900;margin-top:7px;color:#26323C}
.score small{font-size:10px;color:#7B8791}

/* RANKING */
.rank{
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  gap:5px;
  align-items:center;
  padding:6px 0;
  border-top:1px solid #EDF0F2;
  font-size:12px;
}
.rank:first-of-type{border-top:0}
.rank a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank a:hover{color:var(--blue)}
.rank strong{color:var(--red);font-size:12px}


/* MOBILE RATING — desktop hidden */
.mobile-rating{display:none}

/* BUTTONS */
.button{
  display:inline-block;
  background:var(--blue);
  color:#fff!important;
  padding:8px 11px;
  border-radius:7px;
  font-size:13px;
  font-weight:800;
}
.button:hover{background:var(--blue-dark)}
.button.red{background:var(--red)}
.button.red:hover{background:var(--red-dark)}

/* ARTICLES / COMPARISONS LIST */
.article-grid,.compare-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.article-card,.compare-card{
  padding:13px;
  min-width:0;
}
.article-card h2,.compare-card h2{
  font-size:15px;
  line-height:1.3;
  margin:0 0 5px;
}
.article-card p,.compare-card p{font-size:12.5px;line-height:1.45}
.article-card:hover,.compare-card:hover{border-color:#B7C8D8}

/* INNER PAGES */
.content-shell{
  width:calc(100% - 40px)!important;
  max-width:1240px!important;
  margin:18px auto;
  padding:0!important;
}
.content-card{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px 28px;
}
.breadcrumb{font-size:12px;color:var(--muted);margin-bottom:7px}
.breadcrumb a{color:var(--blue)}
.page-title{
  font-size:clamp(30px,3vw,44px);
  line-height:1.08;
  letter-spacing:-.035em;
  margin:5px 0 8px;
}
.lead{font-size:16px;color:#56626C;max-width:920px}
.gallery-main{
  height:min(470px,45vw);
  min-height:300px;
  background:#E7EBEE;
  border-radius:11px;
  overflow:hidden;
  margin:14px 0;
}
.gallery-main img{width:100%;height:100%;object-fit:cover}

/* TABLES */
.tech-table,.generation-table{
  width:100%;
  border-collapse:collapse;
  margin:12px 0;
}
.tech-table th,.tech-table td,.generation-table th,.generation-table td{
  padding:9px 10px;
  border-bottom:1px solid #E5E9EC;
  text-align:left;
  vertical-align:top;
  font-size:13px;
}
.tech-table th{width:30%;background:#F7F9FA}
.generation-table th{background:#F7F9FA}
.table-scroll,.tablewrap{overflow:auto;-webkit-overflow-scrolling:touch}

/* ARTICLE */
.article-body{font-size:15px}
.article-body h2{
  font-size:22px;
  line-height:1.22;
  margin:29px 0 9px;
  letter-spacing:-.02em;
}
.article-body h3{font-size:17px;margin:20px 0 7px}
.article-body p{max-width:94ch;margin:8px 0}
.article-body li{margin:4px 0}
.article-body .facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.article-body .facts>div{
  background:#F3F6F8;
  padding:9px;
  border-radius:7px;
  font-size:13px;
}
.article-body .facts small{display:block;color:var(--muted);font-size:11px}
.answer-box{
  background:#EAF2FB;
  border-left:4px solid var(--blue);
  padding:13px 15px;
  border-radius:0 9px 9px 0;
  margin:15px 0;
}
.answer-box b{color:var(--blue-dark);font-size:15px}
.answer-box p{margin:4px 0 0}
.article-keypoints{
  background:#F8FAFC;
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 16px;
  margin:15px 0;
}
.article-keypoints h2{font-size:18px;margin:0 0 6px}
.fact-box{
  background:var(--amber-soft);
  border:1px solid #E7D2A5;
  border-radius:10px;
  padding:13px 15px;
  margin:15px 0;
}
.fact-box span{color:var(--amber);font-weight:900;text-transform:uppercase;letter-spacing:.07em;font-size:10px}
.fact-box p{margin:4px 0 0}
.owner-quote{
  margin:13px 0;
  padding:15px 17px;
  background:#F7F9FC;
  border-left:4px solid var(--blue);
  border-radius:0 10px 10px 0;
  font-size:16px;
}
.owner-quote p{margin:0}
.owner-quote cite{display:block;margin-top:7px;color:var(--muted);font-size:11px;font-style:normal}
.owner-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.owner-grid>div{padding:12px;border-radius:9px}
.owner-pro{background:#EAF6EF;border:1px solid #C9E4D3}
.owner-pro h3{color:var(--green)}
.owner-con{background:#FFF0F1;border:1px solid #F0C9CC}
.owner-con h3{color:var(--red-dark)}
.owner-grid h3{margin:0 0 5px}
.owner-grid p{margin:0}
.toc{
  background:#F8FAFC;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  margin:15px 0;
}
.toc strong{display:block;margin-bottom:5px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:3px 0}
.toc a{color:var(--blue)}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 13px;
  color:var(--muted);
  font-size:12px;
  margin:7px 0 15px;
}
.related-links{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.related-links a{border:1px solid var(--line);padding:9px;border-radius:7px;background:#fff;font-size:13px}
.related-links a:hover{border-color:#AFC5D8;background:#EAF2FB}
.editorial-note{font-size:12px;color:var(--muted);padding-top:15px;border-top:1px solid var(--line);margin-top:20px}

/* REVIEWS */
.review-box{
  border-left:4px solid var(--red);
  background:#F7F8FA;
  padding:13px;
  border-radius:0 9px 9px 0;
}
.review-box h3{margin:4px 0;font-size:16px}

/* COMPARE */
.compare-head{
  display:grid;
  grid-template-columns:1fr 44px 1fr;
  gap:10px;
  align-items:center;
}
.compare-model{background:#F6F8F9;padding:13px;border-radius:9px}
.compare-model h2{font-size:20px;margin:0 0 5px}
.vs{text-align:center;font-size:18px;font-weight:950}
.compare-table{min-width:820px;width:100%;border-collapse:collapse}
.compare-table th,.compare-table td{
  padding:9px 10px;
  border-bottom:1px solid #E5E9EC;
  text-align:left;
  vertical-align:top;
  font-size:13px;
}
.compare-table th{width:27%;background:#F7F8F9}

/* EMPTY ADMIN NOTICE */
.kj-empty{
  background:#FFF8E8;
  border:1px solid #E9D398;
  border-radius:10px;
  padding:15px;
  margin:10px 0 18px;
}
.kj-empty strong{display:block;margin-bottom:4px}


/* FEEDBACK */
.kei-feedback{max-width:860px}
.kei-feedback-lead{font-size:16px;color:#56626c;max-width:760px!important}
.feedback-form{display:grid;gap:13px;margin-top:18px}
.feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feedback-form label{display:grid;gap:5px;font-size:13px;font-weight:750}
.feedback-form input[type="text"],.feedback-form select,.feedback-form textarea{
  width:100%;border:1px solid #cfd8e0;border-radius:8px;background:#fff;color:var(--ink);padding:10px 11px;font:inherit;font-weight:400;outline:none
}
.feedback-form input[type="text"]:focus,.feedback-form select:focus,.feedback-form textarea:focus{border-color:#76a9d4;box-shadow:0 0 0 3px rgba(11,92,171,.10)}
.feedback-consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:8px!important;font-weight:400!important;font-size:12px!important;color:#5f6b76}
.feedback-consent input{margin-top:3px}
.feedback-submit{justify-self:start;border:0;border-radius:8px;background:var(--blue);color:#fff;padding:10px 16px;font-weight:850;font-size:14px;cursor:pointer}
.feedback-submit:hover{background:var(--blue-dark)}
.feedback-notice{padding:11px 13px;border-radius:8px;margin:14px 0;font-size:13px}
.feedback-notice.success{background:#eaf6ef;border:1px solid #bcdcc8;color:#1e6a40}
.feedback-notice.error{background:#fff0f1;border:1px solid #efc8cc;color:#9c2430}
.feedback-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* FOOTER */
.site-footer{
  width:100%!important;
  max-width:none!important;
  margin:30px 0 0!important;
  background:var(--navy);
  color:#B9C4CC;
  padding:22px 0;
  font-size:13px;
}
.pagination{margin:16px 0}
.pagination .page-numbers{display:inline-block;padding:6px 9px;background:#fff;border:1px solid var(--line);border-radius:6px;margin-right:3px}

/* WIDE LAPTOP */
@media(max-width:1320px){
  .layout{grid-template-columns:170px minmax(0,1fr) 235px}
  .model-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1040px){
  .logo{width:205px;height:50px}
}

/* SMALL LAPTOP/TABLET */
@media(max-width:1040px){
  .layout{grid-template-columns:minmax(0,1fr) 235px}
  .left{display:none}
  .model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .wrap{grid-template-columns:1fr}
  .stats{grid-column:1;grid-row:auto;display:flex;margin-top:12px}
}
/* MOBILE */
@media(max-width:720px){
  .logo{width:172px;height:42px}
  .admin-bar .site-header{top:46px}
  .wrap,.content-shell{width:calc(100% - 18px)!important}
  .head{min-height:56px;padding:7px 0;display:flex;align-items:center;gap:10px}
  .desktop-nav,.desktop-search,.desktop-feedback{display:none!important}
  .mobile-menu-toggle{
    margin-left:auto;display:grid;width:42px;height:42px;padding:9px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.06);cursor:pointer;align-content:center;gap:5px
  }
  .mobile-menu-toggle span{display:block;width:100%;height:2px;border-radius:2px;background:#fff;transition:.18s ease}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{display:block;background:#0f2a42;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 14px 28px rgba(0,0,0,.2)}
  .mobile-menu[hidden]{display:none!important}
  .mobile-menu-inner{padding-top:10px;padding-bottom:13px}
  .mobile-nav{display:grid;gap:3px}
  .mobile-nav a{display:block;padding:10px 11px;border-radius:8px;color:#eef5fa;font-size:15px;font-weight:700}
  .mobile-nav a:hover,.mobile-nav a:focus{background:rgba(255,255,255,.08)}
  .mobile-nav .mobile-feedback{margin-top:5px;background:var(--red);color:#fff;text-align:center}
  .mobile-search{margin-top:10px}
  .mobile-search .searchform{display:flex;width:100%;flex:none}
  .mobile-search .searchform input{height:40px;background:#fff;color:#17212b;border-color:#fff}
  .feedback-grid{grid-template-columns:1fr}
  .feedback-submit{width:100%;justify-self:stretch}
  body.kei-menu-open{overflow-x:hidden}
  .hero{padding:18px 0 20px}
  .hero h1{font-size:31px}
  .hero p{font-size:14px}
  .stats{display:flex;overflow:auto}
  .stat{min-width:82px}
  .layout{display:block;padding-top:10px}
  .right{display:none}

  /* Rating moved from the desktop sidebar into a full-width mobile block. */
  .mobile-rating{
    display:block;
    margin:2px 0 18px;
    padding:13px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:11px;
  }
  .mobile-rating-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:10px;
    margin-bottom:8px;
  }
  .mobile-rating-head h2{
    margin:1px 0 0;
    font-size:18px;
    line-height:1.15;
    letter-spacing:-.02em;
  }
  .mobile-rating-kicker{
    display:block;
    color:var(--red);
    font-size:9px;
    line-height:1;
    font-weight:950;
    letter-spacing:.11em;
  }
  .mobile-rating-scale{
    flex:0 0 auto;
    color:var(--muted);
    font-size:9.5px;
  }
  .mobile-rating-list{
    display:grid;
    gap:0;
  }
  .mobile-rank{
    display:grid;
    grid-template-columns:26px minmax(0,1fr) 42px 10px;
    gap:7px;
    align-items:center;
    min-height:42px;
    padding:6px 0;
    border-top:1px solid #edf0f2;
  }
  .mobile-rank:first-child{border-top:0}
  .mobile-rank:active{background:#f7f9fb}
  .mobile-rank-num{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:7px;
    background:#f0f4f7;
    color:#56626c;
    font-size:11px;
    font-weight:900;
  }
  .mobile-rank:nth-child(-n+3) .mobile-rank-num{
    background:#fff0f1;
    color:var(--red-dark);
  }
  .mobile-rank-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:800;
    color:var(--ink);
  }
  .mobile-rank-score{
    text-align:right;
    color:var(--red);
    font-size:14px;
    font-weight:950;
  }
  .mobile-rank-arrow{
    color:#95a0a9;
    font-size:19px;
    line-height:1;
  }

  .model-grid,.article-grid,.compare-grid{grid-template-columns:1fr}
  .model-card{display:grid;grid-template-columns:118px minmax(0,1fr)}
  .model-photo{height:100%;min-height:145px}
  .model-body>.muted{min-height:auto}
  .spec-grid{grid-template-columns:1fr 1fr}
  .score{font-size:15px}
  .content-shell{margin:0 auto}
  .content-card{border-radius:0;border-left:0;border-right:0;padding:17px 14px}
  .page-title{font-size:31px}
  .lead{font-size:15px}
  .gallery-main{height:250px;min-height:0}
  .article-body .facts{grid-template-columns:1fr 1fr}
  .owner-grid,.related-links{grid-template-columns:1fr}
  .compare-head{grid-template-columns:1fr}
  .vs{text-align:center}
}


/* v5.2 — annual Japan sales rating */
.rank strong{min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.rank-source{margin:9px 0 0;padding-top:8px;border-top:1px solid #edf0f2;color:var(--muted);font-size:10.5px;line-height:1.45}
.rank-source a{color:var(--blue);font-weight:800}
.sales-score{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.sales-score strong{font-size:17px;color:var(--red);font-variant-numeric:tabular-nums}
.sales-score small{font-size:10px;color:#7B8791;font-weight:700}
.mobile-rating-note{margin:8px 0 0;color:var(--muted);font-size:10.5px;line-height:1.4}
@media(max-width:760px){
  .mobile-rank{grid-template-columns:26px minmax(0,1fr) 74px 10px!important}
  .mobile-rank-score{font-size:12.5px!important;font-variant-numeric:tabular-nums}
  .sales-score strong{font-size:15px}
}

.sales-source-line{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
.sales-source-line a{color:var(--blue);font-weight:800}