/*
 * replica.css - the replica's own stylesheet.
 *
 * Load order (see templates/layout.html and CONTRACT.md):
 *   1. /assets/css/base.css           (Horizon theme, copied from the live store)
 *   2. /assets/css/overflow-list.css  (Horizon theme)
 *   3. /assets/css/styles.css         (Horizon theme)
 *   4. /assets/css/theme-inline.css   (design tokens extracted from the live home page: @font-face, :root color schemes, header vars)
 *   5. /assets/css/replica.css        (THIS FILE: everything the design agents add. Per-section styles from the live inline <style>
 *                                      blocks live in raw/analysis/inline-styles-<page>.css and should be ported here or into
 *                                      per-section files that layout.html loads after this one.)
 *
 * Intentionally empty at the foundation stage. The skeleton templates rely on the theme classes above.
 */

/* ------------------------------------------------------------------------------------------------------------------------
 * discounts (agent: discounts / ext_discounts.py). Part 1: the {% stylesheet %} rules of snippets/cart-summary.liquid that
 * styles.css does not carry (the "Subtotal" + "Discount" lines rendered by partials/cart-discount.html on the cart page and
 * in the drawer). Part 2: the Shopify checkout "Discount code or gift card" field and the code pills of pages/checkout.html
 * and pages/thank-you.html (co-* namespace of replica-checkout.css).
 * ---------------------------------------------------------------------------------------------------------------------- */
.cart-discounts { list-style: none; padding: 0; margin: 0; }
.cart-discounts__item { display: flex; align-items: center; justify-content: space-between; }
.cart-discounts__label { display: flex; align-items: center; gap: var(--gap-2xs); }
.cart-discounts__label svg { width: var(--icon-size-sm); height: var(--icon-size-sm); display: inline-block; }
.cart-discount__codes:has(.cart-discount__pill) { margin-block-start: var(--padding-xs); }
.cart-discount__pill[aria-busy="true"] { opacity: .5; }

/* checkout: the field sits under the items, 20 px above the totals; input 49 px like the other fields, "Apply" dark once typed */
.co .co-discount { margin-top: 20px; }
.co-discount__row { display: flex; gap: 10px; align-items: stretch; }
.co-discount__row .co-field { flex: 1 1 auto; margin-top: 0; min-width: 0; }
.co-discount__row .co-field__input { background: #fff; }
.co-discount__apply {
  flex: 0 0 auto;
  height: var(--co-input-h);
  padding: 0 20px;
  border: 1px solid #ededed;
  border-radius: var(--co-radius);
  background: #f0f0f0;
  color: #8a8a8a;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: default;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.co-discount__apply:not(:disabled) { background: var(--co-accent); border-color: var(--co-accent); color: #fff; cursor: pointer; }
.co-discount__apply:not(:disabled):hover { background: #333; border-color: #333; }
.co-discount__apply:focus-visible { outline: 2px solid var(--co-accent); outline-offset: 2px; }
.co .co-discount__error { margin: 6px 0 0; font-size: 13px; line-height: 1.3; color: #d72c0d; }
.co .co-discount__error[hidden] { display: none; }
.co .co-discount__codes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.co .co-discount__codes:empty { display: none; }
.co-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #ebebeb;
  color: var(--co-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
}
.co-pill__icon { width: 15px; height: 15px; flex: 0 0 auto; }
.co-pill__code { overflow: hidden; max-width: 160px; text-overflow: ellipsis; }
.co-pill__remove { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin: 0 0 0 2px; padding: 0; border: 0; background: none; color: var(--co-muted); cursor: pointer; }
.co-pill__remove svg { width: 10px; height: 10px; }
.co-pill__remove:hover { color: var(--co-text); }
.co-pill--small { padding: 3px 6px; font-size: 12px; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.co-pill--small .co-pill__icon { width: 13px; height: 13px; }
.co-totals__row--discount dt { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.co-totals__row--discount[hidden], .co .co-totals [data-co-shipping-pill][hidden] { display: none; }

/* Display currency (ext_rates.py): "You will be charged in USD  $103.69 USD" under the converted total, small and grey. */
.co-totals__row--charge { margin-top: 6px; }
.co-totals__row--charge dt, .co-totals__row--charge dd { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--co-muted, #707070); }
.co__charge-note { margin: 0 0 10px; font-size: 12px; line-height: 1.4; color: var(--co-muted, #707070); text-align: center; }