.srt-catalog {
	padding-bottom: 0;
}

.srt-catalog-hero {
	position: relative;
	overflow: hidden;
	padding: 52px 0 40px;
}

/* Mesma cena da home: a arte sangra no fundo a direita, sem moldura. */
.srt-catalog-hero__scene {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(58%, 900px);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
}

.srt-catalog-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 230px;
	align-items: center;
	gap: 32px;
	min-height: 330px;
}

.srt-catalog-hero h1 {
	max-width: 690px;
	margin-bottom: 16px;
	text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}

.srt-catalog-hero h1 span {
	display: block;
	color: var(--srt-primary);
}

body.srt-modern .srt-catalog-hero__content > p {
	max-width: 620px;
	color: var(--srt-text-soft);
	font-size: 1.02rem;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.srt-catalog-hero__benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 26px;
}

.srt-catalog-hero__benefits span {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--srt-text-soft);
	font-size: 0.95rem;
}

.srt-catalog-hero__benefits span i {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(32, 176, 248, 0.24);
	border-radius: 999px;
	background: rgba(32, 176, 248, 0.08);
	color: var(--srt-primary);
	font-style: normal;
}

.srt-catalog-hero__benefits span i svg {
	width: 20px;
	height: 20px;
}

.srt-catalog-hero__note {
	position: relative;
	z-index: 1;
	justify-self: end;
	width: 230px;
	border: 1px solid rgba(32, 176, 248, 0.26);
	border-radius: var(--srt-radius-md);
	background: rgba(13, 17, 26, 0.82);
	box-shadow: var(--srt-shadow-soft);
	padding: 18px;
	backdrop-filter: blur(16px);
}

.srt-catalog-hero__note strong,
.srt-catalog-hero__note span {
	display: block;
	line-height: 1.35;
}

.srt-catalog-hero__note strong {
	margin-bottom: 8px;
	color: var(--srt-text);
	font-size: 1.02rem;
}

.srt-catalog-hero__note span {
	color: var(--srt-text-soft);
	font-size: 0.82rem;
}

.srt-catalog-shell {
	padding: 0 0 40px;
}

.srt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Controles -------------------------------------------------------------- */

.srt-catalog-controls {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 26px;
}

.srt-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body.srt-modern .srt-filter-chips button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--srt-border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--srt-text-muted);
	padding: 9px 14px;
	font-size: 0.82rem;
	line-height: 1;
	transition: border-color var(--srt-motion), color var(--srt-motion), background var(--srt-motion);
}

.srt-filter-chips button i {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
}

.srt-filter-chips button i svg {
	width: 16px;
	height: 16px;
}

.srt-filter-chips button b {
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	padding: 4px 7px;
	color: inherit;
}

.srt-filter-chips button:hover {
	color: var(--srt-text);
	border-color: rgba(32, 176, 248, 0.45);
}

.srt-filter-chips button.is-active {
	color: #02131f;
	border-color: transparent;
	background: linear-gradient(120deg, var(--srt-primary), var(--srt-primary-bright));
	font-weight: 600;
}

.srt-filter-chips button.is-active b {
	background: rgba(2, 19, 31, 0.18);
}

.srt-catalog-controls__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.srt-search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 260px;
	min-width: 0;
	border: 1px solid var(--srt-border);
	border-radius: var(--srt-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	padding: 0 14px;
	height: 44px;
}

.srt-search span {
	display: grid;
	place-items: center;
	color: var(--srt-text-muted);
}

.srt-search span svg {
	width: 17px;
	height: 17px;
}

body.srt-modern .srt-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--srt-text);
	font-size: 0.88rem;
	outline: none;
}

.srt-search input::placeholder {
	color: var(--srt-text-muted);
}

/* O "Ordenar:" saia preto no fundo escuro.
 *
 * O kit global do Elementor traz `.elementor-kit-5 label { color: #000 }`, e
 * essa regra e mais especifica que um `.srt-sort` sozinho. Como este e um
 * <label>, ele herdava o preto do kit. O prefixo body.srt-modern - a mesma
 * convencao ja usada logo abaixo, no select - devolve a cor do tema.
 *
 * O campo de busca e o seletor do card nao precisam do mesmo reparo: os dois
 * ja pintam os filhos por conta propria. */
.srt-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
}

body.srt-modern .srt-sort,
body.srt-modern .srt-sort span {
	color: var(--srt-text-muted);
}

body.srt-modern .srt-sort select {
	border: 1px solid var(--srt-border);
	border-radius: var(--srt-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	color: var(--srt-text);
	padding: 0 12px;
	height: 44px;
	font-size: 0.82rem;
}

/* Layout ----------------------------------------------------------------- */

.srt-catalog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start;
	gap: 28px;
}

.srt-catalog-main {
	min-width: 0;
}

body.srt-modern .srt-catalog-count {
	margin: 0 0 14px;
	color: var(--srt-text-muted);
	font-size: 0.8rem;
}

body.srt-modern .srt-catalog-empty {
	margin: 32px 0 0;
	border: 1px dashed var(--srt-border);
	border-radius: var(--srt-radius-md);
	padding: 28px;
	text-align: center;
	color: var(--srt-text-muted);
}

.srt-robot-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

/* Card ------------------------------------------------------------------- */

.srt-robot-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--srt-border);
	border-radius: var(--srt-radius-md);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
	padding: 9px;
	transition: border-color var(--srt-motion), transform var(--srt-motion), box-shadow var(--srt-motion);
}

.srt-robot-card:hover {
	transform: translateY(-2px);
	border-color: rgba(32, 176, 248, 0.42);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}

.srt-robot-card.is-selected {
	border-color: var(--srt-primary);
	box-shadow: 0 0 0 1px var(--srt-primary) inset, 0 14px 30px rgba(0, 0, 0, 0.42);
}

.srt-robot-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 10px;
	background: #041320;
	cursor: pointer;
}

/* A imagem inteira adiciona ao combo, entao ela reage ao passar o mouse. */
.srt-robot-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--srt-motion), filter var(--srt-motion);
}

.srt-robot-card__media:hover img {
	transform: scale(1.04);
	filter: brightness(1.08);
}

.srt-robot-card--capa .srt-robot-card__media img {
	object-position: center 24%;
}

.srt-robot-card__generated {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 50% 35%, rgba(32, 176, 248, 0.24), transparent 62%), #041320;
}

.srt-robot-card__generated span {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--srt-primary-bright);
	text-transform: uppercase;
}

.srt-robot-card__badge {
	position: absolute;
	top: 7px;
	left: 7px;
	z-index: 2;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--srt-primary), var(--srt-primary-bright));
	color: #02131f;
	padding: 4px 8px;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.srt-robot-card__pick {
	position: absolute;
	top: 7px;
	right: 7px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	cursor: pointer;
}

.srt-robot-card__pick input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.srt-robot-card__pick span {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 7px;
	background: rgba(0, 6, 12, 0.6);
	color: transparent;
	backdrop-filter: blur(4px);
	transition: background var(--srt-motion), border-color var(--srt-motion), color var(--srt-motion);
}

.srt-robot-card__pick span svg {
	width: 12px;
	height: 12px;
}

.srt-robot-card__pick input:focus-visible + span {
	outline: 2px solid var(--srt-primary);
	outline-offset: 3px;
}

.srt-robot-card.is-selected .srt-robot-card__pick span {
	border-color: transparent;
	background: linear-gradient(120deg, var(--srt-primary), var(--srt-primary-bright));
	color: #02131f;
}

.srt-robot-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 10px 4px 2px;
}

/* O titulo ocupa uma linha so. O catalogo ja entrega um rotulo curto; o
 * recorte aqui e a rede de seguranca para um nome novo mais comprido. */
body.srt-modern .srt-robot-card h2 {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.srt-modern .srt-robot-card p {
	margin: 0;
	color: var(--srt-text-muted);
	font-size: 0.8rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.srt-robot-card__price {
	margin-top: auto;
	padding-top: 6px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--srt-primary-bright);
}

.srt-robot-card__price .amount,
.srt-robot-card__price bdi,
.srt-robot-card__price ins {
	color: inherit;
	text-decoration: none;
}

/* Nota de moeda: o "i" ao lado do preco, so no ingles ------------------- */

.srt-robot-card__price {
	/* O balao se ancora nesta linha, nao no "i": assim ele nunca passa da
	   largura do card - e card que esta na tela nao tem como sair dela.
	   Ancorado no "i", o balao do primeiro card vazava pela esquerda. */
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;
}

.srt-nota-moeda {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: rgba(32, 176, 248, 0.16);
	color: var(--srt-primary-bright);
	cursor: help;
}

.srt-nota-moeda i {
	font-size: 0.66rem;
	font-weight: 800;
	font-style: italic;
	line-height: 1;
}

.srt-nota-moeda:focus-visible {
	outline: 2px solid var(--srt-primary-bright);
	outline-offset: 2px;
}

.srt-nota-moeda__balao {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	z-index: 5;
	width: max-content;
	max-width: 100%;
	border: 1px solid var(--srt-border);
	border-radius: var(--srt-radius-sm);
	background: #0b1620;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
	padding: 9px 11px;
	color: var(--srt-text-soft);
	font-size: 0.74rem;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--srt-motion), visibility var(--srt-motion);
}

/* Hover para quem tem mouse; foco para quem toca na tela ou usa teclado. */
.srt-nota-moeda:hover .srt-nota-moeda__balao,
.srt-nota-moeda:focus .srt-nota-moeda__balao,
.srt-nota-moeda:focus-within .srt-nota-moeda__balao {
	opacity: 1;
	visibility: visible;
}

.srt-robot-card__price del {
	margin-right: 6px;
	color: var(--srt-text-muted);
	font-size: 0.78rem;
	font-weight: 500;
}

.srt-robot-card__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-top: 8px;
}

body.srt-modern .srt-card-detail,
body.srt-modern .srt-card-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--srt-border);
	border-radius: 9px;
	padding: 8px 6px;
	font-size: 0.78rem;
	font-weight: 600;
	transition: border-color var(--srt-motion), background var(--srt-motion), color var(--srt-motion);
}

.srt-card-detail {
	background: transparent;
	color: var(--srt-text);
}

.srt-card-detail:hover {
	border-color: var(--srt-primary);
	color: var(--srt-primary-bright);
}

.srt-card-add {
	border-color: transparent;
	background: linear-gradient(120deg, var(--srt-primary), var(--srt-primary-bright));
	color: #02131f;
}

.srt-card-add__idle,
.srt-card-add__selected {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.srt-card-add i {
	display: grid;
	place-items: center;
}

.srt-card-add i svg {
	width: 12px;
	height: 12px;
}

.srt-card-add__selected {
	display: none;
}

.srt-robot-card.is-selected .srt-card-add {
	background: rgba(32, 176, 248, 0.14);
	border-color: var(--srt-primary);
	color: var(--srt-primary-bright);
}

.srt-robot-card.is-selected .srt-card-add__idle {
	display: none;
}

.srt-robot-card.is-selected .srt-card-add__selected {
	display: inline-flex;
}

.srt-robot-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	border-top: 1px solid var(--srt-border);
	margin-top: 9px;
	padding-top: 8px;
	color: var(--srt-text-muted);
	font-size: 0.68rem;
}

.srt-robot-card__foot span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.srt-robot-card__foot i {
	display: grid;
	place-items: center;
}

.srt-robot-card__foot i svg {
	width: 12px;
	height: 12px;
}

/* Paginacao -------------------------------------------------------------- */

.srt-catalog-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

.srt-catalog-pagination:empty {
	display: none;
}

body.srt-modern .srt-catalog-pagination button {
	min-width: 38px;
	height: 38px;
	border: 1px solid var(--srt-border);
	border-radius: var(--srt-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	color: var(--srt-text-muted);
	padding: 0 10px;
	font-size: 0.82rem;
	transition: border-color var(--srt-motion), color var(--srt-motion), background var(--srt-motion);
}

.srt-catalog-pagination button:hover:not(:disabled) {
	border-color: var(--srt-primary);
	color: var(--srt-text);
}

.srt-catalog-pagination button.is-active {
	border-color: transparent;
	background: linear-gradient(120deg, var(--srt-primary), var(--srt-primary-bright));
	color: #02131f;
	font-weight: 700;
}

.srt-catalog-pagination button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Coluna do combo -------------------------------------------------------- */

/* A coluna nao pode passar da altura da tela: se ela crescer junto com o
 * combo, "Tem duvida?" desce e a pagina inteira ganha rolagem. O unico
 * elemento que cede espaco e a lista de itens, que rola por dentro. */
.srt-combo {
	position: sticky;
	top: 96px;
	display: flex;
	min-width: 0;
	min-height: 0;
	max-height: calc(100vh - 112px);
}

.srt-combo__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	min-height: 0;
}

.srt-combo__card--cart {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.srt-combo__card {
	border: 1px solid var(--srt-border);
	border-radius: var(--srt-radius-md);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
	padding: 18px;
}

.srt-combo__head {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 14px;
}

/* Sem a caixa em volta, o icone precisa crescer para acompanhar as duas
 * linhas de texto ao lado. */
.srt-combo__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	color: var(--srt-primary-bright);
}

.srt-combo__icon svg {
	width: 28px;
	height: 28px;
}

.srt-combo__head strong {
	display: block;
	font-size: 1.05rem;
}

.srt-combo__head span {
	display: block;
	color: var(--srt-text-muted);
	font-size: 0.78rem;
}

body.srt-modern .srt-combo__empty {
	margin: 0 0 14px;
	color: var(--srt-text-muted);
	font-size: 0.8rem;
	line-height: 1.55;
}

.srt-combo__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.srt-combo__items::-webkit-scrollbar {
	width: 6px;
}

.srt-combo__items::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
}

.srt-combo-item {
	flex: 0 0 auto;
}

.srt-combo__items:not(:empty) {
	margin-bottom: 14px;
}

.srt-combo-item {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--srt-border);
	border-radius: var(--srt-radius-sm);
	background: rgba(255, 255, 255, 0.025);
	padding: 8px;
}

.srt-combo-item__thumb {
	width: 46px;
	height: 29px;
	border-radius: 6px;
	background-color: #041320;
	background-size: cover;
	background-position: center;
}

.srt-combo-item__text {
	min-width: 0;
}

.srt-combo-item__text strong {
	display: block;
	font-size: 0.78rem;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.srt-combo-item__text em {
	font-style: normal;
	font-size: 0.76rem;
	color: var(--srt-primary-bright);
}

body.srt-modern .srt-combo-item__remove {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	/* o tema pai da padding em todo button; sem zerar, o x sai do centro */
	padding: 0;
	line-height: 1;
	border: 1px solid var(--srt-border);
	border-radius: 8px;
	background: transparent;
	color: var(--srt-text-muted);
	transition: color var(--srt-motion), border-color var(--srt-motion);
}

.srt-combo-item__remove:hover {
	color: #ff8484;
	border-color: rgba(255, 132, 132, 0.6);
}

.srt-combo-item__remove svg {
	width: 12px;
	height: 12px;
}

.srt-combo__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-top: 1px solid var(--srt-border);
	padding-top: 12px;
	margin-bottom: 12px;
}

.srt-combo__total span {
	color: var(--srt-text-muted);
	font-size: 0.82rem;
}

.srt-combo__total strong {
	font-size: 1.35rem;
}

body.srt-modern .srt-combo__checkout {
	width: 100%;
	justify-content: center;
}

.srt-combo__checkout:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

body.srt-modern .srt-combo__secure {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	color: var(--srt-text-muted);
	font-size: 0.72rem;
	line-height: 1.5;
}

.srt-combo__secure i {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--srt-primary-bright);
}

.srt-combo__secure i svg {
	width: 14px;
	height: 14px;
}

body.srt-modern .srt-combo__why strong {
	display: block;
	margin-bottom: 10px;
	font-size: 0.95rem;
}

.srt-combo__why ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.srt-combo__why li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--srt-text-muted);
	font-size: 0.8rem;
	line-height: 1.45;
}

.srt-combo__why li i {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	color: var(--srt-primary-bright);
	margin-top: 1px;
}

.srt-combo__why li i svg {
	width: 15px;
	height: 15px;
}

/* Barra de compra (mobile) ----------------------------------------------- */

.srt-purchase-bar {
	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 900;
	transform: translateX(-50%);
	display: none;
	align-items: center;
	gap: 12px;
	width: min(560px, calc(100vw - 24px));
	border: 1px solid var(--srt-border);
	border-radius: 999px;
	background: rgba(1, 15, 28, 0.95);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
	padding: 10px 12px;
	backdrop-filter: blur(10px);
}

.srt-purchase-bar__cart {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(32, 176, 248, 0.16);
	color: var(--srt-primary-bright);
	font-weight: 700;
	font-size: 0.95rem;
}

.srt-purchase-bar__summary {
	flex: 1;
	min-width: 0;
}

body.srt-modern .srt-purchase-bar__summary strong {
	display: block;
	font-size: 0.85rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.srt-modern .srt-purchase-bar__summary span {
	color: var(--srt-text-muted);
	font-size: 0.78rem;
}

.srt-purchase-bar__checkout {
	white-space: nowrap;
}

/* Responsivo ------------------------------------------------------------- */

@media (max-width: 1180px) {
	.srt-catalog-layout {
		grid-template-columns: minmax(0, 1fr) 288px;
	}

	.srt-robot-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	/* Sem coluna lateral, o resumo do combo desce para depois da grade: quem
	 * abre a pagina precisa ver os produtos primeiro. O total continua a vista
	 * na barra fixa de compra. */
	.srt-catalog-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.srt-combo {
		position: static;
		display: block;
		max-height: none;
	}

	.srt-combo__card--cart {
		display: block;
	}

	.srt-combo__items {
		max-height: 320px;
	}

	.srt-combo__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.srt-combo__card:first-child {
		grid-column: 1 / -1;
	}

	.srt-purchase-bar:not([hidden]) {
		display: flex;
	}

	.srt-catalog-shell {
		padding-bottom: 96px;
	}

	/* No celular a barra de compra ocupa a faixa de baixo, que e onde moram o
	   balao de suporte e o selo de privacidade - o "Finalizar" ficava metade
	   escondido atras do balao. Com a barra a vista, os dois sobem. */
	body:has(.srt-purchase-bar:not([hidden])) .srt-support {
		bottom: 88px;
	}

	body:has(.srt-purchase-bar:not([hidden])) .srt-lgpd-fab {
		bottom: 92px;
	}
}

@media (max-width: 720px) {
	/* Os filtros passam a rolar na horizontal: empilhados, sete chips comiam
	 * quase uma tela inteira antes do primeiro produto. */
	.srt-filter-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0 -16px;
		padding: 2px 16px;
	}

	.srt-filter-chips::-webkit-scrollbar {
		display: none;
	}

	.srt-filter-chips button {
		flex: 0 0 auto;
	}

	.srt-robot-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.srt-robot-card__body {
		gap: 6px;
		padding: 12px;
	}

	body.srt-modern .srt-robot-card h2 {
		font-size: 0.88rem;
	}

	body.srt-modern .srt-robot-card p {
		-webkit-line-clamp: 3;
		font-size: 0.74rem;
	}

	.srt-robot-card__price {
		font-size: 1.05rem;
	}

	.srt-robot-card__foot {
		display: none;
	}

	.srt-robot-card__actions {
		grid-template-columns: 1fr;
	}

	.srt-combo__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Abaixo de 430px todo .srt-btn vira width:100%. Na barra de compra isso
	   dava um botao de 270px que empurrava o resumo para largura zero: o
	   "2 itens - Total R$ 136,00" saia por cima do proprio botao. Aqui o botao
	   volta a ter o tamanho do texto e os dois dividem a linha. */
	.srt-purchase-bar {
		gap: 10px;
		padding: 8px 10px;
	}

	.srt-purchase-bar__summary {
		flex: 1 1 auto;
		min-width: 0;
	}

	body.srt-modern .srt-purchase-bar__checkout {
		flex: 0 0 auto;
		width: auto;
		padding: 11px 16px;
	}
}

.srt-product-modal {
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: grid;
	place-items: center;
	padding: 42px;
}

.srt-product-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(1, 6, 12, 0.72);
	backdrop-filter: blur(12px);
}

.srt-product-modal__dialog {
	position: relative;
	width: min(100%, 1040px);
	max-height: min(92vh, 1120px);
	border: 1px solid rgba(32, 176, 248, 0.42);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(8, 20, 32, 0.98), rgba(3, 10, 18, 0.99));
	box-shadow: 0 30px 100px rgba(0, 0, 0, 0.64);
	overflow: auto;
	padding: 28px;
}

body.srt-modern .srt-product-modal__close {
	position: absolute;
	top: 16px;
	right: 18px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	color: var(--srt-text-muted);
	padding: 0;
	transition: color var(--srt-motion);
}

.srt-product-modal__close:hover {
	color: var(--srt-text);
}

.srt-product-modal__close svg {
	width: 17px;
	height: 17px;
}

.srt-product-modal__top {
	display: grid;
	grid-template-columns: 1.15fr 0.95fr;
	gap: 34px;
}

.srt-product-modal__image {
	position: relative;
	border: 1px solid rgba(32, 176, 248, 0.3);
	border-radius: var(--srt-radius-md);
	overflow: hidden;
}

.srt-product-modal__image {
	aspect-ratio: 16 / 10;
}

/* Play esmaecido sobre a capa: cobre a imagem inteira, entao um clique em
 * qualquer ponto dela ja inicia o video. */
body.srt-modern .srt-product-modal__cover-play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	border: 0;
	background: linear-gradient(180deg, rgba(4, 12, 20, 0.05), rgba(4, 12, 20, 0.35));
	padding: 0;
	transition: background var(--srt-motion);
}

.srt-product-modal__cover-play[hidden] {
	display: none;
}

.srt-product-modal__cover-play span {
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	border: 2.5px solid rgba(255, 255, 255, 0.72);
	border-radius: 999px;
	background: rgba(4, 12, 20, 0.34);
	color: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(3px);
	opacity: 0.72;
	transition: opacity var(--srt-motion), background var(--srt-motion), border-color var(--srt-motion), transform var(--srt-motion);
}

.srt-product-modal__cover-play span svg {
	width: 30px;
	height: 30px;
	margin-left: 4px;
}

.srt-product-modal__cover-play:hover {
	background: linear-gradient(180deg, rgba(4, 12, 20, 0.12), rgba(4, 12, 20, 0.48));
}

.srt-product-modal__cover-play:hover span,
.srt-product-modal__cover-play:focus-visible span {
	opacity: 1;
	transform: scale(1.06);
	border-color: transparent;
	background: var(--srt-primary);
	color: #02131f;
}

.srt-product-modal__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.srt-product-modal__image {
	position: relative;
}

.srt-product-modal__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.srt-product-modal__thumbs:empty,
.srt-product-modal__thumbs[hidden] {
	display: none;
}

.srt-product-modal__category {
	display: inline-flex;
	border-radius: 999px;
	background: rgba(255, 181, 71, 0.15);
	color: var(--srt-warning);
	font-size: 0.78rem;
	font-weight: 850;
	margin-bottom: 14px;
	padding: 6px 12px;
	text-transform: uppercase;
}

.srt-product-modal__summary h2 {
	margin-bottom: 8px;
	font-size: 2.45rem;
}

.srt-product-modal__rating {
	color: #ffc736;
	margin-bottom: 14px;
}

.srt-product-modal__rating span {
	color: var(--srt-text-soft);
}

.srt-product-modal__price {
	color: var(--srt-primary);
	font-size: 2.5rem;
	font-weight: 950;
	line-height: 1;
	margin-bottom: 18px;
}

.srt-product-modal__summary p {
	color: var(--srt-text-soft);
	font-size: 1.02rem;
}

/* Era uma grade de duas colunas: a primeira, de 130px, era o seletor de
   quantidade. Sem ele, o botao continuava preso naqueles 130px e o texto
   quebrava em duas linhas. */
.srt-product-modal__buy {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	align-items: center;
}



.srt-product-modal__summary small {
	display: block;
	color: var(--srt-text-muted);
	margin-top: 12px;
	text-align: center;
}

.srt-product-modal__tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid rgba(32, 176, 248, 0.18);
	border-radius: var(--srt-radius-md) var(--srt-radius-md) 0 0;
	margin-top: 28px;
	overflow: hidden;
}

.srt-product-modal__tabs button {
	min-height: 58px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: rgba(255, 255, 255, 0.02);
	color: var(--srt-text-soft);
	font-weight: 760;
}

.srt-product-modal__tabs button.is-active {
	border-bottom-color: var(--srt-primary);
	color: var(--srt-primary);
}

.srt-product-modal__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	border: 1px solid rgba(32, 176, 248, 0.18);
	border-top: 0;
	border-radius: 0 0 var(--srt-radius-md) var(--srt-radius-md);
	padding: 24px;
}

.srt-product-modal__content h3 {
	margin-bottom: 14px;
}

/* Cards de video: capa do YouTube com o play por cima; o iframe so e criado
 * no clique, entao nada do YouTube carrega antes disso. */
.srt-video-card {
	position: relative;
	display: grid;
	place-items: end start;
	overflow: hidden;
	min-height: 210px;
	border: 1px solid rgba(32, 176, 248, 0.18);
	border-radius: var(--srt-radius-md);
	background-color: #071320;
	background-position: center;
	background-size: cover;
	padding: 14px;
	cursor: pointer;
	transition: border-color var(--srt-motion), transform var(--srt-motion);
}

.srt-video-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 12, 20, 0.15), rgba(4, 12, 20, 0.82));
}

.srt-video-card:hover {
	border-color: var(--srt-primary);
}

.srt-video-card strong {
	position: relative;
	z-index: 1;
	font-size: 0.85rem;
	line-height: 1.3;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.srt-video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	background: rgba(4, 12, 20, 0.45);
	color: #fff;
	transform: translate(-50%, -50%);
	backdrop-filter: blur(3px);
	transition: background var(--srt-motion);
}

.srt-video-card__play svg {
	width: 22px;
	height: 22px;
	margin-left: 3px;
}

.srt-video-card:hover .srt-video-card__play {
	background: var(--srt-primary);
	border-color: transparent;
	color: #02131f;
}

.srt-video-card--thumb {
	min-height: 74px;
	padding: 8px;
}

.srt-video-card--thumb strong {
	font-size: 0.68rem;
	-webkit-line-clamp: 1;
}

.srt-video-card--thumb .srt-video-card__play {
	width: 30px;
	height: 30px;
	border-width: 1.6px;
}

.srt-video-card--thumb .srt-video-card__play svg {
	width: 12px;
	height: 12px;
}

/* A miniatura do video que esta no palco. Todas ficam na tira o tempo todo;
   esta marca e o que diz onde voce esta - sem ela, trocar de video parecia
   ter perdido o anterior. */
.srt-video-card--thumb.is-current {
	border-color: var(--srt-primary);
	box-shadow: 0 0 0 1px var(--srt-primary), 0 8px 22px rgba(32, 176, 248, 0.24);
}

.srt-video-card--thumb.is-current::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(32, 176, 248, 0.16);
	pointer-events: none;
}

.srt-video-card--thumb.is-current .srt-video-card__play {
	border-color: var(--srt-primary-bright);
	color: var(--srt-primary-bright);
}

.srt-video-card--stage {
	position: absolute;
	inset: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
}

.srt-video-card.is-playing {
	cursor: default;
}

.srt-video-card.is-playing::before,
.srt-video-card.is-playing .srt-video-card__play,
.srt-video-card.is-playing strong {
	display: none;
}

.srt-video-card iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Compra segura ---------------------------------------------------------- */

body.srt-modern .srt-product-modal__secure {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	color: var(--srt-text-soft);
	font-size: 0.82rem;
}

.srt-product-modal__secure i {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(40, 210, 140, 0.14);
	color: #28d28c;
}

.srt-product-modal__secure i svg {
	width: 15px;
	height: 15px;
}

/* Paineis das abas ------------------------------------------------------- */

.srt-product-modal__panel[hidden] {
	display: none;
}

/* Duvidas frequentes ----------------------------------------------------- */

.srt-faq {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.srt-faq__item {
	border: 1px solid var(--srt-border);
	border-radius: var(--srt-radius-sm);
	background: rgba(255, 255, 255, 0.025);
}

.srt-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 16px;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.srt-faq__item summary::-webkit-details-marker {
	display: none;
}

.srt-faq__item summary::after {
	content: "+";
	color: var(--srt-primary);
	font-size: 1.2rem;
	line-height: 1;
}

.srt-faq__item[open] summary::after {
	content: "−";
}

.srt-faq__item[open] summary {
	color: var(--srt-primary-bright);
}

body.srt-modern .srt-faq__item p {
	margin: 0;
	padding: 0 16px 14px;
	color: var(--srt-text-muted);
	font-size: 0.82rem;
	line-height: 1.6;
}

/* Aviso de risco --------------------------------------------------------- */

.srt-risk {
	margin-top: 14px;
}

body.srt-modern .srt-risk__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 1px solid rgba(255, 196, 104, 0.34);
	border-radius: var(--srt-radius-sm);
	background: rgba(255, 196, 104, 0.08);
	color: var(--srt-text);
	padding: 12px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: left;
}

.srt-risk__badge {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #ffc468;
	color: #2a1c05;
	font-size: 0.8rem;
	font-weight: 800;
	font-style: italic;
}

.srt-risk__chevron {
	margin-left: auto;
	display: grid;
	place-items: center;
	color: var(--srt-text-muted);
	transition: transform var(--srt-motion);
}

.srt-risk__chevron svg {
	width: 16px;
	height: 16px;
}

.srt-risk__toggle[aria-expanded="true"] .srt-risk__chevron {
	transform: rotate(180deg);
}

.srt-risk__text {
	border: 1px solid var(--srt-border);
	border-top: 0;
	border-radius: 0 0 var(--srt-radius-sm) var(--srt-radius-sm);
	padding: 14px 16px;
}

body.srt-modern .srt-risk__text p {
	margin: 0 0 10px;
	color: var(--srt-text-muted);
	font-size: 0.78rem;
	line-height: 1.6;
}

body.srt-modern .srt-risk__text p:last-child {
	margin-bottom: 0;
}

.srt-risk__text hr {
	border: 0;
	border-top: 1px solid var(--srt-border);
	margin: 14px 0;
}

@media (max-width: 900px) {
	.srt-catalog-hero__grid,
	.srt-product-modal__top,
	.srt-product-modal__content {
		grid-template-columns: 1fr;
	}

	.srt-catalog-hero__scene {
		width: 70%;
		opacity: 0.4;
	}

	.srt-catalog-hero__note {
		justify-self: start;
		width: 100%;
		max-width: 320px;
	}
}

@media (max-width: 620px) {
	.srt-product-modal__tabs {
		grid-template-columns: 1fr;
	}

	.srt-product-modal {
		padding: 0;
	}

	.srt-product-modal__dialog {
		width: 100%;
		max-height: 100vh;
		min-height: 100vh;
		border-radius: 0;
		padding: 22px;
	}
}

@media (max-width: 430px) {
	/* Card estreito: o selo saia por baixo da caixinha de marcar, e o texto
	   ficava cortado ("CUSTO-BENEFIC v"). Descendo o selo para o pe da imagem
	   os dois param de disputar o mesmo canto e o nome aparece inteiro. */
	.srt-robot-card__badge {
		top: auto;
		bottom: 7px;
		max-width: calc(100% - 14px);
		/* "CUSTO-BENEFICIO" nao cabe em 320px no corpo original e virava um
		   selo de duas linhas. */
		white-space: nowrap;
		font-size: 0.55rem;
		letter-spacing: 0.03em;
		padding: 4px 7px;
	}

	/* Alvo de toque do "remover" no combo: 26px e pouco para o dedo. */
	body.srt-modern .srt-combo-item__remove {
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 620px) {
	/* No celular o modal abre em tela cheia e o nome e o preco vinham no corpo
	   do desktop: 30px e 40px. Numa coluna de 330px isso come meia tela antes
	   de o texto comecar - o preco sozinho ocupava uma linha inteira. */
	body.srt-modern .srt-product-modal__summary h2,
	body.srt-modern .srt-product-modal h2 {
		font-size: 1.45rem;
		line-height: 1.2;
	}

	body.srt-modern .srt-product-modal__price {
		font-size: 1.65rem;
		margin-bottom: 14px;
	}

	body.srt-modern .srt-product-modal__summary p,
	body.srt-modern .srt-product-modal [data-srt-modal-description] {
		font-size: 0.92rem;
		line-height: 1.6;
	}
}