/* =============================================================
   オンラインショップ（shop.html・cart.html・shop-demo-pay.html・shop-thanks.html）だけの見た目
   2026-10-26 Lucky Works

   ・共通の style.css は触らず、ここに足しています（ほかのページの見た目は変わりません）
   ・色は style.css の :root の変数（var(--…)）だけを使います
   ・影・グラデーション・2px を超える角丸は使いません
   ・メディアクエリは、対応する基本のスタイルより後ろ（このファイルの最後）に置いています
   ・直したら、4つのページの shop.css?v= の数字を上げてください（assets/ は7日おぼえるため）
   ============================================================= */

/* ---------- 共通 ---------- */
.page-shop .pagehead .txt{margin:0;}
.shop-demo{margin:0 0 1.6em;}
.shop-notice{margin:0 0 1.6em;}
.page-shop .fld select{font-size:1rem;}   /* iPhone で、選ぶときに画面が拡大されないよう 16px に */
.page-shop .sub .btn{align-self:center;}  /* gift.html と同じく、PC では内容幅・中央 */

/* ---------- 商品の一覧（shop.html） ---------- */
.shop-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(20px,3vw,40px);}
.shop-card{display:flex;flex-direction:column;min-width:0;}
.shop-ph{aspect-ratio:4/5;background:var(--paper-3);border:1px solid var(--line);overflow:hidden;margin:0 0 1.2em;}
.shop-ph img{display:block;width:100%;height:100%;object-fit:cover;}
.shop-ph.none{display:flex;align-items:center;justify-content:center;}
.shop-ph.none span{font-size:.8rem;letter-spacing:.14em;color:var(--ink-soft);}
.shop-name{font-family:var(--serif);font-weight:500;font-size:1.06rem;letter-spacing:.1em;line-height:1.8;margin:0;}
.shop-price{margin:.3em 0 0;font-size:1rem;letter-spacing:.06em;color:var(--ink);}
.shop-price span{margin-left:.2em;font-size:.76rem;color:var(--ink-soft);}
.shop-stock{margin:.3em 0 0;font-size:.78rem;letter-spacing:.14em;color:var(--sage);}
.shop-stock[data-stage="low"]{color:var(--accent);}
.shop-stock[data-stage="out"]{color:var(--ink-soft);}
.shop-sum{margin:.8em 0 0;font-size:.86rem;line-height:2;color:var(--ink-mid);}
.shop-more{margin:.8em 0 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.shop-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;padding:.6em 0;font-size:.8rem;letter-spacing:.14em;color:var(--ink);}
.shop-more summary::-webkit-details-marker{display:none;}
.shop-more summary::after{content:"＋";margin-left:auto;color:var(--ink-soft);}
.shop-more[open] summary::after{content:"−";}
.shop-more p{margin:0 0 .9em;font-size:.84rem;line-height:2;color:var(--ink-mid);}
.shop-pick{display:grid;grid-template-columns:minmax(0,1fr) 6.5em;gap:12px;margin-top:auto;padding-top:1.3em;}
.shop-pick.no-opt{grid-template-columns:6.5em;}
.shop-pick .fld{margin:0;}
.shop-pick .fld select{padding:11px 12px;}
.shop-add{width:100%;margin-top:14px;}

/* お仕立て券の区画 */
.shop-voucher{border-top:1px solid var(--line-soft);}
.shop-vlead{margin:0 0 1.2em;}
.shop-vform{display:grid;grid-template-columns:minmax(0,1fr) 6.5em auto;gap:12px;align-items:end;margin-top:clamp(28px,4vw,40px);}
.shop-vform .fld{margin:0;}
.shop-vform .fld select{padding:11px 12px;}

/* 画面の下に固定する「カートを見る」 */
.shop-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px var(--gut);background:var(--paper-2);border-top:1px solid var(--line);}
.shop-bar[hidden],.shop-bar .btn[hidden]{display:none;}
.shop-msg{margin:0;max-width:36em;text-align:center;font-size:.84rem;letter-spacing:.06em;line-height:1.8;color:var(--accent-deep);}
.shop-msg:empty{display:none;}
.shop-bar .btn{min-width:18em;}
.shop-bar b{font-family:var(--latin);font-weight:500;padding:0 .15em;}
body.has-shopbar{padding-bottom:var(--shop-bar-h,80px);}
body.menu-open .shop-bar{display:none;}
/* 帯が出ているあいだは、右下の「先頭へ戻る」（style.css の .totop。nav.js が差し込みます）を帯の上に逃がします
   （「気になる」の帯の body.has-cart .totop と同じ考え方）。帯の高さは知らせの文で変わるので、
   shop.js が測って --shop-bar-h に入れています */
body.has-shopbar .totop{bottom:calc(var(--shop-bar-h,100px) + 12px + env(safe-area-inset-bottom,0px));}

/* ---------- カート（cart.html） ---------- */
.cart-lines{margin-top:1.2em;border-top:1px solid var(--line-soft);}
.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto 7.5em auto;gap:8px 18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line-soft);}
.cl-main{min-width:0;}
.cl-name{margin:0;font-family:var(--serif);font-size:.98rem;letter-spacing:.08em;line-height:1.8;}
.cl-opt,.cl-unit{margin:0;font-size:.8rem;line-height:1.9;color:var(--ink-mid);}
.cl-qty{display:flex;align-items:center;gap:.6em;margin:0;}
.cl-qty label{font-size:.75rem;letter-spacing:.14em;color:var(--ink-soft);}
.cl-qty select{font-family:inherit;font-size:1rem;padding:9px 10px;min-height:44px;
  border:1px solid var(--line);border-radius:2px;background:var(--paper-2);color:var(--ink);}
.cl-qty select:focus{outline:none;border-color:var(--accent);}
.cl-sub{margin:0;text-align:right;white-space:nowrap;font-family:var(--latin);font-size:1rem;letter-spacing:.04em;}
.cl-del{min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:2px;background:none;cursor:pointer;
  font-family:inherit;font-size:.78rem;letter-spacing:.12em;color:var(--ink-mid);}
.cl-del:hover{border-color:var(--accent);color:var(--accent);}
.cl-del:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.cl-warn{grid-column:1/-1;margin:0;}
.cart-line.bad .cl-name,.cart-line.bad .cl-sub{color:var(--ink-soft);}
.cart-more{margin:1.2em 0 0;}
.cart-more a,.cart-link{border-bottom:1px solid var(--line);}
.cart-more a:hover,.cart-link:hover{border-color:var(--accent);color:var(--accent);}
.cart-shipnote{margin:1em 0 0;}
.cart-confirm{margin:1em 0 1.2em;}
.cart-next{margin-top:1.6em;}
.cart-konbini{text-align:center;}
.cart-empty{padding:clamp(24px,5vw,56px) 0;text-align:center;}
.cart-empty .txt{margin:0 auto 1.4em;}

/* 同意欄（gift.html の .gift-agree と同じ見た目） */
.shop-agree{display:flex;align-items:flex-start;gap:.8em;cursor:pointer;font-size:.88rem;line-height:1.9;letter-spacing:.05em;color:var(--ink);}
.shop-agree input{flex:none;width:22px;height:22px;margin:.3em 0 0;accent-color:var(--accent);cursor:pointer;}
.shop-agree input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.shop-agree a{border-bottom:1px solid var(--line);}
.shop-agree a:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- 練習用の支払い画面・完了画面 ---------- */
.shop-qname small{display:block;font-size:.92em;color:var(--ink-soft);}
.shop-demo-note{margin:1em 0 0;}
.shop-method-note{margin-top:1.4em;}
.shop-back{border-bottom:1px solid var(--line);}
.shop-thanks-txt{margin-top:1.6em;}
.shop-thanks-sub{align-items:flex-start;}
.page-shop .shop-thanks-sub .btn{align-self:flex-start;}

/* ---------- メディアクエリ（基本のスタイルより後ろに置く） ---------- */
@media(max-width:900px){
  .shop-list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px){
  .shop-list{grid-template-columns:minmax(0,1fr);}
  .shop-vform{grid-template-columns:minmax(0,1fr) 6.5em;}
  .shop-vform .btn{grid-column:1/-1;}
  .shop-bar .btn{width:100%;min-width:0;}
  /* カートの1行：上に名前、下に「数・小計・削除」 */
  .cart-line{grid-template-columns:auto minmax(0,1fr) auto;}
  .cl-main{grid-column:1/-1;}
  .page-shop .sub .btn{align-self:stretch;}   /* gift.html と同じく、スマホでは全幅 */
  .page-shop .shop-thanks-sub .btn{align-self:stretch;}
}

/* 近日公開の絵（2026-11-08。絵は Codex が作成、元の PNG は使わず webp 1200×800） */
.shop-soon-art{margin:clamp(20px,3vw,32px) 0;}
.shop-soon-art img{display:block;width:100%;height:auto;border-radius:4px;}

/* 完了の画面の「この情報でアカウントを作成する」（2026-11-08。中の部品の見た目は account.css の acc-*） */
.acc-make{margin:clamp(28px,4vw,40px) 0;padding:clamp(20px,3vw,28px);border:1px solid var(--line-soft);background:rgba(255,255,255,.45);}
.acc-make .h-sm{margin:0 0 .8em;}
.acc-make .acc-form{margin:1.2em 0 .6em;}