/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#1a1a1a;background:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
button,input,select{font:inherit;color:inherit}

/* ===== Layout ===== */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #eee}
.header__inner{display:flex;align-items:center;height:64px;gap:24px}
.logo{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:800;color:#1a1a1a;flex-shrink:0}
.logo svg{width:36px;height:31px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__item{position:relative}
.nav__item>a{display:block;padding:8px 14px;font-size:14px;font-weight:600;border-radius:8px;transition:background .15s,color .15s}
.nav__item>a:hover{background:#f0f7f0;color:#4CAF50}
.nav__dropdown{position:absolute;top:100%;left:0;min-width:180px;background:#fff;border:1px solid #eee;border-radius:12px;padding:8px;box-shadow:0 8px 30px rgba(0,0,0,.1);display:none;z-index:10}
.nav__item:hover .nav__dropdown{display:block}
.nav__dropdown a{display:block;padding:8px 12px;font-size:14px;border-radius:8px;color:#555}
.nav__dropdown a:hover{background:#f0f7f0;color:#4CAF50}
.nav__search{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s}
.nav__search:hover{background:#f0f7f0;color:#4CAF50}
.menu-toggle{display:none;width:40px;height:40px;border:none;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-left:auto;position:relative}
.menu-toggle span{width:22px;height:2px;background:#1a1a1a;border-radius:2px;transition:transform .25s,opacity .2s}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;border-top:1px solid #eee;padding:12px 0}
.mobile-nav.is-open{display:block}
.mobile-nav details{border-bottom:1px solid #f0f0f0}
.mobile-nav summary{padding:12px 0;font-weight:600;font-size:15px;cursor:pointer;list-style:none}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav a{display:block;padding:10px 16px;font-size:14px;color:#555}

/* ===== Hero ===== */
.hero{padding:80px 0 60px;text-align:center;background:linear-gradient(180deg,#f8fbf8 0%,#fff 100%);background-size:cover;background-position:center;position:relative}
.hero__overlay{position:absolute;inset:0}
.hero h1{font-size:44px;font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:12px}
.hero p{font-size:18px;color:#555;max-width:600px;margin:0 auto 28px}
.hero-search{max-width:680px;margin:0 auto;display:flex;gap:8px;align-items:stretch}
.hero-search select,.hero-search input{height:48px;border:1px solid #ddd;border-radius:10px;padding:0 14px;font-size:14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.hero-search select:focus,.hero-search input:focus{outline:none;border-color:#4CAF50;box-shadow:0 0 0 3px rgba(76,175,80,.12)}
.hero-search select{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.hero-search .btn{height:48px;padding:0 28px;white-space:nowrap}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 20px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s,background .15s,transform .15s;text-decoration:none}
.btn--primary{background:#4CAF50;color:#fff}
.btn--primary:hover{background:#43A047}
.btn--primary:active{transform:scale(.97)}
.btn--outline{background:transparent;border:1px solid #ddd;color:#333}
.btn--outline:hover{background:#f5f5f5;border-color:#ccc}
.btn--lg{height:48px;padding:0 28px;font-size:15px}
.btn--block{width:100%}

/* ===== Section ===== */
.section{padding:40px 0}
.section--alt{background:#f8fbf8}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.section__head h2{font-size:28px;font-weight:800;letter-spacing:-.5px}
.section__head .label{font-size:13px;font-weight:600;color:#4CAF50;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.section__more{font-size:14px;font-weight:600;color:#4CAF50;white-space:nowrap;transition:opacity .15s}
.section__more:hover{text-decoration:underline;opacity:.85}

/* ===== Filter chips ===== */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip{display:inline-flex;align-items:center;padding:7px 16px;border:1px solid #ddd;border-radius:999px;font-size:13px;font-weight:500;color:#555;cursor:pointer;transition:border-color .15s,background .15s,color .15s;text-decoration:none;white-space:nowrap}
.chip:hover{border-color:#4CAF50;color:#4CAF50}
.chip--active{background:#4CAF50;border-color:#4CAF50;color:#fff}
.chip--static{cursor:default}
.chip--static:hover{border-color:#ddd;color:#555}

/* ===== Filter bar ===== */
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:20px;border:1px solid #eee;border-radius:12px;margin-bottom:24px;background:#fafafa}
.filter-bar .field{display:flex;flex-direction:column;gap:4px}
.filter-bar label{font-size:12px;font-weight:600;color:#999}
.filter-bar select{height:38px;border:1px solid #ddd;border-radius:8px;padding:0 28px 0 10px;font-size:14px;background:#fff;transition:border-color .15s;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.filter-bar select:focus{outline:none;border-color:#4CAF50}
.filter-bar .btn{height:38px}
.filter-bar__result{font-size:14px;color:#666;margin-bottom:16px}
.filter-bar__result strong{color:#1a1a1a;font-weight:700}

/* ===== Cards grid ===== */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ===== Pet card ===== */
.pet-card{display:block;border-radius:12px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.pet-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.pet-card__img{aspect-ratio:1;background:#f0f0f0;overflow:hidden}
.pet-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pet-card:hover .pet-card__img img{transform:scale(1.05)}
.pet-card__body{padding:10px}
.pet-card__name{font-size:15px;font-weight:700;margin-bottom:2px;position:relative;padding-right:32px}
.pet-card__gender{position:absolute;right:4px;top:1px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;line-height:1}
.icon-gender{display:inline-block;vertical-align:middle;width:10px;height:10px}
.pet-card__gender--male{background:#4196ff}
.pet-card__gender--female{background:#fc7389}
.pet-card__gender--boy{background:#4196ff}
.pet-card__gender--girl{background:#fc7389}
.pet-card__meta{font-size:13px;color:#888}

/* ===== Breed card ===== */
.breed-card{display:block;border-radius:12px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.breed-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.breed-card__img{aspect-ratio:4/3;background:#f0f0f0;overflow:hidden}
.breed-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.breed-card:hover .breed-card__img img{transform:scale(1.05)}
.breed-card__body{padding:10px 4px}
.breed-card__name{font-size:15px;font-weight:700;margin-bottom:2px}
.breed-card__meta{font-size:13px;color:#888}

/* ===== Article card ===== */
.article-card{display:block;border-radius:12px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.article-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.article-card__img{aspect-ratio:16/10;background:#f0f0f0;overflow:hidden}
.article-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.article-card:hover .article-card__img img{transform:scale(1.05)}
.article-card__body{padding:12px 4px}
.article-card__category{font-size:12px;font-weight:600;color:#4CAF50;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.article-card__title{font-size:16px;font-weight:700;line-height:1.3;transition:color .15s}
.article-card:hover .article-card__title{color:#4CAF50}

/* ===== Feature banner ===== */
.feature-banner{display:flex;align-items:center;gap:24px;border:1px solid #e8f0e8;border-radius:16px;padding:28px;transition:transform .2s,box-shadow .2s;background:linear-gradient(135deg,#f8fbf8,#fff)}
.feature-banner:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.feature-banner__content{flex:1}
.feature-banner__label{font-size:12px;font-weight:600;color:#4CAF50;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.feature-banner__title{font-size:24px;font-weight:800;margin-bottom:8px}
.feature-banner__desc{font-size:14px;color:#666;margin-bottom:12px}
.feature-banner__img{width:150px;height:150px;border-radius:12px;overflow:hidden;flex-shrink:0}
.feature-banner__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.feature-banner:hover .feature-banner__img img{transform:scale(1.05)}

/* ===== Page header ===== */
.page-head{padding:36px 0 20px}
.page-head h1{font-size:30px;font-weight:800;margin-bottom:8px;letter-spacing:-.5px}
.page-head p{font-size:15px;color:#666;max-width:700px}
.page-head__count{font-size:14px;color:#888;margin-top:10px}
.page-head__count strong{color:#4CAF50;font-weight:700}

/* ===== Breadcrumb ===== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:#999;margin-bottom:12px}
.breadcrumb a:hover{color:#4CAF50}
.breadcrumb span{color:#ccc}

/* ===== Pagination ===== */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:36px}
.pagination a,.pagination span{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;border-radius:8px;font-size:14px;font-weight:600;padding:0 10px;transition:border-color .15s,background .15s,color .15s}
.pagination a:hover{border-color:#4CAF50;color:#4CAF50}
.pagination .current{background:#4CAF50;border-color:#4CAF50;color:#fff}
.pagination .disabled{color:#ccc;border-color:#eee;pointer-events:none}

/* ===== Detail page ===== */
.detail{padding:32px 0}
.detail__top{display:grid;grid-template-columns:1fr 360px;gap:28px;margin-bottom:36px}
.detail__top .detail__info{order:1}
.detail__top .detail__img{order:2}
.detail__img{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.detail__img img{width:100%;height:100%;object-fit:contain}
.detail__info h1{font-size:30px;font-weight:800;margin-bottom:8px;letter-spacing:-.5px}
.detail__info .lead{font-size:15px;color:#666;margin-bottom:16px}
.detail__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.detail__stat{padding:14px;border:1px solid #eee;border-radius:10px;transition:border-color .15s,background .15s}
.detail__stat:hover{border-color:#c8e6c8;background:#fafffa}
.detail__stat .key{font-size:12px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.5px}
.detail__stat .val{font-size:15px;font-weight:600;margin-top:2px}
.detail__body{display:grid;grid-template-columns:1fr 300px;gap:28px}
.detail__content h2{font-size:22px;font-weight:700;margin:28px 0 12px}
.detail__content h2:first-child{margin-top:0}
.detail__content p{font-size:15px;color:#444;line-height:1.8;margin-bottom:14px}
.detail__content ul{padding-left:20px;margin-bottom:14px}
.detail__content li{font-size:14px;color:#444;line-height:1.8;list-style:disc}
.detail__sidebar{display:flex;flex-direction:column;gap:16px}
.sidebar-box{border:1px solid #eee;border-radius:12px;padding:18px;transition:box-shadow .2s}
.sidebar-box:hover{box-shadow:0 2px 12px rgba(0,0,0,.04)}
.sidebar-box h3{font-size:16px;font-weight:700;margin-bottom:12px}
.sidebar-box p{font-size:14px;color:#666;line-height:1.6}
.sidebar-box .links{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sidebar-box .links a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #eee;border-radius:8px;font-size:14px;font-weight:600;transition:border-color .15s,background .15s,color .15s}
.sidebar-box .links a:hover{border-color:#4CAF50;color:#4CAF50;background:#fafffa}
.sidebar-box .links a::after{content:"\2192";color:#ccc}
.sidebar-box .links a:hover::after{color:#4CAF50}
.sidebar-box .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* ===== Directory ===== */
.dir-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dir-card{display:block;border:1px solid #eee;border-radius:12px;padding:18px;transition:transform .2s,box-shadow .2s,border-color .2s}
.dir-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:#c8e6c8}
.dir-card__count{display:inline-block;font-size:12px;font-weight:600;color:#999;margin-bottom:8px}
.dir-card__name{font-size:16px;font-weight:700;margin-bottom:4px}
.dir-card__desc{font-size:13px;color:#888;line-height:1.5}
.dir-card__link{font-size:13px;font-weight:600;color:#4CAF50;margin-top:10px;display:block}

/* ===== List row ===== */
.list-row{display:flex;gap:16px;border:1px solid #eee;border-radius:12px;padding:14px;transition:transform .2s,box-shadow .2s,border-color .2s}
.list-row:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06);border-color:#c8e6c8}
.list-row__img{width:160px;height:120px;border-radius:8px;overflow:hidden;flex-shrink:0;background:#f0f0f0}
.list-row__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.list-row:hover .list-row__img img{transform:scale(1.05)}
.list-row__content{flex:1;min-width:0}
.list-row__title{font-size:17px;font-weight:700;margin-bottom:4px;transition:color .15s}
.list-row:hover .list-row__title{color:#4CAF50}
.list-row__meta{font-size:13px;color:#888;margin-bottom:4px}
.list-row__desc{font-size:14px;color:#666;line-height:1.5}

/* ===== Name table ===== */
.name-table{border:1px solid #eee;border-radius:12px;overflow:hidden}
.name-row{display:grid;grid-template-columns:160px 100px 1fr 120px;gap:12px;padding:14px 18px;border-bottom:1px solid #f0f0f0;align-items:center;font-size:14px;transition:background .15s}
.name-row:hover{background:#fafffa}
.name-row:last-child{border-bottom:none}
.name-row__head{background:#f9f9f9;font-weight:600;color:#999;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.name-row__head:hover{background:#f9f9f9}
.name-row__name{font-weight:700;font-size:15px}
.name-row__gender{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:700;color:#fff}
.name-row__gender--boy{background:#2196F3}
.name-row__gender--girl{background:#E91E63}
.name-row__gender--unisex{background:#9E9E9E}
.name-row__gender--male{background:#2196F3}
.name-row__gender--female{background:#E91E63}
.name-row__origin{color:#888;font-size:13px}
.name-row__meaning{color:#666;font-size:14px}

/* ===== Alphabet ===== */
.alphabet{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.alphabet a{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid #ddd;border-radius:8px;font-size:14px;font-weight:600;color:#666;transition:border-color .15s,background .15s,color .15s}
.alphabet a:hover{border-color:#4CAF50;color:#4CAF50}
.alphabet a.active{background:#4CAF50;border-color:#4CAF50;color:#fff}

/* ===== State grid ===== */
.state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.state-grid a{display:block;padding:12px 14px;border:1px solid #eee;border-radius:8px;font-size:14px;font-weight:600;transition:border-color .15s,background .15s,color .15s}
.state-grid a:hover{border-color:#4CAF50;color:#4CAF50;background:#fafffa}
.state-grid a small{display:block;font-size:12px;color:#999;font-weight:400;margin-top:2px}

/* ===== Service cards ===== */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.service-card{display:block;border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.service-card__img{aspect-ratio:16/10;background:#f0f0f0;overflow:hidden}
.service-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.service-card:hover .service-card__img img{transform:scale(1.05)}
.service-card__body{padding:12px 4px}
.service-card__name{font-size:15px;font-weight:700;margin-bottom:2px}
.service-card__desc{font-size:13px;color:#888}

/* ===== Step cards ===== */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step-card{border:1px solid #eee;border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.step-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.step-card__img{width:100%;height:160px;object-fit:cover}
.step-card__body{padding:18px}
.step-card__num{display:inline-flex;width:30px;height:30px;border-radius:50%;background:#4CAF50;color:#fff;font-weight:700;font-size:14px;align-items:center;justify-content:center;margin-bottom:10px}
.step-card__title{font-size:16px;font-weight:700;margin-bottom:4px}
.step-card__desc{font-size:14px;color:#666;line-height:1.5}

/* ===== Footer ===== */
.footer{border-top:1px solid #eee;padding:40px 0 0;margin-top:48px;background:#fafafa}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:24px;padding-bottom:32px}
.footer__brand p{font-size:14px;color:#666;line-height:1.6;margin-top:10px}
.footer__col h4{font-size:13px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.footer__col a{display:block;font-size:14px;color:#555;padding:4px 0;transition:color .15s}
.footer__col a:hover{color:#4CAF50}
.footer__bottom{border-top:1px solid #eee;padding:16px 0;font-size:13px;color:#999;text-align:center}

/* ===== 404 ===== */
.not-found{padding:80px 0;text-align:center}
.not-found h1{font-size:56px;font-weight:800;margin-bottom:8px;color:#4CAF50}
.not-found p{font-size:16px;color:#666;margin-bottom:28px}
.not-found .btns{display:flex;gap:12px;justify-content:center}

/* ===== Article prose ===== */
.prose{max-width:800px}
.prose h2{font-size:24px;font-weight:700;margin:28px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;font-weight:700;margin:22px 0 8px}
.prose p{font-size:15px;color:#333;line-height:1.9;margin-bottom:16px}
.prose ul{padding-left:20px;margin-bottom:16px}
.prose li{font-size:14px;color:#333;line-height:1.9;list-style:disc}
.prose img{border-radius:12px;margin:18px 0}

/* ===== Empty state ===== */
.empty{text-align:center;padding:60px 20px;color:#999;font-size:15px}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .grid--4{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr 1fr}
  .dir-grid{grid-template-columns:repeat(3,1fr)}
  .service-grid{grid-template-columns:repeat(3,1fr)}
  .detail__top{grid-template-columns:1fr}
  .detail__body{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav{display:none}
  .menu-toggle{display:flex}
  .grid,.grid--4,.grid--3,.grid--2{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:30px}
  .hero p{font-size:16px}
  .hero-search{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero-search select{width:100%}
  .hero-search .btn{width:100%;grid-column:1/-1}
  .feature-banner{flex-direction:column;text-align:center}
  .feature-banner__img{width:100%;height:180px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .dir-grid{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .step-grid{grid-template-columns:1fr}
  .filter-bar{flex-direction:row;flex-wrap:wrap;gap:8px}
  .filter-bar .field{width:calc(50% - 4px)}
  .filter-bar .field:last-of-type:nth-child(odd){width:100%}
  .filter-bar select{width:100%}
  .filter-bar .btn{width:100%;margin-top:4px}
  .list-row{flex-direction:row;align-items:center;flex-wrap:wrap}
  .list-row__img{width:64px;height:64px;flex-shrink:0}
  .list-row__content{min-width:0}
  .list-row__btn{margin-top:4px}
  .name-row{grid-template-columns:1fr;gap:6px}
  .name-row__head{display:none}
  .detail__top,.detail__body{grid-template-columns:1fr}
  .detail__top .detail__img{order:1}
  .detail__top .detail__info{order:2}
  .detail__stats{grid-template-columns:1fr}
  .section__head h2{font-size:22px}
}
@media(max-width:480px){
  .grid,.grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
  .dir-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .section__head{flex-direction:column;align-items:flex-start}
}