/* YAISU — desktop layer for catalog / product / selection views. Loaded after desktop.css. All rules inside @media (min-width:1024px). */
@media (min-width: 1024px) {
  /* Side padding comes from --edge (desktop.css): content is --wrap wide, never closer than --gut to the viewport edge.
     Sticky columns sit under the sticky header: top: calc(var(--hdr) + 24px).
     A few !important below override inline mobile styles in the view templates (desktop only). */

  /* ---------- page head (catalog, selection) ---------- */
  .pagehead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px; row-gap: 20px; padding: 40px var(--edge) 32px; }
  .pagehead > :first-child { grid-column: 1 / -1; }
  .pagehead > :nth-child(3) { justify-self: end; text-align: right; padding-bottom: 6px; }
  .pagehead h1 { font-size: clamp(72px, 6.5vw, 120px) !important; line-height: .86 !important; }
  .pagehead h1 br { display: none; }
  .pagehead .phmeta { flex-direction: column; align-items: flex-end; gap: 8px; }

  /* ---------- catalog: chips, grid (3 columns at 1024–1279, 4 from 1280, never 5), empty ---------- */
  .chips.hs { flex-wrap: wrap; gap: 8px; overflow: visible; scroll-snap-type: none; padding: 20px var(--edge); }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; padding: 40px var(--edge); }
  .empty { align-items: center; text-align: center; gap: 24px; padding: 120px var(--edge) 112px; }
  .empty p { max-width: 460px; }
  .empty .btn { width: 320px; }

  /* ---------- product card internals (catalog, related, home rails) — hover behaviour (second image, swatches) is C's, in css/catalog.css ---------- */
  .card { gap: 14px; }
  .card .tile { overflow: hidden; }
  .card-txt { gap: 6px; }
  .card-txt .k { font-size: 12px; }
  .card-txt .n { font-size: 16px; }
  .card-txt .p { font-size: 15px; }

  /* ---------- product: sticky gallery | config column (flex column, so a sticky add bar can sit at its bottom) ---------- */
  /* gallery column is as wide as the image box (capped by width and viewport height); the config column takes the rest */
  .pwrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(40px, 5%, 80px); align-items: stretch; padding: 40px var(--edge) 0; }
  .pgal { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; }
  .pgal .gallery { width: clamp(400px, min(100vh - var(--hdr) - 160px, 50vw - 40px), 640px); }
  /* Size run: the quantity grid is the working surface, so the gallery steps back (~40% instead of ~50%) and the grid gets the width */
  .pwrap:has(.mx-wrap) .pgal .gallery { width: clamp(360px, min(100vh - var(--hdr) - 160px, 40vw - 40px), 496px); }
  .pgal .gallery .mono { bottom: 16px; }
  .pgal .thumbs { padding: 12px 0 0; gap: 12px; }
  .pgal .thumb { width: 88px; height: 88px; }
  .pgal .thumb img { width: 74px; height: 74px; }
  .pcol { display: flex; flex-direction: column; min-width: 0; }
  .pcol .pblock { padding-left: 0; padding-right: 0; }
  .pcol > .pblock:first-child { padding-top: 0; }
  .pcol .pblock h1 { font-size: clamp(48px, 4.4vw, 72px); line-height: .9; }
  .pcol .priceline { margin-top: 6px; padding: 16px 0; }
  .pcol .priceline .disp { font-size: 40px; }

  /* related: heading in the first column, three cards in the rest */
  .prel { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin: 96px var(--edge) 0; padding: 40px 0 96px !important; border-top: 1px solid var(--line); }
  .prel > h2 { max-width: 4.8em; padding: 0 !important; font-size: clamp(44px, 4.4vw, 64px) !important; line-height: .9 !important; }
  .prel .rail.hs { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; padding: 0 !important; overflow: visible; scroll-snap-type: none; }

  /* ---------- selection (cart): list | summary. The request form is the task, so it flows in the document:
     no sticky panel with an inner scroller that hid step 2 and the Send button. Nothing here needs pinning —
     the running total already sits in the sticky header ("Cart · N pcs · ฿sum"). ---------- */
  .swrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 32%, 420px); column-gap: clamp(40px, 5%, 72px); align-items: start; padding: 0 var(--edge) 96px; }
  .slist { padding-top: 24px; }
  .ssum { margin-top: 24px; background: var(--panel); border: 1px solid var(--line); }
  .ssum .stot { padding: 24px 28px !important; }
  .ssum .stot .disp { font-size: 44px !important; }
  .ssum form { padding: 24px 28px 28px !important; }
  .ssum .field input, .ssum .field textarea { background: var(--bg); }

  /* ---------- hover (pointer devices only); button hovers live in app.css ---------- */
  @media (hover: hover) {
    .card:hover .card-txt .n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .chips .chip, .seg .chip { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
    .chips .chip:not([aria-pressed=true]):hover, .seg .chip:not([aria-pressed=true]):hover { border-color: var(--fg); }
    .swatch:not([aria-pressed=true]):hover { border-color: var(--ctl); }
    .thumb:not([aria-pressed=true]):hover { opacity: .9; }
    .pcol summary:hover { color: var(--fg2); }
  }
}

/* 4 columns from 1280 (282px cards at 1280; content stays ≤ --wrap, so cards grow, never a 5th column) */
@media (min-width: 1280px) {
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}