/* =========================================================
   d12 "Owner's Mix" - one page per product (Round 2 item 11)
   Written by _src/product_pages.py. Uses the d12 tokens only, so every
   ?palette= option works. Append to styles.css (or keep the separate
   <link> the generator adds until the integrator merges it).
   ========================================================= */

/* hero: product cut-out slide (transparent PNG/WebP on a soft panel) */
.pgal__fig--cut { background: var(--mist); }
.pgal__fig--cut img { object-fit: contain; padding: 7% 9%; }
.pgal__thumbs .pp-thumb--cut { background: var(--mist); }
.pgal__thumbs .pp-thumb--cut img { object-fit: contain; padding: 8%; opacity: .85; }
.pgal__thumbs--5 { grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pgal--one .pgal__thumbs, .pgal--one .pgal__dots, .pgal--one .pgal__count { display: none; }
.pp-kicker { font-size: 15px; color: var(--on-d-3); }

/* what it is */
.pp-what { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.pp-what__media { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 5 / 4; background: var(--mist); display: grid; place-items: center; }
.pp-what__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-what__media--cut img { object-fit: contain; padding: 8% 10%; }
.pp-what__copy { display: grid; gap: 20px; align-content: start; }
.pp-what__copy p { color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 38em; }
.pp-rooms { display: grid; gap: 12px; margin-top: 4px; }
.pp-rooms__h { font-size: 16px; font-weight: 600; }
.pp-rooms ul { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-room { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--white); font-size: 15px; font-weight: 500; }
.pp-room .i { width: 18px; height: 18px; color: var(--deco); }

/* options */
.pp-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: -28px 0 40px; }
.pp-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.pp-jump a:hover { border-color: var(--line-strong); }
.pp-group + .pp-group { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
.pp-group__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: end; margin-bottom: 24px; }
.pp-group__head h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; }
.pp-group__head p { grid-column: 1; color: var(--ink-2); font-size: 16px; max-width: 44em; }
.pp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-card { display: flex; flex-direction: column; border-radius: var(--r); border: 1px solid var(--line); background: var(--white); overflow: hidden; color: inherit; text-decoration: none; }
a.pp-card:hover { border-color: var(--line-strong); }
.pp-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--mist); overflow: hidden; display: grid; place-items: center; }
.pp-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-card__media--cut img { object-fit: contain; padding: 10% 12%; }
.pp-card__media .i { width: 40px; height: 40px; color: var(--deco); stroke-width: 1.4; }
.pp-card__body { display: grid; gap: 6px; padding: 16px 18px 18px; align-content: start; }
.pp-card__body strong { font-size: 16.5px; line-height: 1.3; }
.pp-card__body p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.pp-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--deco); }
.pp-card__more .i { width: 16px; height: 16px; }
.pp-card--here { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pp-badge { display: inline-flex; align-items: center; width: max-content; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--mist); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.pp-fabs { font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.pp-meter { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.pp-meter__bars { display: inline-flex; gap: 3px; }
.pp-meter__bars span { width: 14px; height: 6px; border-radius: 3px; background: var(--line); }
.pp-meter__bars span.on { background: var(--sun); }
.pp-more { margin-top: 16px; }
.pp-more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.pp-more > summary::-webkit-details-marker { display: none; }
.pp-more > summary .i { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.pp-more[open] > summary .i { transform: rotate(180deg); }
.pp-more[open] > summary .pp-more__show, .pp-more:not([open]) > summary .pp-more__hide { display: none; }
.pp-more > .pp-grid { margin-top: 16px; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-tags li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--r-xs); background: var(--white); border: 1px solid var(--line); font-size: 14.5px; }
.pp-sw { width: 22px; height: 22px; border-radius: 4px; flex: none; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pp-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pp-swatch { display: grid; gap: 8px; font-size: 14.5px; font-weight: 500; }
.pp-swatch img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); background: var(--mist); }

/* size and fit */
.pp-size { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-size__item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 22px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); }
.pp-size__item > div { display: grid; gap: 4px; }
.pp-size__item .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--deco-soft); color: var(--deco); }
.pp-size__item strong { font-size: 17px; }
.pp-size__item p { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }

/* motor block reuses .opt-grid; this only trims the link row */
.pp-motor-foot { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 24px; }
.pp-motor-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-d); font-weight: 600; }

/* shutter lines side by side */
.pp-lines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pp-line { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--white); color: inherit; text-decoration: none; }
a.pp-line:hover { border-color: var(--line-strong); }
.pp-line strong { font-size: 17px; }
.pp-line dl { display: grid; gap: 6px; font-size: 14.5px; }
.pp-line dt { color: var(--ink-3); font-size: 13px; }
.pp-line dd { margin: 0 0 4px; color: var(--ink); line-height: 1.4; }
.pp-line__sum { display: none; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.pp-line--here { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

/* shapes page */
.pp-shape + .pp-shape { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }
.pp-shape { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.pp-shape__media { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); }
.pp-shape__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-shape__copy { display: grid; gap: 16px; align-content: start; }
.pp-shape__copy p { color: var(--ink-2); }

@media (max-width: 1140px) {
  .pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .pp-what { grid-template-columns: 1fr; gap: 36px; }
  .pp-shape { grid-template-columns: 1fr; gap: 24px; }
  .pp-size { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 900px) {
  .pp-grid, .pp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: compact rows (photo left, words right) so option lists stay short */
@media (max-width: 720px) {
  .pp-what__media { display: none; } /* the hero gallery already shows it on phones */
  .pp-jump { margin: -20px 0 28px; gap: 6px; }
  .pp-jump a { padding: 0 14px; font-size: 14.5px; }
  .pp-group + .pp-group { margin-top: 36px; padding-top: 32px; }
  .pp-group__head { grid-template-columns: 1fr; margin-bottom: 14px; }
  .pp-group__head h3 { font-size: 21px; }
  .pp-group__head p { font-size: 15.5px; }
  .pp-grid, .pp-grid--3 { grid-template-columns: 1fr; gap: 8px; }
  .pp-card { display: grid; grid-template-columns: 76px 1fr; align-items: center; min-height: 76px; border-radius: 14px; }
  .pp-card__media { aspect-ratio: auto; height: 100%; min-height: 76px; }
  .pp-card__media--cut img { padding: 8px; }
  .pp-card__media .i { width: 28px; height: 28px; }
  .pp-card__body { padding: 10px 14px; gap: 2px; }
  .pp-card__body strong { font-size: 16px; }
  .pp-card__body p { font-size: 14.5px; line-height: 1.45; } /* whole sentence: most cards are not links, so nothing may be cut off */
  .pp-card__body .pp-fabs { display: none; }
  .pp-card__more { font-size: 14.5px; margin-top: 2px; }
  .pp-more > .pp-grid { margin-top: 8px; }
  .pp-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .pp-swatch { font-size: 13px; }
  .pp-size__item { padding: 16px; }
  .pp-lines { grid-template-columns: 1fr; gap: 8px; }
  .pp-line { padding: 12px 16px; gap: 4px; min-height: 64px; }
  .pp-line dl { display: none; }
  .pp-line__sum { display: block; }
  .pp-shape + .pp-shape { margin-top: 40px; padding-top: 36px; }
  .pp-shape__media { position: relative; border-radius: 18px; }
}

/* ---- Round 2 QA fixes ---- */
/* "What it is" with no picture: the words take the width */
.pp-what--solo { grid-template-columns: minmax(0, 1fr); }
.pp-what--solo .pp-what__copy { max-width: 760px; }

/* two cards: side by side, picture left, so a row is never half empty */
@media (min-width: 721px) {
  .pp-grid.pp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-grid--2 .pp-card { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); }
  .pp-grid--2 .pp-card__media { aspect-ratio: auto; height: 100%; min-height: 220px; }
  .pp-grid--2 .pp-card__body { align-content: center; padding: 20px 24px; }
}
@media (max-width: 720px) { .pp-grid.pp-grid--2 { grid-template-columns: 1fr; } }

/* drawn light-level window (products without their own fabric photos) */
.pp-card__media--lt svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* fabric swatches are small scans: shown as a sample card at their own size, not stretched */
.pp-card__media--swatch img { position: relative; inset: auto; width: min(60%, 232px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 10px 22px rgba(0, 0, 0, .12); }

/* white and clear cut-outs (remotes, hubs, white frames): a deeper tile and a fine outline so they read */
.pp-card__media--light, .pp-what__media--light, .pgal__fig--light, .opt__media--light { background: color-mix(in srgb, var(--mist) 88%, var(--ink) 12%); }
.pp-card__media--light img, .pp-what__media--light img, .pgal__fig--light img, .opt__media--light img {
  filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .55)) drop-shadow(0 8px 14px rgba(0, 0, 0, .18)); }

@media (max-width: 720px) {
  .pp-card__media--swatch img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}