/* ============================================================
   cosme-matome.css — まみたんコスメ カスタムスタイル
   単品テンプレート (single-cosme_product) 用
   ============================================================ */

/* ─── CSS変数 ─────────────────────────────────────────────── */
:root {
    --cosme-pink:        #FF7AAC;
    --cosme-pink-light:  #FFE4F0;
    --cosme-pink-dark:   #C9547A;
    --cosme-purple:      #C084FC;
    --cosme-text:        #2D1B24;
    --cosme-text-light:  #6B4B57;
    --cosme-bg:          #FFF5F8;
    --cosme-bg-white:    #FFFFFF;
    --cosme-radius-sm:   8px;
    --cosme-radius-md:   16px;
    --cosme-radius-lg:   24px;
    --cosme-shadow-sm:   0 2px 8px rgba(201,84,122,.08);
    --cosme-shadow-md:   0 4px 20px rgba(201,84,122,.14);
    --cosme-shadow-lg:   0 8px 40px rgba(201,84,122,.18);
}

/* ─── ページ全体 ──────────────────────────────────────────── */
.cosme-product-main {
    background: var(--cosme-bg);
    padding-bottom: 80px;
}

/* ─── 共通セクションタイトル ───────────────────────────────── */
.cosme-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1.15rem, 3vw, 1.45rem);
    font-weight: 800;
    color: var(--cosme-text);
    margin: 0 0 28px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--cosme-pink-light);
    position: relative;
}
.cosme-section-title::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--cosme-pink);
    border-radius: 2px;
}
.cosme-section-title__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--cosme-pink);
    color: white;
    border-radius: 50%;
    font-size: .9rem;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   1. ヒーローエリア
════════════════════════════════════════════════════════════ */
.cosme-hero {
    position: relative;
    width: 100%;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: linear-gradient(135deg, #FFF0F5 0%, #F8E4FF 100%);
}

.cosme-hero__image-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.cosme-hero__image-wrap--no-image {
    background: linear-gradient(135deg, #FFE4F0 0%, #EDE9FE 100%);
}
.cosme-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.cosme-hero__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255,240,248,.15) 0%,
        rgba(30,10,20,.55) 100%
    );
}

.cosme-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 40px 0 0;
}
.cosme-hero__inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 24px 40px;
}

.cosme-hero__brand {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.25);
    margin-bottom: 12px;
}

.cosme-hero__title {
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.45;
    margin: 0 0 20px;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.cosme-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.cosme-hero__price {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cosme-hero__price-label {
    font-size: .68rem;
    color: rgba(255,255,255,.75);
    letter-spacing: .06em;
}
.cosme-hero__price-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
}

.cosme-hero__badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}
.cosme-hero__badge--tier {
    background: #FFD166;
    color: #7A4800;
}
.cosme-hero__badge--ingredient {
    background: rgba(255,255,255,.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(4px);
}

.cosme-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cosme-pink);
    color: #fff !important;
    font-size: 1rem;
    font-weight: 800;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(255,122,172,.45);
    transition: transform .2s, box-shadow .2s;
}
.cosme-hero__cta:hover,
.cosme-hero__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255,122,172,.55);
}

@media (max-width: 600px) {
    .cosme-hero { min-height: 320px; }
    .cosme-hero__inner { padding: 24px 16px 32px; }
    .cosme-hero__title { font-size: 1.25rem; }
}


/* ════════════════════════════════════════════════════════════
   2. まみたんキャラクター吹き出し
════════════════════════════════════════════════════════════ */
.mamitan-section {
    background: var(--cosme-bg-white);
    padding: 48px 24px;
}
.mamitan-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

/* キャラクター */
.mamitan-character {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.mamitan-svg {
    width: 110px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(201,104,120,.22));
    animation: mamitan-float 3.5s ease-in-out infinite;
}
@keyframes mamitan-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}
.mamitan-character__name {
    font-size: .72rem;
    font-weight: 700;
    color: var(--cosme-pink-dark);
    letter-spacing: .08em;
    margin: 0;
}

/* 吹き出し */
.mamitan-bubble {
    position: relative;
    flex: 1;
}
.mamitan-bubble::before {
    content: '';
    position: absolute;
    left: -16px;
    bottom: 28px;
    border: 10px solid transparent;
    border-right-color: var(--cosme-pink-light);
}
.mamitan-bubble__inner {
    background: var(--cosme-pink-light);
    border-radius: var(--cosme-radius-md);
    border: 2px solid rgba(255,122,172,.25);
    padding: 20px 24px;
    box-shadow: var(--cosme-shadow-sm);
}
.mamitan-bubble__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--cosme-pink-dark);
    margin: 0 0 8px;
    text-transform: uppercase;
}
.mamitan-bubble__text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--cosme-text);
    margin: 0;
    font-weight: 500;
}

@media (max-width: 600px) {
    .mamitan-inner { flex-direction: column; align-items: center; }
    .mamitan-bubble::before {
        left: 50%;
        bottom: auto;
        top: -18px;
        border: 10px solid transparent;
        border-bottom-color: var(--cosme-pink-light);
        transform: translateX(-50%);
    }
}


/* ════════════════════════════════════════════════════════════
   記事本文エリア
════════════════════════════════════════════════════════════ */
.cosme-article {
    background: var(--cosme-bg-white);
    padding: 0 24px 40px;
}
.cosme-article__inner {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 40px;
}
.cosme-article__inner h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--cosme-text);
    border-left: 4px solid var(--cosme-pink);
    padding-left: 14px;
    margin: 40px 0 16px;
}
.cosme-article__inner h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cosme-text);
    margin: 28px 0 12px;
}
.cosme-article__inner p {
    line-height: 1.9;
    color: var(--cosme-text-light);
    margin: 0 0 18px;
}

/* アフィリエイトボックス（既存） */
.affiliate-box {
    background: var(--cosme-pink-light);
    border: 2px solid rgba(255,122,172,.25);
    border-radius: var(--cosme-radius-md);
    padding: 20px 24px;
    margin: 32px 0;
}
.affiliate-notice {
    font-size: .72rem;
    color: var(--cosme-text-light);
    margin: 0 0 12px;
}
.affiliate-product__name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--cosme-text);
    margin: 0 0 6px;
}
.affiliate-product__price {
    font-size: .85rem;
    color: var(--cosme-text-light);
    margin: 0 0 14px;
}
.cosme-buy-btn {
    display: inline-block;
    background: var(--cosme-pink);
    color: #fff !important;
    font-size: .9rem;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none !important;
    margin: 0 8px 8px 0;
    transition: opacity .2s;
}
.cosme-buy-btn:hover { opacity: .85; }


/* ════════════════════════════════════════════════════════════
   3. こんな人におすすめ（4マスグリッド）
════════════════════════════════════════════════════════════ */
.recommend-section {
    padding: 56px 24px;
    background: linear-gradient(180deg, var(--cosme-bg) 0%, var(--cosme-bg-white) 100%);
}
.recommend-section__inner {
    max-width: 800px;
    margin: 0 auto;
}

.recommend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.recommend-item {
    background: var(--cosme-bg-white);
    border: 2px solid var(--cosme-pink-light);
    border-radius: var(--cosme-radius-md);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    box-shadow: var(--cosme-shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.recommend-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--cosme-shadow-md);
}

.recommend-item__icon {
    width: 56px;
    height: 56px;
    background: var(--cosme-pink-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    flex-shrink: 0;
}
.recommend-item__icon svg {
    width: 32px;
    height: 32px;
}

.recommend-item__text {
    font-size: .9rem;
    font-weight: 700;
    color: var(--cosme-text);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 480px) {
    .recommend-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   4. 注目成分の詳しい説明
════════════════════════════════════════════════════════════ */
.ingredient-section {
    padding: 56px 24px;
    background: var(--cosme-bg-white);
}
.ingredient-section__inner {
    max-width: 800px;
    margin: 0 auto;
}
.ingredient-section__lead {
    font-size: .9rem;
    color: var(--cosme-text-light);
    margin: -16px 0 28px;
}

.ingredient-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ingredient-card {
    background: var(--cosme-bg);
    border: 1px solid rgba(255,122,172,.15);
    border-radius: var(--cosme-radius-md);
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s;
}
.ingredient-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--cosme-pink-light);
}
.ingredient-card:hover {
    box-shadow: var(--cosme-shadow-sm);
}

.ingredient-card--featured {
    background: var(--cosme-pink-light);
    border-color: rgba(255,122,172,.3);
}
.ingredient-card--featured::before {
    background: var(--cosme-pink);
}

.ingredient-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ingredient-card__number {
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .05em;
    color: var(--cosme-pink);
    background: white;
    border: 2px solid var(--cosme-pink-light);
    border-radius: 6px;
    padding: 2px 8px;
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
}
.ingredient-card--featured .ingredient-card__number {
    background: var(--cosme-pink);
    color: white;
    border-color: var(--cosme-pink);
}

.ingredient-card__name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--cosme-text);
    margin: 0;
    flex: 1;
}

.ingredient-card__badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    background: var(--cosme-pink);
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .06em;
}

.ingredient-card__desc {
    font-size: .9rem;
    line-height: 1.8;
    color: var(--cosme-text-light);
    margin: 0 0 12px;
}

.ingredient-card__more {
    font-size: .8rem;
    font-weight: 700;
    color: var(--cosme-pink-dark);
    text-decoration: none;
    transition: gap .2s;
}
.ingredient-card__more:hover {
    text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════
   5. 関連商品
════════════════════════════════════════════════════════════ */
.related-section {
    padding: 56px 24px;
    background: var(--cosme-bg);
}
.related-section__inner {
    max-width: 900px;
    margin: 0 auto;
}
.related-section__lead {
    font-size: .9rem;
    color: var(--cosme-text-light);
    margin: -16px 0 28px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.related-card {
    background: var(--cosme-bg-white);
    border-radius: var(--cosme-radius-md);
    overflow: hidden;
    box-shadow: var(--cosme-shadow-sm);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cosme-shadow-md);
}

.related-card__image-link {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--cosme-pink-light);
}
.related-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.related-card:hover .related-card__image {
    transform: scale(1.05);
}
.related-card__image--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.related-card__brand {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cosme-pink-dark);
    margin: 0;
}

.related-card__title {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}
.related-card__title a {
    color: var(--cosme-text);
    text-decoration: none;
}
.related-card__title a:hover {
    color: var(--cosme-pink-dark);
}

.related-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.related-card__tag {
    font-size: .65rem;
    font-weight: 700;
    background: var(--cosme-pink-light);
    color: var(--cosme-pink-dark);
    padding: 2px 8px;
    border-radius: 20px;
}

.related-card__price {
    font-size: .88rem;
    font-weight: 800;
    color: var(--cosme-text);
    margin: 0;
}

.related-card__link {
    display: block;
    background: var(--cosme-pink-light);
    color: var(--cosme-pink-dark) !important;
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
    padding: 9px;
    border-radius: var(--cosme-radius-sm);
    text-decoration: none !important;
    margin-top: auto;
    transition: background .2s, color .2s;
}
.related-card__link:hover {
    background: var(--cosme-pink);
    color: white !important;
}

@media (max-width: 700px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .related-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   アーカイブ・フィルターサイドバー (template-cosme-archive.php)
   ============================================================ */

/* ─── ページラッパー ─────────────────────────────────────── */
.cosme-archive {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ─── フィルターサイドバー ───────────────────────────────── */
.cosme-filters {
    flex: 0 0 240px;
    width: 240px;
    background: #fff;
    border: 1px solid rgba(255,122,172,.18);
    border-radius: 14px;
    padding: 20px 18px;
    box-shadow: 0 2px 12px rgba(201,84,122,.07);
    position: sticky;
    top: 24px;
}

.filter-reset {
    display: block;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--cosme-pink-dark, #C9547A);
    background: var(--cosme-pink-light, #FFE4F0);
    border-radius: 20px;
    padding: 7px 14px;
    margin-bottom: 16px;
    text-decoration: none;
    transition: background .2s;
}
.filter-reset:hover { background: #ffd0e8; }

.filter-group {
    margin-bottom: 20px;
}
.filter-group:last-child { margin-bottom: 0; }

.filter-label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--cosme-pink-dark, #C9547A);
    text-transform: uppercase;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--cosme-pink-light, #FFE4F0);
}

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

/* ─── タグ共通 ───────────────────────────────────────────── */
.tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    line-height: 1.4;
    user-select: none;
}
.tag:hover   { transform: translateY(-1px); }

/* 成分タグ */
.tag--ingredient {
    background: #FDE8FF;
    color: #7C3AED;
    border-color: #E9D5FF;
}
.tag--ingredient:hover,
.tag--ingredient.is-active {
    background: #7C3AED;
    color: #fff;
    border-color: #7C3AED;
}

/* 用途タグ */
.tag--use {
    background: #D1FAE5;
    color: #065F46;
    border-color: #A7F3D0;
}
.tag--use:hover,
.tag--use.is-active {
    background: #059669;
    color: #fff;
    border-color: #059669;
}

/* 価格帯タグ */
.tag--price {
    background: #FEF9C3;
    color: #78350F;
    border-color: #FDE68A;
}
.tag--price:hover,
.tag--price.is-active {
    background: #D97706;
    color: #fff;
    border-color: #D97706;
}

/* ブランドタグ */
.tag--brand {
    background: #EFF6FF;
    color: #1E40AF;
    border-color: #BFDBFE;
}
.tag--brand:hover,
.tag--brand.is-active {
    background: #2563EB;
    color: #fff;
    border-color: #2563EB;
}

/* ─── メインコンテンツ ───────────────────────────────────── */
.cosme-grid-wrap {
    flex: 1;
    min-width: 0;
}

.cosme-result-bar {
    font-size: .85rem;
    font-weight: 700;
    color: var(--cosme-text-light, #6B4B57);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cosme-pink-light, #FFE4F0);
}

/* ─── 商品グリッド ───────────────────────────────────────── */
.cosme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* ─── 商品カード ─────────────────────────────────────────── */
.cosme-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(201,84,122,.08);
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.cosme-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 24px rgba(201,84,122,.16);
}

.cosme-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.cosme-card__img {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--cosme-pink-light, #FFE4F0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cosme-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.cosme-card:hover .cosme-card__img img { transform: scale(1.06); }

.cosme-card__body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cosme-card__brand {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--cosme-pink-dark, #C9547A);
    margin: 0;
    text-transform: uppercase;
}

.cosme-card__title {
    font-size: .85rem;
    font-weight: 700;
    color: #2D1B24;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cosme-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cosme-card__tags .tag {
    font-size: .65rem;
    padding: 2px 8px;
    pointer-events: none;
}

.cosme-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.cosme-card__price {
    font-size: .9rem;
    font-weight: 800;
    color: #2D1B24;
}

.cosme-card__source {
    font-size: .65rem;
    background: #FEF3C7;
    color: #92400E;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 700;
}

.cosme-card__btn {
    display: block;
    background: var(--cosme-pink, #FF7AAC);
    color: #fff !important;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    padding: 9px;
    text-decoration: none !important;
    transition: opacity .2s;
}
.cosme-card__btn:hover { opacity: .85; }

/* ─── ページネーション ───────────────────────────────────── */
.cosme-pagination-wrap {
    margin-top: 32px;
    text-align: center;
}
.cosme-pagination {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.cosme-pagination__btn {
    background: #fff;
    border: 1.5px solid var(--cosme-pink-light, #FFE4F0);
    color: var(--cosme-pink-dark, #C9547A);
    font-size: .85rem;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.cosme-pagination__btn:hover,
.cosme-pagination__btn.is-active {
    background: var(--cosme-pink, #FF7AAC);
    color: #fff;
    border-color: var(--cosme-pink, #FF7AAC);
}

/* ─── レスポンシブ ───────────────────────────────────────── */
@media (max-width: 900px) {
    .cosme-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .cosme-archive {
        flex-direction: column;
        gap: 20px;
    }
    .cosme-filters {
        flex: none;
        width: 100%;
        position: static;
    }
    .cosme-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
    .cosme-grid { grid-template-columns: 1fr; }
    .cosme-archive { padding: 0 12px; }
}


/* ============================================================
   トップページ リニューアル（ca-* コンポーネント）
   template-cosme-archive.php 用
   ============================================================ */

/* ── CSS変数（トップページ専用） ─────────────────────────── */
:root {
  --ca-pink:        #C0576A;
  --ca-pink-light:  #F9E4E8;
  --ca-pink-dark:   #A03550;
  --ca-text:        #1A1A1A;
  --ca-text-mid:    #555555;
  --ca-text-light:  #999999;
  --ca-bg:          #FAFAFA;
  --ca-white:       #FFFFFF;
  --ca-border:      #EBEBEB;
  --ca-radius:      10px;
  --ca-shadow:      0 2px 12px rgba(0,0,0,.07);
}

/* ── ヘッダー ────────────────────────────────────────────── */
.ca-header {
  background: var(--ca-white);
  border-bottom: 1px solid var(--ca-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.ca-header__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ── ロゴ ────────────────────────────────────────────────── */
.ca-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ca-text);
  flex-shrink: 0;
}
.ca-logo__ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .04em;
}
.ca-logo__accent {
  color: var(--ca-pink);
}
.ca-logo__en {
  display: none; /* ヒーロー文言と重複するため非表示 */
}

/* ── ナビ ────────────────────────────────────────────────── */
.ca-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ca-nav__link {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ca-text-mid);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 20px;
  transition: background .15s, color .15s;
}
.ca-nav__link:hover,
.ca-nav__link.is-active {
  background: var(--ca-pink-light);
  color: var(--ca-pink-dark);
}
.ca-nav__link--ingredient {
  border: 1px solid var(--ca-border);
}

/* ── ヒーロー ────────────────────────────────────────────── */
.ca-hero {
  background: linear-gradient(135deg, #FFF5F7 0%, #FEF8F0 100%);
  padding: 64px 24px 56px;
}
.ca-hero__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.ca-hero__left {
  flex: 1;
  min-width: 0;
}
.ca-hero__eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--ca-text-light);
  margin: 0 0 16px;
  text-transform: uppercase;
}
.ca-hero__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ca-text);
  margin: 0 0 20px;
}
.ca-hero__title em {
  font-style: italic;
  color: var(--ca-pink);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15em;
  font-weight: 600;
}
.ca-hero__sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--ca-text-mid);
  margin: 0;
  max-width: 560px; /* 480px → 560px：左右バランスを改善 */
}
.ca-hero__right {
  flex-shrink: 0;
}
.ca-hero__avatar {
  width: 110px;
  height: 136px;
  border: 1.5px dashed rgba(192,87,106,.35); /* 線を薄くして主張を抑える */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ca-text-light);
  font-size: .68rem;
  text-align: center;
  line-height: 1.6;
  background: rgba(192,87,106,.03);
}
.ca-hero__avatar-label {
  color: rgba(153,153,153,.7); /* 控えめな色で「作成中」感を自然に出す */
  letter-spacing: .03em;
}

/* ── 検索バー ────────────────────────────────────────────── */
.ca-search-wrap {
  background: var(--ca-white);
  padding: 20px 24px;
  border-bottom: 1px solid var(--ca-border);
}
.ca-search {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}
.ca-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ca-text-light);
  pointer-events: none;
}
.ca-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px 12px 46px;
  border: 1.5px solid var(--ca-border);
  border-radius: 50px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .9rem;
  color: var(--ca-text);
  background: var(--ca-bg);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ca-search__input:focus {
  border-color: var(--ca-pink);
  box-shadow: 0 0 0 3px rgba(192,87,106,.12);
  background: var(--ca-white);
}
.ca-search__input::placeholder {
  color: var(--ca-text-light);
}

/* ── フィルターチップ ─────────────────────────────────────── */
.ca-chips-wrap {
  background: var(--ca-white);
  padding: 14px 24px;
  border-bottom: 1px solid var(--ca-border);
}
.ca-chips {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.ca-chip {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ca-text-mid);
  background: var(--ca-bg);
  border: 1.5px solid var(--ca-border);
  border-radius: 50px;
  padding: 7px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  line-height: 1;
}
.ca-chip:hover {
  border-color: var(--ca-pink);
  color: var(--ca-pink-dark);
  background: var(--ca-pink-light);
}
.ca-chip.is-active {
  background: var(--ca-pink-light);
  border-color: var(--ca-pink);
  color: var(--ca-pink-dark);
  font-weight: 700;
}

/* ── コンテンツエリア ─────────────────────────────────────── */
.ca-content {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.ca-result-bar {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .82rem;
  color: var(--ca-text-light);
  margin-bottom: 20px;
}
#ca-result-count {
  font-weight: 700;
  color: var(--ca-text);
  font-size: 1rem;
}

/* ── グリッド ────────────────────────────────────────────── */
.ca-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  transition: opacity .25s;
}

/* ── カード ──────────────────────────────────────────────── */
.ca-card {
  background: var(--ca-white);
  border-radius: var(--ca-radius);
  box-shadow: var(--ca-shadow);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.ca-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.ca-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ca-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F4F4F4;
}
.ca-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.ca-card:hover .ca-card__img {
  transform: scale(1.04);
}
.ca-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #F0F0F0 0%, #E8E8E8 100%);
}

/* バッジ */
.ca-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
  z-index: 1;
}
.ca-card__badge--kr {
  background: #E8375C;
  color: #fff;
}
.ca-card__badge--domestic {
  background: #3575E8;
  color: #fff;
}

/* カード本文 */
.ca-card__body {
  padding: 12px 14px 14px;
}
.ca-card__brand {
  display: none; /* ショップ名がブランド名として誤表示されるため非表示 */
}
.ca-card__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ca-text);
  line-height: 1.5;
  margin: 0 0 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ca-card__price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ca-text);
  margin: 0 0 6px;
}
.ca-card__detail {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .75rem;
  color: var(--ca-pink);
  font-weight: 500;
}

/* 用途タグ */
.ca-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 5px 0 7px;
}
.ca-card__tag {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .63rem;
  color: var(--ca-text-mid);
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
  line-height: 1.4;
}

/* ── ページネーション ─────────────────────────────────────── */
.ca-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.ca-page-btn {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--ca-border);
  border-radius: 8px;
  background: var(--ca-white);
  color: var(--ca-text-mid);
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ca-page-btn:hover {
  border-color: var(--ca-pink);
  color: var(--ca-pink-dark);
}
.ca-page-btn.is-current {
  background: var(--ca-pink);
  border-color: var(--ca-pink);
  color: var(--ca-white);
  font-weight: 700;
}

/* ── 検索結果なし ─────────────────────────────────────────── */
.ca-no-results {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--ca-text-light);
  text-align: center;
  padding: 60px 0;
  grid-column: 1 / -1;
}

/* ── レスポンシブ（トップページ）────────────────────────── */
@media (max-width: 1024px) {
  .ca-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .ca-hero { padding: 32px 20px 28px; }
  .ca-hero__inner { flex-direction: column; align-items: flex-start; gap: 0; }
  .ca-hero__right { display: none; } /* キャラクター画像は完成後まで非表示 */
  .ca-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ca-content { padding: 20px 14px 60px; }
  .ca-header__inner { padding: 0 16px; }
  .ca-chips-wrap { padding: 10px 14px; }
  /* スマホ：カード本文の余白 */
  .ca-card__body { padding: 10px 11px 12px; }
  /* スマホ：商品名は2行まで表示（比較しやすさ優先） */
  .ca-card__title {
    font-size: .82rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  /* スマホ：「詳細 →」は不要な行を取るので非表示 */
  .ca-card__detail { display: none; }
  /* スマホ：価格は上に微小余白を確保 */
  .ca-card__price { font-size: .9rem; margin: 4px 0 0; }
  /* スマホ：用途タグは1個のみ表示 */
  .ca-card__tags { margin: 5px 0 5px; gap: 3px; }
  .ca-card__tag { font-size: .65rem; padding: 2px 5px; }
  .ca-card__tag:nth-child(n+2) { display: none; }
}
@media (max-width: 480px) {
  .ca-hero__title { font-size: 1.35rem; }
  .ca-hero__sub { font-size: .82rem; }
  .ca-nav { display: none; }
  .ca-grid { gap: 8px; }
  .ca-chip { font-size: .75rem; padding: 6px 13px; }
}


/* ════════════════════════════════════════════════════════════
   フィルターバー（主フィルター3ボタン + 補助フィルターアコーディオン）
════════════════════════════════════════════════════════════ */

/* ── 検索バーを補助的サイズに縮小 ────────────────────────── */
.ca-search-wrap {
  padding: 10px 24px;
}
.ca-search__input {
  padding: 9px 16px 9px 42px;
  font-size: .85rem;
}

/* ── 主フィルターバー ────────────────────────────────────── */
.ca-filter-bar {
  background: var(--ca-white);
  border-bottom: 1px solid var(--ca-border);
  padding: 10px 24px;
  position: sticky;
  top: 64px;  /* ca-header の高さ分 */
  z-index: 90;
}
.ca-filter-bar__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ca-filter-bar__buttons {
  display: flex;
  gap: 8px;
  flex: 1;
}

/* ── フィルターグループ（ボタン + パネルの親） ──────────── */
.ca-filter-group {
  position: relative;
}

/* ── フィルターボタン ────────────────────────────────────── */
.ca-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ca-text);
  background: var(--ca-white);
  border: 1.5px solid var(--ca-border);
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  line-height: 1;
}
.ca-filter-btn:hover {
  border-color: var(--ca-pink);
  color: var(--ca-pink-dark);
}
.ca-filter-btn.is-active {
  background: var(--ca-pink-light);
  border-color: var(--ca-pink);
  color: var(--ca-pink-dark);
}
.ca-filter-btn.is-open {
  border-color: var(--ca-pink);
  color: var(--ca-pink-dark);
  box-shadow: 0 0 0 3px rgba(192,87,106,.10);
}
.ca-filter-btn__arrow {
  flex-shrink: 0;
  color: var(--ca-text-light);
  transition: transform .2s;
}
.ca-filter-btn.is-open .ca-filter-btn__arrow,
.ca-filter-btn.is-active .ca-filter-btn__arrow {
  transform: rotate(180deg);
}

/* ── ドロップダウンパネル ────────────────────────────────── */
.ca-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--ca-white);
  border: 1.5px solid var(--ca-border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.10);
  min-width: 200px;
  z-index: 200;
}
.ca-filter-panel__list {
  padding: 8px;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ca-filter-panel__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.ca-filter-panel__item:hover {
  background: var(--ca-bg);
}
.ca-filter-panel__item input[type="checkbox"],
.ca-filter-panel__item input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ca-pink);
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.ca-filter-panel__name {
  flex: 1;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .85rem;
  color: var(--ca-text);
  line-height: 1.4;
}
.ca-filter-panel__count {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .75rem;
  color: var(--ca-text-light);
  flex-shrink: 0;
}

/* ── クリアボタン ────────────────────────────────────────── */
.ca-filter-clear {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ca-text-light);
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
  flex-shrink: 0;
}
.ca-filter-clear:hover {
  color: var(--ca-pink-dark);
}

/* ── アクティブフィルタータグ ────────────────────────────── */
.ca-active-filters {
  background: var(--ca-white);
  padding: 0 24px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  border-bottom: 1px solid var(--ca-border);
}
.ca-active-filters:empty {
  display: none;
}
.ca-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ca-pink-dark);
  background: var(--ca-pink-light);
  border: 1px solid var(--ca-pink);
  border-radius: 20px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all .12s;
  line-height: 1;
}
.ca-active-tag:hover {
  background: var(--ca-pink);
  color: var(--ca-white);
}
.ca-active-tag svg { flex-shrink: 0; }

/* ── 補助フィルター（details アコーディオン）────────────── */
.ca-sub-filters {
  background: var(--ca-bg);
  border-bottom: 1px solid var(--ca-border);
}
.ca-sub-filters__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 11px 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ca-text-mid);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ca-sub-filters__toggle::-webkit-details-marker { display: none; }
.ca-sub-filters__arrow {
  flex-shrink: 0;
  color: var(--ca-text-light);
  transition: transform .2s;
}
.ca-sub-filters[open] .ca-sub-filters__arrow {
  transform: rotate(180deg);
}
.ca-sub-filters__body {
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 24px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  border-top: 1px solid var(--ca-border);
}
.ca-sub-filters__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ca-sub-filters__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ca-text-light);
  letter-spacing: .06em;
  white-space: nowrap;
  min-width: 48px;
}
.ca-sub-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ca-sub-filters .ca-chip {
  font-size: .78rem;
  padding: 6px 14px;
}

/* ── レスポンシブ ────────────────────────────────────────── */
@media (max-width: 768px) {
  .ca-filter-bar {
    top: 0;
    padding: 8px 14px;
  }
  .ca-filter-bar__buttons { gap: 6px; }
  .ca-filter-btn {
    font-size: .78rem;
    padding: 8px 10px;
    flex: 1;
    justify-content: center;
    gap: 4px;
  }
  .ca-filter-btn__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 72px;
  }
  /* 価格帯パネルは右端から展開 */
  #ca-fg-price .ca-filter-panel {
    right: 0;
    left: auto;
  }
  .ca-active-filters  { padding: 0 14px 8px; }
  .ca-sub-filters__toggle { padding: 10px 14px; }
  .ca-sub-filters__body   { padding: 10px 14px 14px; gap: 10px 16px; }
  .ca-search-wrap { padding: 8px 14px; }
}
@media (max-width: 480px) {
  .ca-filter-btn__text { max-width: 52px; }
  .ca-filter-bar__buttons { gap: 4px; }
  .ca-filter-btn { padding: 7px 8px; font-size: .75rem; }
}