/*
 * Web Sales - camada responsiva universal.
 * Carregada após o tema para manter o comportamento consistente em celulares,
 * tablets, telas com recorte e aparelhos usados na horizontal.
 */

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

body {
	min-width: 280px;
	overflow-x: hidden;
}

img,
svg,
video,
canvas {
	max-width: 100%;
}

button,
input,
select,
textarea {
	max-width: 100%;
}

.mobile-menu-button,
.mobile-menu-overlay,
.mobile-navigation-only {
	display: none;
}

.store-brand,
.store-brand span,
.store-actions,
.store-navigation,
.hero-content,
.section-head > *,
.product-detail,
.cart-copy,
.checkout-card,
.account-card {
	min-width: 0;
}

.product-copy h3,
.product-detail h1,
.review-item,
.voucher-card,
.account-orders,
.institutional-copy,
.store-card-content {
	overflow-wrap: anywhere;
}

/* Tablets e notebooks compactos. */
@media (max-width: 1180px) {
	.store-header {
		padding-right: 24px;
		padding-left: 24px;
	}

	.store-header nav {
		gap: 18px;
	}

	.store-actions {
		gap: 12px;
	}

	.section,
	.theme-editorial-minimal .section {
		padding-right: 4vw;
		padding-left: 4vw;
	}

	.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Menu móvel compartilhado por tablets e celulares. */
@media (max-width: 1024px) {
	body.mobile-menu-open {
		overflow: hidden;
	}

	.store-header,
	.theme-editorial-minimal .store-header,
	.theme-modern-showcase .store-header {
		height: 76px;
		min-height: 76px;
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 10px;
		padding-right: max(16px, env(safe-area-inset-right));
		padding-left: max(16px, env(safe-area-inset-left));
		position: sticky;
		top: 0;
	}

	.theme-modern-showcase .store-header {
		width: calc(100% - 24px);
		margin: 12px auto;
		top: 8px;
	}

	.store-brand {
		max-width: 100%;
		overflow: hidden;
	}

	.store-brand img,
	.theme-modern-showcase .store-brand img {
		width: 44px;
		height: 44px;
		flex: 0 0 44px;
		object-fit: contain;
	}

	.store-brand strong,
	.store-brand small {
		display: block;
		max-width: 38vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.store-brand strong {
		font-size: 17px;
	}

	.mobile-menu-button {
		display: grid;
		place-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: 8px;
		background: transparent;
		color: inherit;
		cursor: pointer;
		z-index: 52;
	}

	.mobile-menu-button span {
		display: block;
		width: 21px;
		height: 2px;
		background: currentColor;
		transition: transform 180ms ease, opacity 180ms ease;
	}

	body.mobile-menu-open .mobile-menu-button span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	body.mobile-menu-open .mobile-menu-button span:nth-child(2) {
		opacity: 0;
	}

	body.mobile-menu-open .mobile-menu-button span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	body.mobile-menu-open .mobile-menu-button {
		background: #fff;
		color: #171717;
		border-color: #ddd;
	}

	.store-header .store-navigation {
		display: flex;
		position: fixed;
		inset: 0 0 0 auto;
		width: min(86vw, 370px);
		height: 100vh;
		height: 100dvh;
		padding: calc(96px + env(safe-area-inset-top)) 24px 32px;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		overflow-y: auto;
		background: #fff;
		color: #171717;
		box-shadow: -20px 0 60px rgb(0 0 0 / 22%);
		transform: translateX(110%);
		visibility: hidden;
		transition: transform 220ms ease, visibility 220ms;
		z-index: 50;
	}

	body.mobile-menu-open .store-navigation {
		transform: translateX(0);
		visibility: visible;
	}

	.store-header .store-navigation a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 12px 4px;
		border-bottom: 1px solid #e4e4e4;
		font: 800 16px/1.25 Arial, sans-serif;
	}

	.store-header .store-navigation .mobile-navigation-only {
		display: flex;
	}

	.mobile-menu-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgb(0 0 0 / 48%);
		z-index: 49;
	}

	.mobile-menu-overlay[hidden] {
		display: none;
	}

	.store-actions {
		justify-self: end;
	}

	.hero,
	.theme-editorial-minimal .hero,
	.theme-elegant-premium .hero,
	.theme-modern-showcase .hero {
		height: clamp(500px, 70vh, 650px);
		min-height: 500px;
		display: block;
		color: #fff;
	}

	.theme-editorial-minimal .hero::after {
		display: block;
	}

	.hero-content,
	.theme-editorial-minimal .hero-content {
		position: absolute;
		left: max(32px, 6vw);
		right: max(32px, 6vw);
		top: 50%;
		grid-column: auto;
		transform: translateY(-50%);
		padding: 0;
	}

	.theme-editorial-minimal .hero p {
		color: #fff;
	}

	.product-page {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.cart-layout,
	.checkout-grid,
	.payment-review-layout,
	.checkout-flow-page .payment-review-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.cart-summary,
	.checkout-card.summary,
	.payment-review-layout > .summary {
		position: static;
	}
}

/* Smartphones e tablets pequenos. */
@media (max-width: 760px) {
	.topbar {
		padding: 7px 14px;
		font-size: 10px;
		line-height: 1.4;
		white-space: normal;
	}

	.store-header,
	.theme-editorial-minimal .store-header,
	.theme-modern-showcase .store-header {
		height: 68px;
		min-height: 68px;
	}

	.store-brand img,
	.theme-modern-showcase .store-brand img {
		width: 40px;
		height: 40px;
		flex-basis: 40px;
	}

	.store-brand strong {
		font-size: 15px;
		letter-spacing: 0.08em;
	}

	.store-brand small {
		display: none;
	}

	.store-actions > a:not(.bag) {
		display: none;
	}

	.bag {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 9px 11px;
		font-size: 12px !important;
	}

	.bag b {
		font-size: 11px;
		margin-left: 6px;
	}

	.mobile-menu-button {
		width: 42px;
		height: 42px;
	}

	.mobile-menu-button:focus-visible,
	.store-header .store-navigation a:focus-visible {
		outline: 3px solid var(--wine);
		outline-offset: 2px;
	}

	.section,
	.theme-editorial-minimal .section,
	.theme-elegant-premium .section,
	.theme-modern-showcase .section {
		padding: 48px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left));
	}

	.button,
	.filters a,
	.account-tabs a,
	.store-contact a {
		min-height: 44px;
	}

	.section-head {
		display: grid;
		gap: 12px;
		align-items: start;
		margin-bottom: 24px;
	}

	.section-head h2 {
		font-size: clamp(28px, 8vw, 36px);
	}

	.section-head p {
		margin: 0;
	}

	.hero,
	.theme-editorial-minimal .hero,
	.theme-elegant-premium .hero,
	.theme-modern-showcase .hero {
		height: min(620px, calc(100svh - 68px));
		min-height: 480px;
	}

	.theme-modern-showcase .hero {
		width: calc(100% - 20px);
		margin-top: 10px;
		border-radius: 18px;
	}

	.hero-content,
	.theme-editorial-minimal .hero-content,
	.theme-modern-showcase .hero-content {
		left: 20px;
		right: 20px;
		max-width: none;
	}

	.hero h1,
	.theme-editorial-minimal .hero h1,
	.theme-elegant-premium .hero h1 {
		font-size: clamp(38px, 12.5vw, 58px);
		line-height: 0.98;
		letter-spacing: -0.045em;
		text-wrap: balance;
	}

	.hero p {
		font-size: 16px;
		line-height: 1.55;
	}

	.home-secondary-banner img {
		max-height: none;
		object-fit: contain;
	}

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

	.product-card,
	.theme-modern-showcase .product-card {
		border-radius: 12px;
	}

	.product-copy,
	.theme-modern-showcase .product-copy {
		padding: 12px;
	}

	.product-copy small {
		display: block;
		font-size: 10px;
		line-height: 1.35;
	}

	.product-copy h3 {
		font-size: 14px;
		line-height: 1.35;
	}

	.product-page {
		padding: 28px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left));
	}

	.gallery {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		scrollbar-width: thin;
	}

	.gallery img {
		flex: 0 0 88%;
		width: 88%;
		scroll-snap-align: start;
	}

	.product-detail h1 {
		font-size: clamp(30px, 9vw, 40px);
	}

	.variant {
		align-items: flex-start;
		gap: 10px;
	}

	.filters {
		margin-right: -16px;
		padding-right: 16px;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

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

	.store-card,
	.store-card.no-image {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		padding: 0;
	}

	.store-card-image {
		width: 100%;
		height: auto;
		min-height: 190px;
		max-height: 280px;
	}

	.store-card-content,
	.store-card.no-image .store-card-content {
		padding: 22px;
	}

	.cart-item {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 12px;
		padding: 12px;
	}

	.cart-controls {
		grid-column: 1 / -1;
		min-width: 0;
		align-items: stretch;
	}

	.cart-quantity-form {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.cart-quantity-form label {
		flex: 1 1 90px;
	}

	.cart-quantity-form input {
		width: 100%;
		min-height: 44px;
	}

	.cart-quantity-form .button {
		min-height: 44px;
		justify-content: center;
	}

	.checkout-flow-page {
		padding: 32px max(14px, env(safe-area-inset-right)) 54px max(14px, env(safe-area-inset-left));
	}

	.checkout-steps {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		scroll-snap-type: inline mandatory;
	}

	.checkout-steps span {
		min-width: 135px;
		flex: 1 0 135px;
		scroll-snap-align: start;
	}

	.checkout-card,
	.voucher-card,
	.account-card {
		padding: 20px 16px;
	}

	.checkout-form input,
	.checkout-form textarea,
	.checkout-form select,
	.account-form input,
	.account-form select,
	.pix-card textarea {
		font-size: 16px;
	}

	.address-grid,
	.account-form-grid,
	.gift-fields,
	.fulfillment-options,
	.payment-mode-selector,
	.payment-options,
	.split-payment-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.address-grid .span2,
	.account-form-grid .span-2,
	.gift-fields label:last-child,
	.split-payment-grid .span2 {
		grid-column: auto;
	}

	.review-item,
	.voucher-items > div,
	.payment-parts-list > div {
		display: grid;
		gap: 6px;
	}

	.review-item > strong,
	.voucher-items > div > strong,
	.payment-parts-list > div > strong {
		justify-self: start;
	}

	.checkout-actions,
	.checkout-secondary-actions,
	.voucher-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.checkout-actions .button,
	.checkout-secondary-actions .button,
	.voucher-actions .button,
	.payment-progress-card > .button {
		width: 100%;
		justify-content: center;
	}

	.qr-box img {
		width: min(100%, 280px);
		height: auto;
	}

	.delivery-word,
	.gift-voucher-code {
		max-width: 100%;
		font-size: clamp(20px, 7vw, 28px);
		letter-spacing: 0.04em;
		word-break: break-word;
	}

	.account-heading-row {
		align-items: stretch;
		flex-direction: column;
	}

	.account-heading-row .button {
		justify-content: center;
	}

	.account-tabs {
		margin-right: -16px;
		padding-right: 16px;
		-webkit-overflow-scrolling: touch;
	}

	.account-orders article {
		grid-template-columns: minmax(0, 1fr);
	}

	.account-orders article > div:nth-child(2) {
		text-align: left;
	}

	footer {
		padding-right: max(18px, env(safe-area-inset-right));
		padding-bottom: max(30px, env(safe-area-inset-bottom));
		padding-left: max(18px, env(safe-area-inset-left));
		flex-direction: column;
		gap: 20px;
	}
}

/* Aparelhos compactos, incluindo larguras próximas de 320 px. */
@media (max-width: 420px) {
	.store-header,
	.theme-editorial-minimal .store-header,
	.theme-modern-showcase .store-header {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 6px;
		padding-right: 10px;
		padding-left: 10px;
	}

	.store-brand {
		gap: 7px;
	}

	.store-brand strong {
		max-width: 25vw;
		font-size: 13px;
	}

	.bag {
		min-width: 54px;
		justify-content: center;
	}

	.bag b {
		margin-left: 5px;
	}

	.hero h1,
	.theme-editorial-minimal .hero h1,
	.theme-elegant-premium .hero h1 {
		font-size: clamp(34px, 12vw, 48px);
	}

	.products {
		gap: 8px;
	}

	.product-copy,
	.theme-modern-showcase .product-copy {
		padding: 10px;
	}

	.variant {
		flex-direction: column;
	}

	.add-to-cart-form .buy-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.cart-item {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.cart-copy p,
	.cart-copy small {
		font-size: 12px;
	}

	.checkout-steps span {
		min-width: 122px;
		flex-basis: 122px;
	}

	.payment-option,
	.payment-mode-selector > label,
	.fulfillment-option {
		padding: 14px;
	}
}

/* Celulares em orientação horizontal: evita banners excessivamente altos. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1024px) {
	.hero,
	.theme-editorial-minimal .hero,
	.theme-elegant-premium .hero,
	.theme-modern-showcase .hero {
		height: 440px;
		min-height: 440px;
	}

	.hero-content,
	.theme-editorial-minimal .hero-content {
		top: 52%;
	}

	.hero h1,
	.theme-editorial-minimal .hero h1,
	.theme-elegant-premium .hero h1 {
		font-size: clamp(34px, 7vw, 50px);
	}
}

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

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}