/* =========================================================
   手づくり村 鯉艸郷 — お買い物（/shop・商品の詳細）発注書 S22
   社長指示（2026-09-28）「販売を押したら、もっと EC サイトみたいに」。参考画面（石川商店）の構成
   （生成り地・角丸の写真カード 2 列・写真の上の小さな札・横スライダー・絞り込みのチップ）を、
   公開サイトのデザイン（生成り・藍・Zen Maru Gothic・紙のカード・白フチ写真）で組んだもの。
   トークン・書体・ボタンは style.css、下層ページの頭・パンくずは pages.css のもの。本文 16px 以上、押せる所は 44px 以上。
   ========================================================= */

:root{
  --c-leaf-deep:#007A38; /* 白地の小さな文字・白い文字の地に使う濃い葉の色（--c-leaf では細い文字のコントラストが足りない） */
  --shop-line:rgba(62,68,120,.18);
}

/* ---------- LINE の中（LIFF・LINE の内蔵ブラウザ）：下の固定バーを消し、検索とカートの帯を一番上に固定 ---------- */
html.in-line .sp-bar{ display:none; }
html.in-line body{ padding-bottom:env(safe-area-inset-bottom, 0px); }
html.in-line .sp-header{ position:relative; }
html.in-line .shop-bar{ top:0; }
html.in-line .issue-toggle--float{ bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
html.in-line .phead--shop .phead__en,
html.in-line .phead--shop .phead__lead,
html.in-line .phead--shop .phead__squiggle{ display:none; }

/* ---------- 下層ページの頭（お買い物は低めに） ---------- */
.phead--shop{ padding-bottom:clamp(12px, 2vw, 24px); }
.phead--shop .phead__en{ margin-top:6px; font-size:clamp(30px, 4vw, 50px); }
.phead--shop .phead__title{ font-size:calc(clamp(21.5px, 2.52vw, 30.5px) * var(--fs)); }
.phead--shop .phead__squiggle{ margin-top:6px; }
.phead--shop .phead__lead{ margin-top:8px; }
.phead--item .phead__title{ font-size:calc(clamp(20px, 2.34vw, 29px) * var(--fs)); letter-spacing:.06em; }
@media (max-width:767px){
  .phead--shop .phead__ill{ top:24px; width:60px; }
}

/* ---------- 検索とカート（画面の上に固定） ---------- */
.shop{ position:relative; display:block; padding-bottom:clamp(36px, 5vw, 64px); }
.shop__main{ padding-inline:var(--gutter); }
.shop__main.wrap{ max-width:calc(1120px + var(--gutter) * 2); }
.shop--item{ padding-bottom:0; }
.shop-bar{
  position:sticky; top:var(--header-h); z-index:90;
  padding:10px var(--gutter);
  background:rgba(246,242,232,.95);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(62,68,120,.08);
}
.shop-bar__inner{ display:flex; align-items:center; gap:10px; max-width:1120px; margin:0 auto; }
/* PC：右上に固定した「文字・言語」のまとまり（style.css の .prefs-pc）と重ならないよう、右を空ける（発注書 S24） */
@media (min-width:1080px){ .shop-bar{ padding-right:232px; } }
.shop-search{ position:relative; flex:1; min-width:0; }
.shop-search__icon{ position:absolute; left:15px; top:50%; width:20px; height:20px; transform:translateY(-50%); color:var(--c-ink-sub); pointer-events:none; }
.shop-search__input{
  width:100%; height:48px; margin:0; padding:0 14px 0 44px;
  border:2px solid var(--shop-line); border-radius:999px; background:#fff;
  font:inherit; font-size:max(16px, calc(16px * var(--fs))); letter-spacing:.02em; color:var(--c-ink);
  -webkit-appearance:none; appearance:none;
}
.shop-search__input::placeholder{ color:#8C8591; }
.shop-search__input:focus{ outline:none; border-color:var(--c-ai); box-shadow:0 0 0 3px rgba(117,124,186,.28); }
.shop-search__input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%236B6470' stroke-width='2.4' stroke-linecap='round' d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/18px no-repeat; cursor:pointer; }
.shop-cartbtn{
  position:relative; flex:none;
  display:inline-flex; align-items:center; gap:6px;
  height:48px; padding:0 16px 0 13px; border-radius:999px;
  background:var(--c-ai); color:#fff; font-weight:700; font-size:calc(14.5px * var(--fs)); letter-spacing:.04em; text-decoration:none;
  box-shadow:var(--shadow-btn);
}
.shop-cartbtn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(43,47,87,.25); }
.shop-cartbtn .i{ width:24px; height:24px; }
.shop-cartbtn__count{
  position:absolute; top:-7px; right:-5px;
  min-width:24px; height:24px; padding:0 6px; border-radius:999px;
  background:var(--c-ayame); color:#fff;
  font-family:var(--ff-en); font-size:calc(13px * var(--fs)); font-weight:700; line-height:24px; text-align:center;
  box-shadow:0 0 0 2px #fff;
}
.shop-cartbtn__count[hidden]{ display:none; }

/* ---------- 大分類のチップ ---------- */
.shop-groups{ margin-top:14px; }
.shop-groups__list{
  display:flex; gap:8px; margin:0 calc(var(--gutter) * -1); padding:2px var(--gutter) 8px;
  list-style:none; overflow-x:auto; scrollbar-width:none;
}
.shop-groups__list::-webkit-scrollbar{ display:none; }
.shop-group{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:6px 16px; border-radius:999px;
  background:#fff; color:var(--c-ink); font-weight:700; font-size:calc(14px * var(--fs)); letter-spacing:.06em; text-decoration:none; white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(62,68,120,.16);
  transition:background .2s, color .2s;
}
.shop-group__n{ font-family:var(--ff-en); font-size:calc(12.5px * var(--fs)); font-weight:500; color:var(--c-ink-sub); letter-spacing:0; }
.shop-group[aria-current="true"]{ background:var(--c-ai); color:#fff; box-shadow:none; }
.shop-group[aria-current="true"] .shop-group__n{ color:rgba(255,255,255,.82); }

/* ---------- 花の絞り込み ---------- */
.shop-flower{ margin-top:8px; }
.shop-flower[hidden]{ display:none; }
.shop-fpills{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.shop-fpill{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:6px;
  min-height:58px; padding:6px 10px 6px 14px;
  border:2px solid var(--shop-line); border-radius:16px; background:#fff; color:var(--c-ink);
  text-align:left; cursor:pointer;
}
.shop-fpill__label{ grid-column:1; font-size:calc(12.5px * var(--fs)); font-weight:700; line-height:1.4; color:var(--c-ink-sub); letter-spacing:.06em; }
.shop-fpill__value{ grid-column:1; min-width:0; overflow:hidden; font-size:var(--t-body); font-weight:700; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.shop-fpill .i{ grid-column:2; grid-row:1 / span 2; width:20px; height:20px; color:var(--c-ai); }
.shop-fpill.is-set{ border-color:var(--c-ai); background:var(--c-fuji-pale); }
.shop-fpill.is-set .shop-fpill__value{ color:var(--c-ai); }

/* 絞り込みの中身（スマホ：下から出るシート／PC・JS が無いとき：一覧の上にそのまま） */
.shop-filter{ margin-top:12px; border-radius:var(--radius-m); background:var(--c-paper); box-shadow:var(--shadow-card); }
.shop-filter__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 8px 20px; }
.shop-filter__title{ display:flex; align-items:center; gap:8px; margin:0; font-size:calc(17px * var(--fs)); color:var(--c-ai); letter-spacing:.06em; }
.shop-filter__title .i{ width:22px; height:22px; }
.shop-filter__close{ display:grid; place-items:center; width:44px; height:44px; flex:none; border:0; border-radius:50%; background:var(--c-base); color:var(--c-ink); cursor:pointer; }
.shop-filter__close .i{ width:22px; height:22px; }
.shop-filter__body{ padding:0 20px 8px; }
.shop-fset{ margin:0; padding:12px 0 14px; border:0; border-top:1px dashed var(--rule); min-width:0; }
.shop-fset__legend{ float:left; width:100%; margin:0 0 10px; padding:0; font-size:var(--t-body); font-weight:700; color:var(--c-ai); letter-spacing:.06em; }
.shop-fchips{ clear:both; display:flex; flex-wrap:wrap; gap:8px; }
.shop-fchip{ position:relative; display:inline-flex; }
.shop-fchip input{ position:absolute; top:0; left:0; width:1px; height:1px; margin:0; opacity:0; }
.shop-fchip__box{
  display:inline-flex; align-items:center; gap:7px;
  min-height:46px; padding:8px 16px; border:2px solid var(--shop-line); border-radius:999px;
  background:#fff; color:var(--c-ink); font-size:var(--t-body); font-weight:700; line-height:1.3; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.shop-fchip__n{ font-family:var(--ff-en); font-size:calc(13px * var(--fs)); font-weight:500; color:var(--c-ink-sub); }
.shop-fchip input:checked + .shop-fchip__box{ border-color:var(--c-ai); background:var(--c-ai); color:#fff; }
.shop-fchip input:checked + .shop-fchip__box .shop-fchip__n{ color:rgba(255,255,255,.82); }
.shop-fchip input:checked + .shop-fchip__box .cdot{ box-shadow:0 0 0 2px #fff; }
.shop-fchip input:focus-visible + .shop-fchip__box{ outline:3px solid var(--c-ayame); outline-offset:2px; }
.shop-filter__foot{ display:flex; align-items:center; gap:10px; padding:10px 20px 14px; border-top:1px solid var(--rule); }
.shop-filter__clear{ display:inline-flex; align-items:center; min-height:48px; padding:0 8px; color:var(--c-ai); font-size:var(--t-body); font-weight:700; }
.shop-filter__apply{ flex:1; justify-content:center; min-height:52px; padding:12px 20px; font-size:var(--t-body); }
.shop-scrim{ position:fixed; inset:0; z-index:200; background:rgba(42,37,48,.45); }
.shop-scrim[hidden]{ display:none; }

/* JS が無いとき：シートにせず、そのまま出す（ボタンは不要） */
html:not(.js) .shop-fpills,
html:not(.js) .shop-filter__close{ display:none; }

/* スマホ・タブレット（JS あり）：下から出るシート */
@media (max-width:1079px){
  .js .shop-filter{
    position:fixed; left:0; right:0; bottom:0; z-index:210;
    display:flex; flex-direction:column;
    max-height:min(86vh, 760px); margin:0;
    border-radius:26px 26px 0 0; box-shadow:0 -12px 40px rgba(43,47,87,.28);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    transform:translateY(105%); visibility:hidden;
    transition:transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s linear .34s;
  }
  .js .shop-filter.is-open{ transform:none; visibility:visible; transition:transform .34s cubic-bezier(.2,.8,.2,1); }
  .js .shop-filter__head{ position:relative; padding-top:20px; border-bottom:1px solid var(--rule); }
  .js .shop-filter__head::before{ content:""; position:absolute; left:50%; top:8px; width:44px; height:5px; margin-left:-22px; border-radius:999px; background:rgba(42,37,48,.18); }
  .js .shop-filter__body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .js .shop-fset:first-child{ border-top:0; }
  html.shop-sheet-open{ overflow:hidden; }
}
@media (prefers-reduced-motion:reduce){
  .js .shop-filter, .js .shop-filter.is-open{ transition:none; }
}

/* PC：一覧の上に 4 つの項目を並べる（その場で絞れるので「N 件を見る」は出さない） */
@media (min-width:1080px){
  .shop-fpills{ display:none; }
  .shop-filter__close{ display:none; }
  .shop-filter__head{ padding:14px 24px 4px; }
  .shop-filter__body{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 36px; padding:0 24px 6px; }
  .shop-fset:nth-child(-n+2){ border-top:0; }
  .shop-filter__foot{ justify-content:flex-end; padding:6px 20px 10px; border-top:0; }
  .js .shop-filter__apply{ display:none; }
  .shop-scrim{ display:none !important; }
}

/* えらんでいる条件 */
.shop-active{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
.shop-active[hidden]{ display:none; }
.shop-active__chip{
  display:inline-flex; align-items:center; gap:4px;
  min-height:44px; padding:6px 12px 6px 16px; border-radius:999px;
  background:var(--c-fuji-pale); color:var(--c-ai); font-size:calc(14.5px * var(--fs)); font-weight:700; text-decoration:none;
}
.shop-active__chip .i{ width:18px; height:18px; }

/* 件数と並び替え */
.shop-result{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 12px; }
.shop-result__count{ margin:0; font-size:var(--t-body); font-weight:700; letter-spacing:.04em; }
.shop-sort{ display:flex; align-items:center; gap:8px; margin:0; }
.shop-sort__label{ font-size:calc(14px * var(--fs)); font-weight:700; color:var(--c-ink-sub); white-space:nowrap; }
.shop-sort__select{
  height:46px; margin:0; padding:0 38px 0 16px;
  border:2px solid var(--shop-line); border-radius:999px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%233E4478' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 9.5 12 15.5l6-6'/%3E%3C/svg%3E") right 12px center/18px no-repeat;
  font:inherit; font-size:max(16px, calc(16px * var(--fs))); font-weight:700; color:var(--c-ink); cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.shop-sort__select:focus-visible{ outline:3px solid var(--c-ayame); outline-offset:2px; }
.shop-result__go{ min-height:44px; padding:0 16px; border:0; border-radius:999px; background:var(--c-ai); color:#fff; font-weight:700; }
@media (max-width:420px){
  .shop-sort__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
}

/* ---------- 人気ランキング・おすすめ（横スライダー） ---------- */
.shop-discover[hidden]{ display:none; }
.shop-slider{ margin:22px 0 6px; }
.shop-slider__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.shop-slider__en{ margin:0; font-family:var(--ff-en); font-style:italic; font-size:22px; font-weight:500; line-height:1.1; color:var(--c-fuji); }
.shop-slider__en i{ color:var(--c-ayame); }
.shop-slider__title{ margin:0; font-size:calc(18px * var(--fs)); font-weight:700; color:var(--c-ai); letter-spacing:.08em; line-height:1.5; }
.shop-slider__note{ margin:0; font-size:calc(14px * var(--fs)); color:var(--c-ink-sub); }
.shop-slider__nav{ display:none; gap:8px; }
.shop-slider__btn{ display:grid; place-items:center; width:44px; height:44px; border:2px solid var(--c-ai); border-radius:50%; background:#fff; color:var(--c-ai); cursor:pointer; }
.shop-slider__btn:disabled{ border-color:var(--shop-line); color:rgba(62,68,120,.3); cursor:default; }
.shop-slider__btn[hidden]{ display:none; }
.shop-slider__btn .i{ width:22px; height:22px; }
.shop-slider__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:43%; gap:12px;
  margin:0 calc(var(--gutter) * -1); padding:4px var(--gutter) 14px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.shop-slider__track::-webkit-scrollbar{ display:none; }
.shop-slider__track:focus-visible{ outline:3px solid var(--c-ayame); outline-offset:-3px; border-radius:12px; }
.shop-slider__track > .scard{ scroll-snap-align:start; }
@media (min-width:768px){ .shop-slider__track{ grid-auto-columns:30%; } }
@media (min-width:1080px){
  .shop-slider__nav{ display:flex; }
  .shop-slider__track{ grid-auto-columns:calc((100% - 36px) / 4); margin:0; padding:4px 2px 14px; scroll-padding-inline:0; }
}
.shop-items-title{ margin:26px 0 0; font-size:calc(18px * var(--fs)); font-weight:700; color:var(--c-ai); letter-spacing:.08em; }

/* ---------- 商品カード（発注書 S24：紙のカード 1 枚。押すとポップアップ） ----------
   紙の面＋薄い線 1px・角丸・影なし。中に正方形の写真（内側に少し余白）・札・品種と系統の小さなラベル（色の点）・商品名（2 行まで）・価格（税込）。
   説明・タグはカードに出さない（ポップアップ・詳細ページで）。
   発注書 S25：カードは <article>。商品名のリンク（.scard__link）の ::after をカード全体に広げ（どこを押してもポップアップ）、
   下端の数の − 数 ＋（.scard__pick。丸いピル・藍藤の線・影なし）はその上に重ねる（z-index）。<a> の中にボタンは入れない */
.shop-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:768px){ .shop-list{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; } }
@media (min-width:1280px){ .shop-list{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.scard[hidden]{ display:none; }
.js .scard.is-paged{ display:none; }

.scard{
  position:relative; display:flex; flex-direction:column; min-width:0;
  padding:6px; border:1px solid rgba(62,68,120,.15); border-radius:18px;
  background:var(--c-paper); color:var(--c-ink);
  transition:border-color .15s, background-color .15s;
}
.scard:hover{ border-color:rgba(62,68,120,.36); }
.scard:has(.scard__link:active){ background:#FAF6EC; }
.scard.is-picked{ border-color:var(--c-fuji); }
/* 商品名のリンクをカード全体に広げる（stretched link）。焦点の枠はカードの形に */
.scard__link{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.scard__link::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:17px; }
.scard__link:focus-visible{ outline:none; }
.scard__link:focus-visible::after{ outline:3px solid var(--c-ayame); outline-offset:2px; }
.scard__photo{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:13px; background:var(--c-base-deep); }
.scard__photo .ph{ position:absolute; inset:0; aspect-ratio:auto; height:100%; }
.scard__photo .ph__img{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.scard:hover .ph__img{ transform:scale(1.03); }
.scard.is-soldout .scard__photo .ph{ filter:grayscale(.6); opacity:.72; }
.scard__badges{ position:absolute; top:6px; left:6px; right:6px; z-index:2; display:flex; flex-wrap:wrap; gap:4px; pointer-events:none; }
.scard__rank + .scard__badges{ left:42px; }
.sbadge{
  display:inline-flex; align-items:center;
  padding:0 8px; border-radius:999px;
  background:rgba(255,253,248,.94); color:var(--c-ai);
  font-size:calc(11.5px * var(--fs)); font-weight:700; line-height:1.8; letter-spacing:.03em; white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.sbadge--none{ background:var(--c-ink); color:#fff; }
.sbadge--last{ background:var(--c-ayame); color:#fff; }
.sbadge--ship{ background:var(--c-leaf-deep); color:#fff; }
.sbadge--ok{ background:var(--c-leaf-deep); color:#fff; }
.scard__rank{
  position:absolute; top:6px; left:6px; z-index:3; pointer-events:none;
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--c-paper); color:var(--c-ai);
  font-family:var(--ff-en); font-size:calc(15px * var(--fs)); font-weight:700; line-height:1;
}
.scard__rank--top{ background:var(--c-sun); color:var(--c-ink); }

.scard__body{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; padding:8px 6px 4px; }
.scard__kind{ display:flex; align-items:center; gap:5px; min-width:0; margin:0; font-size:calc(12px * var(--fs)); font-weight:700; line-height:1.5; color:var(--c-leaf-deep); letter-spacing:.04em; }
.scard__kind-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scard__colors{ display:inline-flex; flex:none; gap:2px; }
.cdot{ display:inline-block; flex:none; width:12px; height:12px; border-radius:50%; background:var(--cc, #ccc); box-shadow:inset 0 0 0 1px rgba(42,37,48,.28); vertical-align:-1px; }
.cdot--mixed{ background:conic-gradient(#D2354A 0 25%, #F2C94C 0 50%, #4C6CC4 0 75%, #fff 0); }
.scard__name{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  margin:0; font-size:calc(14.5px * var(--fs)); font-weight:700; line-height:1.5; letter-spacing:.02em; overflow-wrap:anywhere;
}
.scard__price{ margin:auto 0 0; padding-top:3px; line-height:1.35; }
.scard__price b{ font-family:var(--ff-en); font-size:calc(18px * var(--fs)); font-weight:700; color:var(--c-ai); letter-spacing:.01em; }
.scard__price .yen{ margin:0 1px; font-size:calc(12px * var(--fs)); font-weight:700; color:var(--c-ai); }
.scard__tax,.scard__vol{ font-size:calc(11px * var(--fs)); color:var(--c-ink-sub); letter-spacing:0; }
/* 数の − 数 ＋（発注書 S25）：カードの下端に控えめな丸いピル（藍藤の 1.5px の線・白地・影やグラデーションなし）。
   押せる所は 44px。2 列のカード（390 幅で 1 枚 約 165px・中は約 155px）に収まる幅（− ・数・＋）。
   えらぶと地をごく淡い藤色に。押せない見た目（0 の −・上限の ＋）は記号を薄く（aria-disabled。押すと理由を読み上げる） */
.scard__pick{
  position:relative; z-index:2; container-type:inline-size;
  display:grid; grid-template-columns:36px minmax(0,1fr) 36px; align-items:center;
  height:44px; margin-top:8px; border-radius:999px;
  background:#fff; box-shadow:inset 0 0 0 1.5px var(--c-fuji);
}
.scard.is-picked .scard__pick{ background:var(--c-fuji-pale); }
/* 押せる所は 44px のまま、列は 36px（ボタンはピルの外へ 4px ずつはみ出す。カードの内側の余白 6px の中）。数の欄を広く取る */
.scard__step{
  display:grid; place-items:center; width:44px; height:44px; margin:0 -4px; padding:0;
  border:0; border-radius:50%; background:transparent; color:var(--c-ai);
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.scard__step .i{ width:20px; height:20px; }
.scard__step:active{ background:rgba(117,124,186,.18); }
.scard__step[aria-disabled="true"]{ color:rgba(62,68,120,.26); cursor:default; }
.scard__step[aria-disabled="true"]:active{ background:transparent; }
.scard__step:focus-visible{ outline:3px solid var(--c-ayame); outline-offset:0; border-radius:50%; }
.scard__qty{ min-width:0; text-align:center; }
.scard__n{ display:block; overflow:hidden; white-space:nowrap; text-overflow:clip; line-height:1; color:var(--c-ink-sub); }
.scard__n b{ font-family:var(--ff-en); font-size:calc(18px * var(--fs)); font-weight:700; }
.scard__unit{ margin-left:2px; font-size:calc(11.5px * var(--fs)); font-weight:700; }
.scard.is-picked .scard__n{ color:var(--c-ai); }
/* 横スライダーのカード（一覧より細い）×文字「大」で「12 セット」が入らないときは、単位を読み上げだけに */
@container (max-width:140px){ html[data-fs="l"] .scard__unit{ display:none; } }
.scard__soldout{
  display:flex; align-items:center; justify-content:center;
  height:44px; margin:8px 0 0; border-radius:999px;
  background:#EFEBE3; color:var(--c-ink-sub); font-size:calc(13.5px * var(--fs)); font-weight:700; letter-spacing:.06em;
}
/* JS が無いとき：− 数 ＋ は動かないので出さない（カードのリンクで詳細ページへ） */
html:not(.js) .scard__pick{ display:none; }

/* ---------- えらんだ商品の帯（発注書 S25。partials/tray） ----------
   合計が 1 以上のとき、画面の下に固定。公開サイトの SP は下の固定の 3 分割バーの上、LINE の中は一番下、PC は本文の下端（サイドバーの右）。
   帯が出ている間は、帯の高さ（--tray-h。shop.js が測る）だけページの下に余白を足す（最後のカードを隠さない） */
.shop-tray{
  position:fixed; left:0; right:0; z-index:96;
  bottom:calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding:10px var(--gutter);
  background:rgba(255,253,248,.97); border-top:1px solid rgba(62,68,120,.16);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.shop-tray[hidden]{ display:none; }
html.in-line .shop-tray{ bottom:0; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
.shop-tray__inner{ display:grid; gap:6px; max-width:1120px; margin:0 auto; }
.shop-tray__info{ display:grid; gap:2px; min-width:0; }
.shop-tray__sum{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; margin:0; font-size:calc(14px * var(--fs)); font-weight:700; line-height:1.45; color:var(--c-ink); }
.shop-tray__label{ color:var(--c-ink-sub); }
.shop-tray__sum b{ font-family:var(--ff-en); font-size:calc(19px * var(--fs)); font-weight:700; color:var(--c-ai); letter-spacing:.01em; }
.shop-tray__count b{ margin-right:2px; }
.shop-tray__dot{ margin:0 -4px; color:var(--c-ink-sub); }
.shop-tray__total{ white-space:nowrap; }
.shop-tray__total .yen{ margin:0 1px; font-size:calc(13px * var(--fs)); color:var(--c-ai); }
.shop-tray__total small{ font-size:calc(11.5px * var(--fs)); font-weight:500; color:var(--c-ink-sub); }
.shop-tray__note{ margin:0; font-size:calc(12.5px * var(--fs)); font-weight:700; line-height:1.45; letter-spacing:.01em; color:var(--c-ink-sub); }
.shop-tray__note[hidden]{ display:none; }
.shop-tray__note--limit{ color:#A3123F; }
.shop-tray__actions{ display:flex; align-items:center; gap:6px; }
.shop-tray__reset{
  flex:none; min-height:44px; margin:0; padding:0 8px 0 2px;
  border:0; background:none; color:var(--c-ink-sub);
  font:inherit; font-size:calc(13.5px * var(--fs)); font-weight:700;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap;
}
.shop-tray .shop-tray__go{ flex:1; width:auto; min-width:0; min-height:50px; gap:6px; padding:8px 12px; font-size:calc(15.5px * var(--fs)); letter-spacing:.02em; box-shadow:none; }
.shop-tray .shop-tray__go span{ min-width:0; overflow-wrap:anywhere; }
/* 文字「大」の SP：ボタンの文字を 1 行に収めるため、カートの印を省く */
@media (max-width:429px){ html[data-fs="l"] .shop-tray .shop-tray__go .i{ display:none; } }
.shop-tray .shop-tray__go:active{ transform:none; box-shadow:none; background:#2B2F57; }
html.has-tray body{ padding-bottom:calc(var(--bar-h) + var(--tray-h, 120px) + env(safe-area-inset-bottom, 0px)); }
html.in-line.has-tray body{ padding-bottom:calc(var(--tray-h, 120px) + env(safe-area-inset-bottom, 0px)); }
html.has-tray .issue-toggle--float{ bottom:calc(var(--bar-h) + var(--tray-h, 120px) + 12px + env(safe-area-inset-bottom, 0px)); }
html.in-line.has-tray .issue-toggle--float{ bottom:calc(var(--tray-h, 120px) + 12px + env(safe-area-inset-bottom, 0px)); }
@media (min-width:1080px){
  .shop-tray{ left:var(--sidebar-w); padding:12px 40px; }
  .shop-tray__inner{ grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:24px; }
  .shop-tray .shop-tray__go{ flex:none; min-width:300px; }
  html.has-tray .issue-toggle--float{ bottom:calc(var(--tray-h, 90px) + 16px); }
  /* PC の右下の「LINE で予約・購入」の浮きボタンは帯の上へ */
  html.has-tray .float-line{ bottom:calc(var(--tray-h, 90px) + 20px); }
}

/* タグ（ポップアップ・詳細ページ） */
.scard__tags{ display:flex; flex-wrap:wrap; gap:0 8px; margin:0; padding:0; list-style:none; font-size:calc(13px * var(--fs)); font-weight:700; line-height:1.6; color:var(--c-ai); }

/* ---------- 商品のポップアップ（発注書 S24。partials/popup・shop.js） ----------
   SP・タブレット：下から出るシート（画面の 90%・上に掴みの線・下へ引く／× ／背景で閉じる）。PC：中央のダイアログ（写真と説明を左右に）。
   紙の面・影は --shadow-card まで。下に「数量」と「カートに入れる」を固定 */
.sitem[hidden]{ display:none; }
.sitem{ position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:center; }
.sitem__scrim{ position:absolute; inset:0; background:rgba(42,37,48,.45); opacity:0; transition:opacity .28s; }
.sitem.is-open .sitem__scrim{ opacity:1; }
.sitem__panel{
  position:relative; display:flex; flex-direction:column;
  width:100%; height:90vh; height:90dvh; max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px);
  border-radius:24px 24px 0 0; background:var(--c-paper); outline:none;
  box-shadow:var(--shadow-card);
  transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.sitem.is-open .sitem__panel{ transform:none; }
.sitem.is-dragging .sitem__panel,.sitem.is-dragging .sitem__scrim{ transition:none; }
.sitem__head{ position:relative; flex:none; height:34px; touch-action:none; cursor:grab; }
.sitem__grip{ position:absolute; left:50%; top:10px; width:44px; height:5px; margin-left:-22px; border-radius:999px; background:rgba(42,37,48,.22); }
.sitem__close{
  position:absolute; top:6px; right:10px; z-index:3;
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:1px solid rgba(62,68,120,.18); border-radius:50%; background:var(--c-paper); color:var(--c-ink); cursor:pointer;
}
.sitem__close .i{ width:22px; height:22px; }
.sitem__scroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:18px 16px 16px; }
.sitem__media{ position:relative; }
.sitem__photos{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
  border-radius:16px; background:var(--c-base-deep);
}
.sitem__photos::-webkit-scrollbar{ display:none; }
.sitem__photos:focus{ outline:none; }
.sitem__photo{ margin:0; aspect-ratio:4/3; scroll-snap-align:start; overflow:hidden; }
.sitem__photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.sitem__photo.is-illust{ background:var(--c-leaf-pale); }
.sitem__photo.is-illust img{ padding:14%; object-fit:contain; }
.sitem.is-soldout .sitem__photo img{ filter:grayscale(.6); opacity:.75; }
.sitem__badges{ top:10px; left:10px; right:10px; }
.sitem__count{ position:absolute; right:10px; bottom:10px; margin:0; padding:0 10px; border-radius:999px; background:rgba(42,37,48,.6); color:#fff; font-family:var(--ff-en); font-size:calc(12px * var(--fs)); line-height:1.8; }
.sitem__count[hidden]{ display:none; }
.sitem__info{ display:flex; flex-direction:column; gap:6px; min-width:0; padding-top:14px; }
.sitem__tags[hidden]{ display:none; }
.sitem__kind{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:0; font-size:calc(13px * var(--fs)); font-weight:700; line-height:1.5; color:var(--c-leaf-deep); letter-spacing:.04em; }
.sitem__kind .scard__colors{ gap:3px; }
.sitem__name{ margin:0; font-size:calc(20px * var(--fs)); font-weight:700; line-height:1.45; letter-spacing:.04em; color:var(--c-ink); overflow-wrap:anywhere; }
.sitem__price{ margin:0; line-height:1.3; }
.sitem__price b{ font-family:var(--ff-en); font-size:calc(26px * var(--fs)); font-weight:700; color:var(--c-ai); }
.sitem__price .yen{ margin:0 2px; font-size:calc(14px * var(--fs)); font-weight:700; color:var(--c-ai); }
.sitem__price small{ font-size:calc(12.5px * var(--fs)); color:var(--c-ink-sub); }
.sitem__desc{ margin-top:4px; font-size:var(--t-body); line-height:1.9; }
.sitem__desc p{ margin:0 0 .7em; white-space:pre-line; overflow-wrap:anywhere; }
.sitem__desc p:last-child{ margin-bottom:0; }
.sitem__summary{ font-weight:700; }
.sitem .sitem__attrs{ margin:8px 0 0; padding:2px 14px; border:1px solid var(--rule); box-shadow:none; background:#fff; }
.sitem__attrs[hidden]{ display:none; }
.sitem__attrs .sattrs__row{ grid-template-columns:7em minmax(0,1fr); gap:10px; padding:10px 0; }
.sitem__page{ align-self:flex-start; display:inline-flex; align-items:center; gap:2px; min-height:44px; margin-top:2px; color:var(--c-ai); font-size:calc(14.5px * var(--fs)); font-weight:700; }
.sitem__page .i{ width:16px; height:16px; }
.sitem__buy{
  flex:none; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px 12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--rule); background:var(--c-paper);
}
.sitem__qty .sqty__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.sitem__qty .sqty__controls{ gap:6px; }
.sitem__qty .sqty__btn{ width:44px; height:44px; }
.sitem__qty .sqty__input{ width:52px; height:44px; font-size:max(16px, calc(19px * var(--fs))); }
.sitem .sitem__cart{ min-height:50px; padding:10px 12px; font-size:calc(15.5px * var(--fs)); letter-spacing:.04em; box-shadow:none; }
.sitem .sitem__cart:active{ transform:none; box-shadow:none; background:#2B2F57; }
.sitem__soldout{ grid-column:1 / -1; display:flex; align-items:center; justify-content:center; min-height:50px; border-radius:999px; background:#E8E4DC; color:var(--c-ink-sub); font-size:var(--t-body); font-weight:700; }
.sitem__soldout[hidden],.sitem__qty[hidden],.sitem__cart[hidden]{ display:none; }
.sitem__note{ grid-column:1 / -1; margin:0; font-size:calc(12px * var(--fs)); line-height:1.5; color:var(--c-ink-sub); text-align:center; }
/* 発注書 S25：区分の上限の案内・押せない見た目（aria-disabled。焦点を失わないよう disabled は使わない） */
.sitem__limit{ grid-column:1 / -1; margin:0; font-size:calc(12.5px * var(--fs)); font-weight:700; line-height:1.5; color:#A3123F; }
.sitem__limit[hidden]{ display:none; }
/* ほかの商品もえらんでいるとき：1 段目に数とまとめて送る点数・合計、2 段目に「まとめてカートに入れる（N 点）」をいっぱいに */
.sitem__sum{ grid-column:2; grid-row:1; margin:0; font-size:calc(13px * var(--fs)); font-weight:700; line-height:1.5; color:var(--c-ink-sub); }
.sitem__sum[hidden]{ display:none; }
.sitem__buy.is-many .sitem__cart{ grid-column:1 / -1; }
.sqty__btn[aria-disabled="true"]{ border-color:var(--shop-line); color:rgba(62,68,120,.3); cursor:default; }
@media (min-width:768px) and (max-width:1079px){
  .sitem__panel{ max-width:640px; }
}
/* PC：中央のダイアログ（写真と説明を左右に） */
@media (min-width:1080px){
  .sitem{ align-items:center; padding:32px; }
  .sitem__panel{
    width:min(940px, 100%); height:auto; max-height:min(88vh, 780px);
    border-radius:26px; opacity:0; transform:translateY(14px); transition:transform .25s ease, opacity .25s ease;
  }
  .sitem.is-open .sitem__panel{ opacity:1; transform:none; }
  .sitem__head{ position:absolute; top:0; right:0; left:auto; width:64px; height:64px; cursor:auto; }
  .sitem__grip{ display:none; }
  .sitem__close{ top:12px; right:12px; }
  .sitem__scroll{ padding:28px 28px 20px; }
  .sitem__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:30px; align-items:start; }
  .sitem__media{ position:sticky; top:0; }
  .sitem__photo{ aspect-ratio:1/1; }
  .sitem__info{ padding:4px 44px 0 0; }
  .sitem__buy{ grid-template-columns:auto minmax(0,320px); justify-content:end; padding:12px 28px 16px; }
  .sitem__note,.sitem__limit{ grid-column:2; text-align:left; }
  .sitem__buy.is-many{ grid-template-columns:minmax(0,1fr) auto minmax(0,340px); }
  .sitem__buy.is-many .sitem__sum{ grid-column:1; text-align:right; }
  .sitem__buy.is-many .sitem__qty{ grid-column:2; grid-row:1; }
  .sitem__buy.is-many .sitem__cart{ grid-column:3; grid-row:1; }
  .sitem__buy.is-many .sitem__note,.sitem__buy.is-many .sitem__limit{ grid-column:3; }
}
@media (prefers-reduced-motion:reduce){
  .sitem__panel,.sitem__scrim{ transition:none!important; }
}

.shop-empty{ margin:8px 0 0; padding:28px 20px; border-radius:var(--radius-m); background:var(--c-paper); text-align:center; box-shadow:var(--shadow-card); }
.shop-empty[hidden]{ display:none; }
.shop-empty p{ margin:0 0 14px; font-size:var(--t-body); }
.shop-more{ display:flex; justify-content:center; margin:26px 0 0; }
.shop-more__btn{ gap:10px; padding:12px 28px; font-size:var(--t-body); }
.shop-more__btn[hidden]{ display:none; }
.shop-more__btn small{ font-size:calc(13px * var(--fs)); font-weight:500; opacity:.8; }
.shop-note{ margin:26px 0 0; font-size:calc(14.5px * var(--fs)); line-height:1.9; color:var(--c-ink-sub); }

/* ---------- 商品の詳細 ---------- */
.sdetail{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
@media (min-width:900px){ .sdetail{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px; align-items:start; } }
.sdetail__frame{ position:relative; aspect-ratio:1/1; overflow:hidden; border:8px solid #fff; border-radius:var(--radius-l); background:#fff; box-shadow:var(--shadow-card); }
.sdetail__frame .ph{ position:absolute; inset:0; aspect-ratio:auto; height:100%; }
.sdetail__frame .scard__badges{ top:12px; left:12px; right:12px; }
.sdetail__frame .sbadge{ font-size:calc(13.5px * var(--fs)); padding:2px 12px; }
.sdetail__info{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.sdetail__tags{ margin:0; font-size:calc(14px * var(--fs)); }
.sdetail__kind{ margin:0; font-size:calc(14.5px * var(--fs)); font-weight:700; color:var(--c-leaf-deep); letter-spacing:.06em; }
.sdetail__price{ margin:0; line-height:1.3; }
.sdetail__price b{ font-family:var(--ff-en); font-size:calc(30px * var(--fs)); font-weight:700; color:var(--c-ai); }
.sdetail__price .yen{ margin:0 2px; font-size:calc(16px * var(--fs)); font-weight:700; color:var(--c-ai); }
.sdetail__price small{ font-size:calc(14px * var(--fs)); color:var(--c-ink-sub); }
.sdetail__stock{ margin:0; }
.sdetail__stock .sbadge{ font-size:calc(14px * var(--fs)); padding:2px 14px; box-shadow:none; }
.sdetail__summary{ margin:0; font-size:var(--t-body); line-height:1.9; }
.sdetail__buy{ display:grid; gap:12px; margin:6px 0 0; padding:16px 16px 12px; border-radius:var(--radius-m); background:var(--c-paper); box-shadow:var(--shadow-card); }
.sdetail__buy .exp-approval-note{ margin:0; font-size:calc(14px * var(--fs)); color:var(--c-ink-sub); text-align:center; }
.sqty{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sqty__label{ font-size:var(--t-body); font-weight:700; color:var(--c-ai); }
.sqty__controls{ display:flex; align-items:center; gap:8px; }
.sqty__btn{ display:grid; place-items:center; width:48px; height:48px; border:2px solid var(--c-ai); border-radius:50%; background:#fff; color:var(--c-ai); cursor:pointer; }
.sqty__btn:disabled{ border-color:var(--shop-line); color:rgba(62,68,120,.3); cursor:default; }
.sqty__btn .i{ width:22px; height:22px; }
.sqty__input{
  width:68px; height:48px; margin:0; padding:0;
  border:2px solid var(--shop-line); border-radius:14px; background:#fff;
  font-family:var(--ff-en); font-size:max(16px, calc(22px * var(--fs))); font-weight:700; text-align:center; color:var(--c-ink);
  -moz-appearance:textfield; appearance:textfield;
}
.sqty__input::-webkit-inner-spin-button,.sqty__input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.sqty__input:focus{ outline:none; border-color:var(--c-ai); box-shadow:0 0 0 3px rgba(117,124,186,.28); }
.sbtn-cart{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:56px; padding:12px 16px; border:0; border-radius:999px;
  background:var(--c-ai); color:#fff; font:inherit; font-size:calc(16px * var(--fs)); font-weight:700; letter-spacing:.06em; cursor:pointer;
  box-shadow:var(--shadow-btn);
}
.sbtn-cart .i{ width:24px; height:24px; }
.sbtn-cart:hover{ background:#353b6b; }
.sbtn-cart:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(43,47,87,.25); }
.sdetail__note{ margin:0; font-size:calc(14.5px * var(--fs)); line-height:1.8; color:var(--c-ink-sub); }
.sdetail__tel{ align-self:flex-start; }

.sattrs{ margin:0 0 22px; padding:4px 20px; border-radius:var(--radius-m); background:var(--c-paper); box-shadow:var(--shadow-card); }
.sattrs__row{ display:grid; grid-template-columns:8.6em minmax(0,1fr); gap:12px; padding:13px 0; border-bottom:1px dashed var(--rule); }
.sattrs__row:last-child{ border-bottom:0; }
.sattrs dt{ font-size:calc(14.5px * var(--fs)); font-weight:700; color:var(--c-ai); letter-spacing:.04em; }
.sattrs dd{ margin:0; font-size:var(--t-body); line-height:1.8; overflow-wrap:anywhere; }
.sattrs__color{ display:inline-flex; align-items:center; gap:6px; margin-right:14px; white-space:nowrap; }
@media (max-width:767px){ .sattrs{ padding:4px 16px; } .sattrs__row{ grid-template-columns:7.2em minmax(0,1fr); gap:10px; } }
@media (max-width:359px){ .sattrs__row{ grid-template-columns:minmax(0,1fr); gap:0; } }

.sdesc{ margin:0 0 22px; }
.sdesc__text p{ margin:0; }
.js .sdesc.is-clamped .sdesc__text{
  max-height:calc(1.95em * 6); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent); mask-image:linear-gradient(to bottom, #000 62%, transparent);
}
.sdesc__more{ min-height:44px; margin-top:4px; padding:0 2px; border:0; background:none; color:var(--c-ai); font-size:var(--t-body); font-weight:700; text-decoration:underline; cursor:pointer; }
.sdesc__more[hidden]{ display:none; }