/* Sundial Samples: product-page blocks (sundial/samples-popular, sundial/samples-hardware). The same classes and rules
   as the approved product pages (website-options/site/assets/types/product.css, components/samples.css, d12
   product-pages.css), scoped to .ssm so the blocks look the same under any theme. Every colour token has the
   preview's value as a fallback; the Sundial theme's own tokens win when it is active. */

.ssm { font-family: var(--font, "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); font-size: 17px; line-height: 1.6; color: var(--ink, #1D1D1F); }
.ssm *, .ssm *::before, .ssm *::after, .ssm-zoom *, .ssm-zoom *::before, .ssm-zoom *::after { box-sizing: border-box; }
.ssm img { display: block; max-width: 100%; height: auto; }
.ssm h3, .ssm h4 { margin: 0; font-family: inherit; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: inherit; }
.ssm p { margin: 0; }
.ssm ul { margin: 0; padding: 0; list-style: none; }
.ssm .i, .ssm-zoom .i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ssm :focus-visible, .ssm-zoom :focus-visible { outline: 2px solid var(--iris, #0066CC); outline-offset: 3px; border-radius: 6px; }

/* ---- light levels side by side (rows line up through subgrid) ---- */
.ssm .pt3-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 20px; margin-top: 24px; }
.ssm .pt3-lvl { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 16px; padding: 20px; border-radius: var(--r, 16px); background: var(--white, #FFFFFF); border: 1px solid var(--line, #E5E5EA); }
.ssm .pt3-lvl__head { display: grid; gap: 8px; align-content: start; }
.ssm .pt3-lvl__h { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.ssm .pt3-lvl__head p { font-size: 15px; color: var(--ink-2, #424245); line-height: 1.5; max-width: 31em; }
.ssm .pt3-levels.sb-levels--one { grid-template-columns: minmax(0, 1fr); }
.ssm .pt3-levels.sb-levels--one .pt3-lvl { grid-row: auto; grid-template-rows: none; }
@media (min-width: 901px) {
  .ssm .pt3-levels.sb-levels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssm .pt3-levels.sb-levels--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- the light meter ---- */
.ssm .pp-meter { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3, #636366); }
.ssm .pp-meter__bars { display: inline-flex; gap: 3px; }
.ssm .pp-meter__bars span { width: 14px; height: 6px; border-radius: 3px; background: var(--line, #E5E5EA); }
.ssm .pp-meter__bars span.on { background: var(--sun, #F5A300); }
.ssm .pt-meter { gap: 10px; font-size: 15px; color: var(--ink-2, #424245); }
.ssm .pt-meter .pp-meter__bars span { width: 16px; height: 7px; }

/* ---- fabric tiles (square, tall or slat photos) ---- */
.ssm .pt-fabgrid { --cols: 6; --gap: 16px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.ssm .pt-fabgrid__item[hidden] { display: none; }
.ssm .pt-fab { display: grid; gap: 2px; width: 100%; margin: 0; padding: 0 0 4px; border: 0; background: none; font: inherit; text-align: left; color: var(--ink, #1D1D1F); text-decoration: none; cursor: pointer; border-radius: var(--r-s, 10px); }
.ssm .pt-fab__img { position: relative; display: block; aspect-ratio: var(--fab-ratio, 1 / 1); margin-bottom: 8px; border-radius: var(--r-s, 10px); overflow: hidden; background: var(--mist, #EDEDF0); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: box-shadow .15s; }
.ssm .pt-fab__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ssm .pt-fab:hover .pt-fab__img { box-shadow: 0 0 0 2px var(--white, #FFFFFF), 0 0 0 3px var(--line-strong, #86868B); }
.ssm .pt-fab__name, .ssm .pt-fab__col, .ssm .pt-fab__lvl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.ssm .pt-fab__name { font-size: 15px; font-weight: 600; }
.ssm .pt-fab__col { font-size: 15px; color: var(--ink-2, #424245); }
.ssm .pt-fab__lvl { font-size: 15px; color: var(--ink-3, #636366); }
.ssm .pt-fab__lvl.ssm-bo { color: #7A4F00; font-weight: 600; font-size: 13.5px; }
.ssm .pt-fabgrid--tall { --fab-ratio: 2 / 3; }
.ssm .pt3-levels .pt-fabgrid--tall { --fab-ratio: 4 / 5; }
.ssm .pt-fabgrid--slat { --fab-ratio: 4 / 1; }
.ssm .pt3-lvl__grid { --cols: 2; --gap: 12px; }
.ssm .pt3-lvl__grid.sb-cols-3 { --cols: 3; }
.ssm .sb-levels--one .pt3-lvl__grid { --cols: 6; }
.ssm .sb-levels--one .pt3-lvl__grid.sb-cols-4 { --cols: 4; }
.ssm .sb-levels--one .pt3-lvl__grid.pt-fabgrid--slat { --cols: 4; }
@media (min-width: 901px) {
  .ssm .sb-levels--2 .pt3-lvl__grid { --cols: 4; }
  .ssm .sb-levels--2 .pt3-lvl__grid.sb-cols-3 { --cols: 3; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  .ssm .pt3-levels:not(.sb-levels--one):not(.sb-levels--2) .pt3-lvl__grid.sb-cols-3 { --cols: 2; }
  .ssm .sb-levels--2 .pt3-lvl__grid, .ssm .sb-levels--2 .pt3-lvl__grid.sb-cols-3 { --cols: 3; }
  .ssm .pt3-lvl .pt-fab__name, .ssm .pt3-lvl .pt-fab__col { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
@media (max-width: 1024px) {
  .ssm .sb-levels--one .pt3-lvl__grid { --cols: 4; }
  .ssm .sb-levels--one .pt3-lvl__grid.pt-fabgrid--slat { --cols: 3; }
}
@media (max-width: 900px) {
  .ssm .pt3-levels { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .ssm .pt3-lvl { grid-row: auto; grid-template-rows: none; }
  .ssm .pt3-lvl__grid, .ssm .pt3-lvl__grid.sb-cols-3 { --cols: 4; }
}
@media (max-width: 720px) {
  .ssm .pt3-lvl { padding: 14px; }
  .ssm .pt3-lvl__grid { --cols: 2; }
  .ssm .pt3-lvl__grid.sb-cols-3 { --cols: 3; --gap: 10px; }
  .ssm .sb-levels--one .pt3-lvl__grid { --cols: 3; }
  .ssm .sb-levels--one .pt3-lvl__grid.sb-cols-4 { --cols: 2; }
  .ssm .sb-levels--one .pt3-lvl__grid.pt-fabgrid--slat { --cols: 2; }
}
@media (max-width: 420px) { .ssm .sb-levels--one .pt3-lvl__grid { --cols: 2; } }

/* placeholders while the photos load (the same box as a tile) */
.ssm .ssm-ph .pt-fab { cursor: default; }
.ssm .ssm-ph .pt-fab__img { box-shadow: none; }
.ssm .ssm-ph .pt-fab__name, .ssm .ssm-ph .pt-fab__col { width: 70%; border-radius: 4px; background: linear-gradient(var(--mist, #EDEDF0), var(--mist, #EDEDF0)) no-repeat 0 50% / 100% 60%; color: transparent; }
.ssm .ssm-ph .pt-fab__col { width: 50%; }

/* "See all N … samples" and "Show all N" */
.ssm .pt-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--iris-text, #0066CC); text-decoration: none; cursor: pointer; }
.ssm .pt-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ssm .pt-link .i { width: 18px; height: 18px; }
.ssm .ssm-seeall { margin: 12px 0 0; }
.ssm .ssm-more { justify-self: start; }
.ssm .ssm-note, .ssm-zoom .ssm-note { font-size: 14.5px; line-height: 1.5; color: var(--ink-3, #636366); }

/* ---- hardware colours ---- */
.ssm.sb-hw { display: grid; gap: 18px; margin-top: 28px; padding: 22px 24px; border-radius: var(--r, 16px); background: var(--white, #FFFFFF); border: 1px solid var(--line, #E5E5EA); }
.ssm .sb-hw__head { display: grid; gap: 6px; }
.ssm .sb-hw__title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ssm .sb-hw__head p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2, #424245); max-width: 36em; }
.ssm .sb-hw__group { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line, #E5E5EA); }
.ssm .sb-hw__h { font-size: 16px; font-weight: 600; }
.ssm .sb-hw__list { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
.ssm .sb-hw__item { display: grid; justify-items: center; align-content: start; gap: 6px; width: 84px; text-align: center; }
.ssm .sb-hw__chip { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--paper, #F5F5F7); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.ssm .sb-hw__chip img { width: 100%; height: 100%; object-fit: cover; }
.ssm .sb-hw__chip--wrap { border-radius: 12px; background: var(--white, #FFFFFF); }
.ssm .sb-hw__chip--wrap img { object-fit: contain; padding: 4px; }
.ssm .sb-hw__name { max-width: 100%; font-size: 14px; line-height: 1.3; color: var(--ink-2, #424245); overflow-wrap: anywhere; hyphens: auto; }
.ssm .sb-hw__note { font-size: 14.5px; color: var(--ink-3, #636366); }
@media (max-width: 720px) {
  .ssm.sb-hw { padding: 16px; }
  .ssm .sb-hw__item { width: 72px; }
  .ssm .sb-hw__chip { width: 48px; height: 48px; }
}

/* ---- the larger view (native dialog) ---- */
.ssm-zoom { margin: auto; padding: 0; border: 0; max-width: none; max-height: none; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: 16px; background: var(--white, #FFFFFF); color: var(--ink, #1D1D1F);
  font-family: var(--font, "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); font-size: 16px; line-height: 1.5; }
.ssm-zoom[open] { display: flex; flex-direction: column; }
.ssm-zoom::backdrop { background: rgba(0, 0, 0, .5); }
.ssm-zoom__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line, #E5E5EA); }
.ssm-zoom__t { margin: 0; font-size: 17px; font-weight: 600; }
.ssm-zoom__body { overflow-y: auto; padding: 16px 20px 20px; overscroll-behavior: contain; }
/* the whole photo in its own shape (--ssm-r = width / height, set by the script), no taller than the window so it is
   seen in one piece; the small photo shows at once and the large one replaces it in the same box (nothing moves) */
.ssm-zoom__img { width: min(100%, calc((100dvh - 150px) * var(--ssm-r, 1))); aspect-ratio: var(--ssm-r, 1); margin: 0 auto; border-radius: 12px; overflow: hidden; background: var(--mist, #EDEDF0); }
.ssm-zoom__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ssm-facts { margin: 14px 0 12px; }
.ssm-facts > div { padding: 8px 0; border-top: 1px solid var(--line, #E5E5EA); }
.ssm-facts dt { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ink-3, #636366); }
.ssm-facts dd { margin: 0; font-size: 15px; }
.ssm-facts dd p { margin: 3px 0 0; font-size: 14px; color: var(--ink-2, #424245); }
.ssm-facts .ssm-bo dd { color: #7A4F00; font-weight: 600; }
.ssm-zoom__acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 12px; }
.ssm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
.ssm-btn .i { width: 18px; height: 18px; }
.ssm-btn--primary { background: var(--iris, #0066CC); color: var(--on-accent, #FFFFFF); }
.ssm-btn--primary:hover { background: var(--iris-h, #0055AA); color: var(--on-accent, #FFFFFF); }
.ssm-btn--ghost { background: var(--white, #FFFFFF); color: var(--ink, #1D1D1F); border-color: var(--line, #E5E5EA); }
.ssm-btn--ghost:hover { border-color: var(--line-strong, #86868B); }
@media (max-width: 720px) { .ssm-zoom__acts .ssm-btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: no-preference) { .ssm-zoom[open] { animation: ssm-fade .18s ease-out; } }
@keyframes ssm-fade { from { opacity: 0; } to { opacity: 1; } }