/* src/styles/components-ecom.css
 *
 * Ecom-pack component CSS. Owned by the ecom Phase 3 components agent.
 *
 * This file is the SINGLE source of truth for ecom-component classes.
 * The designer's global.css does NOT publish .cart-summary, .cart-total,
 * .cart-empty, or .checkout-btn — those all live here. See
 * references/shared/STYLING.md § "Component-specific CSS is owned by the
 * component, not the designer".
 *
 * Class groups in this file:
 * - .cart-summary / .cart-total / .cart-empty / .checkout-btn → /cart page summary panel and empty state
 * - .cart-item / .cart-item-* / .qty-* → CartView.tsx line items
 * - .cart-discount / .cart-applied-discounts → CartView.tsx discount rows
 * - .cart-badge / .cart-badge-* → CartBadge.tsx (mounted in Navigation)
 *
 * Rules use direct CSS (`var(--token)`) only — no `@apply`. Tailwind v4
 * `@apply` in a non-entrypoint file only resolves utilities whose theme keys
 * the designer's `@theme` block declares. Earlier revisions of this template
 * used `@apply text-bark/70 bg-tobacco …` (stale token vocabulary) and
 * `@apply size-6` (built-in utility that needs `@reference` to be visible
 * here), and both classes built-failed against current designer output.
 * Direct `var(--color-ink)` / `var(--spacing-sm)` calls work against any
 * designer-published token set as long as the core scales exist (they always
 * do). Use fallback chains (`var(--color-paper-warm, var(--color-paper, var(--color-cream)))`)
 * for sometimes-published tokens.
 */

/* =========================================================================
   Cart summary panel + total + checkout button + empty state.
   Owned here, NOT in global.css.
   ========================================================================= */
.cart-summary {
  background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
  border: 1px solid var(--color-rule);
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
@media (min-width: 768px) {
  .cart-summary {
    position: sticky;
    top: var(--spacing-xl);
  }
}

.cart-empty {
  text-align: center;
  padding-block: var(--spacing-3xl);
  color: var(--color-mute);
}
.cart-empty .checkout-btn {
  display: inline-flex;
  width: auto;
  max-width: 18rem;
}

/* .checkout-btn — primary CTA, full-width inside .cart-summary. Self-contained;
   does NOT @apply the designer's `btn` utility (Tailwind v4 only @applies
   utilities declared with `@utility`, and the designer may or may not have
   declared it under that exact name). Composing the same visual shape inline
   keeps this file portable across designer vocabularies. */
.checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  background: var(--color-ink);
  color: var(--color-paper);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  margin-top: var(--spacing-md);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.checkout-btn:hover:not(:disabled) {
  background: var(--color-ink-soft, var(--color-ink));
}
.checkout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Cart badge icon (CartBadge.tsx) --- */
/* CartBadge.tsx renders an inline SVG bag icon + optional count span. */
.cart-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.cart-badge-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.cart-badge-count {
  position: absolute;
  top: -0.25rem;
  right: -0.5rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* --- Wix-powered side cart, visually aligned to the native Wix drawer --- */
.cart-drawer-root { position:fixed;inset:0;z-index:240;visibility:hidden;pointer-events:none; }
.cart-drawer-root.is-open { visibility:visible;pointer-events:auto; }
.cart-drawer-backdrop { position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(12,14,16,.58);opacity:0;transition:opacity .2s ease; }
.cart-drawer-root.is-open .cart-drawer-backdrop { opacity:1; }
.cart-drawer-panel { width:min(340px,100vw);height:100dvh;position:absolute;right:0;top:0;display:flex;flex-direction:column;color:#171717;background:#fff;box-shadow:-22px 0 52px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .25s cubic-bezier(.22,.8,.28,1); }
.cart-drawer-root.is-open .cart-drawer-panel { transform:translateX(0); }
.cart-drawer-header { min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 32px;border-bottom:2px solid #171717; }
.cart-drawer-header h2 { margin:0;font-family:var(--font-display);font-size:1.9rem;font-weight:700;letter-spacing:-.035em;line-height:1; }.cart-drawer-header h2 span { font-size:1.05rem;font-weight:400;letter-spacing:-.025em; }
.cart-drawer-close { width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;color:#171717;background:transparent;cursor:pointer; }.cart-drawer-close svg { width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.25; }
.cart-drawer-body { flex:1;min-height:0;overflow-y:auto;padding:20px 32px 12px;overscroll-behavior:contain; }
.cart-drawer-items { display:grid; }
.cart-drawer-state,.cart-drawer-message { padding:24px 0;color:#666;font-size:.78rem; }.cart-drawer-message { color:#a33b21; }
.cart-drawer-empty { min-height:320px;display:grid;place-items:center;align-content:center;gap:12px;text-align:center; }.cart-drawer-empty strong { font-size:1.2rem; }.cart-drawer-empty p { max-width:300px;color:#6f7377;font-size:.78rem; }.cart-drawer-empty a { min-height:50px;display:inline-flex;align-items:center;margin-top:10px;padding:0 26px;color:#fff;background:var(--color-accent);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.cart-drawer-item { position:relative;display:grid;grid-template-columns:112px minmax(0,1fr) 30px;gap:20px;padding:20px 0;border-bottom:1px solid #d5d5d5;transition:opacity .15s; }.cart-drawer-item:last-child { border-bottom:0; }.cart-drawer-item[aria-busy="true"] { opacity:.55; }
.cart-drawer-image-link,.cart-drawer-item > img,.cart-drawer-image-placeholder { width:112px;height:122px;display:block; }.cart-drawer-image-link img,.cart-drawer-item > img { width:100%;height:100%;object-fit:contain;background:#fff;border:1px solid #d7d7d7; }.cart-drawer-image-placeholder { border:1px solid #d7d7d7;background:#f6f6f4 url('../images/branding/william-tractor-mark.svg') center/44px auto no-repeat; }
.cart-drawer-item-copy { min-width:0;display:flex;flex-direction:column; }.cart-drawer-item h3 { max-width:270px;margin:0 0 6px;font-family:var(--font-body);font-size:.94rem;font-weight:500;line-height:1.38;letter-spacing:-.022em; }.cart-drawer-item h3 a:hover { color:var(--color-accent-dark); }
.cart-drawer-option { margin:1px 0;color:#737373;font-size:.67rem;line-height:1.4; }
.cart-drawer-item-bottom { display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px; }
.cart-drawer-quantity { height:40px;display:grid;grid-template-columns:38px 34px 38px;border:1px solid #777; }.cart-drawer-quantity button,.cart-drawer-quantity span { display:grid;place-items:center;padding:0;border:0;background:#fff;font-size:.95rem;line-height:1; }.cart-drawer-quantity button { cursor:pointer; }.cart-drawer-quantity button:hover:not(:disabled) { color:var(--color-accent-dark);background:#fff5ef; }.cart-drawer-quantity button:disabled { color:#c7c7c7;cursor:not-allowed; }.cart-drawer-price { display:grid;justify-items:end;gap:2px;white-space:nowrap; }.cart-drawer-price s { color:#666;font-size:.72rem; }.cart-drawer-price strong { color:#171717;font-size:1rem;font-weight:500; }
.cart-drawer-remove { width:30px;height:36px;display:grid;place-items:start center;padding:3px 0;border:0;color:#171717;background:transparent;cursor:pointer; }.cart-drawer-remove svg { width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round; }.cart-drawer-remove:hover:not(:disabled) { color:var(--color-accent-dark); }.cart-drawer-remove:disabled { opacity:.4;cursor:wait; }
.cart-drawer-lower { flex:0 0 auto;background:#fff;box-shadow:0 -12px 30px rgba(0,0,0,.045); }
.cart-drawer-promo { margin:0 32px;border-top:1px solid #bbb; }
.cart-drawer-promo-toggle { width:100%;min-height:60px;display:grid;grid-template-columns:26px 1fr 22px;align-items:center;gap:10px;padding:0;border:0;color:var(--color-accent-dark);background:#fff;text-align:left;cursor:pointer; }.cart-drawer-promo-toggle svg { width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.3; }.cart-drawer-promo-toggle span { font-size:.83rem; }.cart-drawer-promo-toggle b { font-size:1.2rem;font-weight:400;text-align:right; }
.cart-drawer-promo-panel { padding:0 0 16px; }.cart-drawer-promo-panel form > label { display:block;margin-bottom:6px;color:#555;font-size:.65rem;font-weight:600; }.cart-drawer-promo-panel form > div { display:grid;grid-template-columns:1fr auto; }.cart-drawer-promo-panel input { min-width:0;height:44px;padding:0 12px;border:1px solid #777;border-right:0;border-radius:0;outline:0;font-size:.78rem;text-transform:uppercase; }.cart-drawer-promo-panel input:focus { border-color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent); }.cart-drawer-promo-panel form button { min-width:86px;padding:0 14px;border:1px solid var(--color-accent);color:#fff;background:var(--color-accent);font-size:.68rem;font-weight:700;text-transform:uppercase;cursor:pointer; }.cart-drawer-promo-panel form button:disabled { opacity:.55;cursor:wait; }.cart-drawer-promo-panel > p { margin-top:7px;color:#62676b;font-size:.65rem;line-height:1.4; }
.cart-drawer-footer { padding:20px 32px 22px;border-top:1px solid #bbb;background:#fff; }.cart-drawer-discount,.cart-drawer-total { display:flex;align-items:baseline;justify-content:space-between;gap:20px; }.cart-drawer-discount { margin-bottom:7px;color:#2f7d4b;font-size:.72rem; }.cart-drawer-total { font-size:1.18rem;letter-spacing:-.025em; }.cart-drawer-total strong { font-size:1.25rem;font-weight:500; }.cart-drawer-footer > p { margin:7px 0 16px;color:#737373;font-size:.68rem;line-height:1.45; }
.cart-drawer-checkout,.cart-drawer-view-cart { width:100%;min-height:55px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-accent);border-radius:0;font-family:var(--font-body);font-size:.88rem;font-weight:500;cursor:pointer;transition:color .15s,background .15s; }.cart-drawer-checkout { color:#fff;background:var(--color-accent); }.cart-drawer-checkout:hover:not(:disabled) { background:var(--color-accent-dark);border-color:var(--color-accent-dark); }.cart-drawer-checkout:disabled { opacity:.6;cursor:wait; }.cart-drawer-view-cart { margin-top:10px;color:var(--color-accent-dark);background:#fff; }.cart-drawer-view-cart:hover { color:#fff;background:var(--color-accent-dark);border-color:var(--color-accent-dark); }.cart-drawer-secure { display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;color:#222;font-size:.68rem; }.cart-drawer-secure svg { width:12px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1.2; }
.cart-drawer-payment-methods { display:flex;justify-content:center;margin-top:10px;padding-top:10px;border-top:1px solid #ededeb; }
.cart-drawer-payment-methods .payment-methods { justify-content:center;gap:6px;margin-top:0; }
.cart-drawer-payment-methods .payment-methods svg { width:34px;height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12)); }

@media (max-width:620px) {
  .cart-drawer-panel { width:100%; }
  .cart-drawer-header { min-height:78px;margin:0 18px; }
  .cart-drawer-header h2 { font-size:1.55rem; }.cart-drawer-header h2 span { font-size:.9rem; }
  .cart-drawer-close { width:40px;height:40px; }.cart-drawer-close svg { width:27px;height:27px; }
  .cart-drawer-body { padding:12px 18px 8px; }
  .cart-drawer-item { grid-template-columns:90px minmax(0,1fr) 26px;gap:12px;padding:16px 0; }
  .cart-drawer-image-link,.cart-drawer-item > img,.cart-drawer-image-placeholder { width:90px;height:98px; }
  .cart-drawer-item h3 { font-size:.82rem;line-height:1.35; }
  .cart-drawer-item-bottom { align-items:flex-start;flex-direction:column;gap:9px;padding-top:10px; }
  .cart-drawer-quantity { height:36px;grid-template-columns:34px 30px 34px; }
  .cart-drawer-price { position:absolute;right:0;bottom:18px; }
  .cart-drawer-price strong { font-size:.88rem; }
  .cart-drawer-promo { margin:0 18px; }
  .cart-drawer-footer { padding:17px 18px 18px; }
  .cart-drawer-footer > p { margin-bottom:13px; }
  .cart-drawer-checkout,.cart-drawer-view-cart { min-height:50px;font-size:.82rem; }
}

/* --- Cart line items (CartView.tsx) --- */
.cart-line {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding-block: 22px;
}
.cart-item {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
}
.cart-item-image {
  width: 150px;
  height: 150px;
  object-fit: contain;
  background: var(--color-paper-warm);
  flex-shrink: 0;
}
.cart-item-image-link {
  display: block;
  flex-shrink: 0;
  cursor: pointer;
}
.cart-item-image-link:hover .cart-item-image,
.cart-item-image-link:focus-visible .cart-item-image {
  border-color: var(--color-ink);
}
.cart-item-name-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--color-mute);
  padding-bottom: 1px;
  transition: color 150ms ease, border-color 150ms ease;
}
.cart-item-name-link:hover,
.cart-item-name-link:focus-visible {
  color: var(--color-accent);
  outline: none;
  border-bottom-color: var(--color-accent);
}
.cart-item-info {
  flex: 1;
  min-width: 0;
}
.cart-item-name { max-width: 650px; font-family: var(--font-body); font-size: .9rem; line-height: 1.45; letter-spacing: -.01em; }

/* --- Description lines & modifiers --- */
.cart-item-option {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-ink-soft, var(--color-mute));
  margin: 0.125rem 0;
}
.cart-item-modifiers {
  margin-top: 0.25rem;
}

/* --- Quantity stepper --- */
.cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  width: fit-content;
}
.qty-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1;
}
.qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.qty-value {
  font-family: var(--font-body);
  font-size: 0.875rem;
  min-width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Unavailable state --- */
.cart-item-unavailable {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-error, #c0392b);
}

/* --- Price + remove --- */
.cart-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}
.cart-item-prices {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.cart-item-full-price {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-ink-soft, var(--color-mute));
  text-decoration: line-through;
}
.cart-item-unit-price {
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
}
.cart-item-line-total {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-ink-soft, var(--color-mute));
  margin: 0;
}
.cart-item-remove {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-mute);
  cursor: pointer;
  text-decoration: underline;
}

/* --- Cart summary: discount + total rows ---
   Subtotal uses the designer's .cart-subtotal contract class in global.css.
   These rows appear only when priceSummary exposes a discount or a total
   that differs from subtotal (see CartView.tsx extractSummary). */
.cart-discount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  margin-top: var(--spacing-sm);
}
.cart-discount-name {
  font-size: 0.75rem;
  color: var(--color-ink-soft, var(--color-mute));
}
.cart-discount-amount {
  white-space: nowrap;
}
.cart-total {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-sm);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* Applied-discounts row — name-only (no amount) for cases where the API
   reports a promo NAME via appliedDiscounts[].discountName but no cart-level
   amount in priceSummary.discount (common for line-item automatic discounts
   — the savings already show inline via fullPrice/price strikethrough). */
.cart-applied-discounts {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  margin-top: var(--spacing-sm);
}
.cart-applied-discounts-name {
  text-align: right;
  color: var(--color-ink-soft, var(--color-mute));
  font-style: italic;
}

@media (max-width: 620px) {
  .cart-line { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; }
  .cart-item-image { width: 110px; height: 110px; grid-row: 1 / span 2; }
  .cart-item-actions { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px 12px; }
  .cart-item-remove { padding: 0; }
  .cart-summary { padding: 22px 18px; }
}