/**
 * Vido mobil — mockup szerinti finomítások (max priority layer).
 */

/* =============================================================================
   FEJLÉC — hamburger | logo | kosár (mobil, NEM display:contents!)
   ============================================================================= */
@media (max-width: 991px) {
	body.vido-theme .rf-header-larosa .header-main,
	body.vido-theme .site-header .header-main,
	body.vido-theme .rf-header-main {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		padding: 0 !important;
		min-height: 0 !important;
		width: 100% !important;
	}

	body.vido-theme .rf-header-main__left {
		display: grid !important;
		grid-template-columns: 44px 1fr 44px !important;
		grid-template-rows: auto !important;
		align-items: center !important;
		width: 100% !important;
		padding: 0.5rem 0.75rem !important;
		gap: 0.35rem !important;
		box-sizing: border-box !important;
		min-width: 0 !important;
	}

	/* Kategória sáv mobilon KIKAPCSOLVA — domino nav + hamburger menü */
	body.vido-theme .rf-header-main__center,
	body.vido-theme .header-center.rf-header-main__center {
		display: none !important;
	}

	body.vido-theme .rf-header-main__right {
		display: none !important;
	}

	body.vido-theme .rf-header-cat-nav,
	body.vido-theme .rf-header-cat-nav__more-panel {
		display: none !important;
	}

	body.vido-theme .menu-mobile-nav-button,
	body.vido-theme .mobile-nav-toggle {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
	}

	body.vido-theme .site-branding,
	body.vido-theme .rf-header__brand,
	body.vido-theme .custom-logo-link {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-self: center !important;
		text-align: center !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	body.vido-theme .header-cart-mobile,
	body.vido-theme .site-header-cart.header-cart-mobile {
		grid-column: 3 !important;
		grid-row: 1 !important;
		justify-self: end !important;
	}

	body.vido-theme .rf-header-account-mobile,
	body.vido-theme .header-group-action.rf-header-account-mobile {
		display: none !important;
	}

	body.vido-theme .rf-header-contact-side,
	body.vido-theme .rf-header-contact,
	body.vido-theme .header-contact,
	body.vido-theme .site-header-account,
	body.vido-theme .site-header-search {
		display: none !important;
	}

	body.vido-theme .site-branding .site-title,
	body.vido-theme .rf-header__brand-text {
		font-family: var(--vido-font-display) !important;
		font-size: 1.35rem !important;
		color: var(--vido-red) !important;
		letter-spacing: 0.1em !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	body.vido-theme .custom-logo-link img {
		max-height: 44px !important;
		width: auto !important;
		margin: 0 auto !important;
		display: block !important;
	}

	body.vido-theme .header-cart-mobile .cart-contents,
	body.vido-theme .header-cart-mobile .vido-cart-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 40px !important;
		min-height: 40px !important;
		max-width: 44px !important;
		max-height: 44px !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		border: none !important;
		overflow: hidden !important;
	}

	body.vido-theme .header-cart-mobile .cart-contents::before,
	body.vido-theme .header-cart-mobile .cart-contents:before {
		display: none !important;
		content: none !important;
		width: 0 !important;
		height: 0 !important;
		font-size: 0 !important;
	}

	body.vido-theme .vido-cart-btn__icon,
	body.vido-theme .header-cart-mobile .vido-cart-icon {
		width: 36px !important;
		height: 36px !important;
	}

	body.vido-theme .header-cart-mobile .cart-contents img {
		display: none !important;
	}

	body.vido-theme .menu-mobile-nav-button {
		min-width: 44px !important;
		min-height: 44px !important;
	}
}

/* =============================================================================
   HERO — mockup: fa deszka + krém panel (csak mobilon egymás alatt)
   ============================================================================= */
@media (max-width: 991px) {
	body.vido-theme .vido-hero {
		min-height: auto;
	}

	body.vido-theme .vido-hero__inner {
		display: flex !important;
		flex-direction: column !important;
		padding: 0 !important;
		gap: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.vido-theme .vido-hero__visual {
		order: 1;
		position: relative;
		width: 100%;
		padding: 1rem 1rem 0;
	}

	body.vido-theme .vido-hero__burger {
		width: 100%;
		max-width: 340px;
		margin: 0 auto;
		display: block;
		border-radius: 12px;
	}

	body.vido-theme .vido-hero__stamp {
		left: 12px;
		bottom: 12px;
		width: 76px;
		height: 76px;
		font-size: 0.52rem;
	}

	body.vido-theme .vido-hero__panel {
		order: 2;
		width: calc(100% - 2rem) !important;
		max-width: 100% !important;
		margin: -16px auto 0 !important;
		padding: 1.25rem 1rem 1.5rem !important;
		border-radius: 20px 20px 0 0 !important;
		position: relative;
		z-index: 3;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
	}

	body.vido-theme .vido-hero__title {
		font-size: 2rem !important;
		line-height: 1.05 !important;
	}

	body.vido-theme .vido-hero__tagline {
		font-size: 0.875rem !important;
		line-height: 1.45 !important;
		margin-bottom: 1rem !important;
	}

	body.vido-theme .vido-hero__cta {
		width: 100%;
		justify-content: center;
	}

	body.vido-theme .vido-hero__open {
		margin-top: 0.75rem;
		font-size: 0.6875rem;
	}
}

/* =============================================================================
   KATEGÓRIÁK — arany gyűrű, vízszintes scroll (mobil)
   ============================================================================= */
@media (max-width: 991px) {
	body.vido-theme .vido-categories {
		padding: 1.25rem 0 0.75rem;
		width: 100%;
	}

	body.vido-theme .vido-section-head {
		margin-bottom: 0.75rem;
	}

	body.vido-theme .vido-section-head__text {
		font-size: 1.35rem;
	}

	body.vido-theme .vido-categories__track {
		padding: 0.25rem 1rem 0.75rem;
		gap: 0.75rem;
	}

	body.vido-theme .vido-cat {
		width: 72px;
	}

	body.vido-theme .vido-cat__ring {
		width: 64px;
		height: 64px;
	}

	body.vido-theme .vido-cat__ring .rf-cat-icon--illustrated,
	body.vido-theme .vido-cat__ring .rf-cat-icon--png {
		width: 40px;
		height: 40px;
		object-fit: contain;
	}

	body.vido-theme .vido-cat__name {
		font-size: 0.6rem;
		line-height: 1.15;
	}
}

/* =============================================================================
   IKONOK — RosaFood PNG, teljes megjelenítés (mobil)
   ============================================================================= */
@media (max-width: 991px) {
	body.vido-theme .rf-cat-icon--png,
	body.vido-theme .rf-cat-icon--illustrated,
	body.vido-theme .rf-cat-icon--gringo,
	body.vido-theme .rf-cat-icon--crop-top,
	body.vido-theme .rf-cat-icon--crop-right,
	body.vido-theme .rf-cat-icon--crop-none {
		object-fit: contain !important;
		object-position: center !important;
	}

	body.vido-theme .rf-domino-nav__icon,
	body.vido-theme .rf-domino-subnav .rf-domino-nav__icon,
	body.vido-theme .rf-mobile-cat-nav__icon,
	body.vido-theme .home03-cat-card__icon {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		overflow: visible !important;
	}

	body.vido-theme .rf-domino-nav__icon .rf-cat-icon,
	body.vido-theme .rf-domino-nav__icon .rf-cat-icon--png,
	body.vido-theme .rf-domino-subnav .rf-domino-nav__icon .rf-cat-icon,
	body.vido-theme .rf-domino-subnav .rf-domino-nav__icon .rf-cat-icon--png {
		width: 100% !important;
		height: 100% !important;
		max-width: 48px !important;
		max-height: 48px !important;
	}

	body.vido-theme .rf-domino-nav--shop .rf-domino-nav__icon,
	body.vido-theme .rf-domino-subnav .rf-domino-nav__icon {
		width: 3rem !important;
		height: 3rem !important;
		min-width: 3rem !important;
		min-height: 3rem !important;
	}

	body.vido-theme .rf-domino-subnav .rf-domino-nav__item a {
		min-width: 4.75rem !important;
		max-width: 5.75rem !important;
		padding: 0.5rem 0.35rem 0.55rem !important;
	}

	body.vido-theme .vido-cat__ring .rf-cat-icon--png,
	body.vido-theme .vido-cat__ring .rf-cat-icon--illustrated {
		width: 44px !important;
		height: 44px !important;
	}

	body.vido-theme .rf-mobile-cat-nav__icon .rf-cat-icon,
	body.vido-theme .rf-mobile-cat-nav__icon .rf-cat-icon--png {
		width: 2.25rem !important;
		height: 2.25rem !important;
	}

	body.vido-theme .vido-mobile-nav__icon {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 28px;
		min-height: 28px;
	}
}

/* =============================================================================
   KEDVENCEINK — sárga sáv, swiper kártyák (mobil)
   ============================================================================= */
@media (max-width: 991px) {
	body.vido-theme .vido-favorites {
		padding: 1.5rem 0 1.75rem;
		width: 100%;
	}

	body.vido-theme .vido-favorites-swiper {
		padding: 0 0 2rem 1rem;
		overflow: visible;
	}

	body.vido-theme .vido-favorites-swiper .swiper-slide {
		width: 72vw !important;
		max-width: 280px;
	}

	body.vido-theme .vido-fav-card__title {
		font-size: 0.9375rem;
	}

	body.vido-theme .vido-favorites-nav {
		margin-top: -1rem;
	}
}

/* =============================================================================
   PROMO + USP (mobil)
   ============================================================================= */
@media (max-width: 991px) {
	body.vido-theme .vido-promo-wrap {
		padding: 1rem 0.75rem;
		width: 100%;
		box-sizing: border-box;
	}

	body.vido-theme .vido-promo {
		flex-direction: column;
		max-width: 100%;
	}

	body.vido-theme .vido-promo__photo {
		flex: none;
		min-height: 140px;
		width: 100%;
	}

	body.vido-theme .vido-usp {
		padding: 1.25rem 0.75rem calc(1.25rem + var(--vido-mobile-nav-h));
		width: 100%;
	}

	body.vido-theme .vido-usp__grid {
		gap: 1rem;
	}

	body.vido-theme .vido-usp__item h3 {
		font-size: 0.75rem;
	}

	body.vido-theme .vido-usp__item p {
		font-size: 0.6875rem;
	}
}

/* =============================================================================
   SHOP / ÉTLAP mobil
   ============================================================================= */
@media (max-width: 991px) {
	body.vido-theme .vido-product-card {
		grid-template-columns: 88px 1fr 44px;
		gap: 0.625rem;
		padding: 0.625rem 0.75rem;
		margin: 0 0.75rem 0.625rem;
		width: calc(100% - 1.5rem);
		box-sizing: border-box;
	}

	body.vido-theme .vido-shop-context .products {
		padding: 0 !important;
		margin: 0 !important;
	}

	body.vido-theme .woocommerce-products-header {
		margin: 0.75rem !important;
		width: calc(100% - 1.5rem) !important;
		box-sizing: border-box;
	}

	body.vido-theme .vido-shop-context .site-main {
		padding-bottom: calc(var(--vido-mobile-nav-h) + 1rem);
	}

	/* Domino / al-kategória nav — normál flow, ne fedje a termékeket */
	body.vido-theme .rf-domino-nav,
	body.vido-theme .rf-domino-subnav {
		position: relative !important;
		z-index: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 0.75rem !important;
		overflow: hidden !important;
	}

	body.vido-theme .rf-domino-subnav__inner,
	body.vido-theme .rf-domino-nav__inner {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.vido-theme .vido-shop-context .site-main,
	body.vido-theme .vido-shop-context .woocommerce,
	body.vido-theme .woocommerce-products-header {
		position: relative !important;
		z-index: 2 !important;
	}
}

/* =============================================================================
   ALSÓ NAV — mockup (zöld középső kosár gomb)
   ============================================================================= */
@media (max-width: 991px) {
	body.vido-theme .vido-mobile-nav {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		z-index: 99990;
		background: var(--vido-brown);
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
		overflow: visible !important;
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	body.vido-theme .vido-mobile-nav__list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-items: center;
		padding: 0.35rem 0.15rem 0.45rem;
		margin: 0;
		list-style: none;
		min-height: 64px;
		overflow: visible;
	}

	body.vido-theme .vido-mobile-nav__link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.15rem;
		padding: 0.25rem;
		color: rgba(255, 248, 235, 0.75);
		text-decoration: none;
		font-size: 0.5625rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		background: none;
		border: none;
		cursor: pointer;
		font-family: var(--vido-font-body);
		line-height: 1.1;
		min-height: 52px;
	}

	body.vido-theme .vido-mobile-nav__link.is-active {
		color: var(--vido-gold-light);
	}

	body.vido-theme .vido-mobile-nav__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		flex-shrink: 0;
		overflow: hidden;
	}

	body.vido-theme .vido-mobile-nav__icon svg {
		width: 22px;
		height: 22px;
		display: block;
	}

	body.vido-theme .vido-mobile-nav__img {
		width: 26px;
		height: 26px;
		object-fit: contain;
		object-position: center;
		display: block;
	}

	body.vido-theme .vido-mobile-nav__item--cart {
		position: relative;
		overflow: visible;
	}

	body.vido-theme .vido-mobile-nav__cart-btn {
		position: relative;
		top: -12px;
		width: 54px !important;
		height: 54px !important;
		min-height: 54px !important;
		border-radius: 50% !important;
		background: var(--vido-green) !important;
		color: #fff !important;
		border: 3px solid var(--vido-gold-light) !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
		padding: 0 !important;
		margin: 0 auto;
	}

	body.vido-theme .vido-mobile-nav__cart-btn .vido-mobile-nav__icon {
		width: 30px;
		height: 30px;
	}

	body.vido-theme .vido-mobile-nav__cart-btn .vido-mobile-nav__icon svg,
	body.vido-theme .vido-mobile-nav__cart-btn .vido-cart-svg {
		width: 24px;
		height: 24px;
		color: #fff;
	}

	body.vido-theme .vido-mobile-nav__cart-btn .vido-cart-icon,
	body.vido-theme .vido-mobile-nav__cart-btn .vido-cart-btn__icon--light {
		width: 28px !important;
		height: 28px !important;
	}

	body.vido-theme .vido-mobile-nav__cart-label {
		display: none;
	}

	body.vido-theme .vido-mobile-nav__badge {
		position: absolute;
		top: 2px;
		right: 2px;
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		border-radius: 9px;
		background: var(--vido-red);
		color: #fff;
		font-size: 0.625rem;
		font-weight: 700;
		line-height: 18px;
		text-align: center;
		z-index: 2;
	}

	body.vido-theme {
		padding-bottom: calc(var(--vido-mobile-nav-h) + env(safe-area-inset-bottom, 0)) !important;
	}

	body.vido-theme .rf-pwa-install,
	body.vido-theme .pwa-install-banner,
	body.vido-theme .rf-pwa-fab {
		bottom: calc(var(--vido-mobile-nav-h) + 8px) !important;
		max-width: calc(100% - 1rem);
		left: 0.5rem !important;
		right: 0.5rem !important;
	}

	/* Shop oldalakon nincs automatikus PWA banner */
	body.vido-theme.vido-shop-context .rf-pwa-install {
		display: none !important;
	}

	body.vido-theme.vido-shop-context .rf-pwa-fab {
		bottom: calc(var(--vido-mobile-nav-h) + 12px) !important;
		right: 0.75rem !important;
		left: auto !important;
		max-width: none;
	}
}

/* =============================================================================
   LÁBLÉC — kompakt mobil
   ============================================================================= */
@media (max-width: 767px) {
	body.vido-theme .site-footer,
	body.vido-theme .rf-footer {
		padding-bottom: calc(var(--vido-mobile-nav-h) + 1rem) !important;
		font-size: 0.8125rem;
	}

	body.vido-theme.vido-front-page .site-footer {
		margin-top: 0;
	}
}

/* Kosár drawer mobilon */
@media (max-width: 991px) {
	body.vido-theme .vido-cart-drawer__panel {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.vido-theme.vido-cart-open {
		overflow: hidden;
	}
}

/* Termékoldal mobil */
@media (max-width: 767px) {
	body.vido-theme.single-product .site-main,
	body.vido-theme.single-product .product {
		padding: 0.75rem !important;
		margin: 0.5rem !important;
		width: calc(100% - 1rem) !important;
		box-sizing: border-box;
	}
}