/* kimchi.css — the ONLY first-party stylesheet, and the last one loaded.
 *
 * ---------------------------------------------------------------------------
 * WHAT BELONGS HERE
 * ---------------------------------------------------------------------------
 * The other five files in this directory are the live site's own CSS, vendored
 * verbatim (main / style / woo / polish / arrival) plus `woocommerce.css`, which
 * `scripts/extract_woo_css.py` GENERATES from the live bundle. None of them may
 * be edited: the next extraction would overwrite the edit, and the point of
 * vendoring is that what we ship is what the live site serves.
 *
 * So this file exists for one thing only:
 *
 *   🔴 a rule the live CSS cannot reach because OUR MARKUP DELIBERATELY DIFFERS.
 *
 * Every rule below must name that divergence and say why it was chosen. If the
 * answer is "the live site does it differently and we could match it", the fix
 * is to change the markup, not to add a rule here. That is what happened to the
 * cart's `dl.variation` on 2026-08-20 — it was two nested spans, and the fix was
 * to render what the live site renders, not to restyle the spans.
 *
 * 🔵 Loaded LAST (see src/components/legacy-theme.tsx), so it wins. That makes
 *    it the easiest place in the codebase to paper over a real problem. Keep it
 *    short enough that a reviewer reads all of it.
 */

/* ---------------------------------------------------------------------------
 * The cart's remove control is a <button>, not an <a>.
 * ---------------------------------------------------------------------------
 * Live WooCommerce renders `<a class="remove" href="?remove_item=…">` — a real
 * link, because removing an item there is a GET. Ours removes through the cart
 * API from the browser, so the control performs an action and goes nowhere: a
 * <button> is what that is. Rendering an <a href="#"> to inherit the styling
 * would be lying to a screen reader about what the control does.
 *
 * The consequence is that both rules the live site has are `a.remove` and
 * neither reaches us, so the button rendered as bare browser chrome — a cramped
 * grey box in the corner of a paid cart. These are the same declarations,
 * copied from the vendored files rather than invented:
 *
 *   woocommerce.css  .woocommerce a.remove       (WooCommerce's own)
 *   woo.css          .woocommerce a.remove       (the theme's override)
 */
.woocommerce button.remove {
  /* 🔴 CENTRED, not copied verbatim. WooCommerce sets `height: 1em` and the
     theme overrides `line-height: 1.6` — two rules from two stylesheets that
     only agree by accident. Applied to our button the glyph rendered BELOW its
     own circle (measured in the browser, 2026-08-20). Flex centring is the
     divergence; the colours and the circle are the theme's. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25em;
  height: 1.4em;
  width: 1.4em;
  padding: 0;
  line-height: 1;
  border-radius: 100%;
  background: none;
  cursor: pointer;
  font-weight: 700;
  /* The theme's override wins over WooCommerce's red on the live site; these
     two custom properties are defined in main.css. */
  color: var(--pink-ink);
  border: 1.5px solid var(--pink-line);
}

.woocommerce button.remove:hover:not(:disabled) {
  background: var(--pink);
  color: #fff;
}

.woocommerce button.remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}