/* Security Cameras page (page-security-cameras.php / page-camaras-de-seguridad.php).
   Loaded conditionally. The hero and the product-lineup grid are the only
   page-specific pieces — every other section reuses component CSS already
   shipped for the Home Security page (.sss-hs-detail, .sss-hs-system,
   .sss-hs-monitoring-grid, .sss-hs-protection*, .sss-hs-final-cta — see
   inc/enqueue-assets.php, which loads page-home-security.css here too)
   instead of duplicating that CSS under a second set of class names. The
   product-lineup feature bullets reuse .sss-config__features
   (components.css) for the same reason. */

.sss-cameras-hero {
	scroll-margin-top: 60px;
	background: var(--sss-cloud);
	border-bottom: var(--sss-border-width) solid var(--sss-line);
}

/* Indoor product explorer */
.sss-cameras-indoor {
	position: relative;
	padding-block: clamp(64px, 7vw, 96px);
	background: radial-gradient(circle at 22% 48%, rgba(23, 107, 255, 0.1), transparent 26%), linear-gradient(180deg, #f8fbff 0%, var(--sss-cloud) 48%, #f6f9fd 100%);
	border-block: 1px solid var(--sss-line);
	overflow: clip;
}

.sss-cameras-indoor__header { max-width: 760px; margin-inline: auto; text-align: center; }
.sss-cameras-indoor__eyebrow,
.sss-cameras-indoor__category { margin: 0 0 var(--sss-space-2); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sss-blue); }
.sss-cameras-indoor__header .sss-lede { max-width: 62ch; margin: var(--sss-space-3) auto 0; }
.sss-cameras-indoor__selector-wrap { display: grid; justify-items: center; gap: var(--sss-space-2); margin-top: var(--sss-space-5); }
.sss-cameras-indoor__selector-label,
.sss-cameras-indoor__features-label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sss-slate); }
.sss-cameras-indoor__selector { display: flex; max-width: 100%; gap: 6px; padding: 6px; background: rgba(255,255,255,.82); border: 1px solid var(--sss-line); border-radius: 999px; box-shadow: var(--sss-shadow-sm); overflow-x: auto; }
.sss-cameras-indoor__tab { min-height: 44px; padding: 8px 18px; font: inherit; font-weight: 600; color: var(--sss-slate); background: transparent; border: 0; border-radius: 999px; white-space: nowrap; cursor: pointer; transition: color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.sss-cameras-indoor__tab:hover,
.sss-cameras-indoor__tab:focus-visible { color: var(--sss-blue); }
.sss-cameras-indoor__tab:focus-visible,
.sss-cameras-indoor__view:focus-visible,
.sss-cameras-indoor__specs-toggle:focus-visible { outline: 3px solid rgba(23,107,255,.28); outline-offset: 3px; }
.sss-cameras-indoor__tab.is-active { color: var(--sss-white); background: var(--sss-blue); box-shadow: 0 6px 18px rgba(23,107,255,.24); }
.sss-cameras-indoor__products { margin-top: clamp(32px,4vw,52px); }
.sss-cameras-indoor__product { display: block; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.sss-cameras-indoor__product[hidden] { display: none; }
.sss-cameras-indoor__summary { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(32px,5vw,72px); align-items: start; }
.sss-cameras-indoor__visual,
.sss-cameras-indoor__content { min-width: 0; align-self: start; }
.sss-cameras-indoor__image-stage { position: relative; height: clamp(270px,27vw,330px); padding: clamp(18px,2.4vw,30px); box-sizing: border-box; background: linear-gradient(145deg,#eef5ff,#e5effd); border: 1px solid rgba(37,112,255,.24); border-radius: 20px; box-shadow: 0 12px 32px rgba(42,74,118,.08); overflow: hidden; }
.sss-cameras-indoor__image-surface { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: clamp(12px,1.5vw,18px); box-sizing: border-box; background: #fff; border-radius: 12px; overflow: hidden; }
.sss-cameras-indoor__image { position: static; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; transform: none; opacity: 1; transition: opacity .14s ease; }
.sss-cameras-indoor__image.is-changing { opacity: 0; }
.sss-cameras-indoor__image.is-entering,
.sss-cameras-indoor__content.is-entering { animation: sss-indoor-reveal .38s ease both; }
@keyframes sss-indoor-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.sss-cameras-indoor__views { position: static; display: flex; justify-content: center; gap: var(--sss-space-2); margin-top: clamp(16px,2vw,22px); }
.sss-cameras-indoor__view { width: 76px; height: 58px; padding: 5px; background: var(--sss-white); border: 1px solid var(--sss-line); border-radius: 12px; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.sss-cameras-indoor__view:hover { transform: translateY(-2px); }
.sss-cameras-indoor__view.is-active { border-color: var(--sss-blue); box-shadow: 0 0 0 2px rgba(23,107,255,.14); }
.sss-cameras-indoor__view img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.sss-cameras-indoor__content h3 { margin: 0; max-width: 18ch; font-size: clamp(1.75rem,3vw,2.55rem); line-height: 1.14; }
.sss-cameras-indoor__description { max-width: 58ch; margin: var(--sss-space-3) 0 var(--sss-space-4); font-size: 1.0625rem; line-height: 1.6; color: var(--sss-slate); }
.sss-cameras-indoor__features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; list-style: none; margin: var(--sss-space-3) 0 0; padding: 0; }
.sss-cameras-indoor__features li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 11px; background: rgba(255,255,255,.7); border: 1px solid rgba(128,153,184,.25); border-radius: 12px; box-shadow: 0 3px 12px rgba(42,74,118,.025); transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.sss-cameras-indoor__features li:hover { transform: translateY(-2px); border-color: rgba(23,107,255,.3); background: rgba(255,255,255,.92); }
.sss-cameras-indoor__feature-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; color: var(--sss-blue); background: rgba(255,255,255,.96); border: 1px solid rgba(23,107,255,.08); border-radius: 50%; }
.sss-cameras-indoor__feature-icon .sss-icon { width: 19px; height: 19px; }
.sss-cameras-indoor__features strong,
.sss-cameras-indoor__features small { display: block; line-height: 1.3; }
.sss-cameras-indoor__features strong { font-size: .9rem; color: var(--sss-ink); }
.sss-cameras-indoor__features small { margin-top: 2px; font-size: .75rem; color: var(--sss-slate); }
.sss-cameras-indoor__actions { display: grid; grid-template-columns: max-content minmax(0,1fr); align-items: start; gap: var(--sss-space-3); margin-top: var(--sss-space-4); }
.sss-cameras-indoor__specs-toggle { display: inline-flex; align-items: center; justify-content: center; justify-self: start; gap: 10px; min-height: 46px; padding: 10px 16px; font: inherit; font-weight: 600; color: var(--sss-blue); background: transparent; border: 1px solid rgba(23,107,255,.36); border-radius: var(--sss-radius-sm); cursor: pointer; }
.sss-cameras-indoor__specs-toggle:hover { background: rgba(23,107,255,.06); }
.sss-cameras-indoor__chevron { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.sss-cameras-indoor__specs-toggle[aria-expanded="true"] .sss-cameras-indoor__chevron { transform: translateY(2px) rotate(225deg); }
.sss-cameras-indoor__specs-panel { width: 100%; margin-top: clamp(24px,3vw,36px); overflow: hidden; }
.sss-cameras-indoor__specs-panel[hidden] { display: none; }
.sss-cameras-indoor__specs-panel.is-opening { animation: sss-indoor-specs-open .24s ease both; }
.sss-cameras-indoor__specs-panel.is-closing { animation: sss-indoor-specs-close .18s ease both; }
@keyframes sss-indoor-specs-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sss-indoor-specs-close { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-5px); } }
.sss-cameras-indoor__specs-panel dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; margin: 0; padding: var(--sss-space-3) 0; border-top: 1px solid rgba(128,153,184,.32); }
.sss-cameras-indoor__specs-panel dl > div { min-width: 0; padding: 8px var(--sss-space-3); border-right: 1px solid var(--sss-line); }
.sss-cameras-indoor__specs-panel dl > div:nth-child(4n),
.sss-cameras-indoor__specs-panel dl > div:last-child { border-right: 0; }
.sss-cameras-indoor__specs-panel dt { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sss-slate); }
.sss-cameras-indoor__specs-panel dd { margin: 4px 0 0; font-size: .875rem; line-height: 1.35; color: var(--sss-ink); }

@media (max-width: 1199px) {
	.sss-cameras-indoor__summary { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(28px,4vw,48px); }
	.sss-cameras-indoor__content h3 { font-size: clamp(1.65rem,2.5vw,2.15rem); }
}

@media (max-width: 1023px) {
	.sss-cameras-indoor__image-stage { height: 290px; }
	.sss-cameras-indoor__specs-panel dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.sss-cameras-indoor__specs-panel dl > div:nth-child(4n) { border-right: 1px solid var(--sss-line); }
	.sss-cameras-indoor__specs-panel dl > div:nth-child(2n) { border-right: 0; }
}

@media (max-width: 767px) {
	.sss-cameras-indoor__summary { grid-template-columns: 1fr; gap: var(--sss-space-5); }
	.sss-cameras-indoor__image-stage { height: 250px; padding: 16px; border-radius: 16px; }
	.sss-cameras-indoor__features { grid-template-columns: 1fr; }
	.sss-cameras-indoor__actions { grid-template-columns: 1fr; }
	.sss-cameras-indoor__actions .sss-btn,
	.sss-cameras-indoor__specs-toggle { width: 100%; }
	.sss-cameras-indoor__specs-panel dl { grid-template-columns: 1fr; }
	.sss-cameras-indoor__specs-panel dl > div { display: grid; grid-template-columns: minmax(92px,.7fr) minmax(0,1.3fr); gap: 12px; padding: 10px 0; border-right: 0 !important; border-bottom: 1px solid var(--sss-line); }
	.sss-cameras-indoor__specs-panel dl > div:last-child { border-bottom: 0; }
	.sss-cameras-indoor__specs-panel dd { margin: 0; }
	.sss-cameras-indoor__selector-wrap { justify-items: stretch; }
	.sss-cameras-indoor__selector-label { text-align: center; }
	.sss-cameras-indoor__selector { justify-content: flex-start; }
}

@media (max-width: 374px) {
	.sss-cameras-indoor__features li { padding: 10px; }
	.sss-cameras-indoor__view { width: 68px; }
	.sss-cameras-indoor__image-stage { height: 220px; padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.sss-cameras-indoor *, .sss-cameras-indoor *::before, .sss-cameras-indoor *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Widened per client direction — the 720px content-max cap read as
   compressed against the full section width. */
.sss-cameras-hero__inner {
	max-width: 1100px;
	margin-inline: auto;
	text-align: center;
	padding-block: 88px 80px;
}

.sss-cameras-hero__inner .sss-lede {
	margin-inline: auto;
	font-size: 1.1875rem;
	line-height: 1.6;
}

.sss-cameras-hero__supporting {
	margin: var(--sss-space-3) auto 0;
	font-size: 0.9375rem;
	color: var(--sss-slate);
}

.sss-cameras-hero__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--sss-space-5);
}

/* Product lineup — real named cameras, not another icon grid. Each card
   is a studio product shot (contain, not cropped) plus the full feature
   list for that model, closer to the Solutions page's solution cards
   than to a generic feature tile. Two columns, not three — each card
   carries a "Great for" tag row plus 6-7 feature bullets, too dense for
   a third column to stay readable. */
.sss-cameras-lineup__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sss-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sss-cameras-lineup__card {
	display: flex;
	flex-direction: column;
	background: var(--sss-white);
	border: 1px solid var(--sss-line);
	border-radius: var(--sss-radius-md);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sss-cameras-lineup__card:hover {
	border-color: var(--sss-blue);
	box-shadow: var(--sss-shadow-md);
	transform: translateY(-3px);
}

.sss-cameras-lineup__media {
	background: var(--sss-cloud);
	padding: var(--sss-space-4);
}

.sss-cameras-lineup__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	display: block;
}

.sss-cameras-lineup__body {
	display: flex;
	flex-direction: column;
	padding: var(--sss-space-4) var(--sss-space-4) var(--sss-space-5);
	border-top: 1px solid var(--sss-line);
}

.sss-cameras-lineup__name {
	font-size: 1.1875rem;
	margin: var(--sss-space-2) 0 var(--sss-space-2);
}

.sss-cameras-lineup__desc {
	color: var(--sss-slate);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.sss-cameras-lineup__tags-label {
	margin: var(--sss-space-4) 0 var(--sss-space-2);
	font-family: var(--sss-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--sss-slate);
}

.sss-cameras-lineup__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sss-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sss-cameras-lineup__tags li {
	padding: 3px 10px;
	font-size: 0.8125rem;
	color: var(--sss-slate);
	background: var(--sss-cloud);
	border: 1px solid var(--sss-line);
	border-radius: var(--sss-radius-sm);
}

.sss-cameras-lineup__body .sss-config__features {
	margin-top: var(--sss-space-4);
}

.sss-cameras-lineup__body .sss-config__features li {
	font-size: 0.9375rem;
}

.sss-cameras-lineup__note {
	margin-top: var(--sss-space-5);
	font-size: 0.8125rem;
	color: var(--sss-slate);
	max-width: 70ch;
}

/* Live/Recorded — two contrasting cards, each with its own photo, rather
   than one shared side image next to a two-column text comparison. */
.sss-cameras-awareness__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sss-space-5);
}

.sss-cameras-awareness__card {
	display: flex;
	flex-direction: column;
	background: var(--sss-white);
	border: 1px solid var(--sss-line);
	border-radius: var(--sss-radius-md);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sss-cameras-awareness__card:hover {
	border-color: var(--sss-blue);
	box-shadow: var(--sss-shadow-md);
	transform: translateY(-3px);
}

.sss-cameras-awareness__media {
	position: relative;
}

.sss-cameras-awareness__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

/* Client-supplied product photos (generic camera/DVR illustration, not a
   specific named model) are isolated shots on a transparent background —
   contain + a light backdrop instead of cover, so they don't get cropped
   into a corner. */
.sss-cameras-awareness__media--contain {
	background: var(--sss-cloud);
	padding: var(--sss-space-5);
}

.sss-cameras-awareness__media--contain img {
	aspect-ratio: 16 / 10;
	object-fit: contain;
}

.sss-cameras-awareness__tag {
	position: absolute;
	left: var(--sss-space-3);
	bottom: var(--sss-space-3);
	padding: 5px 12px;
	font-family: var(--sss-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sss-white);
	background: rgba(10, 20, 35, 0.72);
	border-radius: var(--sss-radius-sm);
}

.sss-cameras-awareness__body {
	padding: var(--sss-space-5);
	border-top: 1px solid var(--sss-line);
}

.sss-cameras-awareness__body h3 {
	margin-bottom: var(--sss-space-3);
}

/* Detection — heading/intro centered per request, and always-visible
   text-left/image-right cards replacing the shared .sss-hs-monitoring-grid
   hover-reveal component (kept as-is for the Home Security page, which
   still uses it — see file header). */
.sss-cameras-detection__intro {
	text-align: center;
	max-width: var(--sss-content-max);
	margin-inline: auto;
}

.sss-cameras-detection__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sss-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sss-cameras-detection__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 120px;
	align-items: center;
	gap: var(--sss-space-4);
	padding: var(--sss-space-4);
	background: var(--sss-white);
	border: 1px solid var(--sss-line);
	border-radius: var(--sss-radius-md);
}

/* No per-card photo — client direction. Cards read as a plain text row
   instead of the text/thumbnail split above. */
.sss-cameras-detection__grid--no-media .sss-cameras-detection__card {
	grid-template-columns: 1fr;
}

.sss-cameras-detection__text {
	display: flex;
	align-items: center;
	gap: var(--sss-space-3);
}

.sss-cameras-detection__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(23, 107, 255, 0.08);
	color: var(--sss-blue);
}

.sss-cameras-detection__icon .sss-icon {
	width: 20px;
	height: 20px;
}

.sss-cameras-detection__label {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--sss-ink);
}

@media (max-width: 1023px) {
	.sss-cameras-lineup__grid {
		grid-template-columns: 1fr;
	}

	.sss-cameras-awareness__grid {
		grid-template-columns: 1fr;
	}

	.sss-cameras-detection__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.sss-cameras-hero__inner {
		padding-block: 56px 56px;
	}

	.sss-cameras-lineup__grid {
		grid-template-columns: 1fr;
	}

	.sss-cameras-detection__card {
		grid-template-columns: 1fr;
	}
}

/* English camera catalog. Spanish continues to use the established explorer
   above; this component is intentionally scoped to its own class names. */
.sss-camera-category {
	scroll-margin-top: 112px;
	padding-block: clamp(64px, 7vw, 104px);
	border-top: 1px solid var(--sss-line);
	overflow: clip;
}

.sss-camera-category--tint {
	background: #f4f7fb;
}

.sss-camera-category--white {
	background: var(--sss-white);
}

.sss-camera-category__header {
	max-width: 760px;
	margin-bottom: clamp(24px, 3vw, 38px);
}

.sss-camera-category__header h2 {
	margin: 0;
}

.sss-camera-category__header .sss-lede {
	margin: var(--sss-space-3) 0 0;
}

.sss-camera-category__selector-wrap {
	display: grid;
	gap: 10px;
	margin-bottom: clamp(30px, 4vw, 48px);
}

.sss-camera-category__selector-label,
.sss-camera-product__features-label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sss-slate);
}

.sss-camera-category__selector {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 100%;
}

.sss-camera-category__tab {
	min-height: 42px;
	padding: 9px 14px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	color: var(--sss-slate);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--sss-line);
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.sss-camera-category__tab:hover {
	color: var(--sss-blue);
	border-color: rgba(23, 107, 255, 0.4);
}

.sss-camera-category__tab.is-active {
	color: var(--sss-white);
	background: var(--sss-blue);
	border-color: var(--sss-blue);
	box-shadow: 0 4px 14px rgba(23, 107, 255, 0.16);
}

.sss-camera-category__tab.is-active::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	background: currentColor;
	border-radius: 50%;
}

.sss-camera-category__tab:focus-visible,
.sss-camera-product__specs-toggle:focus-visible,
.sss-camera-product__thumbnail:focus-visible {
	outline: 3px solid rgba(23, 107, 255, 0.28);
	outline-offset: 3px;
}

.sss-camera-product[hidden] {
	display: none;
}

.sss-camera-product.is-active {
	animation: sss-camera-product-reveal 0.22s ease both;
}

@keyframes sss-camera-product-reveal {
	from { opacity: 0; }
	to { opacity: 1; }
}

.sss-camera-product__summary {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	grid-template-areas: "media information";
	align-items: start;
	gap: clamp(32px, 5vw, 72px);
}

.sss-camera-category--media-right .sss-camera-product__summary {
	grid-template-areas: "information media";
}

.sss-camera-product__media {
	grid-area: media;
	min-width: 0;
}

.sss-camera-product__information {
	grid-area: information;
	min-width: 0;
}

.sss-camera-product__frame {
	width: 100%;
	padding: clamp(20px, 3vw, 40px);
	box-sizing: border-box;
	background: linear-gradient(145deg, #eef5ff, #e5effd);
	border: 1px solid rgba(37, 112, 255, 0.24);
	border-radius: 28px;
	box-shadow: 0 12px 32px rgba(42, 74, 118, 0.08);
	overflow: hidden;
}

.sss-camera-product__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
}

.sss-camera-product__image {
	position: static;
	display: block;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	transform: none;
	opacity: 1;
	transition: opacity 0.16s ease;
}

.sss-camera-product__image.is-changing {
	opacity: 0;
}

.sss-camera-product__thumbnails {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.sss-camera-product__thumbnail {
	width: 74px;
	height: 56px;
	padding: 5px;
	background: #fff;
	border: 1px solid var(--sss-line);
	border-radius: 10px;
	cursor: pointer;
}

.sss-camera-product__thumbnail.is-active {
	border-color: var(--sss-blue);
	box-shadow: 0 0 0 2px rgba(23, 107, 255, 0.14);
}

.sss-camera-product__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sss-camera-product__eyebrow {
	margin: 0 0 var(--sss-space-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--sss-blue);
}

.sss-camera-product__information h3 {
	max-width: 21ch;
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.55rem);
	line-height: 1.14;
}

.sss-camera-product__description {
	max-width: 60ch;
	margin: var(--sss-space-3) 0 var(--sss-space-4);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--sss-slate);
}

.sss-camera-product__features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	list-style: none;
	margin: var(--sss-space-3) 0 0;
	padding: 0;
}

.sss-camera-product__features li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 10px 11px;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(128, 153, 184, 0.25);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(42, 74, 118, 0.025);
	transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.sss-camera-product__features li:hover {
	transform: translateY(-2px);
	border-color: rgba(23, 107, 255, 0.3);
	background: #fff;
}

.sss-camera-product__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	color: var(--sss-blue);
	background: #fff;
	border: 1px solid rgba(23, 107, 255, 0.08);
	border-radius: 50%;
}

.sss-camera-product__feature-icon .sss-icon {
	width: 19px;
	height: 19px;
}

.sss-camera-product__features strong,
.sss-camera-product__features small {
	display: block;
	line-height: 1.3;
}

.sss-camera-product__features strong {
	font-size: 0.9rem;
	color: var(--sss-ink);
}

.sss-camera-product__features small {
	margin-top: 2px;
	font-size: 0.75rem;
	color: var(--sss-slate);
}

.sss-camera-product__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sss-space-3);
	margin-top: var(--sss-space-4);
}

.sss-camera-product__specs-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 10px 16px;
	font: inherit;
	font-weight: 600;
	color: var(--sss-blue);
	background: transparent;
	border: 1px solid rgba(23, 107, 255, 0.36);
	border-radius: var(--sss-radius-sm);
	cursor: pointer;
}

.sss-camera-product__specs-toggle:hover {
	background: rgba(23, 107, 255, 0.06);
}

.sss-camera-product__chevron {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.sss-camera-product__specs-toggle[aria-expanded="true"] .sss-camera-product__chevron {
	transform: translateY(2px) rotate(225deg);
}

.sss-camera-product__specifications {
	width: 100%;
	margin-top: clamp(28px, 4vw, 44px);
	padding-top: clamp(22px, 3vw, 32px);
	border-top: 1px solid var(--sss-line);
}

.sss-camera-product__specifications[hidden] {
	display: none;
}

.sss-camera-product__specifications:not([hidden]) {
	animation: sss-camera-specifications-reveal 0.2s ease both;
}

@keyframes sss-camera-specifications-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.sss-camera-product__specifications dl {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--sss-line);
	border-left: 1px solid var(--sss-line);
}

.sss-camera-product__specifications dl > div {
	min-width: 0;
	padding: 13px 14px;
	background: rgba(255, 255, 255, 0.68);
	border-right: 1px solid var(--sss-line);
	border-bottom: 1px solid var(--sss-line);
}

.sss-camera-product__specifications dt {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sss-slate);
}

.sss-camera-product__specifications dd {
	margin: 5px 0 0;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sss-ink);
	overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
	.sss-camera-product__summary {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: 32px;
	}

	.sss-camera-product__features {
		grid-template-columns: 1fr;
	}

	.sss-camera-product__specifications dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sss-camera-category {
		scroll-margin-top: 88px;
		padding-block: clamp(48px, 14vw, 68px);
	}

	.sss-camera-category__selector-wrap {
		margin-bottom: 28px;
	}

	.sss-camera-category__tab {
		flex: 1 1 150px;
	}

	.sss-camera-product__summary,
	.sss-camera-category--media-right .sss-camera-product__summary {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "information";
		gap: 30px;
	}

	.sss-camera-product__frame {
		padding: clamp(16px, 5vw, 24px);
		border-radius: 20px;
	}

	.sss-camera-product__stage {
		border-radius: 12px;
	}

	.sss-camera-product__actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.sss-camera-product__actions .sss-btn,
	.sss-camera-product__specs-toggle {
		width: 100%;
	}

	.sss-camera-product__specifications dl {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sss-camera-category__tab,
	.sss-camera-product__image,
	.sss-camera-product__features li,
	.sss-camera-product__chevron {
		transition: none;
	}

	.sss-camera-product.is-active,
	.sss-camera-product__specifications:not([hidden]) {
		animation: none;
	}
}