/* ===== MODERN LAYOUT SYSTEM ===== *//* Modern Container System */.container {  width: 100%;  max-width: 1214px;  margin: 0 auto;  padding: 0 var(--space-md);}/* Modern Grid System */.grid {  display: grid;  gap: var(--space-lg);}.grid--2 {  grid-template-columns: repeat(2, 1fr);}.grid--3 {  grid-template-columns: repeat(3, 1fr);}.grid--4 {  grid-template-columns: repeat(4, 1fr);}/* Flexbox Utilities */.flex {  display: flex;}.flex--between {  justify-content: space-between;}.flex--center {  align-items: center;}.flex--wrap {  flex-wrap: wrap;}/* Modern Header Layout */.header {  display: flex;  justify-content: space-between;  align-items: center;  padding: var(--space-md) 0;}/* Modern Navigation */.navbar {  display: flex;  align-items: center;  gap: var(--space-lg);}/* Main Content Area */.main-content {  display: grid;  grid-template-columns: 1fr 3fr 1fr;  gap: var(--space-lg);  padding: var(--space-lg) 0;}/* Sidebar Layout */.sidebar {  background: var(--light-bg);  padding: var(--space-lg);  border-radius: var(--radius-md);  box-shadow: var(--shadow-sm);}/* Footer Layout */.footer {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: var(--space-lg);  padding: var(--space-xl) 0;  margin-top: var(--space-2xl);}/* Responsive Layout */@media (max-width: 992px) {  .main-content {    grid-template-columns: 1fr;  }    .footer {    grid-template-columns: repeat(2, 1fr);  }}@media (max-width: 768px) {  .header {    flex-direction: column;    gap: var(--space-md);  }    .footer {    grid-template-columns: 1fr;  }    .grid--2,  .grid--3,  .grid--4 {    grid-template-columns: 1fr;  }}/* Commerce Specific Layout */.commerce-layout {  display: grid;  grid-template-columns: 2fr 1fr;  gap: var(--space-lg);}.cart-layout {  display: grid;  grid-template-columns: 3fr 1fr;  gap: var(--space-lg);}@media (max-width: 768px) {  .commerce-layout,  .cart-layout {    grid-template-columns: 1fr;  }}/* Form Layout */.form-layout {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--space-md);}.form-layout--full {  grid-template-columns: 1fr;}/* Card Layout */.card-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  gap: var(--space-lg);}/* Utility Layout Classes */.layout--stacked {  display: flex;  flex-direction: column;  gap: var(--space-md);}.layout--horizontal {  display: flex;  align-items: center;  gap: var(--space-md);}.layout--centered {  display: flex;  justify-content: center;  align-items: center;}/* Spacing Utilities */.space--top {  margin-top: var(--space-lg);}.space--bottom {  margin-bottom: var(--space-lg);}.space--vertical {  margin: var(--space-lg) 0;}/* Z-index Management */.z--dropdown {  z-index: var(--z-dropdown);}.z--modal {  z-index: var(--z-modal);}.z--tooltip {  z-index: var(--z-tooltip);}