@media (max-width: 1199px) {

	.site-footer__container {
		min-height: 0;
		padding-top: 50px;
	}

	/*
	 * Tablet layout:
	 *
	 * Search Wines | Information | Trade
	 * Legal content across all three columns
	 */
	.site-footer__row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-areas:
			"search information trade"
			"legal legal legal";
		column-gap: 40px;
		row-gap: 60px;

		align-items: start;
	}

	.site-footer__search {
		grid-area: search;
	}

	.site-footer__information {
		grid-area: information;
	}

	.site-footer__trade {
		grid-area: trade;
	}

	.site-footer__legal {
		grid-area: legal;
	}

	/*
	 * Override the framework column widths because the footer
	 * elements are controlled by CSS Grid at tablet size.
	 */
	.site-footer__search,
	.site-footer__information,
	.site-footer__trade,
	.site-footer__legal {
		width: 100%;
		max-width: none;
		min-width: 0;
		flex: none;
	}

	/*
	 * Allow the legal copy to use the full footer width.
	 */
	.site-footer__legal-copy {
		max-width: none;
	}


	
	.main-navigation {
		gap: 5px 15px;
	}
	
	.site-logo img {
		width: 100%;
		max-width: 205px;
	}
	
		
	.our-wines-product-badge {
		  display: block;
		  width: 60px;
		  height: 60px;
		  object-fit: contain;
	  }
	
	
		.discover-wines-feature {
			display: none;
		}
	
	
}




/* ============================================================
   PRODUCT + BRAND ARCHIVE FILTER OVERLAY
   Shared tablet/mobile behaviour at 991px and below.
   ============================================================ */

@media (max-width: 991px) {
	
	

	
	
	.vw-content-form--main-right .vw-content-form__side {
		padding-inline-end: 0;
	}
	
	.vw-content-form--main-left .vw-content-form__side {
		padding-inline-start: 0;
	}

	.vw-content-form__side-column {
		position: static;
		top: auto;
		align-self: auto;
	}

	
	.vw-content-form .row { 
	gap: 60px var(--grid-column-gap);
	}
	
	.our-wines-results, .vw-brands-results {
		margin-top: 15px;
	}
	

	.our-wines-product-title {
		padding-top: 1rem;
	}

	.vw-archive-mobile-filter-bar {
		position: sticky;
		top: calc(var(--vwc-header-top-offset) + var(--vwc-header-height) + 1px);
		z-index: 95;
		display: block;
		width: 100%;
		border-bottom: 1px solid rgba(143, 148, 94, 0.3);
		background: var(--color-background);
	}


	/*
	 * When either archive filter drawer is open, the archive JavaScript
	 * freezes the body at its current scroll position. Sticky descendants
	 * can otherwise be recalculated against that shifted body and jump to
	 * the top of the viewport. Pin the complete mobile header stack to the
	 * viewport while the overlay is active.
	 */
	html.vw-mobile-filter-overlay-open .site-header {
		position: fixed;
		top: var(--vwc-header-top-offset);
		right: 0;
		left: 0;
		width: 100%;
	}

	html.vw-mobile-filter-overlay-open .vw-archive-mobile-filter-bar {
		position: fixed;
		top: calc(var(--vwc-header-top-offset) + var(--vwc-header-height));
		right: 0;
		left: 0;
		z-index: 95;
		width: 100%;
	}

	/*
	 * Reset the shared desktop sticky/flex sidebar structure.
	 * Both archives now use:
	 * sidebar > sidebar-inner > sidebar-header + filter-panel.
	 */
	.our-wines-sidebar,
	.vw-brands-sidebar {
		position: static;
		top: auto;
		align-self: auto;
		min-width: 0;
	}

	.our-wines-sidebar-inner,
	.vw-brands-sidebar-inner {
		display: block;
		min-height: 0;
		max-height: none;
	}

	.our-wines-sidebar h1,
	.vw-brands-sidebar h1 {
		margin-bottom: 0;
	}

	/*
	 * Closed mobile filter panels are removed from document flow.
	 * This keeps the archive content in place until the overlay opens.
	 */
	.our-wines-filter-panel,
	.vw-brands-filters {
		display: none;
		flex: none;
		width: 100%;
		min-height: 0;
		margin: 0;
		padding-right: 0;
		overflow: visible;
	}

	/*
	 * The open filter panel is fixed beneath the mobile filter bar.
	 * It scrolls independently while the page behind remains locked.
	 */
	.our-wines-filter-panel.is-open,
	.vw-brands-filters.is-open {
		position: fixed;
		top: var(
			--vw-mobile-filter-top,
			calc(var(--vwc-header-top-offset) + var(--vwc-header-height) + 3.125rem)
		);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		display: block;
		width: auto;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scroll-padding-block: 1rem;
		padding: 0.25rem 1.25rem max(2.5rem, env(safe-area-inset-bottom));
		background: var(--color-background);
		-webkit-overflow-scrolling: touch;

		/* Hide scrollbars without disabling scrolling. */
		-ms-overflow-style: none;
		scrollbar-width: none;
	}


	/*
	 * Use the known sticky header and filter-bar heights while the page is
	 * scroll-locked. This deliberately overrides --vw-mobile-filter-top,
	 * which can contain a stale viewport measurement after body locking.
	 */
	html.vw-mobile-filter-overlay-open .our-wines-filter-panel.is-open,
	html.vw-mobile-filter-overlay-open .vw-brands-filters.is-open {
		top: calc(
			var(--vwc-header-top-offset) +
			var(--vwc-header-height) +
			3.125rem +
			1px
		);
	}

	.our-wines-filter-panel.is-open::-webkit-scrollbar,
	.vw-brands-filters.is-open::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.our-wines-filter-group,
	.vw-brands-filter-section {
		border-bottom: 0;
	}

	.our-wines-filter-group:first-child,
	.vw-brands-filter-section:first-child {
		margin-top: 0;
	}

	.our-wines-filter-group summary,
	.vw-brands-filter-toggle {
		min-height: 3.125rem;
		border-bottom: 1px solid var(--color-border);
	}

	/*
	 * Keep the Brands accordion divider visible while a toggle button is
	 * hovered, focused or pressed. The desktop button-state rule resets the
	 * complete border, which otherwise wins on mobile due to higher selector
	 * specificity and makes dividers appear to switch on and off.
	 */
	.vw-brands-filter-toggle:hover,
	.vw-brands-filter-toggle:focus,
	.vw-brands-filter-toggle:focus-visible,
	.vw-brands-filter-toggle:active {
		border: 0;
		border-bottom: 1px solid var(--color-border);
		color: var(--color-heading);
		background: transparent;
	}

	.vw-brands-filter-panel {
		padding: 0;
	}

	.our-wines-filter-list,
	.vw-brands-filter-list {
		padding: 1.25rem 0 1.875rem;
	}
	
	.our-wines-selected-filters:not(:has(.our-wines-selected-filter)) {
		display: none;
	}
	
	
	.vw-blogs__row {
		row-gap: 3.5rem;
	}
	
	.vw-content-form.vw-component--first {
		padding-top:0;
	}
}


/* ============================================================
   TABLET / MOBILE HEADER BREAKPOINT
   Switch to the mobile header at 1023px and below.
   ============================================================ */

@media (max-width: 1023px) {

	:root {
		--vwc-header-height: 64px;
	}

	/* Hide every desktop-only header layer. */
	.site-header .menu-trade,
	.site-header .menu-main,
	.site-header .discover-wines-dropdown {
		display: none !important;
	}

	/*
	 * The desktop Discover Wines overlay may still be open when the
	 * viewport crosses this breakpoint. Keep it out of the tablet/mobile
	 * presentation while the header JavaScript resets its open state.
	 */
	.site-header-overlay {
		display: none !important;
	}


	/* Mobile header container */
	.site-header-mobile {
		position: relative;
		z-index: 1000;
		display: block;
		width: 100%;
	}
	
	
	.discover-wines-search {
		padding-left:var(--container-inline-padding);
		padding-right:var(--container-inline-padding);
	}


	/* Main mobile header bar */
	.mobile-header-bar {
		display: grid;
		grid-template-columns: 24px minmax(0, 1fr) 24px;
		align-items: center;
		width: 100%;
		min-height: 64px;
		padding-top:20px;
		padding-bottom:20px;
		padding-left: var(--container-inline-padding);
		padding-right: var(--container-inline-padding);
		background: #fffff7;
		border-bottom: 1px solid rgba(143, 148, 94, 0.3);
		box-sizing: border-box;
	}


	/* ========================================================
	   MOBILE LOGO
	   ======================================================== */

	.mobile-site-logo {
		grid-column: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-self: center;
		width: 167px;
		max-width: 100%;
		margin: 0;
		padding: 0;
		line-height: 0;
		text-decoration: none;
	}

	.mobile-site-logo img {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}


	/* ========================================================
	   MENU AND LOGIN LINKS
	   Both controls are <a> elements.
	   ======================================================== */

	.mobile-menu-toggle,
	.mobile-trade-login {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: 24px;

		margin: 0;
		padding: 0;
		color: #5d622f;
		background: transparent;
		border: 0;
		border-radius: 0;
		font-size: 16px;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		box-shadow: none;
		appearance: none;
		-webkit-appearance: none;
		box-sizing: border-box;
	}

	.mobile-menu-toggle {
		grid-column: 1;
		justify-self: start;
		cursor: pointer;
	}

	.mobile-trade-login {
		grid-column: 3;
		justify-self: end;
	}

	.mobile-menu-toggle i,
	.mobile-trade-login i {
		display: block;
		width: 16px;
		height: 16px;
		margin: 0;
		padding: 0;
		font-size: 16px;
		line-height: 16px;
		text-align: center;
		pointer-events: none;
	}

	.mobile-menu-toggle:hover,
	.mobile-menu-toggle:focus,
	.mobile-menu-toggle:focus-visible,
	.mobile-trade-login:hover,
	.mobile-trade-login:focus,
	.mobile-trade-login:focus-visible {
		color: #3f431f;
		background: transparent;
		text-decoration: none;
	}

	.mobile-menu-toggle:focus {
		outline: none;
	}

	.mobile-menu-toggle:focus-visible,
	.mobile-trade-login:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 4px;
	}


	/* ========================================================
	   EXPANDED MOBILE NAVIGATION
	   ======================================================== */

	.mobile-navigation-panel {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 999;
		width: 100%;
		height: calc(100vh - var(--vwc-header-top-offset) - var(--vwc-header-height));
		height: calc(100dvh - var(--vwc-header-top-offset) - var(--vwc-header-height));
		overflow-x: hidden;
		overflow-y: auto;
		background: #fffff7;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}

	.mobile-navigation-panel[hidden] {
		display: none;
	}

	.mobile-navigation-inner {
		width: 100%;
		padding-left:var(--container-inline-padding);
		padding-right:var(--container-inline-padding);
		box-sizing: border-box;
	}


	/* Discover wines heading */
	
	.discover-wines-title {
		color: var(--color-heading);
		font-size: var(--font-size-h4);
	}
	
	.discover-wines-title a {
		color:inherit;
		text-decoration: none;
	}
	
	.discover-wines-title a:hover {
		text-decoration: none;
		
	}
	
	.mobile-navigation-discover {
		display: flex;
		padding-top:30px;
		color: var(--color-heading);
		font-size: var(--font-size-h4);
	}
	
	
	.discover-wines-icons {
		bottom:5px;
	}


	/* Navigation groups */

	.mobile-main-navigation,.mobile-trade-navigation {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	.mobile-trade-navigation {
		padding:20px;
		margin-top:30px;
		background:var(--color-background-creame);
		text-transform: uppercase;
	}
	
	
	.discover-wines-search input[type="search"] {
		font-size: 16px;
	}
	
		
	.discover-wines-search > i {
		flex: 0 0 auto;
		margin-right: 12px;
		color: var(--color-heading);
		font-size: 16px;
	}
	


	.mobile-main-navigation {
		padding-top: 15px;

	}

	.mobile-main-navigation a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		color: #5d622f;
		font-size: var(--font-size-h4);
		font-family: var(--font-family-heading);
		line-height: 1.3;
		text-decoration: none;
		box-sizing: border-box;
	}

	.mobile-trade-navigation a {
		text-decoration: none;
		padding:8px 0;
		color:var(--color-text);
	}
	
	.mobile-trade-navigation h6 {
		color:var(--color-text);
		font-size: var(--font-size-body);
	}
	
	.mobile-main-navigation a {
		padding:15px 0;

	}


	/* Prevent page scrolling while the menu is open */

	body.mobile-menu-open {
		overflow: hidden;
	}
	
	.our-wines-product-media {
	padding-bottom:20px;
	}

	
}


/* WordPress increases the admin bar height on narrow screens. */
@media (max-width: 782px) {
	body.admin-bar {
		--vwc-header-top-offset: 46px;
	}
}


/* ============================================================
   MOBILE CONTENT BREAKPOINT
   ============================================================ */

@media (max-width: 767px) {
	

	 .vw-brands-archive, .our-wines-archive, .vw-news-archive {
		padding-block: 2rem 4rem;
	  }

	  
	  .our-wines-product-badge {
		  display: block;
		  width: 70px;
		  height: 70px;
		  object-fit: contain;
	  }

	
	  .our-wines-product-media {
		height: 20rem;
	  }
	
	  .our-wines-product-image {
		max-height: 18rem;
	  }
	
	  .our-wines-product-title {
		padding-inline: 1rem;
		font-size: 0.9375rem;
	  }
	
	  .our-wines-product-badges {
		top: 1rem;
		left: 0.75rem;
	  }
	
	  .our-wines-skeleton-media {
		height: 18rem;
	  }
	
	

	
	.site-footer__container {
		min-height: 0;
		padding-top: 50px;
		padding-bottom:80px;
	}
	
	/*
	 * Mobile layout:
	 *
	 * Information | Trade
	 * Legal content across both columns
	 */
	.site-footer__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"information trade"
			"legal legal";
		column-gap: 32px;
		row-gap: 60px;
	
		align-items: start;
	}
	
	/*
	 * Hide the Search Wines column entirely on mobile.
	 */
	.site-footer__search {
		display: none;
	}
	
	.site-footer__information {
		grid-area: information;
	}
	
	.site-footer__trade {
		grid-area: trade;
	}
	
	.site-footer__legal {
		grid-area: legal;
	}
	
	/*
	 * Override the framework column widths because the footer
	 * elements are controlled by CSS Grid.
	 */
	.site-footer__information,
	.site-footer__trade,
	.site-footer__legal {
		width: 100%;
		max-width: none;
		min-width: 0;
		flex: none;
	}
	
	.site-footer__legal-copy {
		max-width: none;
	}
	
	.site-footer__heading {
		margin-bottom: 18px;
	}
	
	.site-footer__watermark {
	right: -70px;
	width: 340px;
	height: auto;
	bottom: -40px;
	}
	
	
	

}