/* =============================================================
   スタイリング詳細／一覧
   - BEM: .ec-styling__... / .ec-styling-archive__...
   - 色・サイズはデザイントークン(:root) から参照（ハードコード禁止）
   ============================================================= */

.ec-styling {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--ec-space-unit) * 6) calc(var(--ec-space-unit) * 5);
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling__layout {
    display: grid;
    grid-template-columns: minmax(0, 593fr) minmax(0, 527fr);
    gap: calc(var(--ec-space-unit) * 20);
    align-items: start;
}

@media (max-width: 1024px) {
    .ec-styling__layout {
        grid-template-columns: 1fr;
        gap: calc(var(--ec-space-unit) * 8);
    }
}

/* ===== 左カラム: ギャラリー ===== */

.ec-styling__left {
    min-width: 0;
}

.ec-styling__gallery {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) * 3);
}

.ec-styling__main {
    position: relative;
    aspect-ratio: 5 / 6;
    background: var(--ec-surface-card, #f4f4f4);
    overflow: hidden;
    border-radius: var(--ec-radius-card, 8px);
}

.ec-styling__main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ec-styling__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--ec-border-default, #ccc);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: var(--ec-text-main, #2d2d2d);
    z-index: 2;
    padding: 0;
}

.ec-styling__nav:hover { background: #fff; }
.ec-styling__nav:disabled { opacity: 0.3; cursor: default; }
.ec-styling__nav--prev { left: calc(var(--ec-space-unit) * 2); }
.ec-styling__nav--next { right: calc(var(--ec-space-unit) * 2); }

.ec-styling__counter {
    position: absolute;
    right: calc(var(--ec-space-unit) * 2);
    bottom: calc(var(--ec-space-unit) * 2);
    background: var(--ec-surface-inverse, #2d2d2d);
    color: var(--ec-text-inverse, #fff);
    font-size: var(--ec-fz-xs, 0.75rem);
    padding: 2px 10px;
    border-radius: var(--ec-radius-button, 4px);
    font-family: var(--ec-font-numeric, "Montserrat", sans-serif);
    font-weight: 700;
    letter-spacing: 0.05em;
    z-index: 2;
}

.ec-styling__thumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: calc(var(--ec-space-unit) * 2);
}

.ec-styling__thumb {
    appearance: none;
    background: var(--ec-surface-card, #f4f4f4);
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    width: 100%;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    border-radius: var(--ec-radius-button, 4px);
    display: block;
}

.ec-styling__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ec-styling__thumb-item.is-active .ec-styling__thumb {
    border-color: var(--ec-brand-on-primary, #2d2d2d);
}

.ec-styling__no-image {
    background: var(--ec-surface-card, #f4f4f4);
    padding: calc(var(--ec-space-unit) * 8);
    text-align: center;
    border-radius: var(--ec-radius-card, 8px);
    color: var(--ec-text-subdued, #a0a0a0);
}

/* ===== 右カラム: 情報 ===== */

.ec-styling__right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) * 6);
    min-width: 0;
}

.ec-styling__date {
    font-family: var(--ec-font-numeric, "Montserrat", sans-serif);
    font-weight: 700;
    font-size: var(--ec-fz-sm, 0.875rem);
    color: var(--ec-text-main, #2d2d2d);
    letter-spacing: 0.05em;
    margin: 0;
}

.ec-styling__staff {
    display: flex;
    align-items: center;
    gap: calc(var(--ec-space-unit) * 3);
}

.ec-styling__staff-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ec-surface-card, #f4f4f4);
    display: inline-block;
}

.ec-styling__staff-avatar--sm {
    width: 32px;
    height: 32px;
}

.ec-styling__staff-avatar--empty {
    background: var(--ec-surface-card, #f4f4f4);
}

.ec-styling__staff-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ec-styling__staff-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ec-styling__staff-name {
    margin: 0;
    font-size: var(--ec-fz-base, 1rem);
    font-weight: 700;
    color: var(--ec-text-main, #2d2d2d);
    display: flex;
    align-items: baseline;
    gap: calc(var(--ec-space-unit) * 2);
}

.ec-styling__staff-name-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ec-styling__staff-height {
    font-size: var(--ec-fz-xs, 0.75rem);
    font-weight: 400;
    font-family: var(--ec-font-numeric, "Montserrat", sans-serif);
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling__staff-store {
    margin: 0;
    font-size: var(--ec-fz-xs, 0.75rem);
    color: var(--ec-text-subdued, #555);
}

.ec-styling__description {
    font-size: var(--ec-fz-base, 1rem);
    line-height: 1.7;
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling__description p { margin: 0 0 1em; }
.ec-styling__description p:last-child { margin-bottom: 0; }

.ec-styling__tags {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) * 2);
}

.ec-styling__tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--ec-space-unit) * 2);
}

.ec-styling__tag {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--ec-space-unit) * 2) calc(var(--ec-space-unit) * 3);
    background: var(--ec-surface-card, #fff);
    border: 1px solid var(--ec-border-default, #ccc);
    border-radius: var(--ec-radius-button, 4px);
    font-size: var(--ec-fz-xs, 0.75rem);
    color: var(--ec-text-main, #2d2d2d);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.ec-styling__tag:hover {
    background: var(--ec-surface-main, #f8f8f8);
    border-color: var(--ec-brand-on-primary, #2d2d2d);
}

.ec-styling__more-link {
    margin: 0;
}

.ec-styling__more-link a {
    color: var(--ec-action-interactive, #0066cc);
    font-size: var(--ec-fz-sm, 0.875rem);
    text-decoration: underline;
}

.ec-styling__share {
    display: flex;
    align-items: center;
    gap: calc(var(--ec-space-unit) * 5);
    padding-top: calc(var(--ec-space-unit) * 2);
    border-top: 1px solid var(--ec-border-subdued, #efefef);
}

.ec-styling__share-label {
    font-weight: 700;
    font-size: var(--ec-fz-base, 1rem);
    color: var(--ec-text-main, #2d2d2d);
    letter-spacing: 0.1em;
}

.ec-styling__share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: calc(var(--ec-space-unit) * 3);
    align-items: center;
}

.ec-styling__share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--ec-text-main, #2d2d2d);
    transition: opacity 0.15s;
}

.ec-styling__share-link:hover { opacity: 0.7; }
.ec-styling__share-link--facebook { color: #1877f2; }
.ec-styling__share-link--x { color: #000; }
.ec-styling__share-link--line { color: #06c755; }

/* ===== 着用アイテム ===== */

.ec-styling__items {
    padding-top: calc(var(--ec-space-unit) * 4);
    border-top: 1px solid var(--ec-border-default, #ccc);
}

.ec-styling__section-title {
    margin: 0 0 calc(var(--ec-space-unit) * 4);
    font-size: var(--ec-fz-base, 1rem);
    font-weight: 700;
}

.ec-styling__items-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--ec-space-unit) * 4);
}

/* ===== 関連コーデ ===== */

.ec-styling__related {
    margin-top: calc(var(--ec-space-unit) * 12);
    padding-top: calc(var(--ec-space-unit) * 12);
    border-top: 1px solid var(--ec-border-default, #ccc);
}

.ec-styling__related-heading {
    margin: 0 0 calc(var(--ec-space-unit) * 8);
    font-size: var(--ec-fz-mi, 1.125rem);
    font-weight: 700;
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling__related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--ec-space-unit) * 12);
}

@media (max-width: 1024px) {
    .ec-styling__related-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .ec-styling__related-list { grid-template-columns: repeat(2, 1fr); gap: calc(var(--ec-space-unit) * 4); }
}

.ec-styling__related-link {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) * 6);
    text-decoration: none;
    color: inherit;
}

.ec-styling__related-thumb {
    display: block;
    aspect-ratio: 5 / 6;
    background: var(--ec-surface-card, #f4f4f4);
    overflow: hidden;
    border-radius: var(--ec-radius-card, 8px);
}

.ec-styling__related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ec-styling__related-staff {
    display: flex;
    align-items: center;
    gap: calc(var(--ec-space-unit) * 3);
}

/* ===== アーカイブ ===== */

.ec-styling-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--ec-space-unit) * 6) calc(var(--ec-space-unit) * 5);
}

.ec-styling-archive__header {
    margin-bottom: calc(var(--ec-space-unit) * 8);
}

.ec-styling-archive__title {
    margin: 0;
    font-size: var(--ec-fz-xl, 2rem);
    font-weight: 700;
}

.ec-styling-archive__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--ec-space-unit) * 8);
}

@media (max-width: 1024px) {
    .ec-styling-archive__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .ec-styling-archive__list { grid-template-columns: repeat(2, 1fr); gap: calc(var(--ec-space-unit) * 4); }
}

.ec-styling-archive__link {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) * 4);
    text-decoration: none;
    color: inherit;
}

.ec-styling-archive__thumb {
    display: block;
    aspect-ratio: 5 / 6;
    background: var(--ec-surface-card, #f4f4f4);
    overflow: hidden;
    border-radius: var(--ec-radius-card, 8px);
}

.ec-styling-archive__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ec-styling-archive__staff {
    display: flex;
    align-items: center;
    gap: calc(var(--ec-space-unit) * 3);
}

.ec-styling-archive__empty {
    padding: calc(var(--ec-space-unit) * 12) 0;
    text-align: center;
    color: var(--ec-text-subdued, #a0a0a0);
}

/* =============================================================
   スタイリングリストブロック (.ec-styling-list__...)
   - Gutenberg ブロック「スタイリングリスト」のフロント表示
   - スタッフ着こなし日記カードのグリッド + VIEW MORE ボタン
   - カラム数はブロック属性から --ec-styling-list-columns で受け取る
   ============================================================= */

.ec-styling-list {
    --ec-styling-list-columns: 4;
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--ec-space-unit) * 6) calc(var(--ec-space-unit) * 5);
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling-list__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--ec-styling-list-columns), minmax(0, 1fr));
    gap: calc(var(--ec-space-unit) * 8);
}

@media (max-width: 1024px) {
    .ec-styling-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .ec-styling-list__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(var(--ec-space-unit) * 4);
    }
}

.ec-styling-list__item {
    margin: 0;
}

.ec-styling-list__card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) * 3);
    height: 100%;
}

.ec-styling-list__media {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ec-styling-list__label {
    display: block;
    margin-bottom: calc(var(--ec-space-unit) * 2);
    font-size: var(--ec-fz-xs, 0.75rem);
    font-weight: 700;
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling-list__thumb {
    display: block;
    aspect-ratio: 5 / 6;
    background: var(--ec-surface-card, #f4f4f4);
    overflow: hidden;
    border-radius: var(--ec-radius-card, 8px);
}

.ec-styling-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ec-styling-list__thumb--empty {
    background: var(--ec-surface-card, #f4f4f4);
}

.ec-styling-list__body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) * 2);
}

.ec-styling-list__date {
    margin: 0;
    font-size: var(--ec-fz-xs, 0.75rem);
    font-family: var(--ec-font-numeric, "Montserrat", sans-serif);
    color: var(--ec-text-subdued, #555);
}

.ec-styling-list__title {
    margin: 0;
    font-size: var(--ec-fz-sm, 0.875rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling-list__title a {
    color: inherit;
    text-decoration: none;
}

.ec-styling-list__title a:hover {
    text-decoration: underline;
}

.ec-styling-list__excerpt {
    margin: 0;
    font-size: var(--ec-fz-xs, 0.75rem);
    line-height: 1.7;
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling-list__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-unit);
}

.ec-styling-list__tag {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--ec-space-unit) * 0.75) calc(var(--ec-space-unit) * 2);
    border: 1px solid var(--ec-border-default, #ccc);
    border-radius: var(--ec-radius-button, 4px);
    font-size: var(--ec-fz-xs, 0.75rem);
    color: var(--ec-text-main, #2d2d2d);
    text-decoration: none;
}

.ec-styling-list__tag:hover {
    border-color: var(--ec-text-main, #2d2d2d);
}

.ec-styling-list__staff {
    display: flex;
    align-items: center;
    gap: calc(var(--ec-space-unit) * 2);
    margin-top: auto;
    text-decoration: none;
    color: inherit;
}

.ec-styling-list__staff .ec-styling__staff-name {
    font-size: var(--ec-fz-xs, 0.75rem);
}

.ec-styling-list__actions {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--ec-space-unit) * 8);
}

.ec-styling-list__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--ec-space-unit) * 2);
    min-width: calc(var(--ec-space-unit) * 60);
    padding: calc(var(--ec-space-unit) * 3) calc(var(--ec-space-unit) * 8);
    background: var(--ec-surface-inverse, #2d2d2d);
    color: var(--ec-text-inverse, #fff);
    font-size: var(--ec-fz-sm, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: var(--ec-radius-button, 4px);
}

.ec-styling-list__more:hover {
    filter: brightness(1.15);
}

.ec-styling-list__more-icon {
    flex-shrink: 0;
}

/* =============================================================
   着用アイテム専用カード (.ec-styling-item__...)
   - 横並びレイアウト: 画像(左) + 情報(右)
   - 下段にカラー選択 / サイズ選択
   ============================================================= */

.ec-styling__items-grid {
    /* 横並びカードは縦に積む（1カラム） */
    grid-template-columns: 1fr;
}

.ec-styling-item {
    display: flex;
    flex-direction: column;
    background: var(--ec-surface-main, #fff);
    border: 1px solid var(--ec-border-default, #ccc);
    border-radius: var(--ec-radius-card, 8px);
    overflow: hidden;
}

.ec-styling-item__main {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: calc(var(--ec-space-unit) * 3);
    padding: calc(var(--ec-space-unit) * 3);
    align-items: start;
}

/* ===== 左: 画像 + バッジ + ラベル ===== */

.ec-styling-item__image-wrap {
    position: relative;
    aspect-ratio: 5 / 6;
    background: var(--ec-surface-card, #f4f4f4);
    overflow: hidden;
    border-radius: var(--ec-radius-button, 4px);
}

.ec-styling-item__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.ec-styling-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.25s ease;
}

/* ホバー画像はCSSで crossfade、JS は src 差し替えのみ */
.ec-styling-item__image--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
}

.ec-styling-item__image-wrap:hover .ec-styling-item__image--hover { opacity: 1; }

.ec-styling-item__image.is-fading { opacity: 0; }

.ec-styling-item__image--empty { background: var(--ec-surface-card, #f4f4f4); }

.ec-styling-item__badges {
    position: absolute;
    top: calc(var(--ec-space-unit));
    left: calc(var(--ec-space-unit));
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) / 2);
    z-index: 2;
}

.ec-styling-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ec-text-inverse, #fff);
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.ec-styling-item__badge--new  { background: var(--ec-status-success, #008060); }
.ec-styling-item__badge--sale { background: var(--ec-status-sale, #ed293e); }

.ec-styling-item__marketing {
    position: absolute;
    left: calc(var(--ec-space-unit));
    bottom: calc(var(--ec-space-unit));
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) / 2);
    z-index: 2;
    max-width: calc(100% - var(--ec-space-unit) * 2);
}

.ec-styling-item__label {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 2px;
    border: 1px solid var(--ec-border-default, #ccc);
    background: var(--ec-surface-main, #fff);
    color: var(--ec-text-main, #2d2d2d);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

/* ===== 右: 情報 ===== */

.ec-styling-item__info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) * 2);
    min-width: 0;
}

.ec-styling-item__brand {
    margin: 0;
    font-size: var(--ec-fz-xs, 0.75rem);
    font-weight: 700;
    color: var(--ec-text-main, #2d2d2d);
    line-height: 1.4;
}

.ec-styling-item__title {
    margin: 0;
    font-size: var(--ec-fz-xs, 0.75rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--ec-text-main, #2d2d2d);
    /* 2行クランプ */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ec-styling-item__title a {
    color: inherit;
    text-decoration: none;
}

.ec-styling-item__title a:hover { text-decoration: underline; }

.ec-styling-item__price .ec-card-price {
    font-size: var(--ec-fz-xs, 0.75rem);
}

.ec-styling-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--ec-space-unit) * 3);
    margin-top: calc(var(--ec-space-unit));
}

.ec-styling-item__stock-wrap {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ec-space-unit));
    font-size: var(--ec-fz-xs, 0.75rem);
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling-item__stock.ec-stock--low { color: var(--ec-status-alert, #e67e22); }
.ec-styling-item__stock.ec-stock--out { color: var(--ec-text-subdued, #a0a0a0); }

.ec-styling-item__review {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--ec-fz-xs, 0.75rem);
    font-weight: 700;
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling-item__review-star {
    color: var(--ec-color-rating-star, #ffa41c);
    font-size: 14px;
    line-height: 1;
}

.ec-styling-item__review-count {
    font-weight: 400;
    color: var(--ec-text-subdued, #555);
}

.ec-styling-item__favorite {
    margin-left: auto; /* meta 内で右端に寄せる（absolute による見切れを回避） */
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--ec-action-favorite, #ff7683);
    line-height: 0;
}

.ec-styling-item__favorite:hover { opacity: 0.75; }

/* ===== 下段: カラー選択 / サイズ選択 ===== */

.ec-styling-item__options {
    border-top: 1px solid var(--ec-border-default, #ccc);
    background: var(--ec-surface-card, #f4f4f4);
    padding: calc(var(--ec-space-unit) * 3);
    display: flex;
    flex-direction: column;
    gap: calc(var(--ec-space-unit) * 2);
}

.ec-styling-item__option-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: calc(var(--ec-space-unit) * 3);
    align-items: center;
}

.ec-styling-item__option-label {
    font-size: var(--ec-fz-xs, 0.75rem);
    color: var(--ec-text-main, #2d2d2d);
}

.ec-styling-item__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--ec-space-unit));
    align-items: center;
}

.ec-styling-item__chip-item {
    display: inline-flex;
}

/* チップは <button> なので明示的にリセット */
.ec-styling-item__color-chip,
.ec-styling-item__size-chip {
    appearance: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.ec-styling-item__color-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--ec-border-default, #ccc);
    display: inline-block;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-sizing: content-box;
    transition: outline 0.15s, opacity 0.15s;
}

.ec-styling-item__color-chip.is-hovered { outline: 1px solid var(--ec-text-subdued, #555); outline-offset: 1px; }
.ec-styling-item__color-chip.is-selected {
    outline: 2px solid var(--ec-brand-on-primary, #2d2d2d);
    outline-offset: 1px;
}
.ec-styling-item__color-chip.is-soldout {
    opacity: 0.35;
    cursor: default;
    position: relative;
}
.ec-styling-item__color-chip.is-soldout::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ec-text-subdued, #555) 50%, transparent calc(50% + 1px));
    pointer-events: none;
}

.ec-styling-item__size-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--ec-border-default, #ccc);
    border-radius: 2px;
    background: var(--ec-surface-main, #fff);
    font-size: 10px;
    font-family: var(--ec-font-numeric, "Montserrat", sans-serif);
    color: var(--ec-text-main, #2d2d2d);
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ec-styling-item__size-chip:hover { border-color: var(--ec-brand-on-primary, #2d2d2d); }

.ec-styling-item__size-chip.is-selected {
    background: var(--ec-surface-inverse, #2d2d2d);
    border-color: var(--ec-surface-inverse, #2d2d2d);
    color: var(--ec-text-inverse, #fff);
}

.ec-styling-item__size-chip.is-soldout {
    opacity: 0.4;
    text-decoration: line-through;
    cursor: default;
}

/* ===== レスポンシブ ===== */

@media (max-width: 600px) {
    .ec-styling-item__main {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: calc(var(--ec-space-unit) * 2);
        padding: calc(var(--ec-space-unit) * 2);
    }
    .ec-styling-item__option-row {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: calc(var(--ec-space-unit) * 2);
    }
    .ec-styling-item__options {
        padding: calc(var(--ec-space-unit) * 2);
    }
}

/* ============================================================
   スタイリング一覧 — PICK UP（スタイルタグ）チップ
   ============================================================ */
.ec-styling-pickup {
    /* Figma: コンテンツ上端から 48px、ツールバーまで 32px */
    margin: calc(var(--ec-space-unit) * 12) 0 calc(var(--ec-space-unit) * 8);
}
/* 2カラム常時設置時はレイアウト側の padding-top と重複するため上マージンを詰め、
   サイドバーの「絞り込み」見出しと上端を揃える */
.ec-layout--2col .ec-styling-pickup {
    margin-top: 0;
}
.ec-styling-pickup__label {
    display: block;
    font-size: var(--ec-fz-xs);     /* 12px */
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.1em;          /* ≒1.2px @12px */
    color: var(--ec-text-main);
    margin-bottom: 10px;
}
.ec-styling-pickup__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ec-styling-pickup__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: #fff;
    border: 1px solid var(--ec-border-default);
    border-radius: 4px;
    font-size: var(--ec-fz-xs);     /* 12px */
    line-height: 20px;
    letter-spacing: 0.1em;          /* ≒1.2px @12px */
    color: var(--ec-text-main);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ec-styling-pickup__chip:hover {
    border-color: var(--ec-text-main);
}
.ec-styling-pickup__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* 選択中（AJAX絞り込み中）はダーク反転で示す（Figma基本形は白／枠線のみ） */
.ec-styling-pickup__chip.is-active {
    background-color: var(--ec-text-main);
    border-color: var(--ec-text-main);
    color: var(--ec-text-inverse);
}

/* グリッドのローディング中フェード（AJAX置換時） */
.ec-styling-archive__list.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s;
}