/* Shop and checkout styles. Built on the site variables in
   style.css: same cards, same glass, same buttons. */

.goods-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--s4);margin-top:var(--s5);
  /* Clearance for the sticky cart bar below: the bar sticks at
     bottom:14px and is about 62px tall, so without this space the
     last row's prices rest behind it at full scroll (2026-11-05). */
  padding-bottom:96px}
@media (max-width:640px){
  .goods-grid{grid-template-columns:1fr 1fr;gap:10px;
    /* Phone widths wrap the cart bar's text and buttons onto two
       lines, roughly doubling the bar's height, and the desktop
       96px clearance no longer covers it: at some scroll positions
       the bar rested over the bottom row's names and prices
       (rendered pass, 2026-11-05). The clearance here covers the
       wrapped bar at bottom:14px plus its top margin, with room
       to spare, so the last row always scrolls fully clear. */
    padding-bottom:190px}
  .good-thumb{aspect-ratio:4/3}
  .good-name{font-size:14px}
  .good-price{font-size:14px}
  .good-meta{padding:9px 10px 11px}
}
.good-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.good-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:#57448f}
.good-card{cursor:pointer}
.good-thumb{aspect-ratio:4/3;background:var(--well);overflow:hidden}
.good-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.good-card:hover .good-thumb img{transform:scale(1.04)}
.good-tile{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);padding:var(--s4);text-align:center;
  background:
    radial-gradient(320px 220px at 20% 0%, rgba(91,52,201,.14) 0%, rgba(91,52,201,0) 70%),
    radial-gradient(300px 220px at 85% 100%, rgba(67,48,127,.10) 0%, rgba(67,48,127,0) 70%),
    var(--well)}
.good-tile img{width:52px;height:52px;border-radius:50%;opacity:.9}
.good-tile span{font-weight:700;font-size:16.5px;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.good-meta{padding:12px 14px 14px;display:flex;flex-direction:column;gap:var(--s2);flex:1}
.good-name{font-weight:700;font-size:16px;line-height:1.3}
.good-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  border-top:1px solid var(--line);padding-top:10px;margin-top:auto}
.good-price{font-weight:700;font-size:16px}
.good-add{padding:9px 20px;font-size:14px}
.good-add.added{background:var(--well);color:var(--accent-ink);border-color:#57448f}

.cart-bar{position:sticky;bottom:14px;z-index:40;margin:var(--s6) auto 0;max-width:640px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:10px 10px 10px 22px;box-shadow:var(--shadow-2);backdrop-filter:blur(8px)}
.cart-bar .cart-text{font-size:15px;font-weight:600}
.cart-bar .cart-text .cart-sub{color:var(--accent-ink);font-weight:800}

.co-wrap{max-width:760px;margin:0 auto}
.co-lines{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5)}
.co-line{display:flex;align-items:center;gap:var(--s3);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3) var(--s4);
  box-shadow:var(--shadow-1)}
.co-line .co-thumb{width:64px;height:64px;flex:none;border-radius:12px;overflow:hidden;background:var(--well)}
.co-line .co-thumb img{width:100%;height:100%;object-fit:cover}
.co-line .co-tilethumb{width:64px;height:64px;flex:none;border-radius:12px;background:var(--well);
  display:flex;align-items:center;justify-content:center}
.co-line .co-tilethumb img{width:30px;height:30px;border-radius:50%}
.co-line .co-name{flex:1;min-width:0;font-weight:650;font-size:15.5px;line-height:1.35}
.co-line .co-unit{display:block;color:var(--muted);font-size:13px;font-weight:500;margin-top:2px}
.qty{display:flex;align-items:center;gap:var(--s2);flex:none}
.qty button{width:30px;height:30px;border-radius:50%;border:1px solid #57448f;
  background:var(--well);color:var(--ink);font:inherit;font-size:16px;line-height:1;cursor:pointer}
.qty button:hover{border-color:var(--accent);color:var(--accent-ink)}
.qty .qty-n{min-width:18px;text-align:center;font-weight:700}
.co-total{width:86px;flex:none;text-align:right;font-weight:700}
.co-remove{flex:none;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:4px}
.co-remove:hover{color:#ff8a75}

.co-summary{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5);margin-top:var(--s5);box-shadow:var(--shadow-1)}
.co-sum-row{display:flex;justify-content:space-between;gap:var(--s3);font-size:15.5px;padding:6px 0}
.co-sum-row .k{color:var(--muted)}
.co-sum-row.grand{border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s3);
  font-size:18px;font-weight:800}
.co-note{margin-top:var(--s4);background:var(--accent-tint);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:12px 16px;font-size:14.5px;font-weight:600;color:var(--accent-ink)}
.co-pay{width:100%;margin-top:var(--s4);text-align:center}
.co-msg{margin-top:var(--s3);text-align:center;font-size:15px;font-weight:650;color:var(--accent-ink)}
.co-empty{text-align:center;color:var(--muted);font-size:16px;margin-top:var(--s6)}
.co-back{text-align:center;margin-top:var(--s5)}

/* Shop controls, modal, and cart drawer (React preview). */
.good-cat{color:var(--muted);font-size:13px;font-weight:600}
.shop-controls{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5);align-items:center}
.shop-search{flex:1 1 220px;background:var(--well);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:11px 18px;color:var(--ink);font:inherit;font-size:15px}
.shop-search:focus{border-color:var(--accent);outline:none}
.shop-sort{background:var(--well);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:11px 14px;color:var(--ink);font:inherit;font-size:14.5px;cursor:pointer}
.shop-sort:focus{border-color:var(--accent);outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.chip{background:var(--well);border:1px solid #57448f;border-radius:var(--radius-pill);
  padding:8px 16px;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease)}
.chip:hover{border-color:var(--accent)}
.chip.active{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-ink)}
.shop-empty{text-align:center;color:var(--muted);font-size:16px;margin-top:var(--s6)}
.btn-plain{background:var(--card);color:var(--ink);border:1px solid #57448f;font-weight:600}

.modal-backdrop{position:fixed;inset:0;z-index:90;background:rgba(10,6,24,.66);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  padding:18px;animation:vsFade .18s ease}
/* The panel is a flex column capped at the viewport height (dvh,
   so mobile browser chrome cannot push it off screen): the photo
   and the buy footer are pinned, and only the body between them
   scrolls. The buy row must never need a scroll to reach. */
.modal-panel{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);width:100%;max-width:520px;display:flex;flex-direction:column;
  max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);
  overflow:hidden;box-shadow:var(--shadow-2);animation:vsPop .22s var(--ease)}
.modal-close{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;
  border-radius:50%;border:1px solid #57448f;background:rgba(255,255,255,.92);
  color:var(--ink);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.modal-close:hover{border-color:var(--accent);color:var(--accent-ink)}
.modal-thumb{aspect-ratio:4/3;background:var(--well);overflow:hidden;position:relative;flex:none}
.modal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.modal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;
  border-radius:50%;border:1px solid #57448f;background:rgba(255,255,255,.90);
  color:var(--ink);font:inherit;font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.modal-nav:hover{border-color:var(--accent);color:var(--accent-ink)}
.modal-nav-prev{left:10px}
.modal-nav-next{right:10px}
.modal-body{padding:20px 22px 24px;flex:1 1 auto;min-height:0;overflow-y:auto}
.modal-foot{flex:none;padding:14px 22px 20px;border-top:1px solid var(--line);background:var(--card)}
.modal-foot .modal-line{margin-top:0}
.modal-foot .modal-buyrow{margin-top:10px}
.modal-name{font-size:22px;line-height:1.25;margin:0}
.modal-cat{color:var(--muted);font-size:13.5px;font-weight:600;margin-top:5px}
.modal-price{font-size:20px;font-weight:800;margin-top:12px}
.modal-line{color:var(--muted);font-size:15px;margin-top:7px}
.modal-desc{font-size:15px;line-height:1.55;margin-top:12px}
.modal-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.modal-thumbs button{padding:0;border:2px solid var(--line);border-radius:8px;background:none;cursor:pointer;line-height:0}
.modal-thumbs button.active{border-color:var(--accent)}
.modal-thumbs img{width:54px;height:54px;object-fit:cover;border-radius:6px;display:block}
.details-list{margin:14px 0 0;border-top:1px solid var(--line)}
.details-list .drow{display:flex;gap:14px;padding:6px 0;border-bottom:1px solid var(--line)}
.details-list dt{flex:0 0 128px;font-weight:700;font-size:13.5px;color:var(--muted)}
.details-list dd{margin:0;font-size:13.5px;line-height:1.45}
.modal-add{width:100%;margin-top:18px;text-align:center}
.modal-buyrow{display:flex;align-items:center;gap:14px;margin-top:18px}
.modal-buyrow .modal-add{width:auto;flex:1;margin-top:0}
.modal-buyrow .qty button{width:36px;height:36px;font-size:18px}
@keyframes vsFade{from{opacity:0}}
@keyframes vsPop{from{opacity:0;transform:translateY(10px) scale(.98)}}

.drawer-backdrop{position:fixed;inset:0;z-index:90;background:rgba(10,6,24,.66);
  backdrop-filter:blur(4px);display:flex;justify-content:flex-end;animation:vsFade .18s ease}
.cart-drawer{background:var(--card);border-left:1px solid var(--line);width:min(430px,100%);
  height:100%;overflow-y:auto;padding:20px;display:flex;flex-direction:column;
  box-shadow:var(--shadow-2);animation:vsSlide .25s var(--ease)}
@keyframes vsSlide{from{transform:translateX(48px);opacity:0}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.drawer-head h3{margin:0;font-size:20px}
.drawer-head .modal-close{position:static;flex:none}
.drawer-lines{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
.cart-drawer .co-line{flex-wrap:wrap}
.cart-drawer .co-total{width:auto;margin-left:auto}
.drawer-foot{margin-top:auto;padding-top:var(--s4)}
.drawer-checkout{display:block;width:100%;text-align:center;margin-top:var(--s3)}

.shop-note{margin-top:10px}

.drawer-note{margin:8px 0 0;font-size:.85rem;color:var(--ink-2);line-height:1.45}