/* 2026-09-20 GPT 指示書 §18: Google（Agent Search）で見つかった商品を横スライドで出す（google-mall-results.mjs） */
.google-mall-results{margin:20px 0 8px;padding:16px 0 12px;border:1px solid var(--line,#e9e5f5);border-radius:18px;background:#fff}
.google-mall-results.hidden{display:none}
.google-mall-results-heading{padding:0 16px}
.google-mall-results-heading h2{margin:2px 0 6px;font-size:18px;line-height:1.35;color:var(--ink,#17172b)}
.google-mall-results-note{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--muted,#6d6b80)}
.google-mall-slider{position:relative}
.google-mall-track{display:flex;gap:10px;padding:4px 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.google-mall-track::-webkit-scrollbar{display:none}
.google-mall-card{flex:0 0 46%;max-width:200px;min-width:150px;scroll-snap-align:start;border:1px solid var(--line,#e9e5f5);border-radius:14px;overflow:hidden;background:#fff}
@media (min-width:640px){.google-mall-card{flex-basis:200px}}
.google-mall-card{display:flex;flex-direction:column}
.google-mall-card-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.google-mall-card-save{padding:0 10px 10px}
.google-mall-card-save .continuous-search-card-compact{display:block;margin:0;padding:0;border:0;background:transparent;box-shadow:none;min-width:0}
.google-mall-card-save .continuous-search-actions{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.google-mall-card-save .continuous-search-button{width:100%;font-size:12px;white-space:normal}
.google-mall-card-save .watch-quick-join{min-width:0;width:100%}
.google-mall-card-save .watch-quick-join input{min-width:0;max-width:100%}
.google-mall-card-image{aspect-ratio:1/1;background:var(--soft,#f4f0ff);display:flex;align-items:center;justify-content:center;overflow:hidden}
.google-mall-card-image img{width:100%;height:100%;object-fit:cover}
.google-mall-card-image-fallback{font-size:13px;font-weight:700;color:var(--violet,#7357ff)}
.google-mall-card-body{display:flex;flex-direction:column;gap:3px;padding:10px 10px 12px;min-width:0}
.google-mall-card-mall{align-self:flex-start;padding:2px 8px;border-radius:999px;background:var(--soft,#f4f0ff);color:var(--violet,#7357ff);font-size:11px;font-weight:700}
.google-mall-card-title{font-size:13px;line-height:1.4;color:var(--ink,#17172b);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.google-mall-card-price{margin-top:2px;font-size:15px;font-weight:800;color:var(--ink,#17172b)}
.google-mall-card-price-note{font-size:10px;color:var(--muted,#6d6b80)}
/* 2026-09-21: 遷移先が商品ページでないカードは「一覧ページ」と分かるようにする（件数は減らさない） */
.google-mall-card-kind{align-self:flex-start;margin-top:4px;padding:1px 7px;border-radius:999px;border:1px solid var(--line,#e9e5f5);background:#fff;color:var(--muted,#6d6b80);font-size:10px;font-weight:700}
.google-mall-card-open{margin-top:auto;padding-top:6px;font-size:12px;font-weight:700;color:var(--violet,#7357ff)}
.google-mall-arrow{position:absolute;top:38%;z-index:2;width:36px;height:36px;border:1px solid var(--line,#e9e5f5);border-radius:50%;background:#fff;color:var(--ink,#17172b);font-size:22px;line-height:1;box-shadow:0 4px 14px rgba(23,23,43,.15);cursor:pointer;display:none}
.google-mall-arrow:disabled{opacity:.35;cursor:default}
.google-mall-arrow-prev{left:4px}
.google-mall-arrow-next{right:4px}
@media (hover:hover) and (pointer:fine){.google-mall-arrow{display:block}}

/* 2026-09-21 大隆さん指示: Google 枠のカードを「ホシルからの提案」と同じ幅に揃え、
   「商品を見る →」と「ホシっとく」の間の空きを詰める（リンクを伸ばさず、内容の直下にボタンを置く）。 */
/* 2026-09-21 大隆さん指示: ホシルバズと同じく、スマホ1画面に2商品。 */
.google-mall-track>.google-mall-card{flex:0 0 min(210px,46vw);width:min(210px,46vw);max-width:none;min-width:0}
@media (min-width:640px){.google-mall-track>.google-mall-card{flex-basis:240px;width:240px}}
.google-mall-card>.google-mall-card-link{flex:0 0 auto}
.google-mall-card>.google-mall-card-save{padding:2px 10px 10px}
.google-mall-card .google-mall-card-open{margin-bottom:2px}

/* 2026-09-21 大隆さん報告「Google 提示の画像が見切れる」: object-fit:cover は枠に合わせて左右を
   切り落とすため、横長のバナー画像だと商品名や文字が切れていた。提案カード（.product-image）と同じ
   contain に揃え、縦横比も提案カードに合わせる。画像は切らずに全体を収める。 */
.google-mall-card>.google-mall-card-link .google-mall-card-image{aspect-ratio:1.3/1;background:#fafafa}
.google-mall-card>.google-mall-card-link .google-mall-card-image img{object-fit:contain}