/* ===========================================================================
   W2CARTUI_260808 — cart shapes and colours, on the classes that exist.
   ---------------------------------------------------------------------------
   The first attempt did nothing, and the console said why:

       w2cartui.css in stylesheets : false
       .w2c-minus borderRadius     : 8px
       the panel class it targeted : 0 elements
       chain: BUTTON.w2c-checkout < DIV.w2c-actions < DIV.w2c-foot
              < DIV.w2c-sheet < DIV.open < BODY.w2c-lock

   Two faults. The panel is .w2c-sheet; the name used before was assumed
   never checked, so every colour rule pointed at nothing. And the file was not
   loaded at all: the <link> went in after a </script> that closes something
   else on the page.

   Measured now, from the live DOM. Nothing here is guessed:
     panel   .w2c-sheet
     footer  .w2c-foot > .w2c-actions
     body    BODY.w2c-lock while open
   =========================================================================== */

/* ── quantity: circles, bigger ──────────────────────────────────────────── */
.w2c-sheet .w2c-qty { gap: 10px !important; }

.w2c-sheet .w2c-minus,
.w2c-sheet .w2c-plus {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  background: #fff !important;
  color: #0a0a0a !important;
  font-size: 19px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.w2c-sheet .w2c-minus:hover,
.w2c-sheet .w2c-plus:hover {
  background: #f4f4f2 !important;
  border-color: rgba(0,0,0,.32) !important;
}

/* ── the bin: the same circle, so the row is one set of controls ────────── */
.w2c-sheet .w2c-trash {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(229,72,77,.30) !important;
  background: #fff !important;
  color: #E5484D !important;
  opacity: 1 !important;
  transition: background .12s, border-color .12s;
}
.w2c-sheet .w2c-trash:hover {
  background: rgba(229,72,77,.08) !important;
  border-color: rgba(229,72,77,.6) !important;
}
.w2c-sheet .w2c-trash svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.9 !important;
}

/* ── footer: the pill of the word chips ─────────────────────────────────── */
.w2c-sheet .w2c-continue,
.w2c-sheet .w2c-checkout {
  border-radius: 999px !important;
  padding: 15px 26px !important;
  font-weight: 650 !important;
  transition: background .14s, border-color .14s, color .14s;
}

/* ── web: white panel, ink that is actually black ───────────────────────── */
@media (min-width: 768px) {
  .w2c-sheet {
    background: #ffffff !important;
    color: #0a0a0a !important;
    border: 0 !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.22) !important;
  }
  .w2c-sheet .w2c-row { border-bottom: 1px solid #ECEAE4 !important; }

  .w2c-sheet .w2c-continue {
    background: #ffffff !important;
    color: #0a0a0a !important;
    border: 1.5px solid #111111 !important;
  }
  .w2c-sheet .w2c-continue:hover { background: #f4f4f2 !important; }

  /* it was rgb(70,65,58) — a warm grey. #111 is the ink the whole product
     uses, the same value the black garment carries. */
  .w2c-sheet .w2c-checkout {
    background: #111111 !important;
    color: #ffffff !important;
    border: 1.5px solid #111111 !important;
  }
  .w2c-sheet .w2c-checkout:hover {
    background: #000000 !important;
    border-color: #000000 !important;
  }
  .w2c-sheet .w2c-x { background: #111111 !important; color: #fff !important; }
}

/* ── phone: dark panel stays, only the shapes change ────────────────────── */
@media (max-width: 767px) {
  .w2c-sheet .w2c-minus,
  .w2c-sheet .w2c-plus {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.22) !important;
    color: #ffffff !important;
  }
  .w2c-sheet .w2c-trash {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(229,72,77,.45) !important;
  }
}

/* ---------------------------------------------------------------------------
   One divider, not two.
   ---------------------------------------------------------------------------
   Each item row carries a bottom border, and the footer carries a top border.
   With one item in the cart those two land a few pixels apart and read as a
   double rule.

   The last row gives up its border and the footer keeps its own: the line
   belongs to the boundary between the list and the total, not to the item —
   an item is not the thing that ends there. Add a second item and the rule
   between the two rows still appears, which is the whole point of that border.
   --------------------------------------------------------------------------- */
.w2c-sheet .w2c-row:last-child {
  border-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   The row reads down: product, word, price.
   ---------------------------------------------------------------------------
   .w2c-name carried white-space:nowrap with an ellipsis, so on a phone the
   buyer's own word was the half that got cut — "T-Shirt · \201cLo…". The name
   and the word are separate elements now (w2cart.js), and each gets its own
   line: the product is the category, the word is what makes it theirs, and the
   price is what they are about to pay. Three facts, three lines, none of them
   competing for the same 220px.

   The price uses --w2-dong, the variable the total already uses. One orange in
   the product, not an eyeballed hex per surface — the same discipline the
   garment colours follow.
   --------------------------------------------------------------------------- */
.w2c-sheet .w2c-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.w2c-sheet .w2c-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.w2c-sheet .w2c-word {
  font: 700 15px/1.25 Syne, sans-serif !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* the price, everywhere it appears, in the one orange the product owns */
.w2c-sheet .w2c-price,
.w2c-sheet .w2c-total-gbt,
.w2c-sheet .w2c-total-val {
  color: var(--w2-dong, #FF8A00) !important;
  font-weight: 800 !important;
}
.w2c-sheet .w2c-price { font-size: 14px !important; }

/* on a phone the row is tight: the controls stay on their line, the text
   takes what is left rather than pushing them off the edge */
@media (max-width: 767px) {
  .w2c-sheet .w2c-row { align-items: flex-start !important; }
  .w2c-sheet .w2c-qty,
  .w2c-sheet .w2c-trash { margin-top: 2px; }
  .w2c-sheet .w2c-name,
  .w2c-sheet .w2c-word { font-size: 14px !important; }
}

@media (min-width: 768px) {
  .w2c-sheet .w2c-name { color: #0a0a0a !important; }
  .w2c-sheet .w2c-word { color: #0a0a0a !important; }
}