/* cart.css - cart page + cart drawer (Basic, Figma 325:1023 "Cart Full" + "Cart sidebar").
 *
 * The page: a warm-grey band between the header and the footer; "CART" in the heading face with
 * the item count at the right, a rule, hairline-separated line rows (3:4 thumbnail, name,
 * swatch + variant, boxed stepper + REMOVE, price with the original struck beneath); at the right
 * a white SUMMARY card with a thin border. The drawer: a white right-hand panel over a dimmed page,
 * the same rows, and the summary pinned at the bottom.
 *
 * The colours, rules and type follow the account pages built from the same Figma file
 * (account.css): ink #0f0c0b, caption grey #595550, the warm hairline #dcdad8, the band #f8f8f7,
 * success green #16a64b, error red #b3261e; square corners throughout; tracked small capitals
 * for labels and buttons in the body face (Jost), the heading face (Lustria) for titles.
 *
 * Structural rules that keep this predictable:
 *   1. The section declares NO outer padding: the merchant's padding props land on the
 *      .nscms-section wrapper. The band is .cart itself, bled to the window edge.
 *   2. The cart PAGE line and the DRAWER line share one class vocabulary (.cart-line and friends).
 *      The drawer's rows are built by cart.js with the same classes, so one set of rules styles
 *      both and they cannot drift apart visually.
 *   3. Every element that is toggled with the `hidden` attribute AND has a display rule of its own
 *      carries an explicit [hidden] guard: an author `display` beats the UA's [hidden] rule at any
 *      specificity, so without the guard the attribute is decorative.
 *
 * The discount chooser's base rules (.cart-choice*) are shared with the checkout page, which uses
 * the same control; they are left structurally as they were and only refined inside the cart.
 */

.cart,
.cart-drawer {
  --cart-ink: #0f0c0b;
  --cart-muted: #595550;
  --cart-line: #dcdad8;
  --cart-hair: #e9e8e7;
  --cart-soft: #f8f8f7;
  --cart-fill: #e7e7e9;
  --cart-ok: #16a64b;
  --cart-err: #b3261e;
  /* The error notice's box, as account.css .acct-notice--error draws it. */
  --cart-err-line: #f0c2bd;
  --cart-err-soft: #fdf1ef;
  /* The maximum-per-order note's box (0611): information, not an error, so a soft yellow. */
  --cart-note-soft: #fff4d6;
  --cart-hover: #2b2724;
  /* Kept for the rules below that predate the redesign (and the chooser shared with checkout). */
  --cart-rule: var(--cart-line);
  --cart-media: 4.75rem;
  /* THE SHARED BLOCKS (BUILD_BRIEF_2026-10-23-C §3: the way to free shipping, the "+" rows, Checkout
     with the total, the shipping-and-tax line) are drawn by the same rules in the drawer and on the
     page. They read these; the Rounded style (.cart-drawer--rounded / .cart--rounded, further down)
     sets them from the merchant's colour schemes, the Standard look from the Basic palette here. */
  --cdr-fg: var(--cart-ink);
  --cdr-muted: var(--cart-muted);
  --cdr-mark: var(--cart-err);
  --cdr-box: var(--cart-soft);
  --cdr-rule: var(--cart-line);
}

/* --- the band ---------------------------------------------------------------------------------
 * Bled to the window edge like the account pages. The content inset matches the header's and the
 * footer's (max(1.25rem, (100% - --maxw) / 2) from the window edge), so "CART" lines up with the
 * logo above it. <main> pads 1rem top and bottom; cancelling it only where the cart touches the
 * header or the footer keeps the band flush with both without eating into a neighbouring section.
 */
.cart {
  margin-inline: calc(-1 * var(--sec-bleed, 0px));
  padding: 4.5rem max(1.25rem, calc(var(--sec-bleed, 0px) - 1.25rem)) 6rem;
  background: var(--cart-soft);
  color: var(--cart-ink);
}

main > .nscms-section:first-child > .cart,
main > .cart:first-child {
  margin-top: -1rem;
}

main > .nscms-section:last-child > .cart,
main > .cart:last-child {
  margin-bottom: -1rem;
}

.cart__layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .cart__layout--two_column {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 1fr);
    column-gap: clamp(2.5rem, 4vw, 3.75rem);
  }
}

.cart__items {
  min-width: 0;
}

/* "CART" ........................................................ "3 ITEMS", then the rule. */
.cart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cart-line);
}

.cart__title {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--caps-spacing, 0.04em);
  text-transform: var(--caps-transform, uppercase);
}

.cart__count {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
}

/* --- lines ------------------------------------------------------------------------------------ */

.cart__lines,
.cart-drawer__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Three columns — thumbnail, the words, the price — placed by AREA so a line without a thumbnail
   ("Show product images" off) does not shuffle the others into the wrong columns. The breakdown and
   a refusal message sit under the words. */
.cart-line {
  display: grid;
  grid-template-columns: var(--cart-media) minmax(0, 1fr) auto;
  grid-template-areas:
    "media info total"
    ". breakdown breakdown"
    ". error error";
  column-gap: 1rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--cart-hair);
}

.cart-line:not(:has(> .cart-line__media)) {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "info total"
    "breakdown breakdown"
    "error error";
}

.cart-line__media {
  grid-area: media;
  width: 100%;
  overflow: hidden;
  background: var(--cart-fill);
}

.cart-line__media--portrait {
  aspect-ratio: 3 / 4;
}

.cart-line__media--square {
  aspect-ratio: 1 / 1;
}

.cart-line__media--landscape {
  aspect-ratio: 4 / 3;
}

.cart-line__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line__info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  min-width: 0;
}

.cart-line__title {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--caps-spacing, 0.06rem);
  text-transform: var(--caps-transform, uppercase);
  overflow-wrap: anywhere;
}

.cart-line__title a {
  color: inherit;
  text-decoration: none;
}

.cart-line__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cart-line__variant {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--cart-muted);
}

/* The colour square before "Grey / Size L". One span per part of the variant title, each carrying
   its value only as an attribute; the ones named here get a colour, every other part (a size, an
   unknown colour) stays hidden. Same curated palette as the product page's swatches (product.css). */
.cart-line__swatch {
  display: none;
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(15, 12, 11, 0.08);
}

.cart-line__swatch:is([data-swatch="black"], [data-swatch="hitam"], [data-swatch="white"], [data-swatch="putih"],
  [data-swatch="grey"], [data-swatch="gray"], [data-swatch="abu-abu"], [data-swatch="silver"],
  [data-swatch="red"], [data-swatch="merah"], [data-swatch="pink"], [data-swatch="orange"],
  [data-swatch="yellow"], [data-swatch="kuning"], [data-swatch="green"], [data-swatch="hijau"],
  [data-swatch="teal"], [data-swatch="blue"], [data-swatch="biru"], [data-swatch="navy"],
  [data-swatch="purple"], [data-swatch="ungu"], [data-swatch="brown"], [data-swatch="coklat"],
  [data-swatch="beige"], [data-swatch="cream"], [data-swatch="krem"], [data-swatch="gold"]) {
  display: inline-block;
}

.cart-line__swatch:is([data-swatch="black"], [data-swatch="hitam"]) { background: #111111; }
.cart-line__swatch:is([data-swatch="white"], [data-swatch="putih"]) { background: #ffffff; }
.cart-line__swatch:is([data-swatch="grey"], [data-swatch="gray"], [data-swatch="abu-abu"]) { background: #9d9d9d; }
.cart-line__swatch[data-swatch="silver"] { background: #d1d5db; }
.cart-line__swatch:is([data-swatch="red"], [data-swatch="merah"]) { background: #dc2626; }
.cart-line__swatch[data-swatch="pink"] { background: #ec4899; }
.cart-line__swatch[data-swatch="orange"] { background: #f97316; }
.cart-line__swatch:is([data-swatch="yellow"], [data-swatch="kuning"]) { background: #facc15; }
.cart-line__swatch:is([data-swatch="green"], [data-swatch="hijau"]) { background: #16a34a; }
.cart-line__swatch[data-swatch="teal"] { background: #0d9488; }
.cart-line__swatch:is([data-swatch="blue"], [data-swatch="biru"]) { background: #2563eb; }
.cart-line__swatch[data-swatch="navy"] { background: #1e3a8a; }
.cart-line__swatch:is([data-swatch="purple"], [data-swatch="ungu"]) { background: #7c3aed; }
.cart-line__swatch:is([data-swatch="brown"], [data-swatch="coklat"]) { background: #92400e; }
.cart-line__swatch[data-swatch="beige"] { background: #e7d8c0; }
.cart-line__swatch:is([data-swatch="cream"], [data-swatch="krem"]) { background: #f5efdc; }
.cart-line__swatch[data-swatch="gold"] { background: #d4af37; }

.cart-line__unit,
.cart-line__measure {
  margin: 0;
  font-size: 0.75rem;
  color: var(--cart-muted);
  font-variant-numeric: tabular-nums;
}

.cart-line__unit-was {
  margin-right: 0.25rem;
  text-decoration: line-through;
}

.cart-line__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.5rem;
}

/* The price column: what the line costs, and the struck original under it. */
.cart-line__total {
  grid-area: total;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The strike IS the message — nothing else distinguishes the two amounts — so line-through is
   set explicitly rather than left to the UA's `s` rule. */
.cart-line__was {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--cart-muted);
  text-decoration: line-through;
}

/* Ships on every line, toggled by `hidden` (cart.js strikes a line that only becomes discounted
   after a quantity change). Stated explicitly: a failure here prints the total twice. */
.cart-line__was[hidden] {
  display: none;
}

/* --- per-line discount breakdown ---------------------------------------------------------------
 * Under the words, so the reductions and the buy-X-get-Y gift read as belonging to the item above
 * them rather than as siblings of it. The explicit [hidden] rule is NOT redundant: `display: grid`
 * here would otherwise leave an empty breakdown visible on every undiscounted line.
 */
.cart-line__breakdown {
  grid-area: breakdown;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.8125rem;
}

.cart-line__breakdown[hidden] {
  display: none;
}

.cart-line__reduction {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--cart-ok);
}

.cart-line__reduction-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The gift is deliberately subordinate: smaller, dimmer, and hung off a tree marker so it cannot be
   mistaken for a second cart line the shopper is paying for. */
.cart-line__gift {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: baseline;
  position: relative;
  padding-left: 1.2rem;
  color: var(--cart-muted);
}

.cart-line__gift::before {
  content: "\21B3"; /* downwards arrow with tip rightwards */
  position: absolute;
  left: 0;
  opacity: 0.55;
}

.cart-line__gift-title em {
  font-style: normal;
  font-weight: 600;
  text-transform: var(--caps-transform, uppercase);
  font-size: 0.6875rem;
  letter-spacing: var(--caps-spacing, 0.06rem);
  padding: 0.05rem 0.35rem;
  margin-left: 0.3rem;
  border: 1px solid var(--cart-ok);
  color: var(--cart-ok);
}

.cart-line__gift-qty,
.cart-line__gift-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-line__gift-price s {
  margin-right: 0.3rem;
  text-decoration: line-through;
  opacity: 0.7;
}

.cart-line__gift-reason {
  grid-column: 1 / -1;
  font-size: 0.75rem;
}

/* A refusal attached to ONE cart line ("Only 3 left in stock") — the stock cap's answer, shown where
   the shopper just pressed rather than as a page-level banner. */
/* MAXIMUM PER ORDER (0611, storefront/cart_limits.go). "Maks. 5 per pesanan" under a limited line,
   drawn in the ink colour when it is the answer to what the shopper just did (is-hit); the notes
   above the lines when the cart lowered or held back a line. Absent on a cart with no limit. */
.cart-line__max {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--cart-muted);
}

.cart-line__max.is-hit {
  color: var(--cart-ink);
  font-weight: 600;
}

.cart__limit-notes,
.cart-drawer__limit-notes {
  margin: 0 0 1rem;
}

.cart__limit-note {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--cart-note-soft);
  color: var(--cart-ink);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.cart-line__error {
  grid-area: error;
  margin: 0.5rem 0 0;
  color: var(--cart-err);
  font-size: 0.8125rem;
}

/* --- quantity stepper ---------------------------------------------------------------------------
 * The design's boxed "− 1 +". Three sibling forms on the page (see snippets/cart-line.liquid), DOM
 * order set by no-JS correctness, so the visual order is done here with flex `order`.
 */
.cart-line__qty {
  display: inline-flex;
  align-items: stretch;
  height: 2.25rem;
  border: 1px solid var(--cart-line);
  background: #fff;
}

.cart-qty__step {
  order: 1;
  display: flex;
  margin: 0;
}

.cart-qty__step--plus {
  order: 3;
}

.cart-qty__set {
  order: 2;
  display: flex;
  align-items: stretch;
  margin: 0;
}

.cart-qty__step button {
  width: 1.875rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cart-muted);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cart-qty__step button:hover {
  color: var(--cart-ink);
}

/* A line at its "Maximum per order": the + is disabled, and looks it (the rounded drawer has its own). */
.cart-qty__step button:disabled,
.cart-qty__step button:disabled:hover {
  color: var(--cart-muted);
  opacity: 0.35;
  cursor: default;
}

.cart-qty__input {
  width: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cart-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.cart-qty__input::-webkit-outer-spin-button,
.cart-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-qty__input:focus-visible {
  outline: 1px solid var(--cart-ink);
  outline-offset: -1px;
}

/* The no-JS commit path; with cart.js running, typing a quantity applies it directly, so the
   button is redundant chrome. */
.cart-qty__update {
  padding: 0 0.5rem;
  border: 0;
  border-left: 1px solid var(--cart-line);
  background: transparent;
  color: var(--cart-ink);
  font: inherit;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--caps-spacing, 0.08rem);
  text-transform: var(--caps-transform, uppercase);
  cursor: pointer;
}

.nscms-js .cart-qty__update {
  display: none;
}

.cart-line__remove {
  margin: 0;
}

/* The bin (10-23-C §3: one remove control in both places), "Hapus" + the name for screen readers. */
.cart-line__bin {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cart-ink);
  cursor: pointer;
}

.cart-line__bin svg {
  width: 1.25rem;
  height: 1.25rem;
}

.cart-line__bin:hover {
  color: var(--cart-hover);
  background: var(--cart-fill);
}

/* "Sisa 2 lagi!" under a line (Theme settings › Cart › Show "Only 2 left!"). */
.cart-line__left {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--cdr-mark);
}

.cart-line.is-busy {
  opacity: 0.5;
}

/* --- the order note (inside "+ Tambah catatan pesanan", snippets/cart-note-row.liquid) ---------- */

/* The note form's label/textarea/button are INLINE by default, so they ran onto one line; stacked
   here and styled like the promotion-code field. */
.cart__note {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin: 0;
}

.cart__note textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--cart-line);
  border-radius: 0;
  background: #fff;
  color: var(--cart-ink);
  font: inherit;
  font-size: 0.875rem;
}

.cart__note textarea:focus {
  outline: none;
  border-color: var(--cart-ink);
}

.cart__note-save {
  align-self: flex-start;
  min-height: 2.375rem;
  padding: 0 1.125rem;
  border: 1px solid var(--cart-ink);
  border-radius: 0;
  background: #fff;
  color: var(--cart-ink);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
  cursor: pointer;
}

.cart__note-save:hover {
  background: var(--cart-ink);
  color: #fff;
}

/* SAVED state (snippets/cart-note.liquid): must not look like the editable one — a saved note that
   still renders as an open textarea is why "Save note" felt like it did nothing. */
.cart__note-text {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--cart-line);
  background: #fff;
  font-size: 0.875rem;
  /* Free text the shopper typed, newlines and all; long unbroken strings still have to wrap. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cart__note-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cart__note-edit {
  color: var(--cart-ink);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* An acknowledgement, not an alert; it disappears on the next navigation. */
.cart__note-status {
  font-size: 0.8125rem;
  color: var(--cart-ok);
}

/* --- the summary card ------------------------------------------------------------------------- */

.cart__summary {
  padding: 1.5rem;
  border: 1px solid var(--cart-line);
  background: #fff;
}

.cart-summary__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--cart-ink);
}

.cart-summary__title {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--caps-spacing, 0.04em);
  text-transform: var(--caps-transform, uppercase);
}

/* "✓ You have free shipping." — only when Go proved it (cart_basic.go). */
.cart-summary__free {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--cart-ok);
}

.cart-summary__free[hidden] {
  display: none;
}

.cart-summary__check {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
}

/* --- promotion code (cart-discount.liquid) ------------------------------------------------------ */

.cart-discount {
  margin: 0 0 1.5rem;
}

.cart-discount__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.cart-discount__label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
  color: var(--cart-muted);
}

.cart-discount__row {
  display: flex;
}

.cart-discount__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--cart-line);
  border-right: 0;
  border-radius: 0;
  background: #fff;
  color: var(--cart-ink);
  font: inherit;
  font-size: 0.8125rem;
}

/* Codes read in capitals once typed; the "Enter code" placeholder keeps its own case. */
.cart-discount__input:not(:placeholder-shown) {
  text-transform: var(--caps-transform, uppercase);
  letter-spacing: var(--caps-spacing, 0.04rem);
}

.cart-discount__input:focus {
  outline: none;
  border-color: var(--cart-ink);
  border-right: 0;
}

.cart-discount__button {
  flex: none;
  height: 2.5rem;
  padding: 0 1.125rem;
  border: 1px solid var(--cart-ink);
  border-radius: 0;
  background: #fff;
  color: var(--cart-ink);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
  cursor: pointer;
}

.cart-discount__button:hover,
.cart-discount__button:focus-visible {
  background: var(--cart-ink);
  color: #fff;
}

/* The applied (or rejected) code: a chip with an ×. Automatic discounts get none — they are listed
   in the totals and there is nothing for the shopper to remove. */
.cart-discount__codes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0;
}

.cart-discount__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.25rem 0.2rem 0.625rem;
  border: 1px solid var(--cart-line);
  background: var(--cart-soft);
  font-size: 0.75rem;
}

.cart-discount__pill-code {
  font-weight: 600;
  letter-spacing: var(--caps-spacing, 0.06rem);
  text-transform: var(--caps-transform, uppercase);
}

.cart-discount__remove-form {
  display: inline-flex;
  margin: 0;
}

/* A real submit button in a real form, so Enter and click both work with no JS. */
.cart-discount__pill-remove {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cart-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cart-discount__pill-remove:hover,
.cart-discount__pill-remove:focus-visible {
  background: var(--cart-line);
  color: var(--cart-ink);
}

/* A code the shopper entered that did NOT apply: same chip, so it carries the same one-click ×, but
   struck and dimmed so it is never mistaken for a discount that is working. */
.cart-discount__pill--rejected {
  background: transparent;
  border-style: dashed;
  opacity: 0.7;
}

.cart-discount__pill--rejected .cart-discount__pill-code {
  text-decoration: line-through;
}

.cart-discount__error,
.cart-discount__note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}

.cart-discount__error {
  color: var(--cart-err);
}

.cart-discount__note {
  color: var(--cart-muted);
}

/* "Free shipping on Winter Knits. Other items ship at the normal rate." — free shipping limited to
 * chosen items, on a mixed cart. A note, not a claim that delivery is free, so it reads like the
 * neutral note above rather than the green "You have free shipping." */
.cart-discount__free {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--cart-muted);
}

/* "X no longer applies (…). Y applied instead." */
.cart-discount__swapped {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: #8a5a00;
}

/* --- money summary ----------------------------------------------------------------------------- */

.cart-totals {
  margin: 0;
}

.cart-totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

/* Every flex box toggled with the hidden attribute needs this or it stays on screen. */
.cart-totals__row[hidden],
.cart-discounts__item[hidden],
.cart-discount__codes[hidden],
.cart-discount__form[hidden] {
  display: none;
}

.cart-totals__row--muted > :first-child {
  color: var(--cart-muted);
}

.cart-totals__row--muted > :last-child {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* "Calculated at checkout" is words, not an amount; it reads as a note beside the figures. */
.cart-totals__shipping {
  text-align: right;
}

.cart-totals__row--total {
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cart-line);
  font-weight: 600;
}

.cart-totals__row--total > :first-child {
  font-size: 0.8125rem;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
}

.cart-totals__row--total > :last-child {
  font-size: 1rem;
  letter-spacing: 0.04rem;
  font-variant-numeric: tabular-nums;
}

.cart-totals__note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cart-muted);
}

/* Gift points this cart earns (BUILD_BRIEF_2026-10-12-J §6). */
.cart-totals__earn {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 600;
  color: #1f7a4d;
}
.cart-totals__earn[hidden],
.cart-totals__earn-guest[hidden] {
  display: none;
}
.cart-totals__earn-guest {
  display: block;
  font-weight: 400;
  color: var(--cart-muted);
}

.cart-discounts {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Green marks money off, and is the one place in the summary where colour carries meaning. The
   amount still starts with a minus sign, so the meaning does not depend on colour. */
.cart-discounts__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--cart-ok);
}

.cart-discounts__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.cart-discounts__icon {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  background: var(--cart-ok);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.cart-discounts__value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- CHECKOUT, continue shopping, payment methods ---------------------------------------------- */

.cart__checkout,
.cart-drawer__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  margin-top: 2rem;
  padding: 0 1.5rem;
  border: 1px solid var(--cart-ink);
  border-radius: var(--button-radius, 0); /* 10-15-C §1: Button shape; square when unset */
  background: var(--cart-ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.124rem;
  text-transform: var(--button-text-transform, uppercase); /* 10-15-C §3: Button text; capitals when unset */
  text-decoration: none;
}

.cart__checkout:hover,
.cart-drawer__checkout:hover {
  background: var(--cart-hover);
  text-decoration: none;
}

.cart__checkout-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.cart__continue-row {
  margin: 1.25rem 0 0;
  text-align: center;
}

.cart__continue-row a {
  color: var(--cart-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
  text-decoration: none;
}

.cart__continue-row a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.cart-summary__brands {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.625rem;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
  color: var(--cart-muted);
}

/* --- empty cart -------------------------------------------------------------------------------- */

.cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding: 4.5rem 1.5rem;
  border: 1px solid var(--cart-line);
  background: #fff;
  text-align: center;
}

.cart__empty-title {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--caps-spacing, 0.04em);
  text-transform: var(--caps-transform, uppercase);
}

.cart__continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 2rem;
  border: 1px solid var(--cart-ink);
  background: var(--cart-ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.124rem;
  text-transform: var(--button-text-transform, uppercase); /* 10-15-C §3: Button text; capitals when unset */
  text-decoration: none;
  border-radius: var(--button-radius, 0); /* 10-15-C §1: Button shape; square when unset */
}

.cart__continue:hover {
  background: var(--cart-hover);
  text-decoration: none;
}

/* --- narrow screens ----------------------------------------------------------------------------
 * No phone is drawn. Designed from the same tokens: one column, the summary under the lines, a
 * slightly smaller thumbnail, and the price column kept at the right so every line still says what
 * it costs at a glance.
 */
@media (max-width: 899px) {
  .cart {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }

  .cart__layout {
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  .cart,
  .cart-drawer {
    --cart-media: 4rem;
  }

  .cart-line {
    column-gap: 0.875rem;
  }

  .cart__summary {
    padding: 1.25rem;
  }

  .cart__empty {
    padding: 3rem 1.25rem;
  }
}

/* --- the discount chooser ------------------------------------------------------------------------
 * Rendered only when discounts CONFLICT (see snippets/cart-discount.liquid). A native <details>, so
 * it works with JavaScript off; each option is a real form submit. These base rules are shared with
 * the checkout page's own chooser (templates/checkout.liquid uses the same classes).
 */
.cart-choice {
  margin-top: .6rem;
  border: 1px solid var(--cart-rule, #e7e7e7);
  border-radius: 8px;
}

.cart-choice__summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem;
  cursor: pointer;
  font-size: .85rem;
  list-style: none;
}

.cart-choice__summary::-webkit-details-marker {
  display: none;
}

.cart-choice__label {
  font-weight: 600;
}

.cart-choice__change {
  margin-left: auto;
  text-decoration: underline;
  opacity: .75;
}

.cart-choice__list {
  list-style: none;
  margin: 0;
  padding: 0 .4rem .3rem;
}

.cart-choice__option + .cart-choice__option {
  border-top: 1px solid var(--cart-rule, #e7e7e7);
}

.cart-choice__option form {
  margin: 0;
}

/* The whole row is the control, so the target is big enough to hit on a phone. */
.cart-choice__pick {
  display: flex;
  /* Wraps so the "A + B" parts line drops BELOW the name/amount row rather than being squeezed onto
     it. Without this, flex-basis:100% on .cart-choice__parts is just a shrink hint. */
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem;
  width: 100%;
  padding: .5rem .3rem;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cart-choice__pick:hover:not([disabled]) {
  background: rgba(0, 0, 0, .04);
}

/* The applied option is shown DISABLED rather than hidden: the shopper needs to see what they
   currently have in order to compare it with the alternatives. */
.cart-choice__pick[disabled] {
  cursor: default;
  opacity: .95;
}

.cart-choice__pick[aria-current="true"] .cart-choice__name {
  font-weight: 600;
}

.cart-choice__name {
  min-width: 0;
}

.cart-choice__name em {
  font-style: normal;
  font-size: .72rem;
  text-transform: var(--caps-transform, uppercase);
  letter-spacing: var(--caps-spacing, .04em);
  opacity: .6;
  margin-left: .3rem;
}

/* An option worth MORE than what is applied — only reachable when the shopper pinned a weaker one,
   so it is the way back to a better deal and is marked, not hidden. */
.cart-choice__name em.cart-choice__better {
  color: #1c7c4a;
  opacity: 1;
}

.cart-choice__amount {
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* What an option actually applies, named ("Discount Vip 30 + VIP discount"): the row's figure is the
   whole basket's saving, so on a combination it is larger than the named discount is worth. */
.cart-choice__parts {
  flex-basis: 100%;
  margin-top: -.35rem;
  font-size: .72rem;
  opacity: .6;
}

.cart-choice__note {
  margin: 0;
  padding: 0 .7rem .6rem;
  font-size: .75rem;
  opacity: .65;
}

/* Inside the Basic cart: square corners and the cart's own hairline, like every other box here. */
.cart .cart-choice,
.cart-drawer .cart-choice {
  margin-top: 0.75rem;
  border-color: var(--cart-line);
  border-radius: 0;
  background: #fff;
}

.cart .cart-choice__label,
.cart-drawer .cart-choice__label {
  font-weight: 500;
  letter-spacing: 0.04rem;
}

/* --- cart drawer ---------------------------------------------------------------------------------
 * The shell ships `hidden` (see snippets/cart-drawer.liquid) so a shopper with JavaScript disabled
 * never sees it - the cart link just loads /cart. cart.js un-hides it and toggles .is-open for the
 * slide-in.
 */
.cart-drawer[hidden] {
  display: none;
}

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  --cart-media: 5rem;
}

/* The page behind is dimmed and softened, as drawn. */
.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 11, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cart-drawer.is-open .cart-drawer__overlay {
  opacity: 1;
}

.cart-drawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(26rem, 100%);
  height: 100%;
  background: #fff;
  color: var(--cart-ink);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.cart-drawer__panel:focus {
  outline: none;
}

.cart-drawer.is-open .cart-drawer__panel {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer__overlay,
  .cart-drawer__panel {
    transition: none;
  }
}

body.cart-drawer-open {
  overflow: hidden;
}

/* "CART" ......................................... "3 ITEMS"  × */
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  min-height: 4.5rem;
  box-sizing: border-box;
  /* base.css styles every bare <header>/<footer> as page chrome (a max width, auto margins, and
     for footers small grey text); the drawer's own header and footer must not inherit that. */
  max-width: none;
  margin: 0;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cart-line);
}

.cart-drawer__title {
  margin: 0 auto 0 0;
  font-family: var(--font-heading, inherit);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: var(--caps-spacing, 0.04em);
  text-transform: var(--caps-transform, uppercase);
}

.cart-drawer__count {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
  color: var(--cart-muted);
}

.cart-drawer__count[hidden] {
  display: none;
}

.cart-drawer__close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cart-ink);
  cursor: pointer;
}

.cart-drawer__close svg {
  width: 1rem;
  height: 1rem;
}

.cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 1.5rem;
}

.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 3.5rem 0;
  text-align: center;
}

.cart-drawer__empty[hidden] {
  display: none;
}

.cart-drawer__empty-text {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 1.125rem;
  text-transform: var(--caps-transform, uppercase);
  letter-spacing: var(--caps-spacing, 0.04em);
}

.cart-drawer__continue {
  min-height: 2.75rem;
  padding: 0 1.5rem;
  border: 1px solid var(--cart-ink);
  border-radius: var(--button-radius, 0); /* 10-15-C §1: Button shape; square when unset */
  background: #fff;
  color: var(--cart-ink);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: var(--button-text-transform, uppercase); /* 10-15-C §3: Button text; capitals when unset */
  cursor: pointer;
}

.cart-drawer__continue:hover {
  background: var(--cart-ink);
  color: #fff;
}

/* The drawer's rows are the page's rows; the last one needs no rule under it when the foot's own
   border follows. */
.cart-drawer .cart-line {
  padding: 1.5rem 0;
}

.cart-drawer .cart-line:last-child {
  border-bottom: 0;
}

/* The summary, pinned at the bottom. It can outgrow a short phone screen (promotion code, a chooser,
   discount rows), so it scrolls on its own rather than pushing CHECKOUT off the screen. */
.cart-drawer__foot {
  flex: none;
  max-width: none;
  max-height: 65vh;
  overflow-y: auto;
  margin: 0;
  padding: 1.5rem;
  border-top: 1px solid var(--cart-line);
  background: #fff;
  color: var(--cart-ink);
  font-size: 1rem;
}

.cart-drawer__foot[hidden] {
  display: none;
}

.cart-drawer .cart-totals {
  margin: 0;
}

.cart-drawer__checkout {
  margin-top: 1.5rem;
}

/* "Lihat keranjang": the way to the cart page now that the header's cart link opens this drawer.
   Quiet, under the primary action. */
.cart-drawer__cta {
  display: block;
  margin-top: 1rem;
  text-align: center;
  color: var(--cart-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
  text-decoration: none;
}

.cart-drawer__cta:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* A refusal ("Only 3 left", "just sold out", "could not update") at the TOP of the drawer's body
   (cart.js drawerError) — above the lines, so it still shows when the cart is empty and the foot is
   hidden. The account pages' error notice: a tinted box with a thin red-tinted rule. */
.cart-drawer__error {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--cart-err-line);
  background: var(--cart-err-soft);
  color: var(--cart-err);
  font-size: 0.8125rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .cart-drawer__head,
  .cart-drawer__foot {
    padding-inline: 1.25rem;
  }

  .cart-drawer__body {
    padding: 0 1.25rem;
  }
}

/* --- cart drawer: "Appears, the page darkens" (Theme settings › Cart drawer › Opening) ------------
 * The panel is there at once and only the page behind darkens: in over 0.3 s on a quadratic ease-in
 * (cubic-bezier(0.11, 0, 0.5, 0)), out over 0.3 s on its mirror image, the panel staying up until the page is light again (cart.js waits 320 ms before
 * hiding it). Measured on Snifl's Framer cart, 2026-10-19.
 */
.cart-drawer--fade .cart-drawer__panel {
  transform: none;
  transition: none;
}

.cart-drawer--fade .cart-drawer__overlay {
  transition: opacity 0.3s cubic-bezier(0.5, 1, 0.89, 1);
}

.cart-drawer--fade.is-open .cart-drawer__overlay {
  transition-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
}

/* --- cart drawer: the ROUNDED style (snippets/cart-drawer-rounded.liquid) -------------------------
 * Theme settings › Cart drawer › Style "Rounded", drawn from Snifl's Framer cart (2026-10-19). The
 * panel takes a colour scheme (--cdr-bg / --cdr-fg / --cdr-btn / --cdr-btn-text), the boxes a second
 * one (--cdr-box), struck prices and "Only 2 left!" the accent colour (--cdr-accent, the text colour
 * when unset); words and hairlines are the text colour at 80%. Type follows the shop's body font in
 * Framer's three sizes: computers (1200 px and up), tablets (810-1199 px) and phones.
 */
.cart-drawer--rounded,
.cart--rounded {
  --cdr-muted: color-mix(in srgb, var(--cdr-fg, #451504) 80%, transparent);
  --cdr-mark: var(--cdr-accent, var(--cdr-fg, #451504));
  --cdr-rule: var(--cdr-muted);
}

.cart-drawer--rounded .cart-drawer__overlay {
  background: rgba(0, 0, 0, 0.48);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.cart-drawer--rounded .cart-drawer__panel {
  width: min(var(--cdr-width, 416px), 100%);
  background: var(--cdr-bg, #fff);
  color: var(--cdr-fg, #0f0c0b);
  font-family: var(--font-body, inherit);
}

.cart-drawer--rounded :is(button, a):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The note and code fields sit in a soft box: the box shows where focus is. */
:is(.cart-drawer--rounded, .cart--rounded) .cdr-box :is(input, textarea):focus {
  outline: none;
}

:is(.cart-drawer--rounded, .cart--rounded) .cdr-box:focus-within {
  box-shadow: 0 0 0 1px var(--cdr-muted);
}

/* "Your Cart (2)" ............................................................ × , then the line. */
.cdr-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: none;
  padding: 24px 24px 0;
  margin-bottom: 20px;
}

.cart-drawer--rounded .cart-drawer__head {
  min-height: 0;
  padding: 0 0 19px;
  gap: 16px;
  border-bottom: 1px solid var(--cdr-muted);
}

.cart-drawer--rounded .cart-drawer__title {
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}

.cdr-count[hidden] {
  display: none;
}

.cart-drawer--rounded .cart-drawer__close {
  width: 24px;
  height: 24px;
  margin: 0;
  color: var(--cdr-muted);
}

.cart-drawer--rounded .cart-drawer__close svg {
  width: 20px;
  height: 20px;
}

/* The way to free shipping: a soft box, a parcel, the words, and a thin bar. */
.cdr-ship {
  padding: 12px;
  border-radius: 12px;
  background: var(--cdr-box);
  color: var(--cdr-muted);
}

.cdr-ship[hidden] {
  display: none;
}

.cdr-ship__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.cdr-ship__row strong {
  font-weight: 600;
}

.cdr-ship__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--cdr-fg);
}

.cdr-ship__track {
  display: block;
  height: 4px;
  margin-top: 10px;
  background: var(--cdr-box);
}

.cdr-ship__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--cdr-muted);
  transition: width 0.3s ease;
}

.cart-drawer--rounded .cart-drawer__body {
  padding: 0 24px;
}

/* --- a line: the photo, then the words, the price, "Only 2 left!", the quantity box and the bin. */
.cart-drawer--rounded .cdr-line {
  grid-template-columns: 128px minmax(0, 1fr);
  grid-template-areas:
    "media info"
    ". error";
  column-gap: 20px;
  padding: 0;
  border: 0;
}

.cart-drawer--rounded .cdr-line:not(:has(> .cart-line__media)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "info"
    "error";
}

.cart-drawer--rounded .cdr-line + .cdr-line {
  margin-top: 20px;
}

.cart-drawer--rounded .cdr-line__media {
  width: 128px;
  height: 160px;
  border-radius: 8px;
  background: var(--cdr-box);
}

.cart-drawer--rounded .cdr-line__info {
  gap: 0;
  align-items: stretch;
}

.cart-drawer--rounded .cdr-line .cart-line__title {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}

.cdr-line__option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 2px;
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.4;
}

.cdr-line__option strong {
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.cart-drawer--rounded .cdr-line__price {
  grid-area: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0 4px;
  margin: 15px 0 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
  white-space: normal;
}

.cdr-line__price strong {
  font-weight: 600;
  line-height: 1.2;
}

.cart-drawer--rounded .cdr-line__price .cart-line__was {
  font-size: 14px;
  line-height: 1.4;
  color: var(--cdr-mark);
}

.cart-drawer--rounded .cdr-line .cart-line__unit {
  margin-top: 4px;
  color: var(--cdr-muted);
}

.cart-drawer--rounded .cdr-line .cart-line__breakdown {
  margin-top: 8px;
}

.cdr-line__left {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cdr-mark);
}

.cart-drawer--rounded .cdr-line__actions {
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.cart-drawer--rounded .cdr-line__left + .cdr-line__actions {
  margin-top: 4px;
}

/* The rounded quantity box: white, a hairline in the box colour drawn on top. */
.cart-drawer--rounded .cdr-line .cart-line__qty {
  position: relative;
  height: 42px;
  overflow: hidden;
  border: 0;
  border-radius: 32px;
  background: #fff;
}

.cart-drawer--rounded .cdr-line .cart-line__qty::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--cdr-box);
  border-radius: 32px;
  pointer-events: none;
}

.cart-drawer--rounded .cdr-line .cart-qty__step button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: #fff;
  color: #000;
}

.cart-drawer--rounded .cdr-line .cart-qty__step button:disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: default;
}

.cart-drawer--rounded .cdr-line .cart-qty__step svg {
  width: 12px;
  height: 12px;
}

.cart-drawer--rounded .cdr-line .cart-qty__input {
  width: 32px;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 500;
}

.cdr-line__bin {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #000;
  cursor: pointer;
}

.cdr-line__bin svg {
  width: 22px;
  height: 22px;
}

.cart-drawer--rounded .cart-drawer__error {
  margin: 0 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--cdr-box);
  color: var(--cdr-mark);
}

/* --- empty --------------------------------------------------------------------------------------- */
.cart-drawer--rounded .cart-drawer__empty-text {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}

.cart-drawer--rounded .cart-drawer__continue {
  min-height: 46px;
  padding: 0 32px;
  border: 0;
  border-radius: 100px;
  background: var(--cdr-btn, #000);
  color: var(--cdr-btn-text, #fff);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
}

.cart-drawer--rounded .cart-drawer__continue:hover {
  background: var(--cdr-btn-text, #fff);
  color: var(--cdr-btn, #000);
}

/* --- the foot: the + links between lines, Checkout with the total, the shipping note ------------ */
.cart-drawer--rounded .cart-drawer__foot {
  padding: 20px 24px 24px;
  border-top: 0;
  background: transparent;
  color: inherit;
}

/* THE "+" ROWS (snippets/cart-note-row.liquid, cart-code-row.liquid), drawer and page alike: native
   <details>, the words and the icon swapped from [open] (10-23-C §3). */
.cdr-rows {
  border-bottom: 1px solid var(--cdr-rule);
}

.cdr-row {
  padding: 20px 0;
  border-top: 1px solid var(--cdr-rule);
}

.cdr-row:not(:has(> :not([hidden]))) {
  display: none;
}

.cdr-row.cart-discount {
  margin: 0;
}

.cdr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cdr-muted);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
}

.cdr-toggle::-webkit-details-marker {
  display: none;
}

.cdr-toggle::marker {
  content: "";
}

.cdr-toggle__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.cdr-disclosure[open] > .cdr-toggle .cdr-toggle__icon--add,
.cdr-disclosure[open] > .cdr-toggle .cdr-toggle__add,
.cdr-disclosure:not([open]) > .cdr-toggle .cdr-toggle__icon--remove,
.cdr-disclosure:not([open]) > .cdr-toggle .cdr-toggle__remove {
  display: none;
}

.cdr-disclosure[open] > .cdr-toggle .cdr-toggle__remove {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cdr-box {
  margin-top: 10px;
  border-radius: 10px;
  background: var(--cdr-box);
}

.cdr-box[hidden] {
  display: none;
}

.cdr-box__field {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--cdr-fg);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  resize: vertical;
}

.cdr-box__field::placeholder,
.cdr-box--code .cart-discount__input::placeholder {
  color: color-mix(in srgb, var(--cdr-fg) 60%, transparent);
}

/* The page's note keeps its own form (Save, the saved state): no soft box behind it. */
.cdr-box--note {
  background: transparent;
}

:is(.cart-drawer--rounded, .cart--rounded) .cdr-box--code .cart-discount__form {
  gap: 0;
}

:is(.cart-drawer--rounded, .cart--rounded) .cdr-box--code .cart-discount__row {
  align-items: center;
  padding: 4px;
}

:is(.cart-drawer--rounded, .cart--rounded) .cdr-box--code .cart-discount__input {
  height: 38px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--cdr-fg);
  font-size: 14px;
}

:is(.cart-drawer--rounded, .cart--rounded) .cdr-box--code .cart-discount__button {
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 100px;
  background: var(--cdr-btn, #000);
  color: var(--cdr-btn-text, #fff);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

:is(.cart-drawer--rounded, .cart--rounded) .cdr-box--code .cart-discount__button:hover,
:is(.cart-drawer--rounded, .cart--rounded) .cdr-box--code .cart-discount__button:focus-visible {
  background: var(--cdr-btn-text, #fff);
  color: var(--cdr-btn, #000);
}

:is(.cart-drawer--rounded, .cart--rounded) .cart-discount__codes {
  margin-top: 10px;
}

:is(.cart-drawer--rounded, .cart--rounded) .cart-discount__pill {
  padding: 4px 4px 4px 12px;
  border: 0;
  border-radius: 100px;
  background: var(--cdr-box);
  color: var(--cdr-fg);
  font-size: 13px;
}

:is(.cart-drawer--rounded, .cart--rounded) .cart-discount__pill-remove {
  border-radius: 50%;
  color: var(--cdr-muted);
}

:is(.cart-drawer--rounded, .cart--rounded) :is(.cart-discount__note, .cart-discount__error, .cart-discount__free, .cart-discount__swapped) {
  font-size: 13px;
}

:is(.cart-drawer--rounded, .cart--rounded) .cart-discount__error {
  color: var(--cdr-mark);
}

:is(.cart-drawer--rounded, .cart--rounded) :is(.cart-discount__note, .cart-discount__free) {
  color: var(--cdr-muted);
}

/* The total rides in the Checkout button, so the Shipping and Total rows are not drawn (cart.js keeps
   them true). In the drawer, Subtotal and the discount rows show only while a discount applies;
   the page always shows its Subtotal. */
.cdr-hidden-row {
  display: none;
}

.cart-drawer .cart-totals:not(:has(.cart-discounts__item)) [data-cart-drawer-subtotal-row] {
  display: none;
}

.cart-drawer .cart-totals:has(.cart-discounts__item) {
  margin-top: 16px;
}

.cart-drawer--rounded .cart-totals {
  margin: 0;
  font-size: 14px;
}

.cart-drawer--rounded .cart-totals:has(.cart-discounts__item) {
  margin-top: 16px;
}

.cart-drawer--rounded .cart-totals__row,
.cart-drawer--rounded .cart-discounts__item {
  padding: 4px 0;
  font-size: 14px;
}

.cart-drawer--rounded .cart-totals__row--muted > :first-child {
  color: var(--cdr-muted);
}

/* Money off reads in the panel's own colours here; the minus sign still says what it is. */
.cart-drawer--rounded .cart-discounts__item {
  color: var(--cdr-fg);
}

.cart-drawer--rounded .cart-discounts__icon {
  border-radius: 50%;
  background: var(--cdr-fg);
  color: var(--cdr-bg);
}

:is(.cart-drawer--rounded .cart-drawer__checkout, .cart--rounded .cart__checkout) {
  gap: 0;
  min-height: 46px;
  margin-top: 20px;
  padding: 0 24px;
  border: 0;
  border-radius: 100px;
  background: var(--cdr-btn, #000);
  color: var(--cdr-btn-text, #fff);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-transform: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

:is(.cart-drawer--rounded .cart-drawer__checkout, .cart--rounded .cart__checkout):hover {
  background: var(--cdr-btn-text, #fff);
  color: var(--cdr-btn, #000);
}

.cdr-dot {
  white-space: pre;
}

.cdr-foot-note {
  margin: 11px 0 0;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: var(--cdr-muted);
}

/* "Lihat keranjang" on the Rounded panel: quiet, in the panel's own words colour. */
.cart-drawer--rounded .cart-drawer__cta {
  margin-top: 12px;
  color: var(--cdr-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --- the shared blocks in the STANDARD (Basic) look -----------------------------------------------
 * Square corners and the Basic palette: the "+" rows in tracked small capitals, the boxes white with
 * the warm hairline, the way to free shipping as a white card on the page's grey band.
 */
:is(.cart-drawer:not(.cart-drawer--rounded), .cart:not(.cart--rounded)) .cdr-toggle {
  color: var(--cart-ink);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.1rem);
  text-transform: var(--caps-transform, uppercase);
}

:is(.cart-drawer:not(.cart-drawer--rounded), .cart:not(.cart--rounded)) .cdr-box {
  border-radius: 0;
  background: transparent;
}

:is(.cart-drawer:not(.cart-drawer--rounded), .cart:not(.cart--rounded)) .cdr-box__field {
  border: 1px solid var(--cart-line);
  background: #fff;
  font-size: 0.875rem;
}

:is(.cart-drawer:not(.cart-drawer--rounded), .cart:not(.cart--rounded)) .cdr-row {
  padding: 1rem 0;
}

:is(.cart-drawer:not(.cart-drawer--rounded), .cart:not(.cart--rounded)) .cdr-ship {
  border-radius: 0;
  border: 1px solid var(--cart-line);
  background: #fff;
  color: var(--cart-ink);
}

:is(.cart-drawer:not(.cart-drawer--rounded), .cart:not(.cart--rounded)) .cdr-ship__track {
  background: var(--cart-hair);
}

:is(.cart-drawer:not(.cart-drawer--rounded), .cart:not(.cart--rounded)) .cdr-ship__fill {
  background: var(--cart-ink);
}

:is(.cart-drawer:not(.cart-drawer--rounded), .cart:not(.cart--rounded)) .cdr-foot-note {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.cart-drawer:not(.cart-drawer--rounded) .cart-drawer__checkout {
  margin-top: 1.25rem;
}

/* --- the shared blocks on the cart PAGE ----------------------------------------------------------- */
.cart .cart-ship > * {
  margin-top: 1.25rem;
}

.cart .cart-ship > [hidden] {
  display: none;
}

.cart .cart-ship .cart-summary__free {
  display: flex;
}

.cart .cart-ship .cart-summary__free[hidden] {
  display: none;
}

.cart__rows {
  margin-top: 1.5rem;
}

.cart__summary .cdr-row.cart-discount {
  padding-top: 0;
  border-top: 0;
  border-bottom: 1px solid var(--cdr-rule);
  margin-bottom: 1.25rem;
}

/* The drawer's free-shipping block sits above the lines; its own spacing. */
.cart-drawer:not(.cart-drawer--rounded) .cart-ship > * {
  margin-top: 1rem;
}

.cart-drawer .cart-ship > [hidden] {
  display: none;
}

.cart-drawer--rounded .cart-ship {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-drawer--rounded .cart-ship:not(:has(> :not([hidden]))) {
  display: none;
}

.cart-drawer--rounded .cart-ship .cart-summary__free {
  justify-content: center;
  color: var(--cdr-muted);
  font-size: 14px;
}
/* Tablets (Framer's 810-1199 px breakpoint): a size smaller. */
@media (min-width: 810px) and (max-width: 1199px) {
  .cart-drawer--rounded .cdr-line .cart-line__title,
  .cdr-line__option {
    font-size: 14px;
  }

  .cdr-line__option {
    margin-top: 2px;
  }

  .cdr-line__option strong {
    font-size: 13px;
  }

  .cdr-line__price strong,
  .cdr-ship__row,
  .cdr-toggle,
  .cdr-foot-note {
    font-size: 12px;
  }

  .cart-drawer--rounded .cart-drawer__checkout {
    min-height: 41px;
    font-size: 13px;
  }
}

/* Phones: the panel fills the screen. */
@media (max-width: 809px) {
  .cart-drawer--rounded .cdr-line .cart-line__title,
  .cdr-line__option {
    font-size: 14px;
  }

  .cdr-line__option {
    margin-top: 2px;
  }

  .cdr-line__option strong {
    font-size: 14px;
  }

  .cart-drawer--rounded .cart-drawer__checkout {
    min-height: 42px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .cart-drawer--rounded .cart-drawer__head,
  .cart-drawer--rounded .cart-drawer__foot {
    padding-inline: 0;
  }

  .cart-drawer--rounded .cart-drawer__foot {
    padding: 20px 24px 24px;
  }

  .cart-drawer--rounded .cart-drawer__body {
    padding: 0 24px;
  }
}