:root { --paper:#faf9f6; --ink:#171514; --muted:#77716b; --line:rgba(23,21,20,.15); --wine:#741d34; --serif:"Newsreader",Georgia,serif; --sans:"DM Sans",Arial,sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
.bag-header { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; border-bottom: 1px solid var(--line); }
.bag-header > a:last-child { border-bottom: 1px solid currentColor; font-size: 9px; }
.bag-main { padding: 72px 4vw 120px; }
.bag-title p { margin: 0 0 16px; color: var(--wine); font-size: 9px; font-weight: 600; letter-spacing: .14em; }
.bag-title h1 { margin: 0; font: 400 clamp(46px,5vw,74px)/.97 var(--serif); letter-spacing: -.045em; }
.bag-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); gap: 7vw; align-items: start; margin-top: 72px; }
.bag-items { border-top: 1px solid var(--line); }
.bag-item { display: grid; grid-template-columns: 142px 1fr auto; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.bag-item img { width: 142px; height: 142px; display: block; object-fit: cover; background: #efede8; }
.bag-item-copy { align-self: center; }
.bag-item-copy span { color: var(--wine); font-size: 8px; letter-spacing: .12em; }
.bag-item-copy h2 { margin: 8px 0 12px; font: 400 26px/1 var(--serif); }
.bag-item-copy p { margin: 3px 0; color: var(--muted); font-size: 9px; }
.bag-item > b { align-self: center; font: 400 22px var(--serif); }
.bag-summary { position: sticky; top: 28px; border-top: 1px solid var(--ink); }
.bag-summary > div { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.bag-summary > div b { font-weight: 500; }
.bag-summary p { margin: 22px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.bag-summary button { width: 100%; min-height: 50px; border: 0; background: #d7d3cc; color: #77716b; font-size: 10px; }
.bag-summary button:not(:disabled) { background: var(--ink); color: #fff; cursor: pointer; }
.bag-summary button:not(:disabled):hover { background: var(--wine); }
.bag-summary small { display: block; margin-top: 14px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.bag-empty { padding: 90px 0; }
.bag-empty span { color: var(--wine); font-size: 8px; letter-spacing: .12em; }
.bag-empty h2 { margin: 18px 0 32px; font: 400 42px/.98 var(--serif); }
.bag-empty a { border-bottom: 1px solid currentColor; font-size: 10px; }
@media (max-width:780px) {
  .bag-header { height:58px; padding:0 20px; }
  .bag-main { padding:56px 20px 86px; }
  .bag-layout { grid-template-columns:1fr; gap:58px; margin-top:52px; }
  .bag-summary { position:relative; top:auto; }
}
@media (max-width:480px) {
  .bag-title h1 { font-size:46px; }
  .bag-item { grid-template-columns:92px 1fr; gap:16px; }
  .bag-item img { width:92px; height:110px; }
  .bag-item > b { grid-column:2; margin-top:-8px; font-size:18px; }
}