/* Placement pass (Material layout guidance): rows that fill, edges that line up, controls grouped
   by size class, and 48dp touch targets. Positions only; colours, type and components are unchanged.
   Size classes: compact up to 640px, medium 641-980px, expanded above. Loaded last. */

/* ---------- rows that fill: no lone card at the end of a grid ---------- */

/* Phones: two columns, so an odd last tile takes the whole row. */
@media (max-width: 640px) {
  .cat-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .metal-grid { display: flex; flex-wrap: wrap; }
  .metal-grid > * { flex: 1 1 calc(50% - 4px); }
}

/* Tablets: category tiles three to a row on a six-track grid; a short last row stretches to fill. */
@media (min-width: 641px) and (max-width: 1179px) {
  .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cat-grid > * { grid-column: span 2; }
  .cat-grid > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .cat-grid > :nth-last-child(2):nth-child(3n + 1), .cat-grid > :last-child:nth-child(3n + 2) { grid-column: span 3; }
}
/* Product grids run three columns up to 1180px: eight bestsellers would leave two on the last row, so show six. */
@media (min-width: 641px) and (max-width: 1180px) {
  #best-grid > :nth-child(n + 7) { display: none; }
}

@media (min-width: 641px) and (max-width: 980px) {
  /* Nine planets in two columns: Ketu spans the row instead of sitting alone. */
  .graha-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* Setting options (five metals) fill each row instead of leaving gaps. */
@media (min-width: 641px) {
  .metal-grid { display: flex; flex-wrap: wrap; }
  .metal-grid > * { flex: 1 1 168px; }
}

/* ---------- product page: one column on tablets, with matching edges ---------- */
@media (min-width: 641px) and (max-width: 980px) {
  .pdp > .gallery, .pdp > .pdp-info { width: 100%; max-width: 600px; margin-inline: auto; }
}

/* Narrow phones: the Add button takes the room left by the quantity stepper; a long price wraps inside it. */
@media (max-width: 400px) {
  .buy-row { grid-template-columns: auto minmax(0, 1fr); }
  .buy-row .btn { min-width: 0; padding-inline: 14px; white-space: normal; line-height: 1.15; text-align: center; }
}

/* Sticky buy bar lines up with the page gutter. */
.sticky-buy { padding-inline: var(--gutter); }

/* ---------- header on phones: the name gives way before the icons do ---------- */
@media (max-width: 640px) {
  .site-header .logo { flex: 0 1 auto; min-width: 0; }
  .site-header .logo-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .site-header .header-actions { flex: none; }
}

/* ---------- finder tabs fill the card width on phones (fixed tabs) ---------- */
@media (max-width: 640px) {
  .finder-card .tabs { gap: 2px; }
  .finder-card .tabs .tab { flex: 1 1 auto; padding-inline: 10px; }
}

/* ---------- touch targets: 48dp hit areas without moving anything ---------- */
@media (pointer: coarse) {
  .site-header .icon-btn::after { content: ''; position: absolute; inset: -4px -3px; border-radius: inherit; }
  .range-row input[type=range] { height: 44px; margin-block: 0; }
  #metal-help, .opt-title .link-btn { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
  .price-inputs .input { height: 44px; }
  /* No Esc key on a touch screen: give the search field the room. */
  .palette-input kbd { display: none; }
}

/* ---------- finder form: date and time side by side, then place, budget and button ---------- */
@media (min-width: 981px) and (max-width: 1180px) {
  .finder-form { grid-template-columns: 180px 170px minmax(0, 1fr); }
  .finder-form .field:has(#budget) { grid-column: 1 / 3; }
}
@media (min-width: 400px) and (max-width: 980px) {
  .finder-form { grid-template-columns: 1fr 1fr; }
  .finder-form .field-place, .finder-form .field:has(#budget), .finder-form #finder-go { grid-column: 1 / -1; }
}
@media (max-width: 1180px) { .finder-form { row-gap: 26px; } }