/*
Theme Name: AV Select Lab
Theme URI: https://example.com/
Author: AV Select Lab
Description: AV Select Lab向けのレスポンシブなクラシックWordPressテーマ。新着記事、人気ジャンル、人気記事、セール情報をWordPress投稿から自動表示します。
Version: 2.3.4
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: av-select-lab
*/

:root{
  --avsl-bg:#fffaf4;
  --avsl-card:#fff;
  --avsl-text:#171717;
  --avsl-muted:#6f6f6f;
  --avsl-line:#efd9c7;
  --avsl-coral:#f15f67;
  --avsl-coral-dark:#d94850;
  --avsl-orange:#f59b23;
  --avsl-purple:#68639b;
  --avsl-shadow:0 10px 32px rgba(89,55,28,.09);
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--avsl-text);
  background:var(--avsl-bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.75;
}

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

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

/* ===========================
   共通レイアウト
=========================== */

.avsl-container{
  width:min(1480px,calc(100% - 48px));
  margin-inline:auto;
}

.avsl-section{
  margin-top:22px;
}

.avsl-card{
  background:var(--avsl-card);
  border:1px solid var(--avsl-line);
  border-radius:18px;
  box-shadow:var(--avsl-shadow);
}

.avsl-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.avsl-title-row h2{
  margin:0;
  font-size:25px;
  line-height:1.4;
  letter-spacing:.02em;
}

.avsl-title-row a{
  font-size:14px;
  font-weight:700;
}

.avsl-title-row .mark{
  margin-right:8px;
}

.avsl-empty{
  margin:0;
  padding:34px 14px;
  color:var(--avsl-muted);
  font-size:14px;
  text-align:center;
}

/* ===========================
   Header
=========================== */

.avsl-header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,250,244,.94);
  border-bottom:1px solid rgba(239,217,199,.9);
  backdrop-filter:blur(12px);
}

.admin-bar .avsl-header{
  top:32px;
}

.avsl-header-inner{
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:32px;
}

.avsl-logo{
  font-size:40px;
  font-weight:900;
  line-height:1;
}

.avsl-logo .accent{
  color:#a93c3e;
}

.avsl-logo small{
  display:block;
  margin-top:9px;
  font-size:13px;
  letter-spacing:.12em;
  text-align:center;
}

/* ===========================
   Hero
=========================== */

.avsl-hero{
  min-height:430px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.98),rgba(255,248,241,.93) 50%,rgba(255,240,227,.92));
}

.avsl-hero-copy{
  min-width:0;
  padding:64px 46px 52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.avsl-hero h1{
  margin:0 0 14px;
  font-size:48px;
  line-height:1.32;
  letter-spacing:.01em;
}

.avsl-hero h1 span{
  color:var(--avsl-coral);
  white-space:nowrap;
}

.avsl-hero p{
  margin:0 0 26px;
  font-size:19px;
  line-height:1.8;
}

.avsl-main-search{
  width:100%;
  margin-top:4px;
  display:flex;
  align-items:stretch;
}

.avsl-main-search input{
  width:100%;
  min-width:0;
  height:60px;
  padding:15px 18px;
  border:1px solid #ddd;
  border-right:0;
  border-radius:10px 0 0 10px;
  outline:none;
  background:#fff;
  font-size:16px;
}

.avsl-main-search input:focus{
  border-color:#ef9da2;
  box-shadow:0 0 0 3px rgba(241,95,103,.10);
}

.avsl-main-search button{
  min-width:160px;
  height:60px;
  padding:0 24px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:0 10px 10px 0;
  color:#fff;
  background:linear-gradient(135deg,#f47178,#ee515a);
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s,transform .2s;
}

.avsl-main-search button:hover{
  background:linear-gradient(135deg,#ef626b,#db4650);
}

.avsl-search-icon,
.avsl-search-text{
  display:inline-block;
  white-space:nowrap;
  line-height:1;
}

.avsl-search-icon{
  font-size:21px;
}

.avsl-search-text{
  font-size:17px;
}

.avsl-tags{
  display:flex;
  flex-wrap:wrap;
  gap:11px;
  margin-top:16px;
}

.avsl-tags a{
  padding:7px 14px;
  border:1px solid var(--avsl-line);
  border-radius:8px;
  background:#fff;
  font-size:14px;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}

.avsl-tags a:hover{
  transform:translateY(-2px);
  border-color:#efb3a6;
  box-shadow:0 6px 14px rgba(89,55,28,.08);
}

.avsl-hero-image{
  min-height:430px;
  background:#f0dbcd;
}

.avsl-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* ===========================
   Menu
=========================== */

.avsl-menu-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
}

.avsl-menu-item{
  min-height:225px;
  padding:28px 16px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}

.avsl-menu-item:hover{
  transform:translateY(-5px);
  border-color:#efb3a6;
  box-shadow:0 16px 34px rgba(89,55,28,.14);
}

.avsl-icon{
  width:64px;
  height:64px;
  margin:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:39px;
}

.avsl-menu-item h3{
  margin:15px 0 6px;
  font-size:22px;
  line-height:1.45;
}

.avsl-menu-item p{
  margin:0;
  color:#444;
  font-size:14px;
  line-height:1.65;
}

.avsl-arrow{
  margin-top:14px;
  font-size:22px;
  line-height:1;
}

.i-red{color:var(--avsl-coral)}
.i-purple{color:var(--avsl-purple)}
.i-orange{color:var(--avsl-orange)}

/* ===========================
   Main
=========================== */

.avsl-main{
  padding-bottom:68px;
}

.avsl-main-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:20px;
}

.avsl-block,
.avsl-ranking,
.avsl-sale{
  padding:20px;
}

/* ===========================
   Genres
=========================== */

.avsl-genre-row{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
}

.avsl-genre{
  position:relative;
  aspect-ratio:1.17/1;
  overflow:hidden;
  border-radius:10px;
  color:#fff;
  background:#8b7467;
}

.avsl-genre img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.70);
  transition:transform .25s,filter .25s;
}

.avsl-genre:hover img{
  transform:scale(1.04);
  filter:brightness(.78);
}

.avsl-genre span{
  position:absolute;
  right:0;
  bottom:14px;
  left:0;
  font-size:20px;
  font-weight:800;
  text-align:center;
  text-shadow:0 2px 8px #000;
}

.avsl-genre small{
  display:block;
  font-size:12px;
  font-weight:600;
}

/* ===========================
   Posts
=========================== */

.avsl-post-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.avsl-post-card{
  position:relative;
  overflow:hidden;
  border:1px solid #eee;
  border-radius:10px;
  background:#fff;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}

.avsl-post-card:hover{
  transform:translateY(-4px);
  border-color:#efc9b8;
  box-shadow:0 12px 26px rgba(89,55,28,.10);
}

.avsl-post-card img{
  width:100%;
  aspect-ratio:1.32/1;
  object-fit:cover;
  background:#eee;
}

.avsl-post-body{
  padding:13px;
}

.avsl-post-date{
  color:#777;
  font-size:12px;
}

.avsl-post-card h3{
  margin:6px 0 11px;
  font-size:16px;
  line-height:1.65;
}

.avsl-badge{
  position:absolute;
  top:9px;
  left:9px;
  z-index:2;
  padding:3px 7px;
  border-radius:5px;
  color:#fff;
  background:var(--avsl-coral);
  font-size:12px;
  font-weight:800;
}

.avsl-chip{
  display:inline-block;
  padding:3px 9px;
  border-radius:5px;
  color:var(--avsl-coral);
  background:#fff2f1;
  font-size:12px;
}

/* ===========================
   Ranking
=========================== */

.avsl-ranking-list{
  display:grid;
  gap:12px;
}

.avsl-rank-item{
  display:grid;
  grid-template-columns:38px 92px 1fr;
  gap:12px;
  align-items:center;
  padding:2px 0;
}

.avsl-rank-num{
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border-radius:5px;
  color:#fff;
  background:#9ba7b5;
  font-weight:900;
}

.avsl-rank-item:first-child .avsl-rank-num{background:#dbb24e}
.avsl-rank-item:nth-child(2) .avsl-rank-num{background:#9da9b6}
.avsl-rank-item:nth-child(3) .avsl-rank-num{background:#d69a6f}

.avsl-rank-item img{
  width:92px;
  height:72px;
  object-fit:cover;
  border-radius:7px;
  background:#eee;
}

.avsl-rank-item h3{
  margin:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  font-size:14px;
  line-height:1.6;
}

/* ===========================
   Sales
=========================== */

.avsl-sale-item{
  display:grid;
  grid-template-columns:92px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 0;
  border-top:1px solid #eee;
}

.avsl-sale-item:first-child{
  border-top:0;
}

.avsl-sale-item img{
  width:92px;
  height:72px;
  object-fit:cover;
  border-radius:7px;
  background:#eee;
}

.avsl-sale-item h3{
  margin:0 0 4px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:14px;
  line-height:1.5;
}

.avsl-sale-item p{
  margin:0;
  color:#666;
  font-size:12px;
  line-height:1.5;
}

.avsl-sale-btn{
  padding:9px 12px;
  border-radius:6px;
  color:#fff;
  background:var(--avsl-coral);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

/* ===========================
   Archive / Single
=========================== */

.avsl-content-wrap{
  margin-top:24px;
  padding:38px;
}

.avsl-entry-title{
  margin:0 0 14px;
  font-size:38px;
  line-height:1.42;
}

.avsl-entry-meta{
  margin-bottom:26px;
  color:var(--avsl-muted);
  font-size:14px;
}

.avsl-entry-thumbnail{
  margin-bottom:30px;
}

.avsl-entry-thumbnail img,
.avsl-entry-content img{
  border-radius:12px;
}

.avsl-entry-content{
  color:#333;
  font-size:18px;
  line-height:1.95;
}

.avsl-entry-content p{
  margin:0 0 1.65em;
}

.avsl-entry-content h2{
  margin:2.1em 0 .85em;
  font-size:31px;
  line-height:1.5;
}

.avsl-entry-content h3{
  margin:1.7em 0 .75em;
  font-size:24px;
  line-height:1.5;
}

.avsl-entry-content ul,
.avsl-entry-content ol{
  margin:0 0 1.65em;
  padding-left:1.5em;
}

.avsl-entry-content li{
  margin-bottom:.6em;
}

.avsl-entry-content table{
  font-size:16px;
}

.avsl-entry-content blockquote{
  margin:1.9em 0;
  padding:20px 24px;
  border-left:5px solid var(--avsl-coral);
  border-radius:10px;
  background:#fff7f3;
}

.avsl-entry-content img{
  margin-top:1.5em;
  margin-bottom:1.5em;
}

.avsl-pagination{
  margin-top:28px;
}

.avsl-pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.avsl-pagination .page-numbers{
  padding:8px 13px;
  border:1px solid var(--avsl-line);
  border-radius:7px;
  background:#fff;
}

.avsl-pagination .current{
  color:#fff;
  background:var(--avsl-coral);
}

/* ===========================
   Footer
=========================== */

.avsl-footer{
  padding:48px 0 22px;
  color:#fff;
  background:#202224;
}

.avsl-footer-grid{
  display:grid;
  grid-template-columns:1.25fr .8fr .95fr .7fr;
  gap:52px;
  align-items:start;
}

.avsl-footer-logo{
  margin-bottom:13px;
  color:#d4b181;
  font-size:29px;
  font-weight:900;
  line-height:1.2;
}

.avsl-footer p{
  margin:0 0 12px;
  color:#e8e8e8;
  font-size:13px;
  line-height:1.85;
}

.avsl-footer h4{
  margin:0 0 15px;
  color:#fff;
  font-size:15px;
}

.avsl-footer-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.avsl-footer-links a{
  position:relative;
  color:#f0f0f0;
  font-size:13px;
  line-height:1.6;
  transition:color .2s,transform .2s;
}

.avsl-footer-links a:hover{
  color:#d4b181;
  transform:translateX(3px);
}

.avsl-social{
  display:flex;
  align-items:center;
  gap:14px;
}

.avsl-social a{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#fff;
  font-size:15px;
  transition:background .2s,border-color .2s;
}

.avsl-social a:hover{
  border-color:#d4b181;
  background:rgba(212,177,129,.15);
}

.avsl-copy{
  margin-top:36px;
  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#aaa;
  font-size:11px;
  text-align:center;
}

/* ===========================
   Accessibility
=========================== */

.screen-reader-text{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  border:0;
  word-wrap:normal!important;
}

/* ===========================
   Search results
=========================== */

.avsl-search-results-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}

.avsl-results-search{
  width:min(480px,100%);
  display:flex;
}

.avsl-results-search input{
  width:100%;
  min-width:0;
  height:48px;
  padding:11px 15px;
  border:1px solid #ddd;
  border-right:0;
  border-radius:9px 0 0 9px;
  outline:none;
  background:#fff;
}

.avsl-results-search button{
  min-width:96px;
  height:48px;
  padding:0 17px;
  border:0;
  border-radius:0 9px 9px 0;
  color:#fff;
  background:var(--avsl-coral);
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}

.avsl-search-results .avsl-post-card h2{
  margin:6px 0 9px;
  font-size:16px;
  line-height:1.6;
}

.avsl-search-excerpt{
  margin:0 0 11px;
  color:var(--avsl-muted);
  font-size:13px;
  line-height:1.75;
}

.avsl-search-no-results{
  padding:58px 22px;
  text-align:center;
}

.avsl-search-no-results h2{
  margin:0 0 9px;
  font-size:24px;
}

.avsl-search-no-results p{
  margin:0;
  color:var(--avsl-muted);
}

/* ===========================
   AV Select Lab カードデザイン
=========================== */

.avsl-benefit-cards{
  margin:35px 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.avsl-benefit-card{
  height:340px;
  padding:25px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  border:1px solid #f2d8cc;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  text-align:center;
  transition:all .25s ease;
}

.avsl-benefit-card:hover{
  transform:translateY(-8px);
  border-color:#ff8d8d;
  box-shadow:0 18px 35px rgba(0,0,0,.15);
}

.avsl-benefit-card__icon{
  margin-bottom:20px;
  font-size:52px;
  line-height:1;
}

.avsl-benefit-card h3{
  min-height:85px;
  margin:0 0 18px;
  color:#222;
  font-size:30px;
  font-weight:700;
  line-height:1.4;
}

.avsl-benefit-card p{
  margin:0;
  color:#666;
  font-size:18px;
  line-height:1.9;
}

/* ===========================
   Responsive
=========================== */

@media(max-width:1260px){
  .avsl-container{
    width:min(100% - 36px,1260px);
  }

  .avsl-hero h1{
    font-size:42px;
  }

  .avsl-main-layout{
    grid-template-columns:minmax(0,1fr) 360px;
  }

  .avsl-menu-item h3{
    font-size:20px;
  }
}

@media(max-width:1020px){
  .avsl-menu-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .avsl-main-layout{
    grid-template-columns:1fr;
  }

  .avsl-genre-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .avsl-benefit-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:782px){
  .admin-bar .avsl-header{
    top:46px;
  }
}

@media(max-width:760px){
  .avsl-container{
    width:min(100% - 20px,1180px);
  }

  .avsl-header-inner{
    min-height:72px;
  }

  .avsl-logo{
    font-size:27px;
  }

  .avsl-logo small{
    font-size:9px;
  }

  .avsl-hero{
    grid-template-columns:1fr;
  }

  .avsl-hero-copy{
    padding:36px 22px;
  }

  .avsl-hero h1{
    font-size:31px;
  }

  .avsl-hero p{
    font-size:16px;
  }

  .avsl-hero-image{
    min-height:280px;
  }

  .avsl-menu-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .avsl-menu-item{
    min-height:180px;
  }

  .avsl-post-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .avsl-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }

  .avsl-main{
    padding-bottom:42px;
  }

  .avsl-search-results-header{
    align-items:stretch;
    flex-direction:column;
  }

  .avsl-results-search{
    width:100%;
  }

  .avsl-content-wrap{
    padding:24px 20px;
  }

  .avsl-entry-title{
    font-size:29px;
  }

  .avsl-entry-content{
    font-size:16px;
    line-height:1.9;
  }

  .avsl-entry-content h2{
    font-size:24px;
  }

  .avsl-entry-content h3{
    font-size:20px;
  }

  .avsl-entry-content table{
    font-size:14px;
  }

  .avsl-benefit-cards{
    grid-template-columns:1fr;
  }

  .avsl-benefit-card{
    height:auto;
    padding:22px;
  }

  .avsl-benefit-card__icon{
    font-size:42px;
  }

  .avsl-benefit-card h3{
    min-height:0;
    margin-bottom:12px;
    font-size:24px;
  }

  .avsl-benefit-card p{
    font-size:16px;
  }
}

@media(max-width:480px){
  .avsl-main-search input{
    padding:12px 10px;
    font-size:13px;
  }

  .avsl-main-search button{
    min-width:112px;
    padding:0 12px;
    gap:5px;
  }

  .avsl-search-icon{
    font-size:17px;
  }

  .avsl-search-text{
    font-size:14px;
  }

  .avsl-menu-grid{
    gap:10px;
  }

  .avsl-menu-item h3{
    font-size:17px;
  }

  .avsl-menu-item p{
    font-size:12px;
  }

  .avsl-genre-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .avsl-post-grid{
    grid-template-columns:1fr;
    gap:11px;
  }

  .avsl-sale-item{
    grid-template-columns:74px minmax(0,1fr);
  }

  .avsl-sale-item img{
    width:74px;
    height:60px;
  }

  .avsl-sale-btn{
    grid-column:2;
    justify-self:start;
  }

  .avsl-footer-grid{
    grid-template-columns:1fr;
    gap:27px;
  }
}


/* =========================================================
   作品レビュー：PICK UP レイアウト
   縦長・横長どちらのサンプル画像でも比率を維持
========================================================= */

.avsl-work .avsl-hero{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:46px;
  align-items:center;
  padding:32px;
  overflow:visible;
  background:#fffaf7;
}

.avsl-work .avsl-package{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:0; /* HTML内の生テキスト「PICK UP」を非表示 */
  text-align:center;
}

.avsl-work .avsl-package .wp-block-image{
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.avsl-work .avsl-package .wp-block-image::before{
  content:"PICK UP";
  display:inline-block;
  width:auto;
  margin:0 0 14px;
  padding:7px 18px;
  border-radius:999px;
  background:#ee72b4;
  color:#fff;
  font-size:18px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.08em;
  text-align:center;
}

.avsl-work .avsl-package .wp-block-image a{
  display:block;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
}

.avsl-work .avsl-package .wp-block-image img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:620px;
  margin:0 auto !important;
  object-fit:contain;
  object-position:center;
}

/* 空のラベルが小さいピンク枠として残るのを防止 */
.avsl-work .avsl-label{
  display:none !important;
}

.avsl-work .avsl-hero-info{
  min-width:0;
  align-self:center;
}

/* 横長画像でも左側が小さく見えすぎないように */
.avsl-work .avsl-package .wp-block-image img[width]{
  max-width:100% !important;
}

@media (max-width:980px){
  .avsl-work .avsl-hero{
    gap:28px;
    padding:26px;
  }

  .avsl-work .avsl-package .wp-block-image img{
    max-height:540px;
  }
}

/* =========================================================
   AV Select Lab スマホ最適化
   PC表示は変更せず、760px以下のみ上書き
========================================================= */

@media (max-width:760px){

  body{
    font-size:15px;
    line-height:1.8;
    overflow-x:hidden;
  }

  .avsl-container{
    width:calc(100% - 16px);
  }

  .avsl-section{
    margin-top:16px;
  }

  .avsl-card{
    border-radius:14px;
  }

  .avsl-block,
  .avsl-ranking,
  .avsl-sale{
    padding:16px;
  }

  .avsl-title-row{
    gap:10px;
    margin-bottom:14px;
    align-items:center;
  }

  .avsl-title-row h2{
    font-size:20px;
    line-height:1.45;
  }

  .avsl-title-row a{
    font-size:12px;
    flex-shrink:0;
  }

  .avsl-header-inner{
    min-height:68px;
    gap:16px;
  }

  .avsl-logo{
    font-size:25px;
  }

  .avsl-logo small{
    margin-top:6px;
    font-size:8px;
  }

  .avsl-hero{
    min-height:0;
  }

  .avsl-hero-copy{
    padding:28px 18px 22px;
  }

  .avsl-hero h1{
    margin-bottom:10px;
    font-size:29px;
    line-height:1.35;
  }

  .avsl-hero p{
    margin-bottom:18px;
    font-size:14px;
    line-height:1.75;
  }

  .avsl-main-search{
    margin-top:0;
  }

  .avsl-main-search input{
    height:52px;
    padding:12px 13px;
    font-size:14px;
  }

  .avsl-main-search button{
    min-width:104px;
    height:52px;
    padding:0 12px;
    gap:5px;
  }

  .avsl-search-icon{
    font-size:17px;
  }

  .avsl-search-text{
    font-size:14px;
  }

  .avsl-tags{
    gap:7px;
    margin-top:12px;
  }

  .avsl-tags a{
    padding:6px 10px;
    font-size:12px;
  }

  .avsl-hero-image{
    min-height:210px;
    max-height:260px;
  }

  .avsl-menu-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .avsl-menu-item{
    min-height:148px;
    padding:18px 10px 14px;
    border-radius:14px;
  }

  .avsl-icon{
    width:52px;
    height:52px;
    font-size:31px;
  }

  .avsl-menu-item h3{
    margin:10px 0 3px;
    font-size:16px;
    line-height:1.4;
  }

  .avsl-menu-item p{
    font-size:11px;
    line-height:1.5;
  }

  .avsl-arrow{
    margin-top:8px;
    font-size:18px;
  }

  .avsl-genre-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .avsl-genre{
    aspect-ratio:1.25/1;
    border-radius:9px;
  }

  .avsl-genre span{
    bottom:10px;
    font-size:17px;
  }

  .avsl-genre small{
    font-size:11px;
  }

  .avsl-post-grid{
    grid-template-columns:1fr;
    gap:13px;
  }

  .avsl-post-card{
    border-radius:12px;
  }

  .avsl-post-card img{
    aspect-ratio:1.45/1;
  }

  .avsl-post-body{
    padding:12px 13px 14px;
  }

  .avsl-post-card h3{
    margin:5px 0 8px;
    font-size:15px;
    line-height:1.55;
  }

  .avsl-ranking-list{
    gap:10px;
  }

  .avsl-rank-item{
    grid-template-columns:34px 82px minmax(0,1fr);
    gap:10px;
    padding:3px 0;
  }

  .avsl-rank-num{
    width:34px;
    height:34px;
  }

  .avsl-rank-item img{
    width:82px;
    height:64px;
  }

  .avsl-rank-item h3{
    font-size:13px;
    line-height:1.5;
    -webkit-line-clamp:3;
  }

  .avsl-sale-item{
    grid-template-columns:82px minmax(0,1fr);
    gap:10px;
    padding:12px 0;
  }

  .avsl-sale-item img{
    width:82px;
    height:66px;
  }

  .avsl-sale-item h3{
    font-size:13px;
    line-height:1.45;
  }

  .avsl-sale-item p{
    font-size:11px;
  }

  .avsl-sale-btn{
    grid-column:2;
    justify-self:start;
    margin-top:4px;
    padding:8px 11px;
    font-size:11px;
  }

  .avsl-content-wrap{
    margin-top:16px;
    padding:20px 14px;
  }

  .avsl-entry-title{
    margin-bottom:10px;
    font-size:25px;
    line-height:1.5;
    word-break:break-word;
  }

  .avsl-entry-meta{
    margin-bottom:20px;
    font-size:12px;
  }

  .avsl-entry-thumbnail{
    margin-bottom:22px;
  }

  .avsl-entry-thumbnail img,
  .avsl-entry-content img{
    width:100%;
    border-radius:10px;
  }

  .avsl-entry-content{
    font-size:15px;
    line-height:1.9;
  }

  .avsl-entry-content p{
    margin-bottom:1.45em;
  }

  .avsl-entry-content h2{
    margin:1.8em 0 .7em;
    font-size:23px;
    line-height:1.5;
  }

  .avsl-entry-content h3{
    margin:1.5em 0 .65em;
    font-size:19px;
  }

  .avsl-entry-content ul,
  .avsl-entry-content ol{
    padding-left:1.3em;
  }

  .avsl-entry-content table{
    display:block;
    width:100%;
    overflow-x:auto;
    font-size:13px;
    white-space:nowrap;
  }

  .avsl-entry-content blockquote{
    margin:1.5em 0;
    padding:16px 17px;
  }

  .avsl-work .avsl-hero{
    display:block;
    padding:18px 14px 20px;
  }

  .avsl-work .avsl-package,
  .avsl-work .avsl-hero-info{
    width:100%;
  }

  .avsl-work .avsl-package .wp-block-image{
    width:fit-content;
    max-width:100%;
    margin:0 auto;
  }

  .avsl-work .avsl-package .wp-block-image::before{
    margin-bottom:8px;
    font-size:15px;
  }

  .avsl-work .avsl-package .wp-block-image img{
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:560px;
    margin:0 auto !important;
    object-fit:contain;
  }

  .avsl-work .avsl-hero-info{
    margin-top:22px;
  }

  .avsl-work .avsl-index-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .avsl-work .avsl-index-links a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:9px 8px;
    text-align:center;
    font-size:12px;
  }

  .avsl-work .avsl-section-heading{
    gap:12px;
  }

  .avsl-work .avsl-section-number{
    flex:0 0 auto;
  }

  .avsl-work .avsl-section-heading h2{
    font-size:21px;
  }

  .avsl-work .avsl-section-en{
    font-size:10px;
  }

  .avsl-work .avsl-scene-list{
    display:block;
  }

  .avsl-work .avsl-scene-card,
  .avsl-work .wp-block-image{
    width:100%;
    margin-left:0;
    margin-right:0;
  }

  .avsl-work .avsl-scene-title{
    font-size:16px;
    line-height:1.5;
  }

  .avsl-work .avsl-scene-image,
  .avsl-work .wp-block-image img{
    width:100%;
    height:auto;
  }

  .avsl-work .avsl-main-button a,
  .avsl-work .avsl-movie-guide-button a,
  .avsl-work .avsl-final-button a,
  .avsl-work .avsl-price-btn{
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
  }

  .avsl-work .avsl-detail-card{
    overflow-x:auto;
  }

  .avsl-work .avsl-detail-card table{
    min-width:560px;
  }

  .avsl-actress-cards,
  .avsl-actress-directory{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .avsl-actress-card{
    grid-template-columns:72px minmax(0,1fr)!important;
    column-gap:13px!important;
    padding:13px!important;
  }

  .avsl-actress-card__image,
  .avsl-actress-card__image img{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    max-width:72px!important;
  }

  .avsl-actress-card__body strong{
    font-size:16px!important;
  }

  .avsl-actress-card__body small{
    font-size:12px!important;
  }

  .avsl-actress-card--compact{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    text-align:left!important;
  }

  .avsl-actress-card--compact .avsl-actress-card__image{
    margin:0!important;
  }

  .avsl-actress-card--compact .avsl-actress-card__body{
    align-items:flex-start!important;
    text-align:left!important;
  }

  .avsl-footer{
    padding:34px 0 18px;
  }

  .avsl-footer-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .avsl-copy{
    margin-top:26px;
  }
}

@media (max-width:390px){

  .avsl-container{
    width:calc(100% - 12px);
  }

  .avsl-menu-item{
    min-height:138px;
    padding-inline:8px;
  }

  .avsl-menu-item h3{
    font-size:15px;
  }

  .avsl-hero h1{
    font-size:27px;
  }

  .avsl-title-row h2{
    font-size:19px;
  }

  .avsl-main-search button{
    min-width:94px;
  }

  .avsl-search-text{
    font-size:13px;
  }
}

/* =========================================================
   AV Select Lab - X 更新バナー
   ヒーロー内のジャンルタグ直下に表示
========================================================= */

.avsl-x-banner{
  position:relative;
  width:100%;
  margin-top:22px;
  padding:14px 15px 14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
  border:1px solid #f1d6cb;
  border-radius:12px;
  background:linear-gradient(135deg,#ffffff 0%,#fff9f7 55%,#fff1ef 100%);
  color:var(--avsl-text);
  text-decoration:none;
  box-shadow:0 5px 16px rgba(89,55,28,.05);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.avsl-x-banner:hover{
  color:var(--avsl-text);
  border-color:#efb3aa;
  transform:translateY(-2px);
  box-shadow:0 9px 22px rgba(89,55,28,.09);
}

.avsl-x-banner-accent{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:4px;
  background:linear-gradient(180deg,var(--avsl-coral),#ef8d79);
}

.avsl-x-banner-icon{
  width:39px;
  height:39px;
  margin-left:2px;
  flex:0 0 39px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#202224;
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:1;
}

.avsl-x-banner-copy{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
}

.avsl-x-banner-copy strong{
  display:block;
  color:#222;
  font-size:14px;
  font-weight:800;
  line-height:1.45;
}

.avsl-x-banner-copy small{
  display:block;
  margin-top:2px;
  color:var(--avsl-muted);
  font-size:11px;
  font-weight:500;
  line-height:1.5;
}

.avsl-x-banner-button{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 14px;
  border-radius:8px;
  background:linear-gradient(135deg,#f47178,#ee515a);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(241,95,103,.18);
}

.avsl-x-banner-button span{
  font-size:16px;
  line-height:1;
  transition:transform .2s ease;
}

.avsl-x-banner:hover .avsl-x-banner-button span{
  transform:translateX(2px);
}

@media(max-width:760px){
  .avsl-x-banner{
    margin-top:16px;
    padding:12px 11px 12px 15px;
    gap:9px;
  }

  .avsl-x-banner-icon{
    width:35px;
    height:35px;
    flex-basis:35px;
    font-size:14px;
  }

  .avsl-x-banner-copy strong{
    font-size:12px;
  }

  .avsl-x-banner-copy small{
    font-size:10px;
  }

  .avsl-x-banner-button{
    padding:8px 10px;
    font-size:10px;
  }
}

@media(max-width:430px){
  .avsl-x-banner-copy small{
    display:none;
  }

  .avsl-x-banner-button{
    padding:8px 9px;
  }
}

/* =========================================
   FANZA 価格表 レイアウト調整
========================================= */

.avsl-price-shortcode table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.avsl-price-shortcode table th,
.avsl-price-shortcode table td {
	vertical-align: middle;
	padding: 16px 14px;
	box-sizing: border-box;
}

/* 1列目：配信形式 */
.avsl-price-shortcode table th:nth-child(1),
.avsl-price-shortcode table td:nth-child(1) {
	width: 40%;
	text-align: center;
}

/* 2列目：通常価格 */
.avsl-price-shortcode table th:nth-child(2),
.avsl-price-shortcode table td:nth-child(2) {
	width: 30%;
	text-align: center;
}

/* 3列目：現在価格 */
.avsl-price-shortcode table th:nth-child(3),
.avsl-price-shortcode table td:nth-child(3) {
	width: 30%;
	text-align: center;
}

/* 見出しだけは中央に */
.avsl-price-shortcode table th:nth-child(1) {
	text-align: center;
}

/* 価格の縦位置・行高を安定 */
.avsl-price-shortcode table td {
	line-height: 1.5;
}

/* スマホ */
@media (max-width: 768px) {

	.avsl-price-shortcode table th,
	.avsl-price-shortcode table td {
		padding: 12px 8px;
		font-size: 14px;
	}

	.avsl-price-shortcode table th:nth-child(1),
	.avsl-price-shortcode table td:nth-child(1) {
		width: 38%;
	}

	.avsl-price-shortcode table th:nth-child(2),
	.avsl-price-shortcode table td:nth-child(2),
	.avsl-price-shortcode table th:nth-child(3),
	.avsl-price-shortcode table td:nth-child(3) {
		width: 31%;
	}
}

/* =========================================================
   AV Select Lab - レビュー用 黄色マーカー
   編集部レビュー・おすすめ内の重要フレーズを蛍光ペン風に強調
========================================================= */

.avsl-work .avsl-marker{
  display:inline;
  padding:0 .05em;
  background:linear-gradient(
    transparent 55%,
    #fff200 55%,
    #fff200 94%,
    transparent 94%
  );
  color:inherit;
  font-weight:700;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* =========================================================
   AV Select Lab - 人気記事ランキング専用ページ
========================================================= */

.avsl-ranking-page{
  padding-top:24px;
}

.avsl-ranking-page-header{
  padding:34px 38px;
  overflow:hidden;
  background:
    radial-gradient(circle at 95% 0%,rgba(245,155,35,.15),transparent 34%),
    linear-gradient(135deg,#fff 0%,#fffaf5 100%);
}

.avsl-ranking-page-heading{
  display:flex;
  align-items:center;
  gap:20px;
}

.avsl-ranking-page-crown{
  width:78px;
  height:78px;
  flex:0 0 78px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:#fff4da;
  font-size:42px;
  box-shadow:inset 0 0 0 1px #f2d9a0;
}

.avsl-ranking-page-kicker{
  margin:0 0 3px;
  color:var(--avsl-orange);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
}

.avsl-ranking-page-heading h1{
  margin:0;
  font-size:38px;
  line-height:1.35;
}

.avsl-ranking-page-heading p:last-child{
  margin:8px 0 0;
  color:var(--avsl-muted);
  font-size:14px;
}

.avsl-ranking-top3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.avsl-ranking-top-card{
  overflow:hidden;
}

.avsl-ranking-top-card--rank-1{
  border-color:#e8c76f;
  box-shadow:0 14px 36px rgba(181,137,36,.16);
}

.avsl-ranking-top-card--rank-2{
  border-color:#cfd5dd;
}

.avsl-ranking-top-card--rank-3{
  border-color:#e0b08c;
}

.avsl-ranking-top-image{
  position:relative;
  display:block;
  overflow:hidden;
  background:#f4efeb;
}

.avsl-ranking-top-image img{
  width:100%;
  aspect-ratio:1.42/1;
  object-fit:cover;
  transition:transform .25s ease;
}

.avsl-ranking-top-card:hover .avsl-ranking-top-image img{
  transform:scale(1.035);
}

.avsl-ranking-top-number{
  position:absolute;
  top:14px;
  left:14px;
  width:58px;
  height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  color:#fff;
  background:#8d98a4;
  box-shadow:0 7px 18px rgba(0,0,0,.18);
}

.avsl-ranking-top-card--rank-1 .avsl-ranking-top-number{
  background:linear-gradient(135deg,#e4ba4f,#bd8d20);
}

.avsl-ranking-top-card--rank-2 .avsl-ranking-top-number{
  background:linear-gradient(135deg,#aeb8c3,#7f8995);
}

.avsl-ranking-top-card--rank-3 .avsl-ranking-top-number{
  background:linear-gradient(135deg,#d9a077,#b87349);
}

.avsl-ranking-top-number span{
  font-size:25px;
  font-weight:900;
  line-height:1;
}

.avsl-ranking-top-number small{
  margin-top:3px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
}

.avsl-ranking-top-body{
  padding:20px;
}

.avsl-ranking-top-label{
  margin-bottom:7px;
  color:#8b6a24;
  font-size:12px;
  font-weight:900;
}

.avsl-ranking-top-card h2{
  margin:0 0 13px;
  font-size:18px;
  line-height:1.6;
}

.avsl-ranking-meta{
  margin:0 0 10px;
  color:#665f62;
  font-size:13px;
  line-height:1.6;
}

.avsl-ranking-meta-label{
  display:inline-block;
  margin-right:7px;
  color:#9a6c77;
  font-size:11px;
  font-weight:800;
}

.avsl-ranking-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.avsl-ranking-tags span{
  padding:4px 8px;
  border-radius:999px;
  color:#9b5263;
  background:#fff0f4;
  font-size:11px;
  line-height:1.3;
}

.avsl-ranking-read-button{
  margin-top:16px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(135deg,#f47178,#ee515a);
  font-size:13px;
  font-weight:800;
}

.avsl-ranking-read-button span{
  font-size:18px;
  transition:transform .2s ease;
}

.avsl-ranking-read-button:hover span{
  transform:translateX(3px);
}

.avsl-ranking-list-section{
  padding:28px;
}

.avsl-ranking-list-heading{
  margin-bottom:8px;
  padding-bottom:18px;
  border-bottom:1px solid #eee3dd;
}

.avsl-ranking-list-heading h2{
  margin:0;
  font-size:25px;
  line-height:1.4;
}

.avsl-ranking-list-heading p{
  margin:5px 0 0;
  color:var(--avsl-muted);
  font-size:13px;
}

.avsl-ranking-full-list{
  display:grid;
}

.avsl-ranking-full-item{
  display:grid;
  grid-template-columns:62px 150px minmax(0,1fr) 34px;
  gap:18px;
  align-items:center;
  padding:18px 2px;
  border-bottom:1px solid #eee;
}

.avsl-ranking-full-item:last-child{
  border-bottom:0;
}

.avsl-ranking-full-number{
  width:52px;
  height:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  color:#fff;
  background:#9ba7b5;
}

.avsl-ranking-full-number span{
  font-size:20px;
  font-weight:900;
  line-height:1;
}

.avsl-ranking-full-number small{
  margin-top:3px;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
}

.avsl-ranking-full-image{
  display:block;
  overflow:hidden;
  border-radius:10px;
  background:#eee;
}

.avsl-ranking-full-image img{
  width:150px;
  height:110px;
  object-fit:cover;
  transition:transform .25s ease;
}

.avsl-ranking-full-item:hover .avsl-ranking-full-image img{
  transform:scale(1.035);
}

.avsl-ranking-full-body h3{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.6;
}

.avsl-ranking-full-link{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--avsl-coral);
  font-size:22px;
  line-height:1;
}

@media(max-width:1020px){
  .avsl-ranking-top3{
    grid-template-columns:1fr;
  }

  .avsl-ranking-top-card{
    display:grid;
    grid-template-columns:minmax(0,42%) minmax(0,1fr);
  }

  .avsl-ranking-top-image img{
    height:100%;
    min-height:250px;
    aspect-ratio:auto;
  }
}

@media(max-width:760px){
  .avsl-ranking-page{
    padding-top:16px;
  }

  .avsl-ranking-page-header{
    padding:24px 18px;
  }

  .avsl-ranking-page-heading{
    align-items:flex-start;
    gap:13px;
  }

  .avsl-ranking-page-crown{
    width:54px;
    height:54px;
    flex-basis:54px;
    border-radius:15px;
    font-size:29px;
  }

  .avsl-ranking-page-heading h1{
    font-size:27px;
  }

  .avsl-ranking-page-heading p:last-child{
    font-size:12px;
    line-height:1.7;
  }

  .avsl-ranking-top-card{
    display:block;
  }

  .avsl-ranking-top-image img{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1.42/1;
  }

  .avsl-ranking-top-body{
    padding:17px;
  }

  .avsl-ranking-top-card h2{
    font-size:16px;
  }

  .avsl-ranking-list-section{
    padding:18px 14px;
  }

  .avsl-ranking-list-heading h2{
    font-size:21px;
  }

  .avsl-ranking-full-item{
    grid-template-columns:44px 92px minmax(0,1fr);
    gap:10px;
    padding:14px 0;
  }

  .avsl-ranking-full-number{
    width:42px;
    height:42px;
    border-radius:10px;
  }

  .avsl-ranking-full-number span{
    font-size:16px;
  }

  .avsl-ranking-full-image img{
    width:92px;
    height:72px;
  }

  .avsl-ranking-full-body h3{
    font-size:13px;
    line-height:1.5;
  }

  .avsl-ranking-full-body .avsl-ranking-meta{
    margin-bottom:6px;
    font-size:11px;
  }

  .avsl-ranking-full-body .avsl-ranking-tags span{
    padding:3px 6px;
    font-size:9px;
  }

  .avsl-ranking-full-link{
    display:none;
  }
}

@media(max-width:430px){
  .avsl-ranking-page-heading p:last-child{
    display:none;
  }

  .avsl-ranking-full-item{
    grid-template-columns:38px 78px minmax(0,1fr);
    gap:8px;
  }

  .avsl-ranking-full-number{
    width:36px;
    height:36px;
  }

  .avsl-ranking-full-number span{
    font-size:14px;
  }

  .avsl-ranking-full-image img{
    width:78px;
    height:62px;
  }

  .avsl-ranking-full-body h3{
    font-size:12px;
  }

  .avsl-ranking-full-body .avsl-ranking-tags{
    display:none;
  }
}


/* =========================================================
   AV Select Lab - ジャンル一覧ページ
   PC / スマホ共通のカード表示を保証
========================================================= */

.avsl-genre-directory{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.avsl-genre-directory-card{
  position:relative;
  min-width:0;
  min-height:190px;
  overflow:hidden;
  display:block;
  border:1px solid #ead8d0;
  border-radius:14px;
  background:linear-gradient(180deg,#f7eaf0 0%,#eadde3 62%,#2b2426 100%);
  box-shadow:0 7px 18px rgba(89,55,28,.06);
  color:#fff;
}

.avsl-genre-directory-card > img{
  width:100%;
  height:100%;
  min-height:190px;
  object-fit:cover;
  filter:brightness(.68);
  transition:transform .25s ease,filter .25s ease;
}

.avsl-genre-directory-card:hover > img{
  transform:scale(1.035);
  filter:brightness(.76);
}

.avsl-genre-directory-card > .avsl-directory-placeholder{
  width:100%;
  min-height:190px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.18);
  background:linear-gradient(180deg,#f4e8ee 0%,#eadde3 62%,#2b2426 100%);
  font-size:44px;
  font-weight:900;
}

.avsl-genre-directory-card > span{
  position:absolute;
  right:12px;
  bottom:12px;
  left:12px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:9px 10px;
  border-radius:999px;
  background:rgba(32,27,29,.68);
  text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  backdrop-filter:blur(3px);
}

.avsl-genre-directory-card > span strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.avsl-genre-directory-card > span small{
  display:block;
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1.2;
}

@media(max-width:1020px){
  .avsl-genre-directory{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
}

@media(max-width:760px){
  .avsl-genre-directory{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .avsl-genre-directory-card{
    min-height:145px;
    border-radius:11px;
  }

  .avsl-genre-directory-card > img,
  .avsl-genre-directory-card > .avsl-directory-placeholder{
    min-height:145px;
  }

  .avsl-genre-directory-card > span{
    right:7px;
    bottom:8px;
    left:7px;
    gap:2px;
    padding:7px 8px;
  }

  .avsl-genre-directory-card > span strong{
    font-size:13px;
  }

  .avsl-genre-directory-card > span small{
    font-size:9px;
  }
}

@media(max-width:390px){
  .avsl-genre-directory{
    gap:8px;
  }

  .avsl-genre-directory-card{
    min-height:132px;
  }

  .avsl-genre-directory-card > img,
  .avsl-genre-directory-card > .avsl-directory-placeholder{
    min-height:132px;
  }

  .avsl-genre-directory-card > span strong{
    font-size:12px;
  }
}

/* =========================================================
   Ranking period tabs - v2.2.0
========================================================= */
.avsl-ranking-period-tabs{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  max-width:520px;
}

.avsl-ranking-period-tabs a{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border:1px solid #eadfd9;
  border-radius:999px;
  background:#fff;
  color:#776b70;
  font-size:13px;
  font-weight:800;
  line-height:1;
  box-shadow:0 3px 10px rgba(75,48,36,.04);
}

.avsl-ranking-period-tabs a:hover{
  border-color:#f0a7ad;
  color:#df5d66;
}

.avsl-ranking-period-tabs a.is-active{
  border-color:#f15e67;
  background:linear-gradient(135deg,#f47178,#ee515a);
  color:#fff;
  box-shadow:0 7px 16px rgba(238,81,90,.18);
}

@media(max-width:760px){
  .avsl-ranking-period-tabs{
    width:100%;
    max-width:none;
    margin-top:18px;
    gap:6px;
  }

  .avsl-ranking-period-tabs a{
    min-height:40px;
    padding:7px 6px;
    font-size:12px;
  }
}