/* Generated: 2026-09-23 JST */
.cart-page { padding-block: clamp(42px, 8vw, 78px) 110px; }
.cart-default-submit { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; font-size: 1rem; white-space: nowrap; }
.cart-head { padding-bottom: 22px; border-bottom: 1px solid var(--hair); }
.cart-head h1 { font-family: var(--mincho); font-size: clamp(1.5rem, 6vw, 2rem); letter-spacing: .14em; }
.cart-head p { margin-top: 10px; font-size: 1rem; line-height: 1.8; color: var(--ink-2); }
.cart-alert { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--shu); color: var(--ink); font-size: 1rem; line-height: 1.8; }
.cart-alert.ok { border-color: var(--ink); }
.cart-empty { padding-block: 50px; text-align: center; font-size: 1rem; }
.cart-empty a { display: inline-flex; margin-top: 24px; color: var(--ink); }
.cart-list { list-style: none; }
.cart-item { padding-block: clamp(28px, 5vw, 42px); border-bottom: 1px solid var(--hair); }
/* 最後の商品の下線は引かない。
   すぐ下の「金額の確認」が自分の上線を持っているので、2本並んでしまう */
.cart-item:last-child { border-bottom: 0; }
.cart-item-main { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: clamp(18px, 4vw, 30px); }
.cart-photo { aspect-ratio: 1 / 1; background: var(--paper-hi); overflow: hidden; }
.cart-photo img { width: 100%; height: 100%; object-fit: cover; }
.cart-name { font-family: var(--mincho); font-size: 1.25rem; letter-spacing: .1em; line-height: 1.6; }
.cart-sub { margin-top: 4px; font-size: .9375rem; line-height: 1.7; color: var(--ink-2); }
.cart-price { margin-top: 10px; font-family: var(--roman); font-size: 1.25rem; }
.cart-controls { margin-top: 22px; display: grid; gap: 22px; }
.cart-field label, .cart-noshi-title { display: block; margin-bottom: 7px; font-size: 1rem; font-weight: 500; color: var(--ink); }
.cart-field input, .cart-field select { width: 100%; min-height: 52px; padding: 10px 12px; border: 1px solid var(--hair); background: #fff; color: var(--ink); font-size: 1rem; }
.cart-field input[type=number] { max-width: 9em; }
.cart-hint { margin-top: 7px; font-size: .875rem; line-height: 1.7; color: var(--ink-2); }
.cart-noshi-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1rem; }
.cart-noshi-check input { width: 20px; height: 20px; }
.cart-noshi-fields { display: none; margin-top: 16px; gap: 18px; }
.cart-noshi-fields.on { display: grid; }
.cart-line-total { margin-top: 20px; display: grid; gap: 5px; font-size: .9375rem; color: var(--ink-2); }
.cart-remove { margin-top: 18px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--ink); font-size: 1rem; cursor: pointer; }
.cart-summary { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--ink); }
.cart-summary h2 { font-family: var(--mincho); font-size: 1.25rem; letter-spacing: .1em; }
.cart-summary dl { margin-top: 18px; }
.cart-summary dl div { display: flex; justify-content: space-between; gap: 20px; padding-block: 12px; border-bottom: 1px solid var(--hair-2); }
.cart-summary dt { font-size: 1rem; }
.cart-summary dd { font-family: var(--roman); font-size: 1.25rem; }
.cart-summary .grand dt { font-family: var(--mincho); font-weight: 600; }
.cart-summary .grand dd { font-size: 1.625rem; }
.cart-actions { margin-top: 30px; display: grid; gap: 14px; }
.cart-save, .cart-next { min-height: 58px; border: 1px solid var(--ink); padding: 12px 22px; font-family: var(--mincho); font-size: 1.0625rem; letter-spacing: .1em; cursor: pointer; }
.cart-save { background: #fff; color: var(--ink); }
.cart-next { background: var(--ink); color: #fff; }
.cart-next:disabled { background: #5d5952; border-color: #5d5952; cursor: not-allowed; }
.cart-continue { display: inline-flex; margin-top: 26px; color: var(--ink); font-size: 1rem; }
@media (min-width: 680px) {
  .cart-item-main { grid-template-columns: 150px minmax(0, 1fr); }
  .cart-controls { grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr); }
  .cart-noshi-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cart-actions { grid-template-columns: 1fr 1fr; }
}

/* 数量を変えて計算し直している間。
   二重に押させないよう操作を止め、待っていることが分かるように薄くする */
.is-updating { opacity: .55; pointer-events: none; transition: opacity .15s ease; }