/**
 * OMEGA Sarajevo — Shop Pages
 * Listing, category, product detail, cart, checkout
 */

/* ════════════════════════════════════════════════════════════
   SHOP LAYOUT
   ════════════════════════════════════════════════════════════ */

.shop-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--space-6);
  align-items: start;
}

.shop-layout__sidebar {
  position: sticky;
  top: calc(var(--header-total) + var(--nav-height) + var(--space-4));
  max-height: calc(100vh - var(--header-total) - var(--nav-height) - var(--space-8));
  overflow-y: auto;
  padding: var(--space-5);
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.shop-layout__sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.shop-layout__sidebar-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.shop-layout__sidebar-clear {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: var(--transition-color);
}

.shop-layout__sidebar-clear:hover {
  color: var(--color-accent);
}

.shop-layout__main {
  min-width: 0;
}

.shop-layout--no-sidebar {
  grid-template-columns: 1fr;
}

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols-product), 1fr);
  gap: var(--product-grid-gap);
}

.product-grid--list {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.product-grid--list .product-card {
  flex-direction: row;
}

.product-grid--list .product-card__media {
  width: 8rem;
  flex-shrink: 0;
  aspect-ratio: 1;
}

.product-grid--list .product-card__body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

.product-grid--list .product-card__title {
  flex: 1;
  min-width: 12rem;
  -webkit-line-clamp: 1;
}

.product-grid--list .product-card__meta {
  margin-top: 0;
  padding-top: 0;
}

.product-grid--list .product-card__footer {
  border-top: none;
  background: transparent;
  padding: var(--space-3) var(--card-padding);
  margin-left: auto;
}

/* View Toggle */
.view-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-text-muted);
  background-color: var(--color-surface-0);
  border: none;
  transition: var(--transition-color), background-color var(--transition-fast);
}

.view-toggle__btn + .view-toggle__btn {
  border-left: 1px solid var(--color-border);
}

.view-toggle__btn:hover {
  color: var(--color-text-primary);
  background-color: var(--color-surface-1);
}

.view-toggle__btn.is-active {
  color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

.view-toggle__btn svg {
  width: 1rem;
  height: 1rem;
}

/* Active Filters Row */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.active-filters__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.active-filters__clear {
  font-size: var(--text-xs);
  color: var(--color-accent);
  margin-left: var(--space-2);
  transition: var(--transition-color);
}

.active-filters__clear:hover {
  color: var(--color-accent-hover);
}

/* Shop Hero (category landing) */
.shop-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
}

.shop-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shop-hero__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.shop-hero__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 36rem;
  line-height: var(--leading-relaxed);
}

.shop-hero__stats {
  display: flex;
  gap: var(--space-6);
}

.shop-hero__stat {
  text-align: center;
}

.shop-hero__stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  line-height: 1;
}

.shop-hero__stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.shop-hero__image {
  width: 8rem;
  height: 8rem;
  object-fit: contain;
  background-color: var(--color-surface-inset);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

/* Subcategory Grid */
.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols-category), 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.subcategory-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-normal);
}

.subcategory-chip:hover {
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-xs);
}

.subcategory-chip__icon {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex-shrink: 0;
}

.subcategory-chip__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.subcategory-chip__count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════════
   CATEGORY PAGE
   ════════════════════════════════════════════════════════════ */

.category-page__intro {
  padding-block: var(--space-6);
  background-color: var(--color-surface-0);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-6);
}

.category-page__intro-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.category-page__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.category-page__children {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.category-page__child-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: var(--transition-color), border-color var(--transition-fast);
}

.category-page__child-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent-border);
  background-color: var(--color-accent-subtle);
}

.category-page__seo {
  margin-top: var(--space-12);
  padding: var(--space-6);
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.category-page__seo-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}

.category-page__seo-content {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  columns: 2;
  column-gap: var(--space-8);
}

.category-page__seo-content p + p {
  margin-top: var(--space-3);
}

/* ════════════════════════════════════════════════════════════
   PRODUCT DETAIL (PDP)
   ════════════════════════════════════════════════════════════ */

.pdp {
  padding-block: var(--space-6);
}

.pdp__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.pdp__layout--wide-gallery {
  grid-template-columns: 1.1fr 0.9fr;
}

/* Gallery */
.pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: calc(var(--header-total) + var(--nav-height) + var(--space-4));
}

.pdp-gallery__main {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.pdp-gallery__main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-6);
  transition: opacity var(--transition-fast);
}

.pdp-gallery__zoom-btn {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-color), background-color var(--transition-fast);
}

.pdp-gallery__zoom-btn:hover {
  color: var(--color-text-primary);
  background-color: var(--color-surface-1);
}

.pdp-gallery__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.pdp-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}

.pdp-gallery__thumb {
  aspect-ratio: 1;
  padding: var(--space-2);
  background-color: var(--color-surface-0);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.pdp-gallery__thumb:hover {
  border-color: var(--color-border-strong);
}

.pdp-gallery__thumb.is-active {
  border-color: var(--color-accent);
}

.pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Product Info */
.pdp-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pdp-info__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}

.pdp-info__brand {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.pdp-info__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.pdp-info__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.pdp-info__sku {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pdp-info__rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.pdp-info__rating-stars {
  display: flex;
  gap: 2px;
  color: var(--color-warning);
}

.pdp-info__price-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.pdp-info__price-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.pdp-info__vat {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.pdp-info__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.pdp-info__actions .btn--primary {
  flex: 1;
  min-width: 12rem;
}

.pdp-info__secondary-actions {
  display: flex;
  gap: var(--space-2);
}

.pdp-info__delivery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-surface-muted);
  border-radius: var(--radius-lg);
}

.pdp-info__delivery-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.pdp-info__delivery-item svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.pdp-info__delivery-label {
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.pdp-info__delivery-value {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.pdp-info__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.pdp-info__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.pdp-info__trust-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-success);
}

/* PDP Tabs Section */
.pdp-details {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.pdp-details__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

.pdp-details__downloads {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pdp-download {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.pdp-download:hover {
  border-color: var(--color-accent-border);
  background-color: var(--color-accent-subtle);
}

.pdp-download__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent);
}

.pdp-download__info {
  flex: 1;
  min-width: 0;
}

.pdp-download__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.pdp-download__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Related Products */
.pdp-related {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

/* ════════════════════════════════════════════════════════════
   CART PAGE
   ════════════════════════════════════════════════════════════ */

.cart-page {
  padding-block: var(--space-8);
}

.cart-page__layout {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: var(--space-8);
  align-items: start;
}

.cart-table {
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.cart-table__header {
  display: grid;
  grid-template-columns: 2fr 1fr 8rem 6rem 2rem;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  background-color: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
}

.cart-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 8rem 6rem 2rem;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}

.cart-table__row:last-child {
  border-bottom: none;
}

.cart-table__product {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.cart-table__image {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  background-color: var(--color-surface-inset);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.cart-table__product-info {
  min-width: 0;
}

.cart-table__product-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.cart-table__product-name:hover {
  color: var(--color-accent);
}

.cart-table__product-sku {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.cart-table__unit-price {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.cart-table__line-total {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: right;
}

.cart-table__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  transition: var(--transition-color), background-color var(--transition-fast);
}

.cart-table__remove:hover {
  color: var(--color-error);
  background-color: var(--color-error-bg);
}

.cart-table__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface-1);
  border-top: 1px solid var(--color-border);
}

.cart-table__coupon {
  display: flex;
  gap: var(--space-2);
  max-width: 20rem;
}

.cart-table__coupon .form-control {
  flex: 1;
}

/* Cart Summary Sidebar */
.cart-summary {
  position: sticky;
  top: calc(var(--header-total) + var(--space-4));
  padding: var(--space-5);
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.cart-summary__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.cart-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.cart-summary__row--total {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.cart-summary__row-value {
  font-variant-numeric: tabular-nums;
}

.cart-summary__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-3);
}

.cart-summary__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.cart-summary__secure svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-success);
}

/* ════════════════════════════════════════════════════════════
   CHECKOUT (2-COLUMN)
   ════════════════════════════════════════════════════════════ */

.checkout-page {
  padding-block: var(--space-8);
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 24rem;
  gap: var(--space-8);
  align-items: start;
}

.checkout-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.checkout-section {
  padding: var(--space-6);
  background-color: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.checkout-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.checkout-section__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.checkout-section__step--done {
  background-color: var(--color-success);
}

.checkout-section__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.checkout-section__edit {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-accent);
  transition: var(--transition-color);
}

.checkout-section__edit:hover {
  color: var(--color-accent-hover);
}

.checkout-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.checkout-form-grid .form-group--full {
  grid-column: 1 / -1;
}

/* Shipping Options */
.shipping-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shipping-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.shipping-option:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-1);
}

.shipping-option.is-selected {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

.shipping-option__radio {
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.shipping-option__info {
  flex: 1;
  min-width: 0;
}

.shipping-option__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.shipping-option__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-0-5);
}

.shipping-option__price {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

/* Payment Methods */
.payment-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.payment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.payment-method:hover {
  border-color: var(--color-border-strong);
}

.payment-method.is-selected {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

.payment-method__icon {
  height: 1.5rem;
  opacity: 0.7;
}

.payment-method__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: center;
}

/* Checkout Order Summary */
.checkout-summary {
  position: sticky;
  top: calc(var(--header-total) + var(--space-4));
}

.checkout-summary__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 16rem;
  overflow-y: auto;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.checkout-summary__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.checkout-summary__thumb {
  position: relative;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.checkout-summary__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: var(--color-surface-inset);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

.checkout-summary__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
}

.checkout-summary__item-info {
  flex: 1;
  min-width: 0;
}

.checkout-summary__item-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.checkout-summary__item-price {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.checkout-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.checkout-progress__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.checkout-progress__step.is-active {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.checkout-progress__step.is-done {
  color: var(--color-success);
}

.checkout-progress__dot {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-surface-0);
}

.checkout-progress__step.is-active .checkout-progress__dot {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.checkout-progress__step.is-done .checkout-progress__dot {
  border-color: var(--color-success);
  background-color: var(--color-success);
  color: var(--color-text-inverse);
}

.checkout-progress__line {
  width: 3rem;
  height: 2px;
  background-color: var(--color-border);
}

.checkout-progress__line.is-done {
  background-color: var(--color-success);
}

/* Order Confirmation */
.order-confirm {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.order-confirm__icon {
  width: 4rem;
  height: 4rem;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  color: var(--color-success);
}

.order-confirm__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}

.order-confirm__order-id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.order-confirm__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.order-confirm__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}