.container,
.page-shell,
.detail-shell,
.checkout-shell,
.single-checkout-shell {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.page-shell,
.detail-shell,
.checkout-shell,
.single-checkout-shell {
  padding-block: var(--space-xl);
}

.section {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.94), rgba(13, 19, 34, 0.94));
  box-shadow: var(--shadow-sm);
}

.page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.65fr);
  gap: var(--space-lg);
  align-items: start;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--space-lg);
  align-items: start;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md);
}

.col { grid-column: span 12; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }

@media (max-width: 1024px) {
  .detail-layout,
  .checkout-layout { grid-template-columns: 1fr; }
  .col-4,
  .col-6,
  .col-8 { grid-column: span 12; }
}

@media (max-width: 768px) {
  .container,
  .page-shell,
  .detail-shell,
  .checkout-shell,
  .single-checkout-shell { width: min(100% - 20px, 1180px); }
  .page-shell,
  .detail-shell,
  .checkout-shell,
  .single-checkout-shell { padding-block: var(--space-md); }
  .page-topbar { display: grid; align-items: start; }
  .section { padding: var(--space-md); }
  .card-grid { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}