@font-face {
  font-family: "TikTok Text";
  src: url("/fonts/tiktok-text-regular.otf") format("opentype");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: "TikTok Text";
  src: url("/fonts/tiktok-text-bold.otf") format("opentype");
  font-display: swap;
  font-weight: 700;
}

:root {
  --cart-width: 420px;
  --cart-bg: #0b0b0b;
  --cart-surface: #1d1d1f;
  --cart-text: #f5f5f5;
  --cart-muted: #a4a4a8;
  --cart-line: #303034;
  --cart-primary: #fe2c55;
  --cart-teal: #18bdb8;
  color-scheme: dark;
  font-family: "TikTok Text", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: #efefef; font-size: 15px; }
body { margin: 0; }
body.has-cart-sheet { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.cart-page { min-width: 320px; background: #efefef; color: var(--cart-text); }
.cart { width: min(100%, var(--cart-width)); min-height: 100vh; margin: 0 auto; padding-bottom: 82px; background: var(--cart-bg); }

.cart-header {
  position: sticky; top: 0; z-index: 20; display: grid; height: 56px;
  grid-template-columns: 50px 1fr 82px; align-items: center; border-bottom: 1px solid var(--cart-line);
  background: #1c1c1e;
}
.cart-header h1 { margin: 0; font-size: 18px; font-weight: 700; text-align: center; }
.cart-header button { height: 100%; border: 0; background: transparent; color: #d6d6d8; cursor: pointer; }
.cart-header__back { display: grid; width: 50px; height: 56px; place-items: center; }
.cart-header__back span { width: 13px; height: 13px; border-bottom: 2px solid white; border-left: 2px solid white; transform: rotate(45deg); }

.cart-address { display: flex; height: 34px; align-items: center; justify-content: center; gap: 5px; overflow: hidden; padding: 0 12px; background: #1c1c1e; color: var(--cart-muted); font-size: 13px; }
.cart-address > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-address__pin { width: 11px; height: 11px; flex: 0 0 11px; border: 1.5px solid #8e8e92; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.cart-address__chevron, .cart-shop__chevron { width: 8px; height: 8px; flex: 0 0 8px; border-top: 1px solid #aaa; border-right: 1px solid #aaa; transform: rotate(45deg); }

.cart-shop { margin-top: 7px; background: var(--cart-surface); }
.cart-shop__header { display: flex; height: 46px; align-items: center; gap: 7px; padding: 0 16px; }
.cart-shop__header strong { font-size: 17px; }
.cart-shop__badge { padding: 2px 5px; border-radius: 3px; background: #fff0c7; color: #4f3a16; font-size: 12px; font-weight: 700; }
.cart-check { position: relative; width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid #777; border-radius: 50%; background: transparent; cursor: pointer; }
.cart-check.is-active { border-color: var(--cart-primary); background: var(--cart-primary); }
.cart-check.is-active::after { position: absolute; top: 5px; left: 7px; width: 7px; height: 4px; border-bottom: 2px solid white; border-left: 2px solid white; content: ""; transform: rotate(-45deg); }
.cart-shipping { height: 36px; margin: 0; padding: 8px 16px; background: #10383a; color: #b8d8d8; font-size: 14px; }
.cart-shipping b { margin-right: 8px; color: var(--cart-teal); font-size: 18px; }

.cart-item-swipe { position: relative; overflow: hidden; background: #31050f; touch-action: pan-y; }
.cart-item-swipe + .cart-item-swipe { border-top: 1px solid var(--cart-line); }
.cart-item-swipe__actions { position: absolute; inset: 0 0 0 auto; display: grid; width: 64px; grid-template-columns: 64px; }
.cart-item-swipe__actions button { position: relative; display: grid; place-items: center; border: 0; cursor: pointer; }
.cart-item-swipe__delete { background: var(--cart-primary); color: white; }
.cart-item-swipe__delete img { width: 24px; height: 24px; object-fit: contain; }
.cart-item { position: relative; z-index: 1; display: grid; grid-template-columns: 29px 108px minmax(0, 1fr); gap: 8px; min-height: 183px; padding: 12px 7px 11px 16px; background: var(--cart-surface); transition: transform 180ms ease; will-change: transform; }
.cart-item-swipe.is-dragging .cart-item { transition: none; }
.cart-item-swipe.is-open .cart-item { transform: translate3d(-64px, 0, 0); }
.cart-item > .cart-check { align-self: center; }
.cart-item__image-link { align-self: start; }
.cart-item__image { width: 108px; height: 108px; border-radius: 5px; object-fit: cover; }
.cart-item__content { position: relative; min-width: 0; }
.cart-item__title { display: block; overflow: hidden; color: #e3e3e5; font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cart-item__variant { display: flex; width: 100%; height: 32px; align-items: center; justify-content: space-between; margin-top: 5px; padding: 0 9px; overflow: hidden; border: 0; border-radius: 3px; background: #48484b; color: #ddd; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; }
.cart-item__variant::after { width: 7px; height: 7px; flex: 0 0 7px; margin-left: 7px; border-right: 2px solid #aaa; border-bottom: 2px solid #aaa; content: ""; transform: rotate(45deg) translateY(-2px); }
.cart-item__shipping { display: inline-flex; align-items: center; gap: 3px; margin-top: 7px; padding: 2px 5px; border-radius: 2px; background: #104845; color: #67e0d7; font-size: 12px; }
.cart-item__shipping img { width: 13px; height: 13px; object-fit: contain; }
.cart-item__bottom { display: flex; min-width: 0; align-items: flex-end; justify-content: space-between; gap: 5px; margin-top: 5px; }
.cart-item__prices { min-width: 0; }
.cart-item__prices > strong { color: #ff4267; font-size: 20px; line-height: 1.1; }
.cart-item__prices p { display: flex; align-items: center; gap: 5px; margin: 1px 0 0; color: #929296; font-size: 13px; }
.cart-item__prices p span { color: #ff7a95; }
.cart-item__prices small { display: block; margin-top: 5px; overflow: hidden; color: #e9bd35; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cart-quantity { display: grid; height: 32px; flex: 0 0 90px; grid-template-columns: 30px 30px 30px; overflow: hidden; border-radius: 3px; background: #3b3b3e; }
.cart-quantity button, .cart-quantity output { display: grid; place-items: center; border: 0; background: transparent; color: #ddd; }
.cart-quantity button { cursor: pointer; font-size: 19px; }
.cart-item__remove { position: absolute; top: 0; right: 0; display: none; padding: 4px 8px; border: 0; border-radius: 3px; background: #842239; color: white; cursor: pointer; }
.cart.is-editing .cart-item__remove { display: block; }
.cart.is-editing .cart-item__title { padding-right: 42px; }

.cart-empty { padding: 50px 20px; text-align: center; }
.cart-empty img { width: 54px; margin: 0 auto 14px; filter: invert(1); opacity: .75; }
.cart-empty h2 { margin: 0 0 18px; font-size: 18px; }
.cart-empty a { display: inline-flex; padding: 10px 18px; border-radius: 4px; background: var(--cart-primary); }

.cart-recommendations { padding: 34px 7px 10px; border-top: 8px solid #000; }
.cart-recommendations h2 { margin: 0 0 15px; font-size: 19px; }
.cart-recommendations__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cart-recommendation { min-width: 0; overflow: hidden; border-radius: 7px; background: #202023; }
.cart-recommendation__image { position: relative; aspect-ratio: 1; background: #333; }
.cart-recommendation__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-recommendation__image > span { position: absolute; top: 0; right: 0; padding: 3px 8px; border-radius: 0 0 0 4px; background: #f44343; font-size: 12px; }
.cart-recommendation > p { display: -webkit-box; min-height: 41px; margin: 7px 7px 2px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.4; }
.cart-recommendation > p b { padding: 1px 4px; border-radius: 2px; background: #fff0c7; color: #49350f; font-size: 11px; }
.cart-recommendation__price { display: flex; min-width: 0; align-items: baseline; gap: 8px; padding: 0 7px; }
.cart-recommendation__price strong { overflow: hidden; color: #ff4267; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.cart-recommendation__price del { overflow: hidden; color: #777; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cart-recommendation > small { display: inline-flex; align-items: center; gap: 3px; margin: 6px 7px; padding: 2px 5px; border-radius: 2px; background: #104845; color: #67e0d7; }
.cart-recommendation > small img { width: 12px; height: 12px; object-fit: contain; }
.cart-recommendation__sold { display: block; padding: 0 7px 8px; color: var(--cart-muted); font-size: 12px; }

.cart-checkout { position: fixed; left: 50%; bottom: 0; z-index: 30; display: grid; width: min(100%, var(--cart-width)); height: 68px; grid-template-columns: 28px 50px 1fr 145px; align-items: center; gap: 6px; padding: 5px 10px; border-top: 1px solid var(--cart-line); background: #1b1b1d; transform: translateX(-50%); }
.cart-checkout__all { color: var(--cart-muted); }
.cart-checkout__total { min-width: 0; text-align: right; }
.cart-checkout__total strong, .cart-checkout__total small, .cart-checkout__total em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-checkout__total strong { color: #ff4267; font-size: 20px; }
.cart-checkout__total small { color: var(--cart-teal); font-size: 12px; }
.cart-checkout__total em { color: #ff4267; font-size: 12px; font-style: normal; }
.cart-checkout__submit { height: 50px; border: 0; border-radius: 25px; background: var(--cart-primary); color: white; cursor: pointer; font-size: 17px; }

.cart-toast { position: fixed; left: 50%; bottom: 82px; z-index: 50; padding: 9px 14px; border-radius: 4px; background: rgba(0, 0, 0, .86); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: 160ms ease; }
.cart-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.cart-variant-sheet { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-end; justify-content: center; }
.cart-variant-sheet.is-open { display: flex; }
.cart-variant-sheet__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0, 0, 0, .62); }
.cart-variant-sheet__panel { position: relative; display: flex; width: min(100%, var(--cart-width)); max-height: 78vh; flex-direction: column; padding: 0 14px 14px; overflow-y: auto; border-radius: 14px 14px 0 0; background: #fff; color: #181818; }
.cart-variant-sheet__header { display: flex; height: 54px; flex: 0 0 54px; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; }
.cart-variant-sheet__header h2 { margin: 0; font-size: 18px; }
.cart-variant-sheet__header button { width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer; font-size: 28px; }
.cart-variant-sheet__loading, .cart-variant-sheet__error { padding: 35px 8px; color: #777; text-align: center; }
.cart-variant-sheet__error { color: #c42b48; }
.cart-variant-sheet__product { display: flex; gap: 12px; padding: 14px 0; }
.cart-variant-sheet__product img { width: 82px; height: 82px; flex: 0 0 82px; border-radius: 6px; object-fit: cover; }
.cart-variant-sheet__product div { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.cart-variant-sheet__product strong { color: var(--cart-primary); font-size: 22px; }
.cart-variant-sheet__product span { margin-top: 6px; overflow: hidden; color: #777; text-overflow: ellipsis; white-space: nowrap; }
.cart-variant-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cart-variant-option { min-width: 0; padding: 0; overflow: hidden; border: 1px solid #ddd; border-radius: 6px; background: white; cursor: pointer; }
.cart-variant-option.is-active { border: 2px solid var(--cart-primary); }
.cart-variant-option img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cart-variant-option span { display: block; padding: 6px 4px; overflow: hidden; color: #555; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cart-variant-sheet__confirm { width: 100%; height: 46px; flex: 0 0 46px; margin-top: 16px; border: 0; border-radius: 23px; background: var(--cart-primary); color: white; cursor: pointer; font-size: 16px; }
.cart-variant-sheet__confirm:disabled { background: #ddd; cursor: default; }

@media (max-width: 360px) {
  .cart-item { grid-template-columns: 27px 92px minmax(0, 1fr); padding-left: 9px; }
  .cart-item__image { width: 92px; height: 92px; }
  .cart-quantity { flex-basis: 78px; grid-template-columns: repeat(3, 26px); }
  .cart-checkout { grid-template-columns: 25px 42px 1fr 126px; padding-inline: 7px; }
}
