:root {
     --brand: #26ce2c;
     --brand-600: #1fb324;
     --bg: #f6f7f8;
     --surface: #fff;
     --text: #111;
     --muted: #6b7280;
     --border: #e5e7eb;
     --danger: #ef4444;
     --shadow: 0 6px 28px rgba(0, 0, 0, .06);
     --radius: 14px;
 }

 * {
     box-sizing: border-box
 }

 html,
 body {
     margin: 0;
     padding: 0;
     background: var(--bg);
     color: var(--text);
     font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial
 }

 a {
     color: inherit;
     text-decoration: none
 }

 img {
     max-width: 100%;
     display: block
 }

 .site-header {
     background: var(--surface);
     box-shadow: var(--shadow);
     position: sticky;
     top: 0;
     z-index: 20
 }

 .inner {
     max-width: 1200px;
     margin: 0 auto;
     padding: 14px 18px;
     display: flex;
     gap: 16px;
     align-items: center
 }

 .logo a {
     font-weight: 900;
     letter-spacing: .3px
 }

 .nav {
     margin-left: auto;
     display: flex;
     gap: 12px
 }

 .nav a {
     padding: 8px 10px;
     border-radius: 10px
 }

 .nav a:hover {
     background: #00000008
 }

 .container {
     max-width: 1200px;
     margin: 24px auto;
     padding: 0 18px
 }

 .page-head {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 14px
 }

 .page-title {
     font-size: 28px;
     font-weight: 900
 }

 .muted {
     color: var(--muted);
     font-size: 14px
 }

 .wrap {
     display: grid;
     grid-template-columns: 1fr 340px;
     gap: 18px
 }

 @media (max-width:1000px) {
     .wrap {
         grid-template-columns: 1fr
     }
 }

 .row-card {
     display: grid;
     grid-template-columns: 120px 1fr auto auto;
     gap: 16px;
     align-items: center;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 16px
 }

 .row-card:not(:last-child) {
     margin-bottom: 14px
 }

 .thumb {
     width: 120px;
     height: 120px;
     display: grid;
     place-items: center;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 12px
 }

 .thumb img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain
 }

 .title {
     font-weight: 800
 }

 .under {
     margin-top: 4px
 }

 .price {
     font-weight: 900;
     white-space: nowrap;
     text-align: right
 }

 .price .unit {
     display: block;
     font-weight: 500;
     font-size: 12px;
     color: var(--muted)
 }

 .qty {
     display: inline-grid;
     grid-auto-flow: column;
     align-items: center;
     border: 1px solid var(--border);
     border-radius: 12px;
     overflow: hidden
 }

 .qty button {
     width: 38px;
     height: 38px;
     border: 0;
     background: #fff;
     cursor: pointer;
     font-size: 18px
 }

 .qty input {
     width: 56px;
     height: 38px;
     border: 0;
     text-align: center;
     font-weight: 700
 }

 .qty button:hover {
     background: #f3f4f6
 }

 .trash {
     width: 38px;
     height: 38px;
     border: 1px solid var(--border);
     border-radius: 12px;
     background: #fff;
     cursor: pointer;
     display: grid;
     place-items: center;
     color: var(--danger)
 }

 .trash:hover {
     filter: brightness(.98)
 }

 .summary {
     position: sticky;
     top: 88px;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 16px;
     box-shadow: var(--shadow);
     height: max-content
 }

 .summary h3 {
     margin: 0 0 10px 0;
     font-size: 18px
 }

 .srow {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px
 }

 .dots {
     height: 1px;
     background: repeating-linear-gradient(90deg, #0000 0 8px, #e5e7eb 8px 16px);
     margin: 10px 0
 }

 .btn {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
     border-radius: 12px;
     padding: 12px 14px;
     border: 1px solid var(--border);
     background: #fff;
     cursor: pointer;
     font-weight: 800
 }

 .btn--primary {
     background: var(--brand);
     border-color: var(--brand);
     color: #fff
 }

 .btn--primary:hover {
     background: var(--brand-600);
     border-color: var(--brand-600)
 }

 .btn:disabled {
     opacity: .6;
     cursor: not-allowed
 }

 .co-form {
     margin-top: 14px;
     display: grid;
     gap: 8px
 }

 .co-form label {
     font-size: 14px
 }

 .co-form input,
 .co-form textarea {
     width: 100%;
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 10px 12px;
     background: #fff
 }

 .co-form input:focus,
 .co-form textarea:focus {
     outline: none;
     border-color: var(--brand);
     box-shadow: 0 0 0 3px #26ce2c22
 }

 .empty {
     margin-top: 18px;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 24px;
     text-align: center;
     display: none;
     place-items: center;
     gap: 10px
 }