/*
 * Phone track - on phones the item sliders become one scrolling row.
 *
 * Applies only to an element the phone track script has claimed (.av-phone-track), never to a
 * running slider: the slide wrappers stop generating a box here, and a slider driving boxless
 * wrappers ends up animating nothing and measuring a height of zero.
 *
 * The layout itself is not inside a media query. A claimed element stays claimed for the life of
 * the page, so it has to hold up at every width the visitor can rotate to - only the number of
 * items per screen changes. Above the phone breakpoint that number is the element's own column
 * count, which the script reads off the slides it flattened and hands over in --av-track-cols.
 *
 * The widths are declared rather than inherited. The mobile rules these elements ship carry the
 * old grouping in them - the first item of every group is full width on odd column counts, the
 * gutter is zeroed on alternate items, and the last product of each group loses its margin - all
 * of which read as holes and skipped items once the items sit in a single row.
 */

.responsive #top .av-phone-track .slide-entry-wrap
{
	display: contents;
	visibility: visible !important;		/*	a slider that paged before it was frozen left this hidden	*/
}

.responsive #top .av-phone-track .avia-content-slider-inner
{
	--av-track-cols: var( --av-track-cols-default, 3 );		/*	the script sets the default to the element's own column count	*/
	--av-track-gap: 4%;

	display: flex;
	flex-wrap: nowrap;
	gap: var( --av-track-gap );
	overflow-x: auto;
	overflow-y: hidden;
	height: auto !important;		/*	the slider writes a pixel height inline	*/
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

/*
 *	A pointer device would park a scrollbar under the row for good, which is not what a slider
 *	should look like - the arrows say it scrolls there. Touch keeps whatever bar the system shows
 *	while scrolling, which is the usual overlay one and says the same thing at the right moment.
 *	An element whose item count never exceeded its column count ships without arrows, so that one
 *	keeps its bar: it would otherwise have nothing at all to say it holds more.
 */
@media ( hover: hover ) and ( pointer: fine )
{
	.responsive #top .av-phone-track:not( .av-track-no-arrows ) .avia-content-slider-inner
	{
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.responsive #top .av-phone-track:not( .av-track-no-arrows ) .avia-content-slider-inner::-webkit-scrollbar
	{
		display: none;
		width: 0;
		height: 0;
	}
}

.responsive #top #wrap_all .av-phone-track .slide-entry,
.responsive #top #wrap_all .av-phone-track .products .product
{
	--av-track-item: calc( ( 100% - ( var( --av-track-cols ) - 1 ) * var( --av-track-gap ) ) / var( --av-track-cols ) );

	flex: 0 0 var( --av-track-item );
	width: var( --av-track-item ) !important;
	max-width: var( --av-track-item );
	margin: 0 !important;
	visibility: visible !important;
	scroll-snap-align: start;
}

/*	the dots count the slides the server built, which is no longer what a swipe moves	*/
.responsive #top .av-phone-track .avia-slideshow-dots
{
	display: none;
}

@media only screen and (max-width: 767px)
{
	.responsive #top .av-phone-track .avia-content-slider-inner
	{
		--av-track-cols: 2;
	}
}

@media only screen and (max-width: 479px)
{
	.responsive #top .av-phone-track .avia-content-slider-inner
	{
		--av-track-cols: 1;
	}
}