/* ============================================================================
   DDG Corporate Child — breakpoints

   Loaded after main.css. Only rules that change with viewport width belong
   here, so the global file stays free of media queries.
   ========================================================================= */

/* ------------------------------------------------- tablet and narrower */

@media (max-width: 1024px) {

	/* Six menu items, a logo and three icons do not fit on a tablet without
	   crushing the spacing, so the burger panel takes over here rather than
	   at the phone breakpoint. */
	.ddg-nav__menu {
		display: none;
	}

	.ddg-burger {
		display: block;
	}

	/* Hiding the middle grid item does not leave its column empty: the icons
	   move up into it and sit against its left edge. Switching to flex keeps
	   the logo hard left and the icons hard right. */
	.ddg-nav__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.ddg-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* -------------------------------------------------- phone and narrower */

@media (max-width: 782px) {

	/* Below this width the admin bar grows to 46px and stops being fixed
	   once the page scrolls, so the offset changes with it. */
	.admin-bar .ddg-nav {
		top: 46px;
	}

	.admin-bar .ddg-search,
	.admin-bar .ddg-mobile-menu {
		top: calc(var(--ddg-nav-h) + 46px);
	}

	:root {
		--ddg-nav-h: 64px;
	}

	/* The horizontal menu is replaced by the burger panel. */
	.ddg-nav__menu {
		display: none;
	}

	.ddg-burger {
		display: block;
	}

	.ddg-nav__inner {
		gap: 12px;
	}

	.ddg-nav__actions {
		gap: 10px;
	}

	.ddg-nav__brand img {
		height: 34px;
	}

	.ddg-search__form {
		flex-wrap: wrap;
	}

	.ddg-search__form input[type='search'] {
		flex: 1 1 100%;
	}

	.ddg-footer {
		padding: 42px 0 22px;
		margin-top: 56px;
	}

	.ddg-footer__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.ddg-footer__bottom {
		flex-direction: column;
		gap: 8px;
	}
}

/* Prevent background scrolling while the mobile menu is open. */
body.ddg-menu-open {
	overflow: hidden;
}

/* ============================================================================
   Phone and tablet corrections
   ========================================================================= */

/* 100vh on mobile browsers measures the viewport with the URL bar hidden, so
   full-height panels jump as the bar shows and hides. svh is the stable one. */
@supports (height: 100svh) {

	.ddg-hero__stage {
		height: 100svh;
	}

	.ddg-story__hero {
		height: min(78svh, 720px);
	}
}

@media (max-width: 1024px) {

	/* The mobile menu covers the viewport, so it must clear the nav on
	   tablets too, not only on phones. */
	.ddg-mobile-menu {
		inset: var(--ddg-nav-h) 0 0 0;
	}

	.ddg-story__hero-copy h1 {
		font-size: clamp(32px, 6vw, 56px);
	}
}

@media (max-width: 782px) {

	/* A scroll-driven hero costs two and a half screens of scrolling before
	   the visitor reaches a single product. On a phone that reads as a broken
	   page, so it collapses to one panel and the extra scenes are dropped. */
	.ddg-hero {
		height: auto;
	}

	.ddg-hero__stage {
		position: static;
		height: 78svh;
		min-height: 460px;
		max-height: 620px;
	}

	.ddg-hero__scene:not(.is-active) {
		display: none;
	}

	.ddg-hero__copy {
		bottom: 8%;
	}

	.ddg-hero__copy h1 {
		font-size: clamp(32px, 8.5vw, 44px);
	}

	.ddg-hero__copy p {
		font-size: 15px;
		margin-bottom: 20px;
	}

	/* Buttons go full width so neither is a small target next to the other. */
	.ddg-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ddg-hero__actions .ddg-btn {
		width: 100%;
	}

	/* The sticky add-to-cart bar sits over the end of the page, so the last
	   content needs room to clear it. */
	.ddg-single {
		padding-bottom: 90px;
	}

	/* Long product names in a two-column grid need a smaller measure. */
	.ddg-card__title {
		font-size: 13px;
	}

	.ddg-card__price {
		font-size: 19px;
	}

	.ddg-card__body {
		padding: 11px 11px 13px;
	}

	/* Tables that cannot shrink get a scroll container rather than pushing
	   the whole page sideways. */
	.ddg-page__wide table,
	.ddg-compare {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.ddg-page__wide .cart_totals,
	.ddg-page__wide #order_review {
		padding: 16px;
	}

	.ddg-page {
		padding-block: 28px 20px;
	}

	.ddg-page__header {
		margin-bottom: 22px;
	}
}

/* Nothing should be able to push the page sideways. Applied to body only:
   overflow-x on html disables position: sticky in most browsers, which would
   break the hero stage and the mobile add-to-cart bar. */
@media (max-width: 1024px) {

	body.ddg {
		max-width: 100%;
		overflow-x: clip;
	}
}