/* =============================
   ONLY NAILS – custom theme v0.1
   Minimal starter built for Ultimate Member + CPT "nail_art"
   Files below are concatenated for review. Copy into your theme folder as separate files.
   Theme folder name: only-nails
   ============================= */

/* ---------- style.css (place at theme root) ---------- */
/*
Theme Name: Only Nails
Theme URI: https://example.com
Author: A-JET
Description: Ultra-light starter for Only Nails (UM + CPT + Favorites)
Version: 0.1
Requires at least: 6.0
Tested up to: 6.6
License: GPL-2.0-or-later
Text Domain: only-nails
*/

:root{--gap:clamp(12px,2.5vw,20px);--radius:16px;--max:1200px;
  --on-pink:#ff2d9a;          /* ブランドピンク */
  --on-pink-weak:#ffe2f1;     /* 薄ピンク */
  --on-border:#eee;
  --on-text:#111;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;background: #fafafa;}
a{color:inherit}
.container{width:min(100% - 32px, var(--max));margin-inline:auto}
.grid{display:grid;gap:var(--gap)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr}}
.card{border:1px solid #eee;border-radius:var(--radius);overflow:hidden;background:#fff}
.card > a{display:block;text-decoration:none}
.thumb{aspect-ratio:1/1;object-fit:cover;width:100%;display:block}
.meta{padding:12px}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;background:#f3f4f6}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-primary{background:#111;color:#fff;border-color:#111}
.header{padding:12px 0;position:sticky;top:0;z-index:5;background: #fafafa;}
.header .row{display:flex;align-items:center;gap:16px}
.brand{font-weight:700;letter-spacing:.02em;width: 200px;}
.brand img{ width: 100%; padding-top: 20px;}
.nav{margin-left:auto;display:flex;gap:12px}

.nav { list-style: none; margin: 0; padding: 0;}
.nav li::marker { content: none;}


/* --- minor polish --- */
.header .row { display:flex; align-items:center; justify-content:space-between; }
.nav a { padding:8px 12px; text-decoration:none; font-weight:600; }
.nav a:hover { opacity:.7; }
.container { padding-block: 24px; }
.btn { transition: transform .05s ease; }
.btn:active { transform: translateY(1px); }


/* === ONLY NAILS: type scale up (drop-in override) === */
/* ベース */
body { font-size: 16.5px; line-height: 1.7; }

/* Hero */
.on-hero__title{ font-size: clamp(32px, 6vw, 56px); }
.on-hero__lead{  font-size: clamp(16px, 2.2vw, 18px); }
.on-hero__search-input{ font-size: 15px; }
.on-hero__search-btn{ font-size: 14px; }

/* Chips & Tabs */
.chip{ height: 36px; padding: 0 16px; font-size: 13px; }
.tab{ font-size: 15px; }
.badge{ font-size: 11px; height: 20px; padding: 0 8px; }

/* Filters */
.on-filters{ font-size: 14px; }
.filters__label{ font-size: 14px; }
.select select{ height: 40px; font-size: 14px; }
.filters__submit{ height: 44px; font-size: 14px; }

/* Section heading */
.on-list__title{ font-size: 24px; }
.on-list__viewall{ font-size: 14px; }

/* Cards */
.tags .t{ font-size: 12px; padding: 3px 10px; }
.author .name{ font-size: 14px; }
.stats{ font-size: 13px; }
.stats i, .tab i{ font-size: 15px; }

/* ちょい余白も拡張（大きい字でも詰まらないように） */
.on-listing{ padding: 36px 16px; }
.on-grid{ gap: 20px; }

/* モバイル時は強くしすぎない */
@media (max-width: 640px){
  body{ font-size: 15.5px; }
  .on-hero__title{ font-size: clamp(30px, 8vw, 42px); }
  .chip{ height: 34px; font-size: 12.5px; }
  .tab{ font-size: 14px; }
  .on-list__title{ font-size: 22px; }
}

/* ===== Color chips with hover effect ===== */
.filters__colors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.color-chip {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.color-chip input {
  position: absolute;
  opacity: 0;
}
.color-chip span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--chip-color);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.color-chip:hover span {
  transform: scale(1.15);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.color-chip input:checked + span {
  box-shadow: 0 0 0 2px var(--on-pink), 0 4px 10px rgba(0,0,0,0.2);
  transform: scale(1.12);
}