.cart-drawer-overlay {
background-color: rgba(10, 7, 4, 0.6);
opacity: 0;
transition: opacity 0.34s ease;
}
.cart-drawer-overlay.is-on {
opacity: 1;
}
.cart-drawer {
--cd-bg: #14100a;
--cd-bg-2: #1c1610;
--cd-surface: rgba(253, 250, 240, 0.05);
--cd-surface-2: rgba(253, 250, 240, 0.09);
--cd-line: rgba(253, 250, 240, 0.11);
--cd-text: #fdfaf0;
--cd-soft: rgba(253, 250, 240, 0.64);
--cd-gold: #c6921e;
--cd-gold-light: #e6b94f;
--cd-bad: #f0a79a;
--cd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
max-width: 440px;
background: linear-gradient(180deg, var(--cd-bg-2), var(--cd-bg) 40%);
color: var(--cd-text);
box-shadow: none;
transition: transform 0.36s var(--cd-ease), box-shadow 0.36s ease;
}
.cart-drawer.open {
box-shadow: -18px 0 50px rgba(0, 0, 0, 0.45);
}
html.cd-lock {
overflow: hidden;
}
@media (min-width: 861px) {
html.cd-lock {
overflow: visible;
}
}
.cart-drawer .cart-drawer-header {
padding: 20px 22px 16px;
border-bottom: 1px solid var(--cd-line);
}
.cart-drawer .cart-drawer-header h2 {
display: flex;
align-items: baseline;
gap: 10px;
font-family: 'Fraunces', Georgia, serif;
font-size: 1.35rem;
font-weight: 600;
color: var(--cd-text);
}
.cd-head-count {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--cd-gold-light);
padding: 3px 10px;
border-radius: 999px;
background: rgba(198, 146, 30, 0.16);
}
.cart-drawer .cart-drawer-close {
width: 38px;
height: 38px;
background: var(--cd-surface-2);
color: var(--cd-text);
transition: background-color 0.2s ease, transform 0.2s var(--cd-ease);
}
.cart-drawer .cart-drawer-close:hover {
background: rgba(253, 250, 240, 0.16);
transform: rotate(90deg);
}
.cart-drawer .cart-drawer-body {
position: relative;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.cd-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 16px 22px 12px;
scrollbar-width: thin;
scrollbar-color: rgba(253, 250, 240, 0.25) transparent;
}
.cd-banner {
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 14px;
padding: 11px 14px;
border-radius: 12px;
background: rgba(198, 146, 30, 0.14);
border: 1px solid rgba(198, 146, 30, 0.35);
color: var(--cd-gold-light);
font-size: 0.84rem;
line-height: 1.45;
}
.cd-banner[hidden] {
display: none;
}
.cd-banner.is-bad {
background: rgba(240, 167, 154, 0.1);
border-color: rgba(240, 167, 154, 0.4);
color: var(--cd-bad);
}
.cd-banner svg {
flex: 0 0 auto;
margin-top: 2px;
}
.cd-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.cd-list[hidden] {
display: none;
}
.cd-item {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.3s var(--cd-ease), opacity 0.22s ease;
}
.cd-item-inner {
min-height: 0;
overflow: hidden;
}
.cd-row {
display: grid;
grid-template-columns: 76px minmax(0, 1fr) auto;
gap: 14px;
align-items: start;
padding: 14px 0;
border-bottom: 1px solid var(--cd-line);
}
.cd-item:last-child .cd-row {
border-bottom: 0;
}
.cd-item.is-entering {
animation: cd-in 0.45s var(--cd-ease) both;
}
.cd-item.is-leaving {
grid-template-rows: 0fr;
opacity: 0;
pointer-events: none;
}
.cd-item.is-leaving .cd-row {
transform: translateX(-28px);
transition: transform 0.28s var(--cd-ease);
}
.cart-drawer.cd-stagger .cd-item {
animation: cd-in 0.5s var(--cd-ease) both;
animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}
@keyframes cd-in {
from {
opacity: 0;
transform: translateX(26px);
}
to {
opacity: 1;
transform: none;
}
}
.cd-thumb {
display: block;
width: 76px;
height: 76px;
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.cd-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.cd-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.cd-name {
color: var(--cd-text);
font-weight: 600;
font-size: 0.95rem;
line-height: 1.3;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cd-name:hover {
color: var(--cd-gold-light);
}
.cd-variant {
font-size: 0.78rem;
color: var(--cd-soft);
}
.cd-price-line {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 0.82rem;
color: var(--cd-soft);
}
.cd-was {
color: rgba(253, 250, 240, 0.4);
}
.cd-flag {
display: flex;
gap: 6px;
align-items: flex-start;
margin-top: 4px;
padding: 6px 9px;
border-radius: 9px;
font-size: 0.76rem;
line-height: 1.35;
}
.cd-flag[hidden] {
display: none;
}
.cd-flag svg {
flex: 0 0 auto;
margin-top: 1px;
}
.cd-flag.is-note {
background: rgba(198, 146, 30, 0.16);
color: var(--cd-gold-light);
}
.cd-flag.is-bad {
background: rgba(240, 167, 154, 0.12);
color: var(--cd-bad);
}
.cd-item.is-unavailable .cd-thumb,
.cd-item.is-unavailable .cd-name {
opacity: 0.55;
}
.cd-controls {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
flex-wrap: wrap;
}
.cd-stepper {
display: inline-flex;
align-items: center;
border: 1px solid var(--cd-line);
border-radius: 999px;
background: var(--cd-surface);
}
.cd-stepper button {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--cd-text);
cursor: pointer;
transition: background-color 0.18s ease, transform 0.18s var(--cd-ease);
}
.cd-stepper button:hover {
background: var(--cd-surface-2);
}
.cd-stepper button:active {
transform: scale(0.88);
}
.cd-item.is-unavailable .cd-stepper button[data-act='inc'] {
opacity: 0.3;
pointer-events: none;
}
.cd-qty {
min-width: 26px;
text-align: center;
font-weight: 700;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
}
.cd-bump {
animation: cd-bump 0.34s var(--cd-ease);
}
@keyframes cd-bump {
0% {
transform: scale(1);
}
40% {
transform: scale(1.35);
color: var(--cd-gold-light);
}
100% {
transform: scale(1);
}
}
.cd-later,
.cd-remove {
display: inline-flex;
align-items: center;
gap: 5px;
border: 0;
background: none;
color: var(--cd-soft);
font: inherit;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
padding: 6px 4px;
border-radius: 8px;
transition: color 0.18s ease;
}
.cd-later:hover {
color: var(--cd-gold-light);
}
.cd-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.cd-remove {
padding: 6px;
}
.cd-remove:hover {
color: var(--cd-bad);
}
.cd-linetotal {
font-weight: 700;
font-size: 0.98rem;
font-variant-numeric: tabular-nums;
color: var(--cd-text);
white-space: nowrap;
padding-top: 2px;
}
.cd-empty {
text-align: center;
padding: 34px 10px 18px;
}
.cd-empty[hidden] {
display: none;
}
.cd-empty-icon {
width: 68px;
height: 68px;
margin: 0 auto 14px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(198, 146, 30, 0.16);
color: var(--cd-gold-light);
}
.cd-empty h3 {
margin: 0 0 6px;
font-family: 'Fraunces', Georgia, serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--cd-text);
}
.cd-empty p {
margin: 0 0 18px;
color: var(--cd-soft);
font-size: 0.9rem;
}
.cd-upsell {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--cd-line);
}
.cd-upsell[hidden] {
display: none;
}
.cd-upsell h3 {
margin: 0 0 12px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cd-gold-light);
}
.cd-upsell-row {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding-bottom: 8px;
margin: 0 -22px;
padding-left: 22px;
padding-right: 22px;
scrollbar-width: none;
}
.cd-upsell-row::-webkit-scrollbar {
display: none;
}
.cd-sug {
flex: 0 0 132px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 7px;
padding: 9px;
border-radius: 14px;
background: var(--cd-surface);
border: 1px solid var(--cd-line);
transition: transform 0.25s var(--cd-ease), border-color 0.2s ease, background-color 0.2s ease;
}
.cd-sug:hover {
transform: translateY(-3px);
border-color: rgba(198, 146, 30, 0.5);
background: var(--cd-surface-2);
}
.cd-sug-img {
display: block;
aspect-ratio: 1 / 1;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.cd-sug-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.cd-sug-name {
color: var(--cd-text);
font-size: 0.8rem;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
}
.cd-sug-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.cd-sug-price {
font-size: 0.85rem;
font-weight: 700;
color: var(--cd-gold-light);
}
.cd-sug-add {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: var(--cd-gold);
color: #14100a;
cursor: pointer;
transition: transform 0.18s var(--cd-ease), background-color 0.18s ease;
}
.cd-sug-add:hover {
background: var(--cd-gold-light);
transform: scale(1.1);
}
.cd-sug-add:active {
transform: scale(0.9);
}
.cd-footer {
flex: 0 0 auto;
padding: 14px 22px 20px;
border-top: 1px solid var(--cd-line);
background: rgba(10, 7, 4, 0.55);
display: flex;
flex-direction: column;
gap: 12px;
}
.cd-footer[hidden] {
display: none;
}
.cd-account {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: var(--cd-soft);
line-height: 1.4;
}
.cd-account svg {
flex: 0 0 auto;
color: var(--cd-gold-light);
}
.cd-account b {
color: var(--cd-text);
font-weight: 600;
}
.cd-account a {
margin-left: auto;
color: var(--cd-gold-light);
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.cd-account a:first-child {
margin-left: 0;
}
.cd-account a:hover {
text-decoration: underline;
}
.cd-note summary {
cursor: pointer;
list-style: none;
font-size: 0.82rem;
font-weight: 600;
color: var(--cd-soft);
transition: color 0.18s ease;
}
.cd-note summary::-webkit-details-marker {
display: none;
}
.cd-note summary::before {
content: '+ ';
color: var(--cd-gold-light);
}
.cd-note[open] summary::before {
content: '– ';
}
.cd-note summary:hover {
color: var(--cd-text);
}
.cd-note textarea {
width: 100%;
margin-top: 8px;
min-height: 62px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--cd-line);
background: var(--cd-surface);
color: var(--cd-text);
font: inherit;
font-size: 0.88rem;
resize: vertical;
}
.cd-note textarea::placeholder {
color: rgba(253, 250, 240, 0.4);
}
.cd-note textarea:focus {
outline: none;
border-color: var(--cd-gold);
box-shadow: 0 0 0 3px rgba(198, 146, 30, 0.22);
}
.cd-lines {
display: flex;
flex-direction: column;
gap: 6px;
}
.cd-line {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.92rem;
color: var(--cd-soft);
}
.cd-line[hidden] {
display: none;
}
.cd-line b {
color: var(--cd-text);
font-size: 1.15rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.cd-save {
color: #9bd4ab;
}
.cd-save span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.cd-save b {
color: #9bd4ab;
font-size: 0.95rem;
}
.cd-delivery {
margin: 2px 0 0;
font-size: 0.76rem;
line-height: 1.45;
color: rgba(253, 250, 240, 0.5);
}
.cd-checkout {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 10px;
padding: 0 20px;
min-height: 56px;
border-radius: 16px;
background: linear-gradient(180deg, #e0b341, #c6921e);
color: #14100a;
font-weight: 800;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 10px 26px rgba(198, 146, 30, 0.35);
transition: transform 0.2s var(--cd-ease), box-shadow 0.2s ease, opacity 0.2s ease;
}
.cd-checkout-total {
margin-left: auto;
font-variant-numeric: tabular-nums;
}
.cd-checkout-arrow {
display: grid;
place-items: center;
transition: transform 0.25s var(--cd-ease);
}
.cd-checkout:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(198, 146, 30, 0.45);
}
.cd-checkout:hover .cd-checkout-arrow {
transform: translateX(4px);
}
.cd-checkout:active {
transform: translateY(0) scale(0.99);
}
.cd-checkout::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: translateX(-160%) skewX(-18deg);
animation: cd-sheen 4.5s ease-in-out 1.2s infinite;
pointer-events: none;
}
@keyframes cd-sheen {
0%,
60% {
transform: translateX(-160%) skewX(-18deg);
}
100% {
transform: translateX(380%) skewX(-18deg);
}
}
.cd-checkout.is-disabled {
opacity: 0.45;
box-shadow: none;
cursor: not-allowed;
}
.cd-checkout.is-disabled::after {
display: none;
}
.cd-links {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.82rem;
}
.cd-links a,
.cd-links button {
background: none;
border: 0;
padding: 4px 0;
font: inherit;
font-weight: 600;
color: var(--cd-soft);
cursor: pointer;
text-decoration: none;
transition: color 0.18s ease;
}
.cd-links a:hover,
.cd-links button:hover {
color: var(--cd-gold-light);
}
.cd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 24px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
}
.cd-btn-gold {
background: linear-gradient(180deg, #e0b341, #c6921e);
color: #14100a;
}
.cd-toast {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 14px;
background: #fdfaf0;
color: #14100a;
font-size: 0.86rem;
font-weight: 600;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
opacity: 0;
transform: translateY(14px);
pointer-events: none;
transition: opacity 0.22s ease, transform 0.25s var(--cd-ease);
}
.cd-toast.is-on {
opacity: 1;
transform: none;
pointer-events: auto;
}
.cd-toast button {
border: 0;
background: none;
color: #8a6209;
font: inherit;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
}
.cd-page-toast {
position: fixed;
left: 50%;
bottom: 22px;
z-index: 1250;
transform: translate(-50%, 16px);
display: flex;
align-items: center;
gap: 16px;
max-width: min(92vw, 460px);
padding: 13px 18px;
border-radius: 14px;
background: #14100a;
color: #fdfaf0;
font-size: 0.88rem;
box-shadow: 0 16px 38px rgba(20, 16, 10, 0.35);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cd-page-toast.is-on {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
.cd-page-toast button {
border: 0;
background: none;
color: #e6b94f;
font: inherit;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
}
@media (max-width: 520px) {
.cart-drawer {
max-width: 100%;
}
.cd-row {
grid-template-columns: 64px minmax(0, 1fr) auto;
gap: 12px;
}
.cd-thumb {
width: 64px;
height: 64px;
}
}
@media (max-height: 780px) {
.cd-account,
.cd-delivery {
display: none;
}
}