/**
 * File: assets/css/frontend/cart.css
 * Purpose: Styles the premium responsive cart through shared Theme and Engine DNA surfaces, controls and typography.
 * Scope: Cart route only; product cards and blog cards retain their separate approved elevation contracts.
 * Related PHP: src/Cart/Frontend/CartRenderer.php, src/Cart/Frontend/CartLineRenderer.php, src/Cart/Frontend/CartSummaryRenderer.php
 * Related JS: assets/js/frontend/cart.js
 * Package: HyperDAF Engine
 */

.hdf-engine-cart-route .hdf-breadcrumbs-wrap {
  display: none;
}

.hdf-cart-page {
  min-height: 60vh;
  background: var(--hdf-engine-cart-page-surface, var(--hdf-engine-public-page-canvas));
  color: var(--hdf-engine-color-text);
  font-family: var(--hdf-engine-font-family);
}

.hdf-cart-page,
.hdf-cart-page * {
  box-sizing: border-box;
}

.hdf-cart-page form {
  margin: 0;
}

.hdf-cart-intro {
  border-block: var(--hdf-engine-border-width-default) solid var(--hdf-component-page-intro-border, var(--hdf-engine-color-border));
  background: var(--hdf-engine-cart-hero-surface, var(--hdf-component-page-intro-background, var(--hdf-engine-color-surface-muted)));
}

.hdf-cart-intro__inner,
.hdf-cart-page__inner {
  width: min(var(--hdf-engine-cart-width), 100%);
  margin-inline: auto;
}

.hdf-cart-intro__inner {
  box-sizing: border-box;
  padding-block-start: var(--hdf-engine-cart-breadcrumb-top-gap, var(--hdf-engine-space-4));
  padding-block-end: var(--hdf-engine-cart-intro-padding);
  padding-inline: var(--hdf-engine-cart-body-padding-inline, var(--hdf-engine-cart-hero-padding-inline, var(--hdf-engine-layout-gutter-desktop)));
}

.hdf-cart-breadcrumbs { margin-bottom: var(--hdf-engine-space-4); }

.hdf-cart-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--hdf-engine-space-7);
}

.hdf-cart-intro__copy {
  max-width: var(--hdf-engine-layout-content);
}

.hdf-cart-items__heading p,
.hdf-cart-summary__heading p {
  margin: 0 0 var(--hdf-engine-space-1);
  color: var(--hdf-engine-color-primary-strong);
  font-size: var(--hdf-engine-font-size-xs);
  font-weight: var(--hdf-engine-font-weight-bold);
  letter-spacing: var(--hdf-engine-letter-spacing-wide);
  line-height: var(--hdf-engine-line-height-tight);
  text-transform: uppercase;
}

.hdf-cart-intro h1 {
  margin: 0;
  color: var(--hdf-engine-color-text-strong);
  font-family: var(--hdf-engine-font-family-heading);
  font-size: clamp(var(--hdf-engine-font-size-2xl), 3vw, var(--hdf-engine-font-size-4xl));
  font-weight: var(--hdf-engine-font-weight-bold);
  letter-spacing: var(--hdf-engine-letter-spacing-tight);
  line-height: var(--hdf-engine-line-height-tight);
}

.hdf-cart-intro__copy > p:last-child {
  margin: var(--hdf-engine-space-2) 0 0;
  color: var(--hdf-engine-color-text-tertiary);
  font-size: var(--hdf-engine-font-size-sm);
}

.hdf-cart-progress {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hdf-cart-progress li {
  position: relative;
  display: grid;
  min-width: 6.75rem;
  grid-template-columns: var(--hdf-engine-cart-progress-size) auto;
  align-items: center;
  gap: var(--hdf-engine-space-2);
  color: var(--hdf-engine-color-text-muted);
  font-size: var(--hdf-engine-font-size-xs);
  font-weight: var(--hdf-engine-font-weight-semibold);
}

.hdf-cart-progress li:not(:last-child) {
  margin-inline-end: var(--hdf-engine-space-5);
  padding-inline-end: var(--hdf-engine-space-5);
}

.hdf-cart-progress li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--hdf-engine-space-5);
  height: var(--hdf-engine-border-width-default);
  background: var(--hdf-engine-color-border);
  content: "";
}

.hdf-cart-progress li > span {
  display: inline-grid;
  width: var(--hdf-engine-cart-progress-size);
  height: var(--hdf-engine-cart-progress-size);
  place-items: center;
  border: var(--hdf-engine-border-width-default) solid var(--hdf-engine-color-border);
  border-radius: var(--hdf-engine-radius-round);
  background: var(--hdf-engine-color-surface);
  color: var(--hdf-engine-color-text-muted);
}

.hdf-cart-progress li.is-current {
  color: var(--hdf-engine-color-primary-strong);
}

.hdf-cart-progress li.is-current > span {
  border-color: var(--hdf-engine-color-primary-strong);
  background: var(--hdf-engine-color-primary-strong);
  color: var(--hdf-engine-color-on-primary-strong);
}

.hdf-cart-page__body {
  background: var(--hdf-engine-cart-page-surface, var(--hdf-engine-public-page-canvas));
}

.hdf-cart-page__inner {
  box-sizing: border-box;
  padding-block: var(--hdf-engine-cart-body-padding-top) var(--hdf-engine-cart-body-padding-bottom);
  padding-inline: var(--hdf-engine-cart-body-padding-inline, var(--hdf-engine-cart-hero-padding-inline, var(--hdf-engine-layout-gutter-desktop)));
}

/* D9 (2026-10-22 device audit): with an empty cart, the full mobile gutter
 * plus the empty panel's own padding squeezed the message column to 292px
 * (74.9%) on a 390px phone. For the empty state only, narrow the page
 * gutter on phones; a cart with items keeps the standard gutter. */
@media (max-width: 47.999rem) {
  .hdf-cart-page:has(.hdf-cart-empty) .hdf-cart-page__inner {
    padding-inline: var(--hdf-engine-space-2);
  }
}

.hdf-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17.5rem, min(var(--hdf-engine-cart-sidebar-width), 28vw));
  align-items: start;
  gap: var(--hdf-engine-cart-column-gap);
}

.hdf-cart-items,
.hdf-cart-summary,
.hdf-cart-empty {
  border: var(--hdf-engine-border-width-default) solid var(--hdf-engine-color-border);
  border-radius: var(--hdf-engine-cart-panel-radius);
  background: var(--hdf-engine-cart-panel-surface, var(--hdf-engine-color-surface-raised));
}

.hdf-cart-items {
  min-width: 0;
  overflow: hidden;
}

.hdf-cart-items__heading,
.hdf-cart-summary__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hdf-engine-space-4);
}

.hdf-cart-items__heading {
  padding: var(--hdf-engine-space-4) var(--hdf-engine-cart-panel-padding);
  border-bottom: var(--hdf-engine-border-width-default) solid var(--hdf-engine-color-border-subtle);
}

.hdf-cart-items__heading > div,
.hdf-cart-summary__heading > div {
  display: grid;
  gap: var(--hdf-engine-space-1);
}

.hdf-cart-items__heading p,
.hdf-cart-summary__heading p {
  margin: 0;
  color: var(--hdf-engine-color-primary-strong);
  font-size: var(--hdf-engine-font-size-xs);
  font-weight: var(--hdf-engine-font-weight-semibold);
  letter-spacing: var(--hdf-engine-letter-spacing-wide);
  line-height: var(--hdf-engine-line-height-tight);
  text-transform: uppercase;
}

.hdf-cart-items__heading h2,
.hdf-cart-summary__heading h2 {
  margin: 0;
  color: var(--hdf-engine-color-text-strong);
  font-family: var(--hdf-engine-font-family-heading);
  font-size: var(--hdf-engine-font-size-lg);
  font-weight: var(--hdf-engine-font-weight-bold);
  letter-spacing: var(--hdf-engine-letter-spacing-tight);
  line-height: var(--hdf-engine-line-height-tight);
}

.hdf-cart-items__heading > a {
  color: var(--hdf-engine-color-link);
  font-size: var(--hdf-engine-font-size-sm);
  font-weight: var(--hdf-engine-font-weight-semibold);
  text-decoration: none;
}

.hdf-cart-items__heading > a:hover,
.hdf-cart-items__heading > a:focus-visible {
  color: var(--hdf-engine-color-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hdf-cart-items__columns {
  display: grid;
  grid-template-columns: minmax(12rem, 2.35fr) minmax(20rem, 1.65fr) var(--hdf-engine-cart-quantity-height);
  align-items: center;
  gap: clamp(var(--hdf-engine-space-2), 1vw, var(--hdf-engine-space-4));
  padding: var(--hdf-engine-space-3) var(--hdf-engine-cart-panel-padding);
  border-bottom: var(--hdf-engine-border-width-default) solid var(--hdf-engine-color-border-subtle);
  background: var(--hdf-engine-cart-table-header-surface, var(--hdf-engine-color-surface-muted));
  color: var(--hdf-engine-color-text-muted);
  font-size: var(--hdf-engine-font-size-xs);
  font-weight: var(--hdf-engine-font-weight-semibold);
  letter-spacing: var(--hdf-engine-letter-spacing-wide);
  text-transform: uppercase;
}

.hdf-cart-items__commerce-columns,
.hdf-cart-line__commerce {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(5.5rem, 0.78fr) minmax(var(--hdf-engine-cart-quantity-width), 0.62fr) minmax(6.25rem, 0.85fr);
  align-items: center;
  gap: clamp(var(--hdf-engine-space-2), 1vw, var(--hdf-engine-space-4));
}

.hdf-cart-line {
  position: relative;
  display: grid;
  grid-template-columns: minmax(12rem, 2.35fr) minmax(20rem, 1.65fr) var(--hdf-engine-cart-quantity-height);
  align-items: center;
  gap: clamp(var(--hdf-engine-space-2), 1vw, var(--hdf-engine-space-4));
  padding: var(--hdf-engine-cart-row-padding, var(--hdf-engine-space-5)) var(--hdf-engine-cart-panel-padding);
  border-bottom: var(--hdf-engine-border-width-default) solid var(--hdf-engine-color-border-subtle);
}