/* The Shopping Cart page. It shares the title, progress strip and the deep-maroon summary panel with the checkout (checkout-modern.css); this
   adds the list of pieces: one tidy glass row each, or one folded card per category when the cart is big. */

.cp-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.cp-count { color: #6e5f57; font-weight: 600; }
.cp-count b { font-family: var(--font-display, 'Playfair Display', serif); font-size: 1.3rem; color: var(--maroon-dark, #5c1329); }
.cp-tools { display: inline-flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.cp-tool { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(var(--maroon-rgb, 123, 30, 58), .22); background: #fff; color: var(--maroon, #7b1e3a); font-weight: 700; font-size: .8rem; padding: .35rem .85rem; border-radius: 999px; cursor: pointer; transition: all .15s; }
.cp-tool:hover { background: var(--maroon, #7b1e3a); color: #fff; border-color: var(--maroon, #7b1e3a); }
.cp-tool.danger { color: #b03a2e; border-color: rgba(176, 58, 46, .3); }
.cp-tool.danger:hover { background: #b03a2e; color: #fff; border-color: #b03a2e; }

.cp-list { display: flex; flex-direction: column; gap: .7rem; }

/* one piece */
.cp-item { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto auto auto; gap: .8rem 1rem; align-items: center; padding: .75rem 1rem .75rem .75rem; border-radius: 1.3rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 252, 247, .95)); border: 1px solid rgba(var(--maroon-rgb, 123, 30, 58), .11); box-shadow: 0 8px 22px rgba(60, 20, 40, .06); transition: box-shadow .2s, border-color .2s, transform .15s; }
.cp-item:hover { border-color: rgba(var(--gold-rgb, 201, 162, 39), .5); box-shadow: 0 14px 30px rgba(60, 20, 40, .12); }
.cp-thumb img { width: 4.2rem; height: 4.2rem; object-fit: cover; border-radius: 1rem; background: var(--ivory-deep, #f7ecd9); border: 1px solid rgba(var(--gold-rgb, 201, 162, 39), .45); box-shadow: 0 5px 12px rgba(60, 20, 40, .14); display: block; }
.cp-info { min-width: 0; }
.cp-name { display: block; font-weight: 800; color: #2a1a22; text-decoration: none; line-height: 1.25; }
.cp-name:hover { color: var(--maroon, #7b1e3a); }
.cp-var, .cp-each { font-size: .8rem; color: #8a7b72; }

/* the quantity stepper; "Update" appears only after the number changed */
.cp-qty { display: flex; align-items: center; gap: .5rem; margin: 0; }
.cp-step { display: inline-flex; align-items: center; border-radius: 999px; border: 1.5px solid rgba(var(--maroon-rgb, 123, 30, 58), .2); background: #fffdfb; overflow: hidden; }
.cp-step button { width: 2rem; height: 2.15rem; border: 0; background: transparent; color: var(--maroon, #7b1e3a); cursor: pointer; font-size: .8rem; transition: background .15s; }
.cp-step button:hover { background: var(--maroon-tint, #fbf1f4); }
.cp-step input { width: 2.8rem; height: 2.15rem; border: 0; text-align: center; font-weight: 800; background: transparent; color: #2a1a22; -moz-appearance: textfield; }
.cp-step input::-webkit-outer-spin-button, .cp-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-step input:focus { outline: 0; box-shadow: inset 0 0 0 2px rgba(var(--gold-rgb, 201, 162, 39), .5); }
.cp-update { display: none; border: 0; border-radius: 999px; padding: .4rem .95rem; font-weight: 800; font-size: .78rem; color: #2a1a22; cursor: pointer;
    background: linear-gradient(135deg, var(--gold-light, #e8c766), var(--gold, #c9a227) 60%, var(--gold-dark, #a3801d)); box-shadow: 0 5px 14px rgba(var(--gold-rgb, 201, 162, 39), .45); }
.cp-qty.dirty .cp-update { display: inline-block; }

.cp-total { min-width: 5.2rem; text-align: right; font-weight: 800; font-size: 1.02rem; color: var(--maroon-dark, #5c1329); }
.cp-rmf { margin: 0; }
.cp-rm { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #a39489; background: rgba(var(--maroon-rgb, 123, 30, 58), .05); transition: background .15s, color .15s, transform .15s; }
.cp-rm:hover, .cp-rm:focus-visible { background: #fde8e8; color: #c0392b; transform: scale(1.08); outline: 0; }

/* a category: overlapping photos, the name, "19 pieces", the amount; opens to its pieces */
.cp-grp { border-radius: 1.5rem; background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 252, 247, .95)); border: 1px solid rgba(var(--maroon-rgb, 123, 30, 58), .12); box-shadow: 0 10px 28px rgba(60, 20, 40, .07); transition: border-color .25s, box-shadow .25s; }
.cp-grp[open] { border-color: rgba(var(--gold-rgb, 201, 162, 39), .5); box-shadow: 0 18px 40px rgba(60, 20, 40, .12); }
.cp-grp > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: .8rem 1.2rem .8rem 1rem; cursor: pointer; border-radius: 1.5rem; }
.cp-grp > summary::-webkit-details-marker { display: none; }
.cp-grp > summary:hover { background: rgba(var(--maroon-rgb, 123, 30, 58), .035); }
.cp-grp > summary:focus-visible { outline: 3px solid rgba(var(--maroon-rgb, 123, 30, 58), .3); outline-offset: 2px; }
.cp-stack { display: inline-flex; padding-left: .8rem; }
.cp-stack img { width: 3.1rem; height: 3.1rem; object-fit: cover; border-radius: 50%; margin-left: -.8rem; border: 2.5px solid #fff; box-shadow: 0 3px 9px rgba(0, 0, 0, .2); background: var(--ivory-deep, #f7ecd9); }
.cp-gi { display: flex; flex-direction: column; min-width: 0; }
.cp-gi b { font-family: var(--font-display, 'Playfair Display', serif); font-size: 1.25rem; color: var(--maroon-dark, #5c1329); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-gi small { color: #8a7b72; font-weight: 700; }
.cp-gp { font-weight: 800; font-size: 1.05rem; color: var(--maroon-dark, #5c1329); white-space: nowrap; }
.cp-chev { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--maroon-rgb, 123, 30, 58), .08); color: var(--maroon, #7b1e3a); transition: transform .3s, background .2s; }
.cp-grp[open] .cp-chev { transform: rotate(180deg); background: var(--maroon, #7b1e3a); color: #fff; }
.cp-gitems { display: flex; flex-direction: column; gap: .55rem; padding: .2rem .9rem 1rem; border-top: 1px dashed rgba(var(--gold-rgb, 201, 162, 39), .45); margin: 0 .5rem; padding-top: .9rem; }
.cp-gitems .cp-item { box-shadow: none; background: rgba(255, 255, 255, .9); }

/* the summary extras */
.cp-hidden { font-size: .9rem; color: rgba(255, 255, 255, .8); margin: 0 0 1rem; }
.cp-coupon { display: flex; gap: .4rem; margin-bottom: .9rem; padding: .3rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); }
.cp-coupon input { flex: 1 1 auto; min-width: 0; height: 2.3rem; border: 0; background: transparent; color: #fff; padding: 0 .9rem; font-weight: 600; }
.cp-coupon input::placeholder { color: rgba(255, 255, 255, .55); }
.cp-coupon input:focus { outline: 0; }
.cp-coupon:focus-within { border-color: var(--gold-light, #e8c766); box-shadow: 0 0 0 3px rgba(var(--gold-rgb, 201, 162, 39), .3); }
.cp-coupon button { border: 0; border-radius: 999px; padding: 0 1.1rem; font-weight: 800; font-size: .8rem; cursor: pointer; color: #2a1a22; background: linear-gradient(135deg, var(--gold-light, #e8c766), var(--gold, #c9a227)); }
.cp-coupon.on { align-items: center; justify-content: space-between; }
.cp-code { color: var(--gold-light, #e8c766); font-weight: 800; padding-left: .7rem; letter-spacing: .03em; }
.cp-go { margin-top: 1.1rem; text-decoration: none; }
a.co-place, a.co-place:hover { text-decoration: none; color: #2a1a22; }

.cp-empty { text-align: center; padding: 3.5rem 1rem; border-radius: 1.6rem; background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 252, 247, .95)); border: 1px solid rgba(var(--gold-rgb, 201, 162, 39), .45); box-shadow: 0 12px 34px rgba(60, 20, 40, .08); }
.cp-empty i.bi-bag-heart { font-size: 3rem; color: var(--gold-dark, #a3801d); }
.cp-empty h2 { font-family: var(--font-display, 'Playfair Display', serif); color: var(--maroon-dark, #5c1329); margin: .6rem 0 1.2rem; }
.cp-shop { width: auto; display: inline-flex; padding: 0 2rem; }

/* phones: the row folds into two lines */
@media (max-width: 767.98px) {
    .cp-item { grid-template-columns: 3.6rem minmax(0, 1fr) auto; grid-template-areas: "thumb info rm" "qty qty total"; align-items: center; padding: .7rem; }
    .cp-thumb { grid-area: thumb; } .cp-info { grid-area: info; } .cp-rmf { grid-area: rm; } .cp-qty { grid-area: qty; } .cp-total { grid-area: total; }
    .cp-thumb img { width: 3.6rem; height: 3.6rem; }
    .cp-grp > summary { grid-template-columns: auto minmax(0, 1fr) auto; padding: .7rem .8rem; gap: .7rem; }
    .cp-gp { display: none; }
    .cp-stack img { width: 2.5rem; height: 2.5rem; }
    .cp-gi b { font-size: 1.1rem; }
    .cp-gitems { margin: 0; padding: .7rem .5rem .8rem; }
}
@media (prefers-reduced-motion: reduce) { .cp-chev, .cp-rm, .cp-item { transition: none; } }