/* Figma shop 7:628 / 7:742, adapted to the shared fixed header and dock.
   Bottom padding remains owned by member-layout.css's overlay clearance. */
#app > .shop-page {
  --page-content-width:1280px;
  padding-top:30px;
  padding-inline:max(24px,calc((100% - var(--page-content-width))/2));
  background:var(--canvas);
}
.shop-shell { min-width:0; }
.shop-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:112px;
  padding:21px 32px;
  border-radius:26px;
  background:linear-gradient(var(--mist),var(--sky));
}
.shop-banner-copy { min-width:0; }
.shop-title-row { display:flex; align-items:center; gap:20px; }
.shop-title-row h1 { font-size:34px; line-height:48px; color:var(--ink); }
.shop-back { display:inline-flex; align-items:center; gap:2px; flex-shrink:0; font-size:13px; color:var(--blue); }
.shop-back img { width:auto; height:auto; }
.shop-service-note { font-size:11px; line-height:18px; color:var(--muted); }
.shop-account-tools { flex-shrink:0; }
.shop-record-tools { display:flex; align-items:center; gap:16px; }
.shop-record-tools button {
  min-width:120px;
  min-height:44px;
  padding:8px 16px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:var(--shadow);
  font-size:16px;
  font-weight:700;
  line-height:24px;
  color:var(--blue);
}
.shop-points { margin-top:5px; text-align:right; color:var(--muted); font-size:11px; line-height:17px; }
.shop-points strong { margin-inline:6px; color:var(--ink); font-size:14px; }
.shop-points > span { margin-left:6px; }
.shop-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:32px; align-items:start; margin-top:24px; }
.shop-categories { min-width:0; padding:22px 15px 24px; background:white; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.shop-category-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-inline:4px; margin-bottom:18px; }
.shop-category-heading h2 { font-size:17px; line-height:26px; }
.shop-category-next { display:none; }
.shop-category-list { display:flex; flex-direction:column; gap:5px; }
.shop-category-button { position:relative; min-width:0; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:4px; padding:7px 16px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-size:14px; font-weight:400; line-height:21px; text-align:left; white-space:nowrap; }
.shop-category-button > img { display:none; width:auto; height:auto; flex:none; }
.shop-category-button[aria-pressed=true] { color:var(--blue); background:#e3f3fc; font-weight:700; }
.shop-category-button[aria-pressed=true]::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:1px; background:var(--blue); }
.shop-category-button[aria-pressed=true] > img { display:block; }
.shop-catalog { min-width:0; }
.shop-search { float:right; display:flex; align-items:center; width:min(250px,53%); min-height:38px; margin:0 0 14px 14px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; }
.shop-search label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.shop-search input { width:100%; min-width:0; min-height:38px; padding:8px 12px; background:transparent; border:0; color:var(--ink); font:inherit; font-size:13px; }
.shop-search button { flex-shrink:0; align-self:stretch; padding:6px 12px; background:var(--mist); color:var(--blue); font-size:12px; }
.shop-search:focus-within { outline:2px solid var(--bright); outline-offset:2px; }
.shop-search input:focus-visible { outline:none; }
.shop-results-heading { min-height:52px; padding-top:5px; margin-bottom:0; }
.shop-results-heading h2 { font-size:22px; line-height:30px; }
.shop-results-heading > p { margin-top:2px; font-size:11px; line-height:18px; color:var(--muted); overflow-wrap:anywhere; }
.shop-product-grid { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.shop-product-card { display:flex; flex-direction:column; gap:16px; min-width:0; padding:15px 15px 19px; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:var(--shadow); }
.shop-product-image-button { display:block; width:100%; padding:0; border:0; border-radius:14px; background:transparent; }
.shop-product-image { display:block; width:100%; aspect-ratio:149/139; overflow:hidden; border-radius:14px; }
.shop-product-image img { display:block; width:100%; height:100%; object-fit:contain; border-radius:14px; }
.shop-product-info { display:flex; flex:1; flex-direction:column; gap:8px; min-width:0; }
.shop-product-info h3 { min-height:48px; font-size:16px; font-weight:500; line-height:24px; overflow-wrap:anywhere; }
.shop-product-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; min-height:42px; }
.shop-product-price { display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; }
.shop-product-price strong { font-size:24px; line-height:32px; color:var(--blue); font-weight:700; }
.shop-product-price > span { font-size:12px; line-height:18px; color:var(--muted); }
.shop-redeem { flex:none; min-width:96px; min-height:42px; padding:8px 16px; background:linear-gradient(var(--bright),var(--blue)); border:1px solid white; border-radius:12px; box-shadow:0 4px 5px #0b345729; color:white; font-size:14px; font-weight:700; line-height:20px; }
.shop-redeem:hover,.shop-record-tools button:hover { filter:brightness(1.06); }
.shop-empty { clear:both; text-align:center; padding:48px 20px; border:1px solid var(--line); border-radius:20px; background:white; }
.shop-empty h3 { font-size:18px; line-height:28px; }
.shop-empty p { margin:8px 0 20px; color:var(--muted); }
.shop-preview-image { display:block; width:min(100%,340px); margin:0 auto 18px; aspect-ratio:1; }
.shop-preview-image img { width:100%; height:100%; object-fit:contain; border-radius:14px; }
.shop-preview-price { margin:8px 0; font-size:14px; color:var(--muted); }
.shop-preview-price strong { color:var(--blue); font-size:24px; margin-inline:6px; }
.shop-preview-state { font-weight:700; color:var(--blue); margin-bottom:8px; }
.shop-preview > p,.shop-record-notice > p { line-height:1.65; overflow-wrap:anywhere; }
.shop-record-notice > p + p { margin-top:12px; }
@media (min-width:761px) and (max-width:1199px) {
  .shop-layout { grid-template-columns:200px minmax(0,1fr); gap:24px; }
  .shop-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .shop-banner { padding-inline:24px; }
  .shop-title-row { gap:8px; }
  .shop-title-row h1 { font-size:28px; }
  .shop-record-tools { gap:10px; }
  .shop-record-tools button { min-width:100px; padding-inline:12px; font-size:14px; }
}
@media (max-width:760px) {
  #app > .shop-page { padding-top:0; padding-inline:16px; }
  .shop-banner { display:block; margin-inline:-16px; padding:20px 16px 18px; border-radius:0; }
  .shop-title-row { justify-content:space-between; gap:12px; }
  .shop-title-row h1 { font-size:22px; line-height:30px; }
  .shop-back { font-size:12px; }
  .shop-service-note { margin-top:4px; font-size:11px; line-height:18px; }
  .shop-account-tools { margin-top:14px; }
  .shop-record-tools { gap:0; min-height:64px; padding:10px; background:white; border-radius:18px; box-shadow:var(--shadow); }
  .shop-record-tools button { flex:1; min-width:0; min-height:40px; padding:7px 4px; border:0; border-radius:0; box-shadow:none; font-size:14px; line-height:22px; }
  .shop-record-tools button + button { border-left:1px solid var(--line); }
  .shop-points { margin-top:8px; text-align:center; }
  .shop-layout { display:block; margin-top:18px; }
  .shop-categories { padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
  .shop-category-heading { margin-bottom:12px; padding-inline:4px; }
  .shop-category-heading h2 { font-size:18px; line-height:26px; }
  .shop-category-next { display:grid; place-items:center; width:36px; height:32px; padding:0; background:transparent; border-radius:8px; }
  .shop-category-next > img { width:auto; height:auto; }
  .shop-category-list { display:grid; grid-template-rows:repeat(2,36px); grid-auto-columns:112px; gap:8px; padding:0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; scroll-padding-inline:4px; }
  .shop-category-list::-webkit-scrollbar { display:none; }
  .shop-category-button:focus-visible { outline-offset:-3px; }
  .shop-category-button { grid-column:var(--shop-category-column); grid-row:var(--shop-category-row); min-height:36px; justify-content:center; padding:8px 3px; border:1px solid var(--line); border-radius:12px; background:white; font-size:12px; line-height:18px; text-align:center; }
  .shop-category-button[aria-pressed=true] { background:linear-gradient(var(--bright),var(--blue)); color:white; border-color:var(--blue); }
  .shop-category-button[aria-pressed=true]::before,.shop-category-button[aria-pressed=true] > img { display:none; }
  .shop-catalog { margin-top:24px; }
  .shop-search { width:50%; margin-left:8px; min-height:34px; }
  .shop-search input { padding:7px 8px; min-height:34px; font-size:12px; }
  .shop-search button { padding:6px 9px; font-size:11px; }
  .shop-results-heading { min-height:52px; padding-top:1px; }
  .shop-results-heading h2 { font-size:22px; line-height:30px; }
  .shop-results-heading > p { font-size:10px; line-height:16px; }
  .shop-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .shop-product-card { min-height:320px; gap:12px; padding:11px 11px 13px; }
  .shop-product-image { aspect-ratio:1; }
  .shop-product-info { gap:8px; }
  .shop-product-info h3 { min-height:44px; font-size:13px; line-height:20px; }
  .shop-product-bottom { flex-direction:column; align-items:stretch; gap:10px; }
  .shop-product-price { min-height:30px; }
  .shop-product-price strong { font-size:20px; line-height:30px; }
  .shop-product-price > span { font-size:11px; line-height:18px; }
  .shop-redeem { width:100%; min-width:0; min-height:40px; padding:8px 4px; }
}
@media (max-width:360px) {
  .shop-title-row h1 { font-size:20px; }
  .shop-service-note { font-size:10px; }
  .shop-product-card { padding-inline:9px; }
  .shop-product-info h3 { font-size:12px; }
  .shop-search button { padding-inline:6px; }
}