:root {
  /* Kawaii Premium パステル（2026-07-03 ダーク→パステル反転・OKLCH維持。変数名維持で全ルール自動追従） */
  --bg-primary: oklch(98% 0.01 340);
  --bg-secondary: oklch(100% 0 0);
  --bg-tertiary: oklch(94% 0.03 350);
  --text-primary: oklch(38% 0.02 340);
  --text-secondary: oklch(62% 0.03 340);
  --accent-pink: oklch(72% 0.17 350);
  --accent-highlight: oklch(80% 0.12 350);
  --border: oklch(90% 0.04 350);
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  /* cycle 374: 注文・マイページ系が管理画面用 tokens.css（ダーク）を読んで黒背景になっていた → 同名の変数をパステルで定義 */
  --color-bg: var(--bg-primary);
  --color-surface: var(--bg-secondary);
  --color-text: var(--text-primary);
  --color-accent: var(--accent-pink);
  --color-border: var(--border);
  --font-sans: var(--font-body);
  --radius-sm: 8px;
  --radius-md: 12px;
  --space-section: 2rem;
  --text-h1: 1.75rem;
  --transition-transform: transform 0.15s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  overflow-wrap: anywhere;  /* cycle 400: 長い文が枠からはみ出さないよう、必要なときだけ途中で折り返す */
  background-color: var(--bg-primary);
  background-image: url("/static/img/bg/pattern.webp");
  background-size: 440px;
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
}

.header {
  background-color: white;
  padding: var(--space-lg);
  border-bottom: 1px solid #e8e8f0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.nav {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ff7fb0;
  text-decoration: none;
  transition: all 200ms ease;
}

.logo:hover {
  color: #e05a7e;
  transform: scale(1.05);
}

.nav-list {
  list-style: none;
  display: flex;
  gap: var(--space-lg);
}

.nav-list a {
  color: #333;
  text-decoration: none;
  transition: all 200ms ease;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

.nav-list a:hover {
  color: #ff7fb0;
  background-color: #ffe0ee;
}

/* ===== M-ZAKKA風 3段ヘッダ（ユーティリティ帯 / ロゴ+検索+アカウント / カテゴリナビ）===== */
.site-header { padding: 0; }
.header-top {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .35rem 1.2rem;
  background: linear-gradient(90deg, #ff9cc0, #e0709a);
  color: #fff; font-size: .8rem;
}
.header-catch { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utility-nav { display: flex; gap: 1rem; flex-shrink: 0; }
.utility-nav a { color: #fff; text-decoration: none; opacity: .92; }
.utility-nav a:hover { opacity: 1; text-decoration: underline; }

.header-main {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .7rem 1.2rem;
}
.header-search {
  flex: 1; max-width: 480px; display: flex;
  border: 2px solid #f2b8ce; border-radius: 999px; overflow: hidden; background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.header-search:focus-within { border-color: #e0709a; box-shadow: 0 0 0 3px rgba(224,112,154,.15); }
.header-search input {
  flex: 1; border: none; outline: none; padding: .5rem 1rem; font: inherit; background: transparent;
}
.header-search button {
  border: none; background: transparent; padding: 0 .9rem; cursor: pointer; font-size: 1rem;
}
.header-account { display: flex; align-items: center; gap: .9rem; margin-left: auto; white-space: nowrap; }
.header-greeting { font-size: .85rem; color: var(--text-secondary, #8a7080); }
.header-greeting a { color: #e0709a; text-decoration: none; }
.header-greeting a:hover { text-decoration: underline; }
.header-cart {
  color: #333; text-decoration: none; padding: .45rem .9rem; border-radius: 999px;
  background: #ffe0ee; transition: background .15s, transform .15s;
}
.header-cart:hover { background: #ffcfe4; transform: translateY(-1px); }

.genre-nav {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .35rem 1.2rem .6rem;
}
.genre-nav:empty { display: none; }
.genre-nav a {
  font-size: .82rem; text-decoration: none; color: #7a5a6a;
  padding: .25rem .75rem; border-radius: 999px; border: 1px solid #f2d5e2;
  background: #fff; transition: background .15s, color .15s;
}
.genre-nav a:hover { background: #ffe0ee; color: #e0709a; }
.genre-nav a.is-active { background: #e0709a; border-color: #e0709a; color: #fff; }

.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem; margin-bottom: .6rem; }
.footer-nav a { color: inherit; text-decoration: none; font-size: .85rem; opacity: .85; }
.footer-nav a:hover { color: #e0709a; opacity: 1; }

@media (max-width: 700px) {
  .header-catch { display: none; }
  .header-main { flex-wrap: wrap; gap: .6rem; }
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
  /* cycle 400: 幅320pxで上の帯の4リンクが右へ15pxはみ出していた → 詰めて、入らなければ折り返す */
  .header-top { padding: .35rem .8rem; justify-content: center; }
  .utility-nav { flex-shrink: 1; flex-wrap: wrap; justify-content: center; gap: .3rem .8rem; }
}

/* ===== マイページ ===== */
.mypage-welcome { color: var(--text-secondary, #8a7080); margin: .4rem 0 1.4rem; }
.mypage-groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem; margin-bottom: 1.6rem;
}
.mypage-group {
  background: #fff; border: 1px solid rgba(240,170,200,.4); border-radius: 16px;
  padding: 1.2rem 1.4rem; box-shadow: 0 2px 10px rgba(220,150,190,.12);
}
.mypage-group h2 { font-size: 1rem; color: #e0709a; margin-bottom: .7rem; }
.mypage-group ul { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.mypage-group a { color: inherit; text-decoration: none; }
.mypage-group a:hover { color: #e0709a; text-decoration: underline; }
.mypage-disabled { color: #b8a8b0; cursor: not-allowed; }
.mypage-logout { max-width: 280px; }

/* ===== ログイン / 新規登録 ===== */
.login-section { display: flex; justify-content: center; padding: 1.5rem 0; }
.login-card {
  width: 100%; max-width: 420px; background: #fff;
  border: 1px solid rgba(240,170,200,.4); border-radius: 18px;
  padding: 1.6rem; box-shadow: 0 4px 18px rgba(220,150,190,.18);
}
.login-tabs { display: flex; gap: .4rem; margin-bottom: 1.2rem; }
.login-tab {
  flex: 1; padding: .6rem; border: none; border-radius: 999px; cursor: pointer;
  background: #ffe9f2; color: #b06a86; font: inherit; font-weight: 600;
  transition: background .15s, color .15s;
}
.login-tab.is-active { background: #e0709a; color: #fff; }
.login-panel { display: flex; flex-direction: column; gap: .9rem; }
/* cycle 399: display:flex が hidden 属性を打ち消し、タブを切り替えても両方のフォームが出ていた */
.login-panel[hidden], .login-error[hidden] { display: none; }
.login-panel label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; color: #7a5a6a; }
.login-panel input {
  padding: .6rem .9rem; border: 1.5px solid #f2d5e2; border-radius: 10px; font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.login-panel input:focus { outline: none; border-color: #e0709a; box-shadow: 0 0 0 3px rgba(224,112,154,.14); }
.login-help { font-size: .82rem; text-align: center; }
.login-help a { color: #e0709a; }
.login-error {
  margin-bottom: .9rem; padding: .7rem 1rem; border-radius: 10px; font-size: .88rem;
  background: color-mix(in oklch, #e05070 12%, transparent);
  border: 1.5px solid #e05070; color: #c03050; font-weight: 600;
}
.forgot-done {
  margin-bottom: .9rem; padding: .8rem 1rem; border-radius: 10px; font-size: .9rem;
  background: rgba(120, 200, 140, .14); border: 1.5px solid #6cb87e; color: #3d7a4e; font-weight: 600;
}

/* ===== 欲しいものリスト ===== */
.wishlist-note { color: var(--text-secondary, #8a7080); font-size: .88rem; margin: .3rem 0 1.2rem; }
.wishlist-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem;
}
.wishlist-card {
  background: #fff; border: 1px solid rgba(240,170,200,.4); border-radius: 16px;
  padding: 1rem; box-shadow: 0 2px 10px rgba(220,150,190,.12);
  display: flex; flex-direction: column; gap: .8rem;
}
.wishlist-link { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: inherit; }
.wishlist-thumb {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary, #f8e8f0); color: #e0709a; font-weight: 700; font-size: 1.2rem;
}
.wishlist-body { display: flex; flex-direction: column; min-width: 0; }
.wishlist-name {
  font-size: .92rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wishlist-price { color: #e0709a; font-weight: 700; }
.wishlist-actions { display: flex; gap: .6rem; align-items: center; }
.wishlist-actions form { flex: 1; }
.wishlist-remove {
  border: none; background: transparent; color: #b8a8b0; font: inherit; font-size: .8rem;
  cursor: pointer; white-space: nowrap;
}
.wishlist-remove:hover { color: #e05070; text-decoration: underline; }
.wishlist-empty { text-align: center; padding: 2rem 0; color: var(--text-secondary, #8a7080); }
.wishlist-empty p { margin: .8rem 0 1.2rem; }

/* ===== ページネーション ===== */
.pager {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: .4rem; margin: 1.6rem 0 .4rem;
}
.pager-btn, .pager-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 .8rem;
  border-radius: 999px; text-decoration: none; color: #7a5a6a;
  background: #fff; border: 1.5px solid #f2d5e2; font-weight: 600;
  transition: background .15s, color .15s, transform .15s;
}
.pager-btn:hover, .pager-num:hover { background: #ffe0ee; color: #e0709a; transform: translateY(-1px); }
.pager-num.is-current { background: #e0709a; border-color: #e0709a; color: #fff; cursor: default; }
.pager-ellipsis { color: #b8a8b0; padding: 0 .2rem; }
.pager-status { text-align: center; font-size: .8rem; color: var(--text-secondary, #8a7080); margin-bottom: 1rem; }

/* ===== お知らせ（新着情報）===== */
.news-section {
  margin-bottom: var(--space-lg, 1.5rem);
  background: rgba(255,255,255,.8); border: 1px solid rgba(240,170,200,.4);
  border-radius: 14px; padding: .8rem 1.1rem;
}
.news-title { font-size: .95rem; color: #e0709a; margin-bottom: .5rem; }
.news-list { list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.news-list li { font-size: .85rem; display: flex; gap: .7rem; align-items: baseline; }
.news-date { flex: 0 0 auto; color: var(--text-secondary, #8a7080); font-size: .78rem; }
.news-list a { color: #e0709a; text-decoration: none; }
.news-list a:hover { text-decoration: underline; }

/* ===== 売れ筋ランキング ===== */
.ranking-section { margin-bottom: var(--space-lg, 1.5rem); }
.ranking-title { font-size: 1.05rem; color: #e0709a; margin-bottom: .6rem; }
.ranking-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .7rem;
}
.ranking-card {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid rgba(240,170,200,.4); border-radius: 14px;
  padding: .6rem .8rem; text-decoration: none; color: inherit;
  box-shadow: 0 2px 8px rgba(220,150,190,.12);
  transition: transform .15s, box-shadow .15s;
}
.ranking-card:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(224,112,154,.25); }
.ranking-rank {
  flex: 0 0 auto; font-size: .72rem; font-weight: 900; color: #fff;
  padding: .25rem .5rem; border-radius: 999px; background: #c8a2b8;
}
.ranking-rank.rank-1 { background: linear-gradient(135deg, #f0c420, #d99a06); }
.ranking-rank.rank-2 { background: linear-gradient(135deg, #b8bcc8, #8e94a4); }
.ranking-rank.rank-3 { background: linear-gradient(135deg, #d29a6a, #b0713d); }
.ranking-thumb {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary, #f8e8f0); color: #e0709a; font-weight: 700;
}
.ranking-body { display: flex; flex-direction: column; min-width: 0; }
.ranking-name {
  font-size: .82rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ranking-price { font-size: .82rem; color: #e0709a; font-weight: 700; }

/* ===== 情報ページ（ガイド / FAQ / お問い合わせ / 特商法）===== */
.info-page { max-width: 820px; margin: 0 auto; }
.info-page h1 { margin-bottom: 1rem; }
.info-note { color: var(--text-secondary, #8a7080); font-size: .85rem; margin-bottom: 1rem; }
.info-more { margin-top: 1.2rem; }
.info-more a, .info-card a { color: #e0709a; }
.info-card {
  background: #fff; border: 1px solid rgba(240,170,200,.4); border-radius: 16px;
  padding: 1.3rem 1.5rem; margin-bottom: 1.1rem; box-shadow: 0 2px 10px rgba(220,150,190,.12);
}
.info-card h2 { font-size: 1.05rem; color: #e0709a; margin-bottom: .7rem; }
.info-card ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.guide-steps { padding-left: 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.legal-table th, .legal-table td {
  text-align: left; padding: .6rem .8rem;
  border-bottom: 1px solid rgba(240,170,200,.35); vertical-align: top;
}
.legal-table th { width: 32%; color: #7a5a6a; font-weight: 600; background: rgba(255,233,242,.5); }
.faq-list { display: flex; flex-direction: column; gap: .3rem; }
.faq-list details { border-bottom: 1px solid rgba(240,170,200,.35); padding: .5rem 0; }
.faq-list details:last-child { border-bottom: none; }
.faq-list summary {
  cursor: pointer; font-weight: 600; padding: .4rem .2rem; list-style: none; position: relative; padding-right: 1.6rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "＋"; position: absolute; right: .3rem; color: #e0709a; transition: transform .18s;
}
.faq-list details[open] summary::after { content: "－"; }
.faq-list details p { padding: .3rem .2rem .5rem; color: var(--text-secondary, #6a5560); }

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-xl);
  min-height: 60vh;
}

.products-section h1 {
  font-size: 2rem;
  margin-bottom: var(--space-lg);
  color: var(--accent-pink);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-xl);
}

.product-card {
  background-color: white;
  border: 1px solid #e8e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 200ms ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.product-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.product-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* img.responsive（responsive.css・後読み・同詳細度）の height:auto に負けると
   画像が元比率で伸びて枠の overflow:hidden で切れるため、.responsive 付きも明示 */
.product-image img,
.product-image img.responsive {
  width: 100%;
  height: 100%;
  /* 卸の商品写真は縦長ボトル〜正方形パッケージまで比率がバラバラ。
     cover だと縦長が上下で切れる（ボトルのキャップしか見えない）ため全体を収める */
  object-fit: contain;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ffe0ee, #e8d5ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: #d08080;
}

.product-name {
  font-size: 1rem;
  font-weight: 600;
  padding: var(--space-md);
  /* cycle 403: 1行で切ると「〜バイブ 奥イキの極み／ポルチオ開発」の違いが見えず同じ商品に見えた → 3行まで表示 */
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: calc(1.45em * 3 + 2 * var(--space-md));
  box-sizing: border-box;
}

.product-category {
  padding: 0 var(--space-md);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.product-price {
  padding: var(--space-md);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-pink);
}

.btn-add-to-cart {
  width: calc(100% - 2 * var(--space-md));
  margin: 0 var(--space-md) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: #ff7fb0;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 200ms ease;
  box-shadow: 0 2px 8px rgba(216, 145, 232, 0.2);
}

/* cycle 398: .w-full（width:100%）が後から読まれて余白ぶん右にはみ出していた → 2クラス指定で余白を引いた幅に戻す */
.btn-add-to-cart.w-full {
  width: calc(100% - 2 * var(--space-md));
  box-sizing: border-box;
}

.btn-add-to-cart:hover {
  background-color: #e05a7e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(216, 145, 232, 0.3);
}

.btn-add-to-cart:active {
  transform: translateY(0);
}

.no-products {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-secondary);
}

.product-detail-section {
  padding: var(--space-lg) 0;
}

.product-detail-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.product-detail-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--bg-secondary);
  border-radius: 8px;
  overflow: hidden;
}

.product-detail-image img,
.product-detail-image img.responsive {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-placeholder-large {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ffe0ee, #e8d5ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: 700;
  color: #d08080;
}

.product-detail-info h1 {
  font-size: 2rem;
  margin-bottom: var(--space-md);
}

.product-detail-info .category {
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.product-detail-info .price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-pink);
  margin-bottom: var(--space-lg);
}

.product-detail-info .description {
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}

.btn-primary {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background-color: #ff7fb0;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  margin-right: var(--space-md);
  margin-bottom: var(--space-md);
  transition: all 200ms ease;
  box-shadow: 0 2px 8px rgba(216, 145, 232, 0.2);
}

.btn-primary:hover {
  background-color: #e05a7e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(216, 145, 232, 0.3);
}

.btn-secondary {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background-color: white;
  color: #ff7fb0;
  border: 1.5px solid #ff7fb0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: all 200ms ease;
}

.btn-secondary:hover {
  background-color: #ffe0ee;
  color: #e05a7e;
  transform: translateY(-2px);
}

.error-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.error-container {
  text-align: center;
}

.error-code {
  font-size: 5rem;
  font-weight: 700;
  color: var(--accent-pink);
  margin-bottom: var(--space-lg);
}

.error-message {
  font-size: 1.25rem;
  margin-bottom: var(--space-lg);
  color: var(--text-secondary);
}

.footer {
  background-color: white;
  border-top: 1px solid #e8e8f0;
  padding: var(--space-lg);
  text-align: center;
  color: #999;
  font-size: 0.875rem;
  margin-top: var(--space-xl);
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-lg);
  }

  .product-detail-container {
    grid-template-columns: 1fr;
  }

  .container {
    padding: var(--space-lg);
  }

  html {
    font-size: 14px;
  }
}

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

  .nav-list {
    gap: var(--space-md);
  }

  .product-detail-info h1 {
    font-size: 1.5rem;
  }
}

/* Responsive Design System */
@import url('./responsive.css');

/* ===== Kawaii Premium 追加（2026-07-03 アイコン/ボタン共通） ===== */
/* ヘッダーのカート/検索リンクにアイコン */
.nav-list a[href="/cart"]::before,
.nav-list a.cart-link::before {
  content: ""; display: inline-block; width: 1.25em; height: 1.25em;
  background: url("/static/img/ui/icon_cart.webp") center/contain no-repeat;
  vertical-align: -0.28em; margin-right: 0.3em;
}
/* パステル丸ピルボタン（画像不要・文字も乗る） */
.btn-pastel {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .8em 1.6em; border: none; border-radius: 999px; cursor: pointer;
  font-weight: 800; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, var(--accent-highlight), var(--accent-pink));
  box-shadow: 0 8px 20px rgba(255,130,175,.32);
  transition: transform .18s cubic-bezier(.2,1.3,.4,1), box-shadow .18s;
}
.btn-pastel:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 26px rgba(255,130,175,.45); }
.btn-pastel:active { transform: translateY(0) scale(.97); }
.btn-pastel--mint { background: linear-gradient(135deg,#a6e3c9,#6ec7a2); box-shadow:0 8px 20px rgba(110,199,162,.3); }
.btn-pastel--lav  { background: linear-gradient(135deg,#cdb6f0,#a98fd6); box-shadow:0 8px 20px rgba(169,143,214,.3); }
/* 商品プレースホルダ画像も淡色に */
.product-image { background-color: var(--bg-tertiary); }

/* ===== 商品カード：お気に入り／カートアイコン／バッジ（2026-07-03） ===== */
.product-card { position: relative; }
.fav-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.9) url("/static/img/ui/icon_heart.webp") center/58% no-repeat;
  box-shadow: 0 2px 10px rgba(200,140,180,.28);
  filter: grayscale(1) opacity(.55);
  transition: transform .18s cubic-bezier(.2,1.3,.4,1), filter .18s;
}
.fav-btn:hover { transform: scale(1.12); }
.fav-btn.is-fav { filter: none; }
/* カート追加ボタンにカートアイコン */
.btn-add-to-cart.has-cart-icon::before {
  content: ""; display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: 0.35em;
  background: url("/static/img/ui/icon_cart.webp") center/contain no-repeat;
  filter: brightness(0) invert(1);  /* 白抜きでボタン文字色に合わせる */
}
/* 商品バッジ（SALE/NEW/おすすめ）。実データ接続時に .product-card 内へ配置 */
.product-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: 56px; height: 56px; background-size: contain; background-repeat: no-repeat; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(210,110,150,.5);
}
.product-badge--sale { background-image: url("/static/img/ui/badge_sale.webp"); }
.product-badge--new  { background-image: url("/static/img/ui/badge_new.webp"); color:#e0709a; text-shadow:none; }
.product-badge--osusume { background-image: url("/static/img/ui/badge_osusume.webp"); }
/* バッジ2枚持ち（おすすめ＋NEW）は縦にスタック */
.product-badge + .product-badge { top: 68px; }
/* 在庫切れ（卸の実在庫確認 stock_check で欠品）。おすすめ/NEW と重ならないよう右上のラベル */
.product-badge.product-badge--soldout {
  top: 10px; left: auto; right: 10px; width: auto; height: auto;
  padding: .25em .7em; border-radius: 999px; background: rgba(110,110,120,.85);
  font-size: .72rem; text-shadow: none;
}
.btn-add-to-cart.btn-soldout,
.btn-add-to-cart.btn-soldout:hover {
  background: #cfcfd6; color: #fff; cursor: not-allowed; transform: none; box-shadow: none;
}
.stock-error { color: #d0406a; font-weight: 700; margin: .5rem 0; }
.stock-note { color: #777; margin: .5rem 0; }

/* 商品一覧ツールバー（並び替え・おすすめ絞り込み） */
.products-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md, 1rem);
  margin: var(--space-md, 1rem) 0 var(--space-lg, 1.5rem);
  padding: .6rem .9rem;
  background: rgba(255,255,255,.75); border: 1px solid rgba(240,170,200,.4);
  border-radius: 999px; box-shadow: 0 2px 12px rgba(220,150,190,.15);
}
.products-toolbar .toolbar-label { font-size: .85rem; color: var(--color-text-secondary, #8a7080); margin-right: .4rem; }
.products-toolbar select {
  appearance: none; padding: .45rem 2rem .45rem .9rem; border-radius: 999px;
  border: 1px solid rgba(240,170,200,.55); background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e0709a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right .8rem center no-repeat;
  font: inherit; color: inherit; cursor: pointer;
  transition: box-shadow .18s, transform .18s;
}
.products-toolbar select:hover { box-shadow: 0 2px 10px rgba(224,112,154,.25); transform: translateY(-1px); }
.toolbar-size { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: #8a7080; }
.toolbar-size input[type=range] { width: 110px; accent-color: #e0709a; cursor: pointer; }
/* 表示サイズのつまみ（cycle 400）：つまみを動かしたときだけ列の最小幅を上書き */
.products-grid.grid-cards.has-card-size { grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 100%), 1fr)); }
/* カートに追加の横の数量窓（cycle 400） */
.add-to-cart-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: .4rem; margin: 0 var(--space-md) var(--space-md); }
.add-to-cart-form .btn-add-to-cart.w-full { flex: 1 1 6.5rem; width: auto; min-width: 0; margin: 0; white-space: nowrap; padding-left: .5rem; padding-right: .5rem; }
.qty-stepper { display: inline-flex; align-items: stretch; border: 1.5px solid #ffc6dc; border-radius: 8px; background: #fff; overflow: hidden; }
.qty-stepper input { width: 2.4rem; border: 0; text-align: center; font: inherit; font-weight: 700; color: #5a4a55; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input:focus { outline: none; background: #fff6fa; }
.qty-arrows { display: flex; flex-direction: column; border-left: 1px solid #ffd6e6; }
.qty-btn { flex: 1; min-height: 0; padding: 0 .45rem; border: 0; background: #fff0f6; color: #e0709a; font-size: .6rem; line-height: 1; cursor: pointer; }
.qty-btn + .qty-btn { border-top: 1px solid #ffd6e6; }
.qty-btn:hover { background: #ffd9e8; }
.toolbar-recommended { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .92rem; }
.toolbar-recommended input { accent-color: #e0709a; width: 1.05rem; height: 1.05rem; cursor: pointer; }

/* ===== バナーヒーローゾーン（左:縦バナー / 中央:カルーセル / 右:閲覧履歴）===== */
.banner-hero {
  display: grid;
  grid-template-columns: 180px 1fr 210px;
  gap: var(--space-md, 1rem);
  align-items: stretch;
  margin-bottom: var(--space-lg, 1.5rem);
}
.banner-hero.no-side { grid-template-columns: 1fr 210px; }

/* 左：縦バナー列（多すぎる場合はカルーセル高さ内でスクロール） */
.banner-side {
  display: flex; flex-direction: column; gap: .6rem;
  max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(224,112,154,.4) transparent;
}
.banner-side img {
  width: 100%; display: block; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(220,150,190,.18);
  transition: transform .18s, box-shadow .18s;
}
.banner-side a:hover img { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(224,112,154,.32); }

/* 中央：自動カルーセル */
.banner-carousel {
  position: relative; overflow: hidden; border-radius: 16px;
  height: 340px;
  background: var(--bg-tertiary, #f8e8f0);
  box-shadow: 0 3px 14px rgba(220,150,190,.2);
}
.carousel-track { position: relative; width: 100%; height: 100%; }
.carousel-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.carousel-slide.is-active { opacity: 1; pointer-events: auto; }
.carousel-slide img, .carousel-slide a { display: block; width: 100%; height: 100%; }
.carousel-slide img { object-fit: cover; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.85); color: #e0709a;
  font-size: 1.5rem; line-height: 1; font-weight: 700;
  box-shadow: 0 2px 8px rgba(200,120,160,.3);
  transition: transform .15s, background .15s;
}
.carousel-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.1); }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
  display: flex; justify-content: center; gap: .45rem;
}
.carousel-dot {
  width: 10px; height: 10px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.7); box-shadow: 0 1px 4px rgba(160,90,130,.4);
  transition: transform .15s, background .15s;
  padding: 0;
}
.carousel-dot.is-active { background: #e0709a; transform: scale(1.25); }

/* 右：最近見た商品 */
.recent-viewed {
  background: rgba(255,255,255,.85); border: 1px solid rgba(240,170,200,.4);
  border-radius: 16px; padding: .9rem;
  max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(224,112,154,.4) transparent;
}
.recent-viewed-title {
  font-size: .95rem; color: #e0709a; margin-bottom: .6rem; font-weight: 700;
}
.recent-viewed-list { display: flex; flex-direction: column; gap: .5rem; }
.recent-item {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; color: inherit;
  padding: .35rem; border-radius: 10px;
  transition: background .15s, transform .15s;
}
.recent-item:hover { background: rgba(240,170,200,.15); transform: translateX(2px); }
.recent-item-thumb {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary, #f8e8f0); color: #e0709a; font-weight: 700;
}
.recent-item-body { display: flex; flex-direction: column; min-width: 0; }
.recent-item-name {
  font-size: .8rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.recent-item-price { font-size: .8rem; color: #e0709a; font-weight: 700; }

/* モバイル：1カラム積み（カルーセル→縦バナーは横帯→履歴は横帯） */
@media (max-width: 900px) {
  .banner-hero, .banner-hero.no-side { grid-template-columns: 1fr; }
  .banner-carousel { order: 1; height: auto; aspect-ratio: 16 / 6; }
  .banner-side {
    order: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    max-height: none;
  }
  .banner-side img { width: 150px; }
  .recent-viewed { order: 3; max-height: none; }
  .recent-viewed-list { flex-direction: row; overflow-x: auto; }
  .recent-item { flex: 0 0 170px; }
}

.product-detail-image { position: relative; }

/* cycle 382: ランキング・最近見た子のサムネを商品画像に */
.ranking-thumb, .recent-item-thumb { overflow: hidden; }
.ranking-thumb img, .recent-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-viewed--solo { margin: 0 0 1rem; }
/* cycle 382: 装飾やアニメーションの数px のはみ出しでスマホの画面が横にぶれないように（clip はスクロール領域を作らず sticky も壊さない） */
main.container { overflow-x: clip; }