/* Amazon スマイルセール 春 — 明るめスプリングテーマ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
:root{
  --bg-1: #ffffff; /* pure white for brightest base */
  --bg-2: #f7fff9; /* very light mint */
  --accent-1: #2ee78a; /* brighter emerald */
  --accent-2: #0ecff0; /* vivid sky */
  --accent-3: #ff5fa8; /* vivid cherry */
  --text: #052024; /* slightly deeper for contrast */
  --muted: #6b7280;
  --card: #ffffff;
}
html,body{height:100%;}
body{
  font-family: 'Noto Sans JP',sans-serif;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg-2),var(--bg-1));
  -webkit-font-smoothing:antialiased;
}
/* Header */
.spring-header{background:linear-gradient(90deg,rgba(255,255,255,0.9),rgba(247,255,249,0.95));border-bottom:1px solid rgba(34,197,94,0.06);backdrop-filter: blur(8px);}
.spring-header h1{font-size:1.4rem;letter-spacing:-0.01em;color:var(--text);font-weight:900}
.spring-header .line-green-btn{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));box-shadow:0 10px 30px rgba(14,197,180,0.08)}

/* Hero */
.spring-hero{padding:4rem 1rem;background-image:radial-gradient(700px 200px at 50% -80px, rgba(255,255,255,0.98), transparent);}
.spring-hero h2{font-weight:900;color:transparent;background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));-webkit-background-clip:text;background-clip:text;text-shadow:0 8px 40px rgba(46,231,138,0.06)}
.spring-hero p{color:var(--muted);font-weight:700}

/* Cards */
.card-hover{background:var(--card);border:1px solid rgba(14,197,180,0.06);box-shadow:0 12px 36px rgba(14,197,180,0.06);transition:transform .28s ease,box-shadow .28s ease}
.card-hover:hover{transform:translateY(-10px);box-shadow:0 30px 80px rgba(14,197,180,0.10)}
.card-hover .fallback-icon i{color:var(--muted)}

/* Badges */
.badge-spring{background:linear-gradient(90deg,var(--accent-2),var(--accent-3));color:#fff;font-weight:800;padding:.28rem .6rem;border-radius:999px;font-size:.78rem;box-shadow:0 8px 28px rgba(255,95,168,0.08)}

/* Buttons */
.btn-primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#fff;padding:.6rem 1rem;border-radius:12px;border:0;box-shadow:0 14px 40px rgba(14,197,180,0.10)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px)}

/* Footer */
.spring-footer{color:var(--muted);background:linear-gradient(180deg,transparent,rgba(247,255,249,0.85));}

/* Responsive tweaks */
@media (max-width:768px){.spring-hero{padding:2.4rem 1rem}.spring-header h1{font-size:1.05rem}}

/* サムネイルのトーン合わせ（セピア + 明るさ調整） */
.product-thumb{
  filter: sepia(0.12) brightness(0.96) saturate(1.04) contrast(1.02);
  transition: filter .36s ease, transform .36s ease;
  will-change: filter, transform;
}
.group:hover .product-thumb,
.product-thumb:hover{
  filter: sepia(0) brightness(1.08) saturate(1.12) contrast(1.03);
}

/* 画像の角をやわらげたい場合は下記を有効化してください */
.product-thumb.rounded{border-radius:8px;overflow:hidden}

/* 角丸をデフォルトで適用（サムネイル） */
.product-thumb{border-radius:12px;display:block}

/* サムネイルを囲む親（.group）にも角丸を付与して背景がはみ出さないようにする */
.card-hover .group{border-radius:12px;overflow:hidden}
.card-hover .fallback-icon{border-radius:12px}

/* items.name の色を濃くして可読性向上 */
.card-hover h4{color:#ffffff !important;}