/**
 * Tema Oriental Sushi.
 *
 * Fundo escuro, vermelho da marca e laranja de destaque. Tudo em px (o
 * WordPress e plugins mexem em rem). Fonte do sistema — sem webfont: a
 * página perde ~220 KB e o texto aparece antes de qualquer download.
 *
 * Os componentes do plugin (.mydv3-*) chegam com o próprio CSS; aqui só
 * ajustamos como eles se encaixam no tema.
 *
 * As medidas vieram dos dois mockups (desktop e celular), lidas pixel a
 * pixel. Onde o mockup e a usabilidade brigaram, ganhou a usabilidade — e o
 * porquê está anotado no lugar.
 */

:root {
	--os-bg: #0b0b0b;
	--os-bg-2: #141414;
	--os-surface: #1b1b1b;
	--os-light: #f6f3ee;
	--os-light-2: #ffffff;
	--os-text: #f4f4f4;
	--os-text-muted: #b9b9b9;
	--os-dark-text: #1d1d1f;
	--os-dark-muted: #5f6368;
	--os-red: #d62828;
	--os-red-dark: #a81f1f;
	/* Vermelho quente do traço da capa e do botão: no mockup ele é mais
	   aceso que o vermelho da marca, quase alaranjado. */
	--os-red-hot: #ec2a0c;
	--os-orange: #ff6a1f;
	--os-green: #22c55e;
	--os-border: rgba(255, 255, 255, .10);
	--os-radius: 14px;
	--os-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* No mockup o bloco da marca (logo + PALHOÇA) mede ~100px e é ele quem
	   define a altura da barra — não o menu. */
	--os-header-h: 100px;

	/* Respiro lateral. Vira variável porque as faixas que "encostam na
	   borda" (categorias, carrossel) sangram exatamente esse valor. */
	--os-gutter: 24px;

	/* Altura da barra inferior do celular, usada também no respiro do body
	   e no botão flutuante do plugin. */
	--os-tabbar-h: 64px;
}

* { box-sizing: border-box; }

/* O plugin desliga modais e blocos vazios com o atributo [hidden]. Esta
   regra vem primeiro e com !important para que nenhum display do tema (ou
   do plugin) consiga reacender o que deveria estar escondido. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.os-theme {
	margin: 0;
	background: var(--os-bg);
	color: var(--os-text);
	font-family: var(--os-font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	/* Nada pode empurrar a página para os lados: as faixas que sangram já
	   são calculadas para caber exatamente na largura da tela. */
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* No mockup o conteúdo ocupa ~90% da largura da tela; com 1180px a foto da
   capa ficava estreita demais e a faixa de categorias sobrava espaço à
   direita. 1240px devolve a proporção do desenho. */
.os-container {
	width: min(1240px, 100% - var(--os-gutter) * 2);
	margin-inline: auto;
}

.os-container--narrow { width: min(820px, 100% - var(--os-gutter) * 2); }
.os-container--wide { width: min(1320px, 100% - var(--os-gutter) * 2); }

.os-skip {
	position: absolute;
	left: -9999px;
	top: 8px;
	background: var(--os-red);
	color: #fff;
	padding: 10px 14px;
	border-radius: 8px;
	z-index: 1000;
}

.os-skip:focus { left: 8px; }

/* Foco visível em tudo que é clicável — o tema é escuro e o anel padrão do
   navegador some no preto. */
a:focus-visible,
button:focus-visible,
.os-btn:focus-visible {
	outline: 2px solid var(--os-orange);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Botões
 * ------------------------------------------------------------------------ */

.os-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	/* O botão do mockup é bem mais encorpado que 52px: ele é o alvo
	   principal da página e precisa parecer isso. */
	min-height: 58px;
	padding: 14px 20px 14px 30px;
	border-radius: 14px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* A seta vem do os_svg() com 18px; no mockup ela mora dentro de um círculo
   vazado na ponta do botão. O viewBox faz o desenho acompanhar o tamanho. */
.os-btn .os-icon--arrow {
	width: 32px;
	height: 32px;
	padding: 7px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	opacity: .75;
}

.os-btn--primary {
	background: linear-gradient(100deg, var(--os-red) 0%, var(--os-red-hot) 62%, #f2571a 100%);
	color: #fff;
	/* O brilho vermelho do mockup: sombra colorida larga, não um simples
	   drop shadow cinza. */
	box-shadow: 0 10px 28px rgba(236, 42, 12, .45), 0 2px 6px rgba(0, 0, 0, .3);
}

.os-btn--primary:hover,
.os-btn--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(236, 42, 12, .55), 0 2px 6px rgba(0, 0, 0, .3);
	color: #fff;
}

.os-btn--light {
	background: #fff;
	color: var(--os-red);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.os-btn--light:hover,
.os-btn--light:focus-visible { transform: translateY(-2px); color: var(--os-red-dark); }

.os-btn--ghost {
	background: transparent;
	border-color: var(--os-border);
	color: var(--os-text);
	min-height: 48px;
	padding: 8px 18px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
}

.os-btn--ghost .os-icon--arrow { display: none; }

.os-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--os-text);
	font-weight: 600;
	font-size: 16px;
	/* Sem sublinhado no <a>: a linha atravessaria o chevron também. Quem
	   sublinha é o .os-link__label. */
	text-decoration: none;
	min-height: 44px;
}

.os-link__label {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.os-link:hover .os-link__label,
.os-link:focus-visible .os-link__label { text-decoration-thickness: 2px; }

.os-link .os-icon { opacity: .7; }

.os-eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--os-orange);
}

.os-accent { color: var(--os-orange); }

/* ---------------------------------------------------------------------------
 * Cabeçalho
 * ------------------------------------------------------------------------ */

.os-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(11, 11, 11, .92);
	backdrop-filter: blur(10px);
	/* No mockup não existe risco embaixo do cabeçalho: ele é preto sobre a
	   capa preta. Quando a página rola e passa a seção clara por baixo, é a
	   sombra que faz a separação. */
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

.admin-bar .os-header { top: 32px; }

.os-header__inner {
	/* Âncora do "PALHOÇA" que fica centralizado na barra do celular. */
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: var(--os-header-h);
}

.os-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* No mockup o "PALHOÇA" respira bem embaixo do logo. */
	gap: 7px;
	text-decoration: none;
	color: var(--os-text);
	flex: 0 0 auto;
}

.os-brand__logo {
	max-height: 58px;
	width: auto;
}

.os-brand__text { font-weight: 800; font-size: 20px; letter-spacing: .02em; }

.os-brand__city {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .34em;
	/* Compensa o espaço que a última letra carrega à direita, senão a
	   palavra fica visivelmente torta debaixo do logo. */
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--os-text-muted);
	line-height: 1;
}

/* Menu no centro da barra, como no mockup. */
.os-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.os-nav__list {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.os-nav__list a {
	display: inline-block;
	padding: 11px 18px;
	border-radius: 10px;
	color: var(--os-text);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background .15s ease;
}

.os-nav__list a:hover,
.os-nav__list a:focus-visible,
.os-nav__list .current-menu-item > a { background: rgba(255, 255, 255, .08); }

.os-header__tools {
	display: flex;
	align-items: center;
	/* O mockup deixa um vão generoso entre o selo verde e a sacola. */
	gap: 26px;
	margin-left: auto;
	flex: 0 0 auto;
}

/* Selo do plugin no cabeçalho escuro: sem cápsula, só o ponto colorido e o
   texto, como no mockup. */
.os-header__status .mydv3-status {
	background: transparent;
	border-color: transparent;
	font-size: 15px;
	font-weight: 600;
	padding: 0;
	gap: 8px;
}

.os-header__status .mydv3-status__dot { width: 9px; height: 9px; }

/* Sacola do plugin: no mockup é um botão só de contorno, sem preenchimento. */
.os-header__tools .mydv3-sacola {
	min-height: 48px;
	padding: 0 18px;
	gap: 12px;
	border-radius: 12px;
	background: transparent;
	border-color: rgba(255, 255, 255, .22);
	font-size: 15px;
	font-weight: 600;
}

.os-header__tools .mydv3-sacola:hover { background: rgba(255, 255, 255, .06); }

.os-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--os-text);
	cursor: pointer;
}

.os-burger .os-icon--close { display: none; }
.os-burger[aria-expanded="true"] .os-icon--burger { display: none; }
.os-burger[aria-expanded="true"] .os-icon--close { display: block; }

/* Faixa "Aberto agora · 45–55 min" — só no celular. */
.os-strip {
	display: none;
	border-top: 1px solid var(--os-border);
	border-bottom: 1px solid var(--os-border);
	background: var(--os-bg-2);
}

.os-strip__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 44px;
	font-size: 14px;
}

.os-strip .mydv3-status,
.os-strip .mydv3-horario {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	color: var(--os-text);
	padding: 4px 0;
	font-size: 14px;
	font-weight: 600;
}

.os-strip .mydv3-horario__icon { color: var(--os-text-muted); opacity: 1; }

.os-strip__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .22); }

/* ---------------------------------------------------------------------------
 * Capa
 * ------------------------------------------------------------------------ */

.os-hero {
	position: relative;
	/* Segura a foto e o traço que sangram para fora do container. */
	overflow: hidden;
	background:
		radial-gradient(58% 52% at 78% 34%, rgba(214, 40, 40, .20) 0%, rgba(214, 40, 40, 0) 70%),
		var(--os-bg);
}

.os-hero__inner {
	display: grid;
	/* No mockup a foto ocupa bem mais que o texto (~56% contra 44%). */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
	align-items: center;
	gap: 40px;
	padding: 48px 0 56px;
	min-height: 620px;
}

.os-hero__title {
	margin: 0 0 18px;
	font-size: clamp(42px, 5.6vw, 78px);
	line-height: .95;
	font-weight: 800;
	letter-spacing: -.025em;
}

.os-hero__text {
	margin: 0 0 30px;
	max-width: 40ch;
	font-size: 18px;
	line-height: 1.5;
	color: #c9c9c9;
}

.os-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 30px;
	margin-bottom: 34px;
}

.os-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.os-chip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	/* No mockup os chips são caixas altas (~56px), do tamanho de um alvo de
	   toque, não etiquetas finas. */
	min-height: 56px;
	padding: 10px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--os-border);
	color: var(--os-text);
}

.os-chip .os-icon { color: var(--os-orange); flex: 0 0 auto; }

.os-chip__text { display: flex; flex-direction: column; line-height: 1.2; }
.os-chip__text strong { font-size: 15px; font-weight: 700; }
.os-chip__text small { font-size: 12px; color: var(--os-text-muted); }

.os-hero__media {
	position: relative;
	min-height: 320px;
	/* A foto do mockup escapa pela direita da tela. O clamp mede quanto
	   sobra de margem no container, soma uma folga e devolve isso como
	   sangria — em telas estreitas dá pouco, e o overflow:hidden da capa
	   segura o resto (nunca vira rolagem lateral). */
	margin-right: calc(-1 * (clamp(0px, (100vw - 1240px) / 2, 240px) + 44px));
}

/* Forma orgânica da foto: a barriga redonda fica à ESQUERDA e o lado
   direito é quase reto, porque no mockup é por ali que a foto sai da tela.
   Um raio grande nos quatro cantos virava círculo e comia o combinado. */
.os-hero__img {
	position: relative;
	width: 100%;
	max-height: 640px;
	object-fit: cover;
	border-radius: 46% 14% 16% 44% / 44% 16% 18% 50%;
	/* Halo vermelho por trás da foto (no mockup o brilho vaza para o preto). */
	box-shadow: 0 0 70px 12px rgba(236, 42, 12, .30);
}

/* O traço em volta da foto. Fica POR FORA dela (inset negativo) para
   sobrar o vão preto que o mockup mostra entre a linha e a comida. */
.os-hero__glow {
	position: absolute;
	inset: -16px -22px -18px -26px;
	border-radius: 46% 14% 16% 44% / 44% 16% 18% 50%;
	pointer-events: none;
	/* Base para qualquer navegador: anel laranja sólido. */
	box-shadow: 0 0 0 2px rgba(255, 106, 31, .85);
}

/* Onde dá para recortar o miolo, o traço vira o degradê vermelho→laranja do
   mockup (aceso em cima, alaranjado embaixo) em vez de uma cor só. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
	.os-hero__glow {
		padding: 2px;
		background: linear-gradient(200deg, #ff1d06 0%, var(--os-red-hot) 32%, var(--os-orange) 70%, #ffa04a 100%);
		box-shadow: none;
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	}
}

/* Mascote: no mockup ele fica no canto inferior esquerdo da foto, com os pés
   passando um pouco da borda de baixo. */
.os-mascot {
	position: absolute;
	left: 0;
	bottom: -26px;
	margin: 0;
	width: min(27%, 196px);
	filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55));
}

.os-mascot__bubble {
	position: absolute;
	/* Fora do corpo do mascote: em 86% o balão cobria a mão levantada. */
	left: calc(100% + 6px);
	top: 30%;
	/* Duas linhas, como no mockup ("Bateu / a fome?"). */
	/* Absoluto com left:100%, o balao encolhia ao minimo (uma palavra por linha). */
	width: max-content;
	max-width: 112px;
	padding: 9px 13px;
	/* Canto vivo embaixo à esquerda: é o biquinho apontando para o mascote. */
	border-radius: 14px 14px 14px 3px;
	background: #fff;
	color: var(--os-dark-text);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------------------
 * Abas de categoria (componente do plugin, encaixe no tema)
 * ------------------------------------------------------------------------ */

.os-cats {
	background: var(--os-light);
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	/* Segura a sangria das pílulas do celular na borda exata da tela. */
	overflow: hidden;
}

/* No mockup as sete categorias se distribuem por toda a largura, em vez de
   se amontoarem à esquerda com 96px cada. */
.os-cats .mydv3-cats {
	gap: 4px;
	padding: 16px 0 10px;
}

.os-cats .mydv3-cats__item {
	flex: 1 1 0;
	min-width: 104px;
	max-width: 190px;
	padding: 12px 10px 14px;
	gap: 9px;
	/* Alvo de toque: 44px mesmo quando a categoria tem nome curto. */
	min-height: 44px;
}

/* ---------------------------------------------------------------------------
 * Seções
 * ------------------------------------------------------------------------ */

.os-section { padding: 56px 0; }

.os-section--light {
	background: var(--os-light);
	color: var(--os-dark-text);
	/* No mockup o título nasce logo abaixo da faixa de categorias e a seção
	   fecha com um pouco mais de folga do que abre. */
	padding: 48px 0 60px;
}

/* Cabeçalho de "Os mais pedidos": o plugin deixa 18px até os cards; o
   mockup respira 26px. */
.os-section--light .mydv3-top__head { margin-bottom: 26px; }
.os-section--light .mydv3-top__subtitle { margin-top: 6px; }

/* ---- Do corte à sua casa ---- */

.os-story { background: var(--os-bg); padding: 64px 0; }

/* No mockup esta linha é VERMELHA (a laranja é a da capa) — são dois
   momentos diferentes da página. */
.os-story .os-eyebrow { color: var(--os-red); }

.os-story__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
	align-items: center;
	gap: 48px;
}

/* Título de seção, não segundo herói: no mockup ele fica do tamanho de
   "Os mais pedidos" (30px do plugin), e não dos 44px de antes — assim o
   "Só sushi top." continua sendo a maior voz da página. */
.os-story__title {
	margin: 0 0 14px;
	font-size: clamp(28px, 2.8vw, 36px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.02em;
}

.os-story__text {
	margin: 0 0 26px;
	max-width: 40ch;
	color: var(--os-text-muted);
	font-size: 17px;
}

.os-story__media {
	min-height: 260px;
	/* Cantos bem redondos, como a foto grande do mockup. */
	border-radius: 28px;
	overflow: hidden;
	background: linear-gradient(135deg, #1a1a1a, #2a1010);
}

.os-story__media img {
	width: 100%;
	height: 100%;
	max-height: 470px;
	object-fit: cover;
}

/* ---- Faixa ---- */

.os-band-wrap { padding: 0 0 64px; background: var(--os-bg); }

.os-band {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px 24px;
	min-height: 112px;
	padding: 22px 32px;
	border-radius: 20px;
	background: linear-gradient(90deg, var(--os-red) 0%, #ef4d12 55%, #f7931e 100%);
	color: #fff;
	/* Visível de propósito: no mockup a cabeça do mascote passa da borda de
	   cima da faixa. Ele fica preso na horizontal (right + largura fixa),
	   então isso não cria rolagem lateral. */
	overflow: visible;
}

.os-band__text {
	margin: 0;
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -.01em;
}

.os-band__mascot {
	position: absolute;
	right: 40px;
	bottom: 0;
	width: 152px;
	pointer-events: none;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .28));
}

/* Espaço para o mascote não cobrir o botão. */
.os-band .os-btn--light { position: relative; z-index: 1; margin-right: 190px; }

/* ---------------------------------------------------------------------------
 * Páginas internas
 * ------------------------------------------------------------------------ */

.os-page-head {
	padding: 48px 0 28px;
	background: var(--os-bg);
}

.os-page-head__title {
	margin: 0 0 8px;
	font-size: clamp(32px, 4.5vw, 52px);
	font-weight: 800;
	letter-spacing: -.02em;
}

.os-page-head__text { margin: 0 0 18px; color: var(--os-text-muted); font-size: 17px; }

.os-page { padding: 8px 0 56px; }

.os-page--store { padding-top: 24px; }

.os-content { color: var(--os-text); font-size: 17px; }
.os-content p { margin: 0 0 16px; }
.os-content a { color: var(--os-orange); }

.os-list { list-style: none; padding: 0; margin: 0; }
.os-list li { padding: 12px 0; border-bottom: 1px solid var(--os-border); }

/* A vitrine do plugin sobre o fundo escuro: os cards já são claros; só
   tiramos o respiro extra que o plugin reserva para o botão flutuante no
   final, porque a barra inferior do tema já ocupa esse espaço. */
.os-store-page .mydv3-storefront { padding-bottom: 24px; }

/* ---------------------------------------------------------------------------
 * Rodapé
 * ------------------------------------------------------------------------ */

.os-footer {
	background: var(--os-bg-2);
	border-top: 1px solid var(--os-border);
}

.os-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding: 34px 0 28px;
}

.os-brand--footer .os-brand__logo { max-height: 52px; }

.os-footer__contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.os-footer__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Alvo de toque de 44px sem precisar de caixa visível. */
	min-height: 44px;
	color: var(--os-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
}

.os-footer__contacts a:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* Cada contato com a cor do seu serviço, como no mockup — é o que faz a
   linha ser lida de relance em vez de virar quatro ícones iguais. */
.os-footer__contacts .os-icon { flex: 0 0 auto; color: var(--os-orange); }
.os-footer__contacts .os-icon--whatsapp { color: #25d366; }
.os-footer__contacts .os-icon--instagram { color: #e1306c; }

.os-footer__address { color: var(--os-text-muted); }

.os-footer__bottom {
	padding: 16px 0;
	border-top: 1px solid var(--os-border);
	font-size: 13px;
	color: var(--os-text-muted);
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Barra inferior (celular)
 * ------------------------------------------------------------------------ */

.os-tabbar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: rgba(17, 17, 17, .97);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--os-border);
	padding-bottom: env(safe-area-inset-bottom);
}

.os-tabbar__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 1 1 0;
	min-height: var(--os-tabbar-h);
	color: var(--os-text-muted);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.os-tabbar__item.is-active { color: var(--os-orange); }

.os-tabbar__badge {
	position: absolute;
	top: 8px;
	left: calc(50% + 6px);
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--os-red);
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.os-tabbar__badge.is-empty { display: none; }

/* ---------------------------------------------------------------------------
 * Sem plugin: esconde o que depende dele.
 * ------------------------------------------------------------------------ */

.os-no-plugin .os-tabbar__item--bag { display: none; }

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

@media (max-width: 1180px) {
	.os-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; min-height: 540px; }
	.os-story__inner { gap: 32px; }
	.os-band .os-btn--light { margin-right: 170px; }
}

@media (max-width: 1024px) {
	.os-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.os-story__inner { grid-template-columns: 1fr; }
	.os-nav__list a { padding: 11px 12px; }
	.os-header__tools { gap: 16px; }
}

@media (max-width: 900px) {
	:root {
		--os-header-h: 64px;
		--os-gutter: 20px;
	}

	.os-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--os-bg-2);
		border-bottom: 1px solid var(--os-border);
		padding: 8px 20px 14px;
	}

	.os-nav.is-open { display: block; }

	.os-nav__list { flex-direction: column; gap: 2px; }
	.os-nav__list a { display: block; padding: 13px 10px; font-size: 16px; }

	/* No mockup do celular o "PALHOÇA" fica no centro da barra, e não
	   embaixo do logo. Regra presa ao cabeçalho: solta, o mesmo bloco no
	   rodapé também virava absoluto e ia parar no meio da capa (o pai dele
	   ali não tem position, então caía no bloco inicial da página). */
	.os-header .os-brand { flex-direction: row; gap: 0; }

	.os-header .os-brand__city {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: 12px;
		letter-spacing: .3em;
		color: var(--os-text);
		pointer-events: none;
	}

	.os-header .os-brand__logo { max-height: 40px; }

	.os-header__status { display: none; }
	.os-burger { display: inline-flex; }
	.os-strip { display: block; }

	/* Ordem do mockup: hambúrguer e depois a sacola. */
	.os-header__tools { gap: 4px; }
	.os-burger { order: 1; }
	.os-header__tools .mydv3-sacola { order: 2; }

	/* Sacola vira só o ícone com o contador em cima, como no mockup. */
	.os-header__tools .mydv3-sacola {
		position: relative;
		width: 44px;
		min-height: 44px;
		padding: 0;
		justify-content: center;
		border-color: transparent;
	}

	.os-header__tools .mydv3-sacola__label { display: none; }

	.os-header__tools .mydv3-sacola__count,
	.os-header__tools .mydv3-sacola__count.is-empty {
		position: absolute;
		top: 1px;
		right: 0;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		background: var(--os-red);
		color: #fff;
		font-size: 11px;
		line-height: 18px;
	}

	.os-hero__inner {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 26px 0 28px;
		min-height: 0;
	}

	.os-hero__title { font-size: clamp(38px, 11vw, 56px); margin-bottom: 14px; }
	.os-hero__text { font-size: 17px; margin-bottom: 24px; }
	.os-hero__actions { margin-bottom: 22px; }

	/* Foto abaixo do texto e sangrando nas duas bordas, como no mockup. */
	.os-hero__media {
		order: 2;
		min-height: 0;
		margin: 6px calc(var(--os-gutter) * -1) 0;
	}

	.os-hero__img {
		max-height: 380px;
		/* Forma mais suave: a blob do desktop, em tela estreita, comia
		   pedaço demais do combinado. */
		border-radius: 34% 18% 20% 30% / 26% 20% 26% 34%;
	}

	.os-hero__glow { inset: -10px -14px -12px -16px; border-radius: 34% 18% 20% 30% / 26% 20% 26% 34%; }

	.os-mascot { width: min(38%, 152px); left: 2%; bottom: -10px; }
	.os-mascot__bubble { left: calc(100% - 6px); top: 26%; font-size: 13px; max-width: 88px; }

	/* Categorias viram pílulas roláveis encostadas na borda. */
	.os-cats .mydv3-cats {
		gap: 10px;
		padding: 14px var(--os-gutter);
		margin-inline: calc(var(--os-gutter) * -1);
		scroll-padding-inline: var(--os-gutter);
	}

	.os-cats .mydv3-cats__item {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		min-width: 0;
		max-width: none;
		min-height: 44px;
		padding: 10px 18px;
		border-radius: 999px;
		border-bottom: 0;
		background: rgba(29, 29, 31, .06);
		color: #3d4350;
		font-size: 15px;
	}

	.os-cats .mydv3-cats__item.is-active {
		background: var(--os-red);
		border-bottom-color: transparent;
		color: #fff;
	}

	/* Na pílula o ícone brigava com o texto; o mockup mostra só o nome. */
	.os-cats .mydv3-cats__icon { display: none; }

	.os-section { padding: 36px 0; }
	.os-section--light { padding: 32px 0 40px; }
	.os-story { padding: 40px 0; }
	.os-band-wrap { padding-bottom: 40px; }

	/* No celular o mascote sai pela ESQUERDA da faixa (mockup), e o botão
	   fica na direita. */
	.os-band {
		justify-content: flex-start;
		gap: 14px;
		padding: 18px 20px;
		min-height: 92px;
	}

	.os-band__text { padding-left: 74px; }
	.os-band__mascot { width: 92px; right: auto; left: 6px; }
	.os-band .os-btn--light { margin-right: 0; margin-left: auto; }

	.os-footer__inner { flex-direction: column; align-items: flex-start; padding-bottom: 22px; }
	.os-footer__contacts { flex-direction: column; align-items: flex-start; gap: 2px; }

	/* Barra inferior visível: o corpo ganha respiro para nada ficar atrás dela. */
	.os-tabbar { display: flex; }
	body.os-theme { padding-bottom: calc(var(--os-tabbar-h) + env(safe-area-inset-bottom)); }

	/* O botão flutuante "Ver carrinho" do plugin sobe para não colidir com a barra. */
	.mydv3-cart-fab { bottom: calc(var(--os-tabbar-h) + 12px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 639.98px) {
	/* O carrossel dos mais pedidos também encosta na borda: assim o card
	   seguinte aparece "espiando", que é o convite a arrastar. */
	.os-section--light .mydv3-top__grid {
		margin-inline: calc(var(--os-gutter) * -1);
		padding-inline: var(--os-gutter);
		scroll-padding-inline: var(--os-gutter);
	}
}

@media (max-width: 480px) {
	.os-hero__actions { gap: 14px 18px; }

	/* Botão cheio, como no mockup — e alto o bastante para o polegar. */
	.os-btn { width: 100%; min-height: 58px; padding: 14px 18px; }
	.os-btn .os-icon--arrow { width: 28px; height: 28px; padding: 6px; }
	.os-hero__actions .os-link { width: auto; }

	.os-chips { gap: 10px; }
	.os-chip { min-height: 50px; padding: 8px 14px; gap: 10px; }
	.os-chip__text strong { font-size: 14px; }

	/* Sem os 190px reservados ao mascote, o botão da faixa vai para a linha
	   de baixo e ocupa a largura toda. */
	.os-band { padding-bottom: 20px; }
	.os-band__text { font-size: 22px; padding-left: 66px; }
	.os-band__mascot { width: 80px; }
	.os-band .os-btn--light { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.os-btn,
	.os-btn:hover,
	.os-btn:focus-visible,
	.os-nav__list a,
	.os-header__tools .mydv3-sacola {
		transition: none;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * "Peça de novo o de sempre" — o convite do plugin, na capa.
 *
 * O desenho do botão vem do plugin e é vazado em `currentColor`; aqui só se
 * define onde ele mora e com que cor o texto em volta fala. Numa capa escura,
 * `currentColor` já entrega um botão claro sem nenhuma cor fixa nova.
 * ---------------------------------------------------------------------- */

.os-hero .mydv3-denovo {
	margin: -14px 0 30px;
	color: var(--os-light, #f6f3ee);
}

.os-hero .mydv3-denovo__texto {
	font-weight: 700;
}

.os-hero .mydv3-denovo__resumo {
	color: rgba(246, 243, 238, .62);
}

@media (max-width: 720px) {
	/* No celular a linha inteira não cabe ao lado do botão: o resumo do
	   pedido sai e fica só o convite, que é o que faz alguém tocar. */
	.os-hero .mydv3-denovo__resumo {
		display: none;
	}

	.os-hero .mydv3-denovo {
		margin: -8px 0 26px;
	}
}