/* Prototype additions v0.2.0: catalogue chips, search results, WhatsApp preview, gallery/lightbox,
   responsive spec table, plus the reduced-motion and print rules. The mobile-first breakpoints
   of the base stylesheets (560 / 640 / 900 / 1024 / 1100 px) still apply. */

/* Catalogue category chips */
.chipbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center; }
.chipbar__sep { width: 1px; align-self: stretch; background: var(--border); margin-inline: 4px; }
button.chip { font-family: inherit; cursor: pointer; min-height: 40px; }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip[aria-pressed="true"] .chip__n, .chip[aria-current="true"] .chip__n { background: rgb(255 255 255 / 22%); color: #fff; }
.chip__n { font-size: 0.74rem; font-weight: 800; background: var(--surface); color: var(--text-muted); border-radius: 999px; padding: 1px 7px; }
.chip--sub { background: var(--surface-teal); border-color: transparent; }
.chip--sub[aria-pressed="true"] { background: var(--secondary); }

/* Search dialog results */
.search-results { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 4px; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius); text-decoration: none; color: var(--text); }
.search-results a:hover, .search-results a:focus-visible { background: var(--surface); }
.search-results img { border-radius: 8px; width: 64px; height: 48px; object-fit: cover; background: var(--surface); }
.search-results strong { display: block; color: var(--primary-dark); line-height: 1.3; }
.search-results small { color: var(--text-muted); }
.search-results__all a { justify-content: center; font-weight: 700; color: var(--primary); }
.search-results__none { padding: 8px; color: var(--text-muted); }

/* WhatsApp prototype dialog */
.wa-preview { margin: 0 0 20px; padding: 14px 16px; background: #e7f6ec; border-left: 4px solid var(--whatsapp); border-radius: 0 var(--radius) var(--radius) 0; color: #14301f; }

/* Gallery controls */
.gallery__main { position: relative; }
.gallery__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: rgb(255 255 255 / 92%); color: var(--primary-dark); display: grid; place-items: center; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; }
.gallery__nav:hover { background: #fff; box-shadow: var(--shadow-sm); }
.gallery__nav--prev { left: 10px; } .gallery__nav--next { right: 10px; }
.gallery__nav--prev .icon, .lightbox__nav--prev .icon { transform: rotate(90deg); }
.gallery__nav--next .icon, .lightbox__nav--next .icon { transform: rotate(-90deg); }
.gallery__count { position: absolute; right: 10px; bottom: 10px; background: rgb(8 47 79 / 78%); color: #fff; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.gallery__thumbs a { transition: border-color 0.2s; }

/* Lightbox */
.dialog--lightbox { width: min(1000px, calc(100% - 16px)); }
.lightbox { position: relative; background: #fff; border-radius: var(--radius-lg); padding: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.lightbox__stage { grid-column: 2; grid-row: 1; overflow: auto; max-height: calc(100dvh - 120px); border-radius: var(--radius); background: var(--surface); }
.lightbox__stage img { width: 100%; height: auto; max-height: calc(100dvh - 120px); object-fit: contain; cursor: zoom-in; transition: transform 0.25s var(--ease); }
.lightbox__stage.is-zoomed { cursor: zoom-out; }
.lightbox__stage.is-zoomed img { width: 190%; max-width: none; max-height: none; cursor: zoom-out; }
.lightbox__nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--primary-dark); display: grid; place-items: center; cursor: pointer; }
.lightbox__nav--prev { grid-column: 1; grid-row: 1; } .lightbox__nav--next { grid-column: 3; grid-row: 1; }
.lightbox__close { position: absolute; top: 6px; right: 6px; z-index: 2; background: #fff; box-shadow: var(--shadow-sm); }
.lightbox__zoom { grid-column: 2; justify-self: center; border: 1px solid var(--border); }
.lightbox__zoom[aria-pressed="true"] { background: var(--primary); color: #fff; }
@media (max-width: 559px) {
	.lightbox { grid-template-columns: 1fr 1fr; padding: 10px; }
	.lightbox__stage { grid-column: 1 / -1; grid-row: 1; }
	.lightbox__nav--prev { grid-column: 1; grid-row: 2; justify-self: end; } .lightbox__nav--next { grid-column: 2; grid-row: 2; justify-self: start; }
	.lightbox__zoom { grid-column: 1 / -1; grid-row: 3; }
}

/* Spec table: key/value cards on phones, never a page-wide scrollbar */
.table-scroll { max-width: 100%; }
@media (max-width: 559px) {
	.spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: 100%; min-width: 0; }
	.spec-table thead { position: absolute; left: -9999px; }
	.spec-table tr { border-bottom: 1px solid var(--border); padding: 10px 14px; }
	.spec-table tr:last-child { border-bottom: 0; }
	.spec-table th, .spec-table td { padding: 0; border: 0; background: none; }
	.spec-table tbody th { width: 100%; font-size: 0.78rem; color: var(--text-muted); font-weight: 700; }
}

/* Small-phone safety (320px) */
@media (max-width: 380px) {
	.hero__actions .btn, .cta__actions .btn { width: 100%; }
	.p-card__actions .btn { flex: 1 1 100%; }
	.chipbar { gap: 6px; }
}
.solutions--page .chips { margin: 12px 0 14px; }
.hero__browse .chip svg { color: var(--secondary); }

/* Carried over from theme v0.1.0 */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print { .site-header, .site-footer, .floating, .notice-bar { display: none; } }

/* The hidden attribute must always win over component display rules */
[hidden] { display: none !important; }