body.ProductSuggestions, body.ProductSuggestions button { font-family: Montserrat, sans-serif; }
body.ProductSuggestions .product-suggestions-page { max-width:var(--content-max-wide); margin:0 auto; padding:12px 0 56px; color:#25153c; }
.product-suggestions-page *, .product-suggestions-page *::before { box-sizing:border-box; }
.product-suggestions-page [hidden] { display:none!important; }
.psg-hero { display:flex; align-items:center; gap:20px; padding:29px 30px; border:1px solid #eaddf3; border-radius:22px; background:linear-gradient(120deg,#faf5ff,#fff 52%,#fff6eb); box-shadow:0 14px 40px #4d248a0c; }
.psg-hero-icon { flex:0 0 58px; width:58px; height:58px; display:grid; place-items:center; border-radius:18px; color:#fff; background:linear-gradient(135deg,#9333ea,#f97316); box-shadow:0 10px 22px #9333ea40; }
.psg-hero-icon svg { width:28px; height:28px; }
.psg-hero-copy { flex:1; min-width:0; }
.psg-eyebrow { color:#8a5ab1; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800; }
.psg-hero h1 { margin:5px 0 0; color:#25153c; font-size:32px; letter-spacing:-.03em; }
.psg-hero p { margin:7px 0 0; color:#72588f; font-size:14px; line-height:1.5; }
.psg-secondary, .psg-primary, .psg-save { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:40px; border-radius:10px; text-decoration:none; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; }
.psg-secondary, .psg-save { padding:9px 13px; border:1px solid #e3d3ef; background:#fff; color:#68398e; }
.psg-primary { padding:10px 16px; border:0; color:#fff!important; background:linear-gradient(90deg,#9333ea,#f97316); }
.psg-secondary:hover, .psg-save:hover { background:#faf5ff; border-color:#c99ee2; }
.psg-secondary svg, .psg-save svg { width:16px; height:16px; }
.psg-panel { margin-top:23px; }
.psg-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:5px; width:fit-content; max-width:100%; border:1px solid #eaddf3; border-radius:12px; background:#f8f3fa; }
.psg-tabs button { display:inline-flex; align-items:center; gap:7px; padding:11px 15px; border:0; border-radius:9px; background:transparent; color:#765c89; font-size:12px; font-weight:750; cursor:pointer; }
.psg-tabs button[aria-selected="true"] { color:#693496; background:#fff; box-shadow:0 3px 12px #42235a1c; }
.psg-tabs svg { width:16px; height:16px; }
.psg-toolbar { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:25px 2px 14px; }
.psg-toolbar h2 { margin:0; font-size:24px; color:#301a4a; letter-spacing:-.03em; }
.psg-toolbar p { margin:6px 0 0; color:#806992; font-size:13px; }
.psg-count { padding:7px 11px; border-radius:99px; background:#f4eafa; color:#71449a; font-size:11px; font-weight:800; white-space:nowrap; }
.psg-notice { margin-bottom:15px; padding:12px 15px; border:1px solid #e6dbef; border-radius:11px; background:#fbf7ff; color:#70528a; font-size:12px; line-height:1.5; }
.psg-loading, .psg-empty { padding:60px 20px; border:1px solid #e9dff1; border-radius:18px; background:#fff; text-align:center; color:#745a90; }
.psg-loading i { margin-right:8px; color:#9233d5; font-size:22px; }
.psg-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.psg-card { min-width:0; overflow:hidden; border:1px solid #ece1f2; border-radius:16px; background:#fff; box-shadow:0 8px 25px #3418520a; transition:transform .18s ease,box-shadow .18s ease; }
.psg-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px #3418521c; }
.psg-image { display:grid; place-items:center; width:100%; height:210px; overflow:hidden; background:#f4eef9; color:#a27db7; }
.psg-image img { width:100%; height:100%; object-fit:cover; }
.psg-image svg { width:38px; height:38px; }
.psg-card-body { padding:16px; }
.psg-card-meta { color:#865ca5; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.psg-card-title { display:-webkit-box; min-height:42px; margin:7px 0; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#301a4a; text-decoration:none; font-size:14px; font-weight:800; line-height:1.5; }
.psg-card-title:hover { color:#8d3dcd; }
.psg-trend { margin:5px 0; color:#806992; font-size:11px; }
.psg-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:16px 0; }
.psg-stats span { padding:10px; min-width:0; border:1px solid #f0e8f4; border-radius:9px; background:#fbf9fc; color:#826b96; font-size:10px; }
.psg-stats strong { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; color:#332048; font-size:13px; white-space:nowrap; }
.psg-actions { display:flex; gap:8px; }
.psg-actions .psg-primary { flex:1; }
.psg-save[aria-pressed="true"] { border-color:#d8b9ec; color:#7924af; background:#faf5ff; }
.psg-save:disabled { opacity:.55; cursor:wait; }
.psg-empty svg { width:40px; height:40px; color:#9439d3; }
.psg-empty h3 { margin:12px 0 6px; color:#301a4a; font-size:19px; }
.psg-empty p { margin:0 auto 16px; font-size:13px; }
@media(max-width:920px) { .psg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .psg-hero { flex-wrap:wrap; padding:22px; gap:13px; } .psg-hero-icon { width:46px; height:46px; flex-basis:46px; } .psg-hero h1 { font-size:25px; } .psg-hero .psg-secondary { width:100%; } .psg-tabs { width:100%; } .psg-tabs button { flex:1; justify-content:center; padding:10px 6px; font-size:11px; } .psg-grid { grid-template-columns:1fr; } .psg-toolbar h2 { font-size:21px; } .psg-image { height:230px; } }
@media(prefers-reduced-motion:reduce) { .psg-card { transition:none; } .psg-card:hover { transform:none; } }

@media(max-width:1000px) { .psg-hero { flex-wrap:wrap; } .psg-hero-copy { flex-basis:calc(100% - 85px); } }
