/* ===========================================================
   LAYOUT — grids, responsive rules
=========================================================== */
.section { padding: var(--sp-8) 0; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.section-head .eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-olive);
  display: block;
  margin-bottom: var(--sp-2);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sp-7);
  align-items: flex-start;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--sp-7);
  align-items: flex-start;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--sp-7);
  align-items: flex-start;
}

.account-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: flex-start;
}

.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.sticky-col { position: sticky; top: calc(var(--header-h) + 24px); }

/* --- Responsive --- */
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .cart-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .shop-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-5); }
  .pd-layout { gap: var(--sp-6); }
}

@media (max-width: 900px) {
  /* Nav show/hide lives in components.css — that file loads later,
     so the rules must sit there to win the cascade. */
  .shop-layout, .cart-layout, .checkout-layout, .account-layout, .pd-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .sticky-col { position: static; }
  .section { padding: var(--sp-7) 0; }
}

@media (max-width: 680px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .two-col { grid-template-columns: 1fr; }
  .section { padding: var(--sp-6) 0; }
  .container { padding: 0 var(--sp-4); }
  .section-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
}

@media (max-width: 360px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* NOTE: .footer-grid, .checkout-steps and the nav are restyled responsively
   in components.css — that file loads after this one, so their breakpoint
   rules have to live there to win the cascade. */