/* ==========================================================================
   This Way Mart · layout.css
   Page containers, grids and section rhythm. No component styling here.
   ========================================================================== */

.container { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--s-7); }
.section--tight { padding-block: var(--s-5); }
.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--lg { gap: var(--s-6); }
.stack--sm { gap: var(--s-2); }
.row     { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.row--between { justify-content: space-between; }

/* Two-column product layout: media left, buy panel right; stacks on phones */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .split, .split--even { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* Product grid: 2 on phones, 3 on tablets, 4+ on desktop */
.grid-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (min-width: 640px)  { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); }
@media (max-width: 640px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* Sticky buy panel on wide screens */
@media (min-width: 901px) { .sticky-panel { position: sticky; top: 100px; } }

.footer { border-top: 1px solid var(--line); padding-block: var(--s-6); font-size: var(--fs-label); color: var(--text-muted); }
.footer__row { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

/* ---- Single-column reading sections (below the product hero) ---- */
.flow { display: flex; flex-direction: column; }
.flow__section { padding-block: var(--s-9); border-top: 1px solid var(--line); }
.flow__section:first-child { border-top: 0; }
.flow__inner { max-width: 720px; }
.flow__inner--wide { max-width: none; }
@media (max-width: 640px) { .flow__section { padding-block: var(--s-7); } }
.stack > .page-head { margin-bottom: 0; }