/* ChopChop USA — cart drawer + /cart page (agent F, 02/10/2026).
   Structure = Back Hero assets/bh-cart.css (clone a184460 + master 910827d: per-unit selects, folded savings, compact upsells,
   compact phone + desktop drawer). Look = the owner-approved ChopChop mockup drawer (scripts fix-59 drawer, fix-65 upsells,
   fix-66 compact phone, fix-68 red savings): "Your cart · n items" + Clear all + round X; unlock line (striped graphite track,
   ink truck + gift markers; phones: one light-yellow band); borderless lines (bordered square photo, bold one-line name,
   "Buy 2 [+10% OFF]", "#1 [S · 11″ × 7.9″]" selects, stepper left / price right, red "Save 55%"); FREE gifts hang under
   their product on a yellow rule (FREE GIFT tag, struck value, FREE, no stepper); "Add to your order" row; Shipping
   Protection; "You save $X" (red pill) folded; yellow sliced-tip CHECK OUT • total; guarantee line. Yellow only on the
   button, the gift rule and soft tags; red (#d92d20) only on savings figures; no green.
   Tokens come from assets/cc.css :root (the drawer lives outside the .cc containers, so only :root tokens are used).
   Loaded site-wide by snippets/cc-cart-assets.liquid (non-blocking except on /cart). */

.theme-drawer__dialog:has(cart-drawer-component)::backdrop { background: rgb(10 11 12 / .55); }
cart-drawer-component {
  --cart-drawer-padding: 20px; --ccx-line: var(--cc-line, #dfe3e5); --ccx-save: #d92d20; --ccx-soft: var(--cc-red-soft, #fff6cc);
  --ccx-soft-line: #f1dd8a;
  font-family: var(--cc-f-body); color: var(--cc-body);
}

/* ============ drawer: header ============ */
cart-drawer-component .cc-cart-head {
  display: flex; align-items: center; gap: 12px; min-height: 0; padding: 14px 16px 12px 20px; border-block-end: 1px solid var(--ccx-line);
  & .theme-drawer__title { flex: 1 1 auto; min-width: 0; margin: 0; font: 800 21px/1.2 var(--cc-f-head); letter-spacing: -.02em; color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .theme-drawer__close-button { flex: none; margin: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ccx-line); background: #fff; color: var(--cc-ink); display: grid; place-items: center; }
  & .theme-drawer__close-button .svg-wrapper { width: 18px; height: 18px; }
  @media (hover: hover) and (pointer: fine) { & .theme-drawer__close-button:hover { background: var(--cc-tint); } }
}
cart-drawer-component .cc-cart-head__n { font-weight: 600; font-size: 16px; letter-spacing: 0; color: var(--cc-muted); }
cart-drawer-component .cc-clear {
  flex: 0 0 auto; padding: 6px 2px; border: 0; background: none; color: var(--cc-muted);
  font: 600 13px/1 var(--cc-f-body); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer;
  &.is-confirming { color: #b3261e; font-weight: 800; }
  @media (hover: hover) and (pointer: fine) { &:hover { color: var(--cc-ink); } }
  &[disabled] { opacity: .5; cursor: default; }
  &:focus-visible { outline: 2px solid var(--cc-ink); outline-offset: 3px; border-radius: 4px; }
}

/* ============ drawer: unlock line ============ */
cart-drawer-component .cc-bar {
  padding: 10px var(--cart-drawer-padding) 0; text-align: center;
  & .cc-bar__label { margin: 0 0 8px; font-size: 13.5px; line-height: 1.35; color: var(--cc-ink); text-wrap: balance; }
  & .cc-bar__label strong { color: var(--cc-ink); font-weight: 800; }
  &.is-ship .cc-bar__label { margin-block-end: 10px; }
  & .cc-bar__tick { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; color: var(--cc-ink); }
  & .cc-bar__up {
    margin: 0 0 0 4px; padding: 0; border: 0; background: none; color: var(--cc-ink); cursor: pointer; white-space: nowrap;
    font: 800 13.5px/1.35 var(--cc-f-body); text-decoration: underline; text-decoration-color: var(--cc-yellow); text-decoration-thickness: 3px; text-underline-offset: 3px;
  }
  & .cc-bar__up.cc-busy { color: transparent; }
  & .cc-bar__up:focus-visible { outline: 2px solid var(--cc-ink); outline-offset: 2px; border-radius: 3px; }
  & .cc-bar__bar { position: relative; display: flex; align-items: center; gap: 8px; margin-block-end: 12px; }
  & .cc-bar__track { position: relative; flex: 1 1 auto; height: 9px; border-radius: 20px; background: var(--cc-tint); box-shadow: inset 0 0 0 1px var(--ccx-line); overflow: hidden; }
  & .cc-bar__fill { display: block; width: var(--cc-bar, 0%); height: 100%; border-radius: 20px; background: repeating-linear-gradient(135deg, #141516 0 8px, #3a3f44 8px 16px); }
  & .cc-bar__marker { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--cc-ink); background: var(--cc-ink); color: var(--cc-yellow); }
  & .cc-bar__marker--mid { position: absolute; left: calc((100% - 36px) / 2); transform: translateX(-50%); }
  & .cc-bar__marker.is-pending { border-color: var(--ccx-line); background: #fff; color: var(--cc-steel); }
  & .cc-bar__marker svg { width: 16px; height: 16px; }
  & .cc-bar__marker--mid svg circle { fill: var(--cc-ink); stroke: currentColor; }
}

/* the footer never fades while the list scrolls (Horizon's scroll-hint writes a mask on every scroll) */
cart-drawer-component scroll-hint.cart-drawer__content,
cart-drawer-component scroll-hint.cart-drawer__items,
cart-drawer-component .cart-drawer__summary { mask-image: none !important; -webkit-mask-image: none !important; }
cart-drawer-component .cart-drawer__items { padding-inline: var(--cart-drawer-padding); padding-block-start: 14px; }

/* ============ line items (drawer AND /cart page) ============ */
cart-items-component.cart-items-component {
  --ccx-line: var(--cc-line, #dfe3e5); --ccx-save: #d92d20; --ccx-soft: var(--cc-red-soft, #fff6cc); --ccx-soft-line: #f1dd8a;
  font-family: var(--cc-f-body);

  & .cart-items__table-row {
    position: relative;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-rows: none;
    grid-template-areas: "media details details" "media quantity price" "error error error";
    column-gap: 14px; row-gap: 0; align-items: start;
    padding: 0 0 14px; margin: 0 0 14px; border: 0; border-block-end: 1px solid var(--ccx-line); border-radius: 0;
  }
  /* the last visible row closes the list (the protection line is hidden and may sit after it) */
  & tbody .cart-items__table-row:not(:has(~ .cart-items__table-row:not([data-cc-protection]):not([data-cc-member]))) { padding-bottom: 0; margin-bottom: 0; border-block-end: 0; }
  & .cart-items__table-row[data-cc-protection] { display: none; }
  /* deal card (snippets/cart-products.liquid): the group's other lines stay in the DOM, hidden */
  & .cart-items__table-row[data-cc-member] { display: none !important; }
  /* offer-pack sprite tile as the photo (mockup fix-53; atlas = --cc-pack-atlas, snippets/cc-head) */
  & .cc-pack { background: #fff var(--cc-pack-atlas, none) no-repeat; background-size: 1000% 1000%; }
  /* the card's SETS stepper (same look as the line stepper) + one trash for the group */
  & .cc-sets { display: inline-flex; align-items: center; height: 38px; border: 1px solid var(--ccx-line); border-radius: 10px; background: #fff; color: var(--cc-ink); }
  & .cc-sets button { display: grid; place-items: center; width: 34px; height: 100%; padding: 0; border: 0; background: none; color: var(--cc-ink); cursor: pointer; }
  & .cc-sets button[disabled] { opacity: .35; cursor: default; }
  & .cc-sets button svg { width: 12px; height: 12px; }
  & .cc-sets__n { min-width: 26px; text-align: center; font: 700 15px/1 var(--cc-f-body); }
  & .cc-group-remove { position: absolute; top: -5px; inset-inline-end: -6px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--cc-muted); cursor: pointer; }
  @media (hover: hover) and (pointer: fine) { & .cc-group-remove:hover { color: var(--cc-ink); background: var(--cc-tint); } }
  & .cc-group-remove svg { width: 17px; height: 17px; }

  /* photo: bordered square */
  & .cart-items__media { position: relative; display: block; align-self: start; width: 72px; min-width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--ccx-line); }
  & .cart-items__media-container { position: absolute; inset: 1px; display: block; width: auto; height: auto; aspect-ratio: auto; border-radius: 11px; overflow: hidden; }
  & .cart-items__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border: 0; border-radius: inherit; }

  /* name (one line) · FREE GIFT tag / deal row · per-unit selects */
  & .cart-items__details { display: block; grid-area: details; padding: 0; margin: 0; min-width: 0; min-height: 0; color: var(--cc-body); }
  & .cart-items__details > :not(.cart-items__product-info) { display: none; }
  & .cart-items__product-info > :not(.cart-items__title-row):not(.cc-line__variant):not(.cc-line__units):not(.cc-line__deal):not(.cc-line__gtag) { display: none; }
  & .cart-items__details * { font-size: inherit; }
  /* name on its own row; the deal ("Buy 2 [+10% OFF]") and the unit selects share the next row (wrap when narrow) */
  & .cart-items__product-info { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; min-width: 0; }
  & .cart-items__product-info > * { margin-block-start: 0; }
  & .cart-items__title-row { flex: 1 0 100%; min-width: 0; }
  & .cart-items__title-row { display: flex; padding-inline-end: 30px; }
  & .cart-items__title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font: 800 16px/1.3 var(--cc-f-body); color: var(--cc-ink); text-decoration: none; text-transform: none; }
  @media (hover: hover) and (pointer: fine) { & .cart-items__title:hover { text-decoration: underline; } }
  & .cc-line__deal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font: 700 14px/1.3 var(--cc-f-body); color: var(--cc-body); }
  & .cc-line__deal:empty { display: none; }
  & .cc-pill { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; padding: 3px 9px; border-radius: 999px; background: var(--ccx-soft); color: var(--cc-ink); font: 800 11.5px/1.2 var(--cc-f-body); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .cc-line__variant { margin: 2px 0 0; padding-inline-end: 30px; font-size: 12.5px; line-height: 1.3; color: var(--cc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .cc-line__gtag { justify-self: start; display: inline-block; margin: 3px 0 0; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--ccx-soft-line); background: var(--ccx-soft); color: var(--cc-ink); font: 800 10.5px/1 var(--cc-f-body); letter-spacing: .07em; text-transform: uppercase; }

  /* price: ~~regular~~ paid / ● Save 55% (right) */
  & .cart-items__price {
    grid-area: price; display: flex; flex-direction: row; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; column-gap: 8px; row-gap: 2px;
    align-self: center; justify-self: end; width: auto; min-width: 0; max-width: 100%; min-height: 0; padding: 0; margin-top: var(--ccx-gap, 8px); text-align: end;
    font: 800 18px/1.15 var(--cc-f-body); color: var(--cc-ink);
  }
  & .cart-items__price > text-component { font-weight: 800; color: var(--cc-ink); white-space: nowrap; }
  & .cart-items__table-row[data-cc-gift] .cart-items__price > text-component { display: none; }
  & .cart-items__price-unit { display: none; }
  & .cc-line__was { color: var(--cc-muted); font-weight: 400; font-size: 13.5px; white-space: nowrap; }
  & .cc-line__saved { flex-basis: 100%; font: 800 12px/1.3 var(--cc-f-body); color: var(--ccx-save); white-space: nowrap; }
  & .cc-line__saved::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 5px; border-radius: 50%; background: var(--ccx-save); vertical-align: 1px; }
  & .cc-line__free { font: 800 13px/1.2 var(--cc-f-body); color: var(--cc-ink); white-space: nowrap; }

  /* controls: stepper (left, under the name); trash pinned top right */
  & .cart-items__quantity { grid-area: quantity; justify-self: start; align-self: center; margin: var(--ccx-gap, 8px) 0 0; width: auto; }
  & .cart-items__quantity-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: auto; }
  & .cart-items__quantity-controls > .volume-pricing-info { display: none; }
  & .cart-items__quantity .quantity-selector-wrapper { flex: none; }
  & .cart-items__quantity .quantity-selector { flex: none; width: auto; min-width: 0; height: 38px; border: 1px solid var(--ccx-line); border-radius: 10px; background: #fff; color: var(--cc-ink); }
  & .cart-items__quantity .quantity-selector :is(button) { width: 34px; height: 36px; color: var(--cc-ink); }
  & .cart-items__quantity .quantity-selector :is(button)[disabled] { opacity: .35; }
  & .cart-items__quantity .quantity-selector button svg { width: 12px; height: 12px; }
  & .cart-items__quantity .quantity-selector input[type="number"] { width: 26px; min-width: 0; padding-inline: 0; text-align: center; font: 700 15px/1 var(--cc-f-body); color: var(--cc-ink); }
  & .cart-items__remove { position: absolute; top: -5px; inset-inline-end: -6px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; padding: 0; color: var(--cc-muted); }
  @media (hover: hover) and (pointer: fine) { & .cart-items__remove:hover { color: var(--cc-ink); background: var(--cc-tint); } }
  & .cart-items__remove svg { width: 17px; height: 17px; }
  & .cart-items__error { grid-area: error; }

  /* size per unit (owner rule 01/10/2026): "#1 [S · 11″ × 7.9″]" "#2 [M · 14″ × 9.8″]", one small select each */
  & .cc-line__units { display: flex; flex-wrap: wrap; gap: 5px 8px; margin: 0; padding-inline-end: 4px; }
  & .cc-line__size { position: relative; display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
  & .cc-line__unit-n { flex: none; font: 800 12.5px/1 var(--cc-f-body); color: var(--cc-body); }
  & .cc-line__size select {
    height: 28px; min-width: 0; max-width: 190px; padding: 0 24px 0 9px; border: 1px solid var(--ccx-line); border-radius: 8px; background: #fff;
    font: 600 13px/1 var(--cc-f-body); color: var(--cc-ink); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis;
  }
  @media (hover: hover) and (pointer: fine) { & .cc-line__size select:hover { border-color: var(--cc-ink); } }
  & .cc-line__size::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid var(--cc-ink); border-bottom: 2px solid var(--cc-ink); transform: rotate(45deg); pointer-events: none; }
  & .cc-line__size select:focus-visible { outline: 2px solid var(--cc-ink); outline-offset: 2px; }

  /* FREE gifts hang under the product that earned them: yellow rule, 44px photo, name + FREE GIFT tag, ~~value~~ FREE.
     No stepper / trash (mockup fix-59): the gift guard keeps their count right. */
  & .cart-items__table-row:has(+ .cart-items__nested-line) { padding-bottom: 10px; margin-bottom: 0; border-block-end: 0; }
  & .cart-items__nested-line {
    grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "media details price" "error error error";
    column-gap: 10px; row-gap: 0; align-items: center;
    padding: 0 0 8px 50px; margin-bottom: 0; border-block-end: 0;
  }
  & .cart-items__nested-line::before { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 2px; background: var(--cc-yellow, #f6c90e); }
  & .cart-items__nested-line:not(:has(+ .cart-items__nested-line)) { padding-bottom: 14px; margin-bottom: 14px; border-block-end: 1px solid var(--ccx-line); }
  & .cart-items__nested-line:not(:has(+ .cart-items__nested-line))::before { bottom: 14px; }
  & tbody .cart-items__nested-line:not(:has(~ .cart-items__table-row:not([data-cc-protection]):not([data-cc-member]))) { padding-bottom: 0; margin-bottom: 0; border-block-end: 0; }
  & tbody .cart-items__nested-line:not(:has(~ .cart-items__table-row:not([data-cc-protection]):not([data-cc-member])))::before { bottom: 0; }
  & .cart-items__nested-line .cart-items__media,
  & .cart-items__nested-line td:first-child { width: 44px; min-width: 44px; height: 44px; border-radius: 10px; justify-self: start; align-self: center; }
  & .cart-items__nested-line .cart-items__media-container { border-radius: 9px; }
  & .cart-items__nested-line .cart-items__media img { object-fit: contain; }
  & .cart-items__nested-line .cart-items__title-row { padding-inline-end: 0; }
  & .cart-items__nested-line .cart-items__title { font-size: 14px; font-weight: 700; line-height: 1.25; }
  & .cart-items__nested-line .cc-line__variant { flex: 0 1 auto; min-width: 0; margin: 0; padding: 0; font-size: 11.5px; } /* beside the FREE GIFT tag: no extra height */
  & .cart-items__nested-line .cart-items__quantity { display: none; }
  & .cart-items__nested-line .cart-items__price { font-size: 13px; align-self: center; flex-wrap: nowrap; column-gap: 6px; margin-top: 0; }
  & .cart-items__nested-line .cc-line__was { font-size: 13px; }

  /* loading: the button just pressed spins in place (also the guard's .cc-busy), the removed row fades */
  & .cc-busy { position: relative; pointer-events: none; color: transparent !important; }
  & .cc-busy > * { opacity: 0; }
  & .cc-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(20 21 22 / .18); border-top-color: var(--cc-ink); animation: cc-cart-spin .6s linear infinite; }
  & .cc-line__size.cc-busy { color: inherit !important; }
  & .cc-line__size.cc-busy > * { opacity: .35; }
  & .cc-line__size.cc-busy::after { left: auto; right: 6px; transform: none; border-right: 2px solid rgb(20 21 22 / .18); border-bottom: 2px solid rgb(20 21 22 / .18); margin-top: -7px; }
  & .cart-items__remove.cc-busy { position: absolute; }
  & .cc-removing { opacity: .35; transition: opacity .15s; pointer-events: none; }
}
@keyframes cc-cart-spin { to { transform: rotate(360deg); } }

/* ============ footer (drawer + /cart page) ============ */
cart-drawer-component .cart-drawer__summary {
  gap: 10px; padding: 12px var(--cart-drawer-padding) 14px; border-block-start: 1px solid var(--ccx-line);
  background: #fff; box-shadow: 0 -10px 24px -18px rgb(14 15 16 / .35);
}
cart-items-component.cart-items-component .cc-foot {
  width: 100%; display: flex; flex-direction: column; gap: 10px; font-family: var(--cc-f-body); color: var(--cc-ink);

  /* opt-in Shipping Protection */
  & .cc-protect { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ccx-line); border-radius: 12px; background: var(--cc-cream, #f6f7f7); }
  & .cc-protect.is-on { border-color: var(--cc-ink); }
  & .cc-protect[loading] { opacity: .65; pointer-events: none; }
  & .cc-protect__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--cc-ink); box-shadow: inset 0 0 0 1px var(--ccx-line); }
  & .cc-protect__icon svg { width: 20px; height: 20px; }
  & .cc-protect__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  & .cc-protect__name { font-size: 14px; font-weight: 800; line-height: 1.2; color: var(--cc-ink); }
  & .cc-protect__copy { font-size: 12px; line-height: 1.3; color: var(--cc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .cc-protect__copy b { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cc-ink); font-size: 11px; }
  & .cc-protect__price { flex: none; font-size: 14px; font-weight: 800; color: var(--cc-ink); }
  & .cc-protect__switch { flex: none; position: relative; width: 44px; height: 26px; cursor: pointer; }
  & .cc-protect__switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  & .cc-protect__track { position: absolute; inset: 0; border-radius: 26px; background: rgb(20 21 22 / .22); transition: background-color .2s; pointer-events: none; }
  & .cc-protect__track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgb(0 0 0 / .2); transition: transform .2s; }
  & .cc-protect__switch input:checked + .cc-protect__track { background: var(--cc-ink); }
  & .cc-protect__switch input:checked + .cc-protect__track::before { transform: translateX(18px); background: var(--cc-yellow, #f6c90e); }
  /* 05/10 (chủ store): chữ ON/OFF dưới công tắc */
  & .cc-protect__switch { height: 42px; }
  & .cc-protect__track { inset: 0 0 auto; height: 26px; }
  & .cc-protect__state { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10px; font-weight: 900; letter-spacing: .08em; line-height: 1; color: rgb(17 17 17 / .45); pointer-events: none; }
  & .cc-protect__state::after { content: "OFF"; }
  & .cc-protect__switch input:checked ~ .cc-protect__state { color: #111; }
  & .cc-protect__switch input:checked ~ .cc-protect__state::after { content: "ON"; }
  & .cc-protect__switch input:focus-visible + .cc-protect__track { outline: 2px solid var(--cc-ink); outline-offset: 2px; }

  /* "You save $X · See details" (folded by default) */
  & .cc-foot__save { display: block; background: var(--ccx-soft); border-radius: 12px; padding: 8px 14px; transition: opacity .15s; }
  & .cc-foot__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 0; padding: 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: 800; color: var(--cc-ink); }
  & .cc-foot__head::-webkit-details-marker { display: none; }
  & .cc-foot__head:focus-visible { outline: 2px solid var(--cc-ink); outline-offset: 4px; border-radius: 6px; }
  & .cc-foot__lead { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
  & .cc-foot__lead b { background: var(--ccx-save); color: #fff; border-radius: 999px; padding: 3px 11px; margin-inline-start: 4px; }
  & .cc-foot__toggle { flex: none; font-size: 13px; font-weight: 700; color: var(--cc-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  & .cc-foot__show { display: none; }
  & .cc-foot__list { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed #d8c374; display: grid; gap: 6px; }
  &.cc-foot--drawer .cc-foot__list { max-height: min(30vh, 260px); overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 4px; }
  & .cc-foot__item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; line-height: 1.35; color: var(--cc-body); font-variant-numeric: tabular-nums; }
  & .cc-foot__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .cc-foot__price { flex: none; white-space: nowrap; }
  & .cc-foot__price s { color: var(--cc-muted); margin-inline-end: 4px; }
  & .cc-foot__item--code .cc-foot__price, & .cc-foot__row--code span:last-child { color: var(--ccx-save); font-weight: 700; }
  & .cc-foot__free { color: var(--cc-ink); font-weight: 800; }
  & .cc-foot__total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #d8c374; font-size: 14.5px; font-weight: 800; color: var(--cc-ink); font-variant-numeric: tabular-nums; }
  & .cc-foot__total s { color: var(--cc-muted); font-weight: 600; margin-inline-start: 2px; }
  & .cc-foot__now { color: var(--cc-ink); font-weight: 800; }
  & .cc-foot__total .cc-foot__now { font-size: 17px; margin-inline-start: 2px; }

  /* no savings: plain rows */
  & .cc-foot__summary { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
  & .cc-foot__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  & .cc-foot__row--total { font-size: 16px; font-weight: 800; color: var(--cc-ink); }

  /* one CHECK OUT • total = the site's yellow sliced-tip button (kit fix-02) */
  & .cc-foot__checkout {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 0 40px 0 28px; border: 0;
    border-radius: 10px 0 0 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
    background: linear-gradient(180deg, var(--cc-yellow-2, #ffd83a), var(--cc-yellow, #f6c90e)); color: var(--cc-ink);
    font: italic 800 17px/1 var(--cc-f-body); letter-spacing: .03em; text-transform: uppercase; cursor: pointer;
    transition: transform .15s, filter .15s, opacity .15s;
  }
  @media (hover: hover) and (pointer: fine) { & .cc-foot__checkout:hover { filter: brightness(1.04); transform: translateY(-1px); } }
  & .cc-foot__checkout:focus-visible { outline: 2px solid var(--cc-ink); outline-offset: 3px; }
  & .cc-foot__checkout[disabled] { opacity: .5; cursor: default; transform: none; }
  & .cc-foot__dot { opacity: .8; }
  & .cc-foot__promise { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -2px 0 0; text-align: center; font-size: 13px; line-height: 1.3; color: var(--cc-muted); }
  & .cc-foot__promise svg { flex: none; width: 15px; height: 15px; color: var(--cc-ink); }
  & .cc-foot__promise b { color: var(--cc-ink); font-weight: 700; }
}

/* "You save" folded by default everywhere (owner rule 01/10/2026); assets/cc-cart.js folds it again on every cart change and
   whenever the drawer opens / closes. */
cart-items-component .cc-foot__save:not([open]) .cc-foot__hide { display: none; }
cart-items-component .cc-foot__save:not([open]) .cc-foot__show { display: inline; }

/* the cart is being written (any change on the page): Check out rests until the server has answered and the gift check ran */
html:is(.cc-cart-wait, .cc-cart-busy) cart-items-component .cc-foot__checkout { opacity: .55; pointer-events: none; cursor: progress; transform: none; }
html[data-cc-gift-pending] cart-items-component .cc-foot__checkout { opacity: .55; }
html:is(.cc-cart-wait, .cc-cart-busy) cart-items-component .cc-foot__save { opacity: .7; }

/* ============ upsell row "Add to your order" (mockup fix-65; snippets/cc-cart-upsell.liquid) ============ */
cart-items-component.cart-items-component .cc-ups {
  display: grid; gap: 8px; margin: 0;
  & .cc-ups__h { margin: 0; font: 800 11.5px/1.2 var(--cc-f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); }
  & .cc-ups__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  & .cc-ups__card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; padding: 6px; border: 1px solid var(--ccx-line); border-radius: 12px; background: #fff; }
  & .cc-ups__img { display: block; position: relative; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--ccx-line); }
  & .cc-ups__img.cc-pack { background: #fff var(--cc-pack-atlas, none) no-repeat; background-size: 1000% 1000%; }
  & .cc-ups__img img { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 9px; object-fit: cover; }
  & .cc-ups__txt { display: grid; gap: 3px; min-width: 0; }
  & .cc-ups__name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 13.5px/1.25 var(--cc-f-body); color: var(--cc-ink); text-decoration: none; }
  & .cc-ups__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; }
  & .cc-ups__price { font-size: 13px; white-space: nowrap; color: var(--cc-ink); }
  & .cc-ups__price b { font-weight: 800; }
  & .cc-ups__price s { margin-inline-start: 2px; font-size: 11.5px; color: var(--cc-muted); }
  & .cc-ups__add { position: relative; flex: none; height: 26px; padding: 0 10px; border: 1px solid var(--cc-ink); border-radius: 999px; background: #fff; color: var(--cc-ink); font: 800 12px/1 var(--cc-f-body); white-space: nowrap; cursor: pointer; }
  @media (hover: hover) and (pointer: fine) { & .cc-ups__add:hover { background: var(--cc-yellow, #f6c90e); border-color: var(--cc-yellow, #f6c90e); } }
  & .cc-ups__add:focus-visible { outline: 2px solid var(--cc-ink); outline-offset: 2px; }
  & .cc-ups__add[disabled] { opacity: .6; cursor: progress; }
}
/* in the drawer the row is its own band above the footer (mockup: a line under it) */
cart-drawer-component .cc-foot--drawer .cc-ups { margin-inline: calc(-1 * var(--cart-drawer-padding)); padding: 0 var(--cart-drawer-padding) 10px; border-block-end: 1px solid var(--ccx-line); }

/* ============ empty drawer ============ */
cart-drawer-component .cart-drawer__close-button--empty { display: grid; place-items: center; width: 38px; height: 38px; margin: 12px 16px 0 auto; border-radius: 50%; border: 1px solid var(--ccx-line); background: #fff; color: var(--cc-ink); }
cart-drawer-component .cart-drawer__close-button--empty .svg-wrapper { width: 18px; height: 18px; }
cart-drawer-component .cart-drawer--empty .cart-drawer__content { gap: 10px; padding: 48px 20px; }
cart-drawer-component .cc-cart-empty__icon { width: 56px; height: 56px; color: var(--cc-steel); }
cart-drawer-component .cart-drawer--empty .theme-drawer__title,
cart-drawer-component #cart-drawer-heading:only-child { font: 800 20px/1.25 var(--cc-f-head); letter-spacing: -.02em; color: var(--cc-ink); }
cart-drawer-component .cc-cart-empty__line { margin: 0; font-size: 15px; color: var(--cc-muted); }
cart-items-component .cart-items__empty-button {
  border: 0; border-radius: 10px 0 0 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); padding: 0 40px 0 28px; min-height: 52px;
  background: linear-gradient(180deg, var(--cc-yellow-2, #ffd83a), var(--cc-yellow, #f6c90e)); color: var(--cc-ink); box-shadow: none;
  font: italic 800 15px/1 var(--cc-f-body); letter-spacing: .03em; text-transform: uppercase;
}

/* ============ /cart page ============ */
.cart-page__summary :is(.section-background, .cart-summary) { background-color: var(--cc-cream, #f6f7f7) !important; }
.cart-page .cart-title, .cart-page__title :is(h1, .h4) { font-family: var(--cc-f-head); font-weight: 800; letter-spacing: -.02em; color: var(--cc-ink); }
cart-items-component.cart-items-component .cc-foot--page .cc-protect { background: #fff; }
cart-items-component.cart-items-component .cc-foot--page .cc-protect__copy { white-space: normal; }
cart-items-component.cart-items-component:not([data-drawer]) {
  & .cart-items__table-row { grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: 16px; }
  & .cart-items__media { width: 96px; min-width: 96px; height: 96px; }
  & .cart-items__nested-line { grid-template-columns: 56px minmax(0, 1fr) auto; padding-inline-start: 66px; }
  & .cart-items__nested-line::before { left: 46px; }
  & .cart-items__nested-line .cart-items__media, & .cart-items__nested-line td:first-child { width: 56px; min-width: 56px; height: 56px; }
  & .cart-items__title { font-size: 17px; }
}

/* ============ desktop drawer (≥750px): a touch tighter than the mockup so a Buy 2 in two sizes + 2 gifts + upsells +
   protection + Check out stay on a 1280×900 screen (Back Hero compact desktop, owner 01/10/2026) ============ */
@media screen and (min-width: 750px) {
  cart-drawer-component cart-items-component.cart-items-component {
    & .cart-items__table-row:not(.cart-items__nested-line) { --ccx-gap: 6px; grid-template-columns: 68px minmax(0, 1fr) auto; padding-bottom: 12px; margin-bottom: 12px; }
    & .cart-items__table-row:not(.cart-items__nested-line) .cart-items__media { width: 68px; min-width: 68px; height: 68px; }
    & .cart-items__table-row:has(+ .cart-items__nested-line) { padding-bottom: 8px; }
    & .cart-items__nested-line { padding-bottom: 6px; padding-inline-start: 48px; }
    & .cart-items__nested-line::before { left: 32px; }
    & .cart-items__nested-line .cart-items__media, & .cart-items__nested-line td:first-child { width: 40px; min-width: 40px; height: 40px; }
    & .cart-items__nested-line:not(:has(+ .cart-items__nested-line)) { padding-bottom: 12px; margin-bottom: 12px; }
    & .cart-items__nested-line:not(:has(+ .cart-items__nested-line))::before { bottom: 12px; }
    & .cart-items__quantity .quantity-selector { height: 34px; }
    & .cart-items__quantity .quantity-selector :is(button) { width: 30px; height: 32px; }
    & .cc-sets { height: 34px; }
    & .cc-sets button { width: 30px; }
    & .cc-foot { gap: 8px; }
  }
  cart-drawer-component .cart-drawer__summary { padding-block: 10px 12px; gap: 8px; }
}

/* ============ phones (≤749px) = the compact drawer (owner 01/10/2026, skill shopify-cart-drawer, mockup fix-66):
   a 2-unit deal + 2 gift lines + upsells + protection + Check out on one 390×844 screen ============ */
@media screen and (max-width: 749px) {
  cart-drawer-component {
    --cart-drawer-padding: 14px;
    & .cc-cart-head { padding: 8px 10px 8px 16px; gap: 10px; }
    & .cc-cart-head .theme-drawer__title { font-size: 18px; }
    & .cc-cart-head__n { font-size: 13.5px; }
    & .cc-cart-head .theme-drawer__close-button { width: 36px; height: 36px; }
    & .cc-bar { padding: 0; }
    & .cc-bar .cc-bar__label { margin: 0; padding: 7px 12px; background: var(--ccx-soft); border-block-end: 1px solid var(--ccx-soft-line); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
    & .cc-bar .cc-bar__up { font-size: 12.5px; }
    & .cc-bar .cc-bar__up-to { display: none; } /* "Upgrade" only: the band stays one line at 390 */
    & .cc-bar .cc-bar__bar { display: none; }
    & .cc-bar.is-long .cc-bar__label { padding-inline: 10px; letter-spacing: -.01em; }
    & .cart-drawer__items { padding-block-start: 10px; }
    & .cart-drawer__summary { padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 7px; }
  }
  cart-drawer-component cart-items-component.cart-items-component {
    & .cart-items__table-row:not(.cart-items__nested-line) { --ccx-gap: 5px; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 10px; padding-bottom: 10px; margin-bottom: 10px; }
    & .cart-items__table-row:not(.cart-items__nested-line) .cart-items__media { width: 56px; min-width: 56px; height: 56px; border-radius: 10px; }
    & .cart-items__title { font-size: 14.5px; line-height: 1.25; }
    & .cc-line__deal { font-size: 13px; gap: 5px; }
    & .cc-pill { padding: 2px 7px; font-size: 10.5px; }
    & .cc-line__units { gap: 4px 6px; }
    & .cart-items__product-info { column-gap: 8px; row-gap: 3px; }
    & .cc-line__unit-n { font-size: 11.5px; }
    & .cc-line__size select { height: 26px; font-size: 12px; padding-inline: 7px 20px; max-width: 150px; border-radius: 7px; }
    & .cc-line__size::after { right: 8px; width: 5px; height: 5px; }
    & .cart-items__price { font-size: 15px; column-gap: 6px; }
    & .cc-line__was { font-size: 12px; }
    & .cc-line__saved { font-size: 11.5px; }
    & .cart-items__quantity .quantity-selector { height: 32px; border-radius: 8px; }
    & .cart-items__quantity .quantity-selector :is(button) { width: 28px; height: 30px; }
    & .cart-items__quantity .quantity-selector input[type="number"] { width: 22px; font-size: 14px; }
    & .cc-sets { height: 32px; border-radius: 8px; }
    & .cc-sets button { width: 28px; }
    & .cc-sets__n { min-width: 22px; font-size: 14px; }
    & .cart-items__remove, & .cc-group-remove { top: -7px; }
    & .cart-items__remove svg { width: 17px; height: 17px; }
    & .cart-items__remove::before { content: ""; position: absolute; inset: -6px; }
    /* gift rows: slim — 32px photo, 18px indent, 4px gap */
    & .cart-items__table-row:has(+ .cart-items__nested-line) { padding-bottom: 6px; }
    & .cart-items__nested-line { grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 8px; padding: 0 0 4px 28px; }
    & .cart-items__nested-line::before { left: 18px; }
    & .cart-items__nested-line .cart-items__media,
    & .cart-items__nested-line td:first-child { width: 32px; min-width: 32px; height: 32px; border-radius: 7px; }
    & .cart-items__nested-line .cart-items__media-container { border-radius: 6px; }
    & .cart-items__nested-line .cart-items__title { font-size: 12.5px; }
    & .cart-items__nested-line .cc-line__gtag { margin-top: 2px; padding: 2px 6px; font-size: 9.5px; border-radius: 5px; }
    & .cart-items__nested-line .cart-items__price { font-size: 12px; column-gap: 5px; }
    & .cart-items__nested-line .cc-line__was { font-size: 12px; }
    & .cart-items__nested-line .cc-line__free { font-size: 12px; }
    & .cart-items__nested-line:not(:has(+ .cart-items__nested-line)) { padding-bottom: 10px; margin-bottom: 10px; }
    & .cart-items__nested-line:not(:has(+ .cart-items__nested-line))::before { bottom: 10px; }
    /* footer */
    & .cc-foot { gap: 7px; }
    & .cc-ups { gap: 5px; }
    & .cc-ups .cc-ups__h { font-size: 10.5px; }
    /* mockup fix-65: on phones the cards are a swipe row (80% wide), so the name and "+ Add" stay on one line each */
    & .cc-ups .cc-ups__list { grid-auto-columns: minmax(240px, 80%); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; }
    & .cc-ups .cc-ups__list::-webkit-scrollbar { display: none; }
    & .cc-ups .cc-ups__card { scroll-snap-align: start; }
    & .cc-ups .cc-ups__list:has(> :only-child) { grid-auto-columns: minmax(0, 1fr); }
    & .cc-ups .cc-ups__card { grid-template-columns: 42px minmax(0, 1fr); gap: 7px; padding: 5px; border-radius: 10px; }
    & .cc-ups .cc-ups__img { width: 42px; height: 42px; border-radius: 8px; }
    & .cc-ups .cc-ups__img img { border-radius: 7px; }
    & .cc-ups .cc-ups__name { font-size: 12.5px; }
    & .cc-ups .cc-ups__price { font-size: 12px; }
    & .cc-ups .cc-ups__price s { font-size: 10.5px; }
    & .cc-ups .cc-ups__add { height: 26px; padding: 0 9px; font-size: 12px; }
    & .cc-foot .cc-protect { padding: 6px 10px; gap: 8px; border-radius: 10px; }
    & .cc-foot .cc-protect__icon { width: 26px; height: 26px; }
    & .cc-foot .cc-protect__icon svg { width: 15px; height: 15px; }
    & .cc-foot .cc-protect__name { font-size: 13px; }
    & .cc-foot .cc-protect__copy { white-space: nowrap; font-size: 11px; }
    & .cc-foot .cc-protect__copy b { font-size: 10px; }
    & .cc-foot .cc-protect__price { font-size: 13px; }
    & .cc-foot .cc-protect__switch { width: 40px; height: 24px; }
    & .cc-foot .cc-protect__track::before { width: 18px; height: 18px; }
    & .cc-foot .cc-protect__switch input:checked + .cc-protect__track::before { transform: translateX(16px); }
    & .cc-foot .cc-foot__save { padding: 6px 12px; border-radius: 10px; }
    & .cc-foot .cc-foot__head { font-size: 13.5px; }
    & .cc-foot .cc-foot__lead b { padding: 2px 9px; }
    & .cc-foot .cc-foot__toggle { font-size: 12px; }
    & .cc-foot .cc-foot__checkout { min-height: 48px; font-size: 16px; }
    & .cc-foot .cc-foot__promise { margin: -2px 0 0; font-size: 11.5px; }
    & .cc-foot .cc-foot__promise svg { width: 13px; height: 13px; }
  }
  /* /cart page on phones */
  cart-items-component.cart-items-component:not([data-drawer]) {
    & .cart-items__table-row { grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 12px; }
    & .cart-items__media { width: 72px; min-width: 72px; height: 72px; }
    & .cart-items__nested-line { grid-template-columns: 40px minmax(0, 1fr) auto; padding-inline-start: 40px; }
    & .cart-items__nested-line::before { left: 26px; }
    & .cart-items__nested-line .cart-items__media, & .cart-items__nested-line td:first-child { width: 40px; min-width: 40px; height: 40px; }
    & .cart-items__title { font-size: 15px; }
  }
}
/* 11/10/2026 (chủ store): ô "You save" hạ xuống một chút, không dính sát dòng quà phía trên */
cart-items-component.cart-items-component .cc-foot.cc-foot--inline { margin-top: 16px; }
@media screen and (max-width: 749px) { cart-items-component.cart-items-component .cc-foot.cc-foot--inline { margin-top: 12px; } }

/* 20/10/2026 add-on card: Lifetime Warranty + FREE Sharpener (product thumb + struck compare price) */
.cc-protect__thumb { flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--ccx-line); }
.cc-protect__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cc-protect__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.cc-protect__price s { font-size: 11px; font-weight: 600; color: var(--cc-muted); }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__copy { white-space: normal; overflow: visible; }

/* 20/10/2026: no ON/OFF text on the add-on switch; keep the price column from clipping */
cart-items-component.cart-items-component .cc-foot .cc-protect__state { display: none; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__price { flex: none; white-space: nowrap; }

/* owner 22/10/2026: drawer footer scrolls with the items, never pinned (desktop + phones) — a long cart was hidden behind
   it. Same as Horizon's own cart-summary-sticky='false' state, applied always. /cart page untouched. */
cart-drawer-component .cart-drawer__summary { position: static !important; mask-image: none !important; -webkit-mask-image: none !important; box-shadow: none !important; }
cart-drawer-component .cart-drawer__items { overflow: unset !important; }

/* owner 22/10/2026: "Add to your order" fits the screen like Back Hero USA — no sideways swiping (phones + desktop).
   Two cards per row; a third wraps onto the next row; a single card spans the row. */
cart-items-component.cart-items-component .cc-ups .cc-ups__list {
  grid-auto-flow: row !important; grid-auto-columns: auto !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  overflow: visible !important; scroll-snap-type: none !important; margin-inline: 0 !important; padding-inline: 0 !important;
}
cart-items-component.cart-items-component .cc-ups .cc-ups__list:has(> :only-child) { grid-template-columns: minmax(0, 1fr) !important; }

/* upsell names up to 2 lines (22/10/2026) instead of "Anti-Slip Silicon…" */
cart-items-component.cart-items-component .cc-ups .cc-ups__name { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* owner 22/10/2026: ON / OFF under the add-on switch (desktop + phones); replaces the 20/10 "no ON/OFF text" rule for this card */
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__state { display: block !important; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__switch { height: 42px; }
@media screen and (max-width: 749px) {
  cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__switch { height: 38px; }
  cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__track { height: 24px; }
}


/* owner 22/10/2026: cart thumbnails fill the full height of their card – "Add to your order" + the Lifetime Warranty add-on */
cart-items-component.cart-items-component .cc-ups .cc-ups__card { grid-template-columns: 96px minmax(0, 1fr) !important; align-items: stretch !important; gap: 10px !important; padding: 0 8px 0 0 !important; overflow: hidden; }
cart-items-component.cart-items-component .cc-ups .cc-ups__img { width: 100% !important; height: 100% !important; min-height: 96px; border-radius: 0 !important; box-shadow: none !important; }
cart-items-component.cart-items-component .cc-ups .cc-ups__img img { inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: cover; }
cart-items-component.cart-items-component .cc-ups .cc-ups__txt { align-content: center; padding-block: 8px; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty { overflow: hidden; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__thumb { align-self: stretch; width: 92px; height: auto; min-height: 84px; margin: -10px 0 -10px -12px; border-radius: 0; box-shadow: none; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__thumb img { object-fit: cover; }
@media screen and (max-width: 749px) {
  cart-items-component.cart-items-component .cc-ups .cc-ups__card { grid-template-columns: 84px minmax(0, 1fr) !important; gap: 8px !important; }
  cart-items-component.cart-items-component .cc-ups .cc-ups__img { min-height: 84px; }
  cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__thumb { width: 80px; min-height: 76px; margin: -6px 0 -6px -10px; }
}


/* cart-3-lines v2 (owner 22/10/2026): original names; thin margins so the 2 "Add to your order" cards and the
   Lifetime Warranty card stay at ~3 lines of text */
cart-items-component.cart-items-component .cc-ups .cc-ups__card { gap: 8px !important; padding: 0 6px 0 0 !important; }
cart-items-component.cart-items-component .cc-ups .cc-ups__img { min-height: 0 !important; height: auto !important; aspect-ratio: 1 / 1; align-self: center !important; border-radius: 6px !important; background: #fff; }
cart-items-component.cart-items-component .cc-ups .cc-ups__img img { object-fit: contain !important; border-radius: 6px !important; }
cart-items-component.cart-items-component .cc-ups .cc-ups__card { padding-left: 6px !important; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__thumb { background: #fff !important; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__thumb img { object-fit: contain !important; }
cart-items-component.cart-items-component .cc-ups .cc-ups__txt { padding-block: 5px !important; row-gap: 2px !important; align-content: center; }
cart-items-component.cart-items-component .cc-ups .cc-ups__name { line-height: 1.18 !important; }
cart-items-component.cart-items-component .cc-ups .cc-ups__row { gap: 3px !important; margin-top: 0 !important; }
cart-items-component.cart-items-component .cc-ups .cc-ups__price { white-space: nowrap; line-height: 1.2; }
cart-items-component.cart-items-component .cc-ups .cc-ups__add { height: 24px !important; padding: 0 10px !important; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty { display: grid !important; grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "thumb body price" "thumb body switch"; column-gap: 8px !important; row-gap: 2px; align-items: center; padding: 6px 8px 6px 0 !important; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__thumb { grid-area: thumb; margin: -6px 0 !important; width: 100% !important; min-height: 0 !important; height: calc(100% + 12px) !important; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__body { grid-area: body; display: block; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__name { line-height: 1.18; display: block; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__copy { display: block; margin-top: 1px; line-height: 1.2; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__price { grid-area: price; align-self: end; justify-self: end; flex-direction: column; align-items: flex-end; line-height: 1.1; }
cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__switch { grid-area: switch; align-self: start; justify-self: end; }
@media screen and (max-width: 749px) {
  cart-items-component.cart-items-component .cc-ups .cc-ups__card { grid-template-columns: 50px minmax(0, 1fr) !important; gap: 6px !important; padding-right: 4px !important; padding-left: 4px !important; }
  cart-items-component.cart-items-component .cc-ups .cc-ups__name { font-size: 12px !important; }
  cart-items-component.cart-items-component .cc-ups .cc-ups__price b { font-size: 12px; }
  cart-items-component.cart-items-component .cc-ups .cc-ups__price s { font-size: 10px; }
  cart-items-component.cart-items-component .cc-foot .cc-protect--warranty { grid-template-columns: 70px minmax(0, 1fr) auto; column-gap: 6px !important; padding: 5px 6px 5px 0 !important; }
  cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__thumb { background: #fff !important; }
  cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__thumb img { object-fit: contain !important; }
  cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__price { font-size: 13px; }
  cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__price s { font-size: 10.5px; }
  cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__thumb { margin: -5px 0 !important; height: calc(100% + 10px) !important; }
  cart-items-component.cart-items-component .cc-foot .cc-protect--warranty .cc-protect__name { font-size: 12.5px !important; }
}

/* cc-units-stacked-qty-left 2026-10-23 */
/* owner 23 Oct 2026: one size select per line (#1, #2, #3 stacked); the quantity stepper at the far left, light yellow */
cart-items-component.cart-items-component {
  & .cart-items__table-row:not(.cart-items__nested-line) { grid-template-areas: "media details details" "quantity quantity price" "error error error"; }
  & .cc-line__units { flex: 1 0 100%; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
  & .cc-line__size { max-width: 100%; }
  & .cart-items__quantity .quantity-selector, & .cc-sets { background: #FFF5CC; border-color: #f1dd8a; }
}