/*
Theme Name: 包丁銘鑑 (Meikan)
Theme URI: https://hocho-meikan.com/
Description: 包丁の「探せる・比べる・診断できる」構造化データベース「包丁銘鑑」の自作クラシックテーマ。無料・低依存（プラグイン不要のネイティブ実装）。将来の「◯◯銘鑑」横展開の中核テーマ。
Author: 包丁銘鑑
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hocho-meikan
*/

/* ============================================================
   包丁銘鑑 — Design tokens
   ============================================================ */
:root{
  --crimson:#9E1B32;      /* 深紅 */
  --crimson-deep:#7d1526;
  --ink:#26221F;          /* 墨 */
  --ink-soft:#463f39;
  --ink-mute:#8a8073;
  --cream:#FAF7F3;        /* 生成り */
  --cream-2:#F2ECE4;
  --gold:#B8933D;         /* 確認済みバッジ金 */
  --line:#e3dcd2;
  --line-soft:#eee8df;
  --dark:#211d1a;         /* ダークセクション地 */
  --dark-2:#1a1613;
  --on-dark:#f3ede4;
  --on-dark-mute:#b7ac9d;

  --wrap:1200px;
  --band:118px;          /* 左端の固定縦帯の幅（PC） */
  --gap:clamp(20px,3vw,40px);
  --radius:3px;
  --shadow:0 18px 48px rgba(30,22,16,.14);
  --shadow-sm:0 8px 22px rgba(30,22,16,.10);

  --serif:"Shippori Mincho","Noto Serif JP",serif;
  --sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
  background:var(--cream);
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .25s,opacity .25s,background .25s,border-color .25s}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:600;line-height:1.4;letter-spacing:.04em}
p{margin:0}
button{font-family:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:clamp(52px,7vw,92px) 0}
.section--tight{padding:clamp(40px,5vw,64px) 0}

/* Section heading (eyebrow romaji + JP title) */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(26px,3.4vw,44px)}
.sec-title{font-size:clamp(22px,2.5vw,29px);letter-spacing:.12em;color:var(--ink)}
.sec-title .en{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.34em;color:var(--crimson);margin-bottom:10px}
.more-link{font-size:13px;font-weight:500;letter-spacing:.12em;color:var(--ink-soft);white-space:nowrap}
.more-link:hover{color:var(--crimson)}
.more-link .arw{margin-left:.5em;transition:margin .25s}
.more-link:hover .arw{margin-left:.9em}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-size:14px;font-weight:600;letter-spacing:.14em;
  padding:15px 30px;border:1px solid transparent;border-radius:var(--radius);
}
.btn--primary{background:var(--ink);color:var(--cream)}
.btn--primary:hover{background:var(--crimson)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.btn .arw{transition:transform .25s}
.btn:hover .arw{transform:translateX(4px)}

.textlink{display:inline-flex;align-items:center;gap:.6em;font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--ink)}
.textlink .arw{color:var(--crimson);transition:transform .25s}
.textlink:hover{color:var(--crimson)}
.textlink:hover .arw{transform:translateX(4px)}

/* ============================================================
   Brand (vertical lockup — 008 style)
   ============================================================ */
.brand{display:inline-flex}
.brand__box{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:15px 15px 13px;border:1px solid var(--line);border-width:0;
  position:relative;
}
.brand__cols{display:flex;flex-direction:row-reverse;gap:6px}
.brand__cols .v{
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.06;
  letter-spacing:.08em;color:var(--ink);
}
.brand__seal{width:26px;height:26px;margin-top:2px}
/* over the dark hero (front page) */
.header--over .brand__cols .v{color:var(--on-dark)}
.brand__sub{display:none}

/* ============================================================
   Fixed left band (watobi 風) + page offset
   ============================================================ */
.page{position:relative;margin-left:var(--band)}
.side-band{
  position:fixed;left:0;top:0;bottom:0;width:var(--band);z-index:50;
  display:flex;flex-direction:column;align-items:center;
  background:var(--cream);border-right:1px solid var(--line);
}
.side-band .brand{margin-top:22px}
.side-band .brand__cols .v{color:var(--ink)}       /* 常に生成り地の上 */
.side-band__tag{
  flex:1;display:flex;flex-direction:row-reverse;gap:11px;
  justify-content:center;align-items:flex-start;padding:34px 0 24px;
}
.side-band__tag .v{
  writing-mode:vertical-rl;font-family:var(--serif);font-weight:500;
  font-size:12.5px;letter-spacing:.16em;line-height:1;color:var(--ink-soft);
}
.side-band__cta{
  width:100%;margin-top:auto;background:var(--crimson);color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:19px 0;
  transition:background .25s;
}
.side-band__cta svg{width:19px;height:19px;stroke:currentColor;fill:none}
.side-band__cta span{font-size:12px;font-weight:600;letter-spacing:.1em}
.side-band__cta:hover{background:var(--crimson-deep)}
/* header's own brand is only used on mobile (band hides on mobile) */
.site-header .brand{display:none}

/* ============================================================
   Header
   ============================================================ */
.site-header{position:relative;z-index:30}
.header--over{position:absolute;top:0;left:0;right:0;background:transparent}
.header--solid{background:var(--cream);border-bottom:1px solid var(--line)}
.header__inner{
  max-width:1360px;margin:0 auto;padding:16px 40px;
  display:flex;align-items:center;justify-content:flex-end;gap:24px;
}
.gnav{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px)}
.gnav a{
  font-size:14px;font-weight:500;letter-spacing:.12em;color:var(--ink-soft);
  position:relative;padding:6px 0;
}
.header--over .gnav a{color:var(--on-dark)}
.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--crimson);transition:width .28s}
.gnav a:hover{color:var(--crimson)}
.header--over .gnav a:hover{color:#fff}
.gnav a:hover::after{width:100%}

.nav-toggle{display:none;flex-direction:column;gap:5px;width:30px;height:24px;justify-content:center;background:none;border:0;padding:0}
.nav-toggle span{display:block;height:1.5px;background:var(--ink);transition:.3s}
.header--over .nav-toggle span{background:var(--on-dark)}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;min-height:clamp(560px,82vh,760px);display:flex;align-items:center;overflow:hidden;background:var(--dark-2)}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(20,15,12,.86) 0%,rgba(20,15,12,.55) 34%,rgba(20,15,12,.08) 62%,rgba(20,15,12,0) 100%),
    linear-gradient(0deg,rgba(20,15,12,.5) 0%,rgba(20,15,12,0) 40%);
}
.hero__inner{position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:0 34px;width:100%}
.hero__body{max-width:560px;padding-top:96px}
.hero__title{font-size:clamp(34px,4.6vw,58px);font-weight:600;line-height:1.42;color:#fff;letter-spacing:.06em;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero__lead{margin-top:26px;color:rgba(255,255,255,.9);font-size:15px;line-height:2.1;font-weight:400;text-shadow:0 1px 12px rgba(0,0,0,.4)}

/* Hero search box (placeholder) */
.hsearch{margin-top:38px;max-width:560px}
.hsearch__label{font-family:var(--serif);font-size:18px;color:#fff;letter-spacing:.1em;margin-bottom:16px}
.hsearch__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hsel{position:relative}
.hsel select{
  -webkit-appearance:none;appearance:none;width:100%;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.5);border-radius:var(--radius);
  padding:12px 34px 12px 15px;font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:.06em;
}
.hsel::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--ink-mute);border-bottom:1.5px solid var(--ink-mute);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.hsearch__actions{display:flex;align-items:center;gap:22px;margin-top:16px}
.hsearch__actions .btn--primary{background:var(--crimson)}
.hsearch__actions .btn--primary:hover{background:var(--crimson-deep)}
.hsearch__more{font-size:13px;font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.92)}
.hsearch__more .arw{color:#fff;margin-left:.5em}
.hsearch__more:hover{color:#fff;opacity:.8}

/* ============================================================
   Trio (探す / 比べる / 診断する)
   ============================================================ */
.trio{background:var(--dark);}
.trio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08)}
.trio__cell{position:relative;min-height:230px;display:flex;overflow:hidden;background:var(--dark)}
.trio__cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;transition:transform .8s,opacity .5s}
.trio__cell:hover img{transform:scale(1.06);opacity:.5}
.trio__cell::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,22,19,.94) 0%,rgba(26,22,19,.6) 46%,rgba(26,22,19,.15) 100%)}
.trio__txt{position:relative;z-index:2;padding:38px 34px;align-self:center}
.trio__no{font-family:var(--serif);font-size:12px;letter-spacing:.3em;color:var(--gold)}
.trio__ttl{font-size:26px;color:#fff;margin:12px 0 12px;letter-spacing:.14em}
.trio__desc{font-size:13.5px;line-height:1.95;color:var(--on-dark-mute);max-width:15em}
.trio__more{display:inline-flex;align-items:center;gap:.6em;margin-top:20px;font-size:12.5px;font-weight:600;letter-spacing:.14em;color:#fff}
.trio__more .arw{color:var(--gold);transition:transform .25s}
.trio__cell:hover .trio__more .arw{transform:translateX(5px)}

/* ============================================================
   Popular conditions
   ============================================================ */
.popular__cols{display:grid;grid-template-columns:1.15fr 2fr;gap:clamp(30px,5vw,72px)}
.ptypes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 10px}
.ptype{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ptype__ic{width:100%;height:54px;display:flex;align-items:center;justify-content:center}
.ptype__ic svg{height:38px;width:auto;color:var(--ink-soft)}
.ptype:hover .ptype__ic svg{color:var(--crimson)}
.ptype__nm{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--ink-soft)}
.pcond{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px}
.pcond__group>h4{font-family:var(--serif);font-size:15px;letter-spacing:.1em;color:var(--ink);padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.pcond__group a{display:block;font-size:13.5px;line-height:2.35;color:var(--ink-soft)}
.pcond__group a:hover{color:var(--crimson)}

/* ============================================================
   Brand feature
   ============================================================ */
.brandf{background:var(--cream-2)}
.brandf__cols{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(30px,5vw,66px);align-items:center}
.brandf__lead{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.brandf__img{aspect-ratio:3/2.05;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.brandf__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.brandf__img:hover img{transform:scale(1.05)}
.brandf__name{font-size:clamp(30px,3.6vw,44px);letter-spacing:.08em;color:var(--ink)}
.brandf__romaji{font-family:var(--serif);font-size:14px;letter-spacing:.32em;color:var(--crimson);margin:10px 0 22px}
.brandf__desc{font-size:14px;line-height:2.15;color:var(--ink-soft)}
.brandf__desc+.textlink{margin-top:24px}
.brandf__list{border-top:1px solid var(--line)}
.brandf__list li a{display:flex;align-items:baseline;gap:14px;padding:17px 4px;border-bottom:1px solid var(--line)}
.brandf__list .jp{font-family:var(--serif);font-size:20px;letter-spacing:.08em;color:var(--ink)}
.brandf__list .en{font-size:11px;letter-spacing:.24em;color:var(--ink-mute)}
.brandf__list li a:hover .jp{color:var(--crimson)}

/* ============================================================
   Feature grid (特集・ピックアップ)
   ============================================================ */
.feature__grid{display:grid;grid-template-columns:1.3fr 1.3fr 1fr;grid-template-rows:auto auto;gap:16px}
.fcard{position:relative;overflow:hidden;border-radius:var(--radius);display:flex;align-items:flex-end;min-height:210px;background:var(--dark)}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.fcard:hover img{transform:scale(1.05)}
.fcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,15,12,.86) 0%,rgba(20,15,12,.28) 55%,rgba(20,15,12,.05) 100%)}
.fcard__txt{position:relative;z-index:2;padding:26px 26px 24px}
.fcard__ttl{font-size:20px;color:#fff;letter-spacing:.1em;margin-bottom:9px}
.fcard__desc{font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.82);max-width:20em}
.fcard__more{display:inline-flex;align-items:center;gap:.5em;margin-top:14px;font-size:11.5px;font-weight:600;letter-spacing:.14em;color:#fff}
.fcard__more .arw{color:var(--gold)}
.fcard--lead{grid-column:1;grid-row:1 / span 2;min-height:452px}
.fcard--tall{grid-column:2;grid-row:1 / span 2;min-height:452px}
.fcard--a{grid-column:3;grid-row:1}
.fcard--b{grid-column:3;grid-row:2}

/* ============================================================
   Steel + Reading (two column)
   ============================================================ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,68px)}
.steel__list{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.steel__item{display:block;text-align:left}
.steel__thumb{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);margin-bottom:10px}
.steel__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s;filter:grayscale(.15)}
.steel__item:hover .steel__thumb img{transform:scale(1.08)}
.steel__nm{display:block;font-family:var(--serif);font-size:13.5px;letter-spacing:.06em;color:var(--ink)}
.steel__desc{display:block;font-size:10.5px;line-height:1.6;color:var(--ink-mute);margin-top:4px}

.read__feature{position:relative;overflow:hidden;border-radius:var(--radius);display:flex;align-items:flex-end;min-height:210px;margin-bottom:6px;background:var(--dark)}
.read__feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform .8s}
.read__feature:hover img{transform:scale(1.05)}
.read__feature::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,15,12,.9) 0%,rgba(20,15,12,.3) 60%,transparent 100%)}
.read__feature-txt{position:relative;z-index:2;padding:26px}
.read__feature-txt h4{font-size:21px;color:#fff;letter-spacing:.1em;margin-bottom:10px}
.read__feature-txt p{font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.82);max-width:26em}
.read__feature-txt .textlink{margin-top:14px;color:#fff}
.read__list li a{display:flex;align-items:center;gap:16px;padding:15px 2px;border-bottom:1px solid var(--line)}
.read__list .th{width:64px;height:46px;flex:0 0 64px;border-radius:2px;overflow:hidden}
.read__list .th img{width:100%;height:100%;object-fit:cover}
.read__list .tt{flex:1;font-size:13px;font-weight:500;line-height:1.65;color:var(--ink-soft)}
.read__list li a:hover .tt{color:var(--crimson)}
.read__list .dt{font-size:11px;letter-spacing:.1em;color:var(--ink-mute);font-family:var(--serif)}

/* ============================================================
   New / updates
   ============================================================ */
.updates{background:var(--cream-2)}
.newrow{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.ncard{display:block}
.ncard__thumb{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:#fff;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.ncard__thumb{display:block}
.ncard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.ncard:hover .ncard__thumb img{transform:scale(1.06)}
.ncard__brand{display:block;font-size:10.5px;letter-spacing:.12em;color:var(--crimson);font-weight:600}
.ncard__ttl{display:block;font-family:var(--serif);font-size:13.5px;line-height:1.5;color:var(--ink);margin:5px 0 7px}
.ncard__dt{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--ink-mute)}

/* ============================================================
   Newsletter + Footer
   ============================================================ */
.news{border-top:1px solid var(--line);background:var(--cream)}
.news__inner{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(40px,5vw,62px) 0}
.news__logo{width:230px;margin-bottom:20px}
.news__tag{font-size:13.5px;line-height:2.1;color:var(--ink-soft);max-width:30em}
.news__form h4{font-family:var(--serif);font-size:16px;letter-spacing:.1em;margin-bottom:6px}
.news__form p{font-size:12.5px;color:var(--ink-mute);margin-bottom:16px}
.news__field{display:flex;gap:12px}
.news__field input{flex:1;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;font-family:var(--sans);font-size:13.5px;color:var(--ink)}
.news__field input::placeholder{color:var(--ink-mute)}
.news__field .btn{white-space:nowrap;padding:14px 26px}

.site-footer{background:var(--dark-2);color:var(--on-dark-mute)}
.footer__bottom{max-width:var(--wrap);margin:0 auto;padding:26px 24px;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.1em}
.footer__bottom a{color:var(--on-dark-mute)}
.footer__bottom a:hover{color:#fff}
.footer__copy{color:var(--on-dark-mute)}
.footer__sep{opacity:.4}

/* ============================================================
   Post list (fallback / archive)
   ============================================================ */
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 26px;margin-top:8px}
.post-list__item a{display:block}
.post-list__thumb{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:#fff;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.post-list__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.post-list__item a:hover .post-list__thumb img{transform:scale(1.05)}
.post-list__date{display:block;font-size:11px;letter-spacing:.12em;color:var(--ink-mute);font-family:var(--serif)}
.post-list__ttl{display:block;font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink);margin-top:6px}
.post-list__item a:hover .post-list__ttl{color:var(--crimson)}
.post-pager{margin-top:48px;text-align:center}
.post-pager .page-numbers{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;padding:0 8px;margin:0 3px;border:1px solid var(--line);border-radius:var(--radius);font-size:13px;color:var(--ink-soft)}
.post-pager .page-numbers.current{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.post-pager a.page-numbers:hover{border-color:var(--crimson);color:var(--crimson)}
@media(max-width:720px){ .post-list{grid-template-columns:1fr 1fr;gap:24px 16px} }
@media(max-width:420px){ .post-list{grid-template-columns:1fr} }

/* placeholder ribbon */
.demo-note{position:fixed;left:var(--band);bottom:0;z-index:100;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.08em;padding:6px 14px;border-top-right-radius:6px;font-family:var(--sans);opacity:.86}
@media(max-width:900px){ .demo-note{left:0} }

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1080px){
  .feature__grid{grid-template-columns:1fr 1fr}
  .fcard--lead{grid-row:auto;grid-column:1 / span 2;min-height:300px}
  .fcard--wide,.fcard--tall,.fcard--a,.fcard--b{grid-column:auto;grid-row:auto}
  .steel__list{grid-template-columns:repeat(3,1fr)}
  .newrow{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){
  .side-band{display:none}
  .page{margin-left:0}
  .site-header .brand{display:inline-flex}
  .header__inner{padding:12px 20px;justify-content:space-between}
  .gnav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;background:var(--cream);padding:88px 30px 40px;transform:translateX(100%);transition:transform .35s;box-shadow:-10px 0 40px rgba(0,0,0,.15)}
  .gnav a,.header--over .gnav a{color:var(--ink-soft);font-size:16px;width:100%;padding:14px 0;border-bottom:1px solid var(--line)}
  body.nav-open .gnav{transform:translateX(0)}
  .nav-toggle{display:flex;z-index:40}
  body.nav-open .nav-toggle span{background:var(--ink)}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .popular__cols{grid-template-columns:1fr}
  .brandf__cols{grid-template-columns:1fr;gap:40px}
  .duo{grid-template-columns:1fr}
}
@media(max-width:720px){
  .hero__body{padding-top:120px}
  .hsearch__grid{grid-template-columns:1fr 1fr}
  .trio__grid{grid-template-columns:1fr}
  .brandf__lead{grid-template-columns:1fr;gap:24px}
  .feature__grid{grid-template-columns:1fr}
  .fcard--lead{grid-column:auto;min-height:260px}
  .steel__list{grid-template-columns:repeat(2,1fr)}
  .newrow{grid-template-columns:repeat(2,1fr)}
  .pcond{grid-template-columns:1fr}
  .ptypes{grid-template-columns:repeat(3,1fr)}
  .news__inner,.news__field{grid-template-columns:1fr}
  .news__field{flex-direction:column}
  .footer__bottom{flex-direction:column;gap:10px;text-align:center}
}
@media(max-width:420px){
  .hsearch__grid{grid-template-columns:1fr}
  .ptypes{grid-template-columns:repeat(2,1fr)}
}