/* ==========================================================================
   POPULAR PRODUCTS CAROUSEL

   The stock product carousel, plus three things and nothing else:

     1. a section flag
     2. dividers between items
     3. space around each image

   Nothing here touches the product image, its size, its alignment or the slide
   layout. The stock component handles those, and the several attempts to
   improve on them are what broke it. If a picture looks wrong, the answer is a
   stock setting, not a rule in this file.
   ========================================================================== */

:host {
	display: block;
}

/* Carousel Width.

   The cap is on the PRODUCTS, not on the whole component. The flag stays at the full width of the
   container and sits against its edge, while the row of products is narrower and centred - which is
   the arrangement in the homepage mockup.

   It is our own div rather than the slider element, because the slider writes its own max-width
   inline while paging and anything of ours there would be discarded, the same way the slide padding
   was. Constraining a wrapper around it leaves the slider to measure the narrower box and lay
   itself out normally. */

.popular-products-carousel__products {
	margin-inline: auto;
	max-width: var(--popular-products-carousel__max-width, none);
}


/* 1. The flag
   ==========================================================================
   The same shape as the Hero Banner callout, which is the flag already in use on this store: a
   rectangle with one end cut on the diagonal, not an arrow.

   Every value is a custom property published by flagStyles() from the editor's settings, with a
   literal fallback so the flag still renders if a setting is blank.
   ========================================================================== */

.popular-products-carousel__flag {
	align-items: center;
	background-color: var(--popular-products-carousel__flag-background, #26213f);
	border-radius: var(--popular-products-carousel__flag-radius, 5px);
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	margin-bottom: var(--popular-products-carousel__flag-gap, 24px);
	max-width: 100%;
	padding:
		var(--popular-products-carousel__flag-padding-top, 10px)
		var(--popular-products-carousel__flag-padding-right, 24px)
		var(--popular-products-carousel__flag-padding-bottom, 10px)
		var(--popular-products-carousel__flag-padding-left, 24px);
	text-align: center;
	width: max-content;
}

/* Line height, kept out of the block above so a theme can set its own. It was declared on the bare
   class, which no theme can beat without !important - a one-line rule that quietly flattened the
   leading of every themed flag. */

.popular-products-carousel__flag:not([data-theme]) {
	line-height: 1.15;
}

/* Uppercase is on by default, so this too was overriding every theme's own text-transform. Guarded
   for the same reason as the three below. */

.popular-products-carousel__flag[data-uppercase="true"]:not([data-theme]) {
	text-transform: uppercase;
}

/* Flag Typography, and why size, spacing and colour are not in the rule above.
   ==========================================================================
   The flag is a plain div in this component's shadow root, not an mmx-text - the point is a measured
   clip-path on [part~="flag"], and another component around it would put a shadow boundary between
   the measurement and the box. So the theme has to be brought in by hand:
   flagThemeStylesheet() copies the host's <template data-theme-stylesheet> into styles(), and
   renderFlag() puts the theme's classname and a data-theme marker on the element. Miva compiles
   Override Styles into that stylesheet, which is where font family comes from despite there being no
   font field in this group.

   font-size, letter-spacing and color used to sit in the base rule with literal fallbacks, which
   meant a default nobody had touched competed with the theme on source order alone. They are gated
   here instead: [data-own-*] when the field has a value, and :not([data-theme]) so the untouched
   default steps aside for a theme.

   Two compound selectors out-specify any single class, so an explicit setting always beats the theme;
   with data-theme present the default guard cannot match at all, so the theme applies unopposed; and
   with neither, the fallbacks are the original values.

   The guard was first written as :not(.mmx-theme-text) - a class that does not exist. A typography
   theme produces mm-theme-typography-<code>, so the guard excluded nothing and the higher-specificity
   default beat every theme ever chosen. data-theme is written by renderFlag() itself, so this cannot
   be wrong about a name a second time. */

.popular-products-carousel__flag:not([data-own-size]):not([data-theme]) {
	font-size: var(--popular-products-carousel__flag-font-size, 1.5rem);
}

.popular-products-carousel__flag:not([data-own-color]):not([data-theme]) {
	color: var(--popular-products-carousel__flag-color, #ffffff);
}

/* THE GUARD BELONGS ON BOTH BRANCHES, and for a long time it was only on one.

   These three rules are the reason a typography theme did nothing to the flag. Each has a sibling
   above it carrying :not([data-own-*]):not([data-theme]) - correctly standing aside for a theme -
   while the rule that fires when the field HAS a value carried no such exclusion. And every field
   has a value, because the component ships defaults into Font Size, Letter Spacing and Text Colour.
   So the unguarded branch was always the one that ran, and the theme always lost.

   Same mistake in a different costume as the Section Grid buttons: a control that is never empty,
   because we filled it, silently outranking the control being changed.

   The rule now: pick a typography and the typography wins. The manual fields still apply when no
   theme is selected, which is what they are for. Nothing is lost when a theme is on - a Miva
   typography declares font size, letter spacing, colour, line height and text transform itself. */

.popular-products-carousel__flag[data-own-size]:not([data-theme]) {
	font-size: var(--popular-products-carousel__flag-font-size, 1.5rem);
}

.popular-products-carousel__flag[data-own-spacing]:not([data-theme]) {
	letter-spacing: var(--popular-products-carousel__flag-letter-spacing, normal);
}

.popular-products-carousel__flag[data-own-color]:not([data-theme]) {
	color: var(--popular-products-carousel__flag-color, #ffffff);
}

/* The point is cut OUT of the flag rather than added to it, so its box stays a plain rectangle and
   the layout around it is unaffected by the shape.

   Each of these is the straight-edged polygon with --flag-clip as an override: a polygon cannot
   have rounded vertices, so a corner radius makes the JS replace the whole thing with a measured
   path() carrying an arc at every vertex.

   The point's width is added to the padding on whichever side it sits, so the editor's four padding
   numbers stay symmetrical and the label stays centred in the square part of the flag. */

.popular-products-carousel__flag[data-point="right"] {
	clip-path: var(--popular-products-carousel__flag-clip, polygon(0 0, calc( 100% - var(--popular-products-carousel__flag-point, 25px) ) 0, 100% 100%, 0 100%));
	padding-right: calc( var(--popular-products-carousel__flag-padding-right, 24px) + var(--popular-products-carousel__flag-point, 25px) );
}

.popular-products-carousel__flag[data-point="right"][data-flip="true"] {
	clip-path: var(--popular-products-carousel__flag-clip, polygon(0 0, 100% 0, calc( 100% - var(--popular-products-carousel__flag-point, 25px) ) 100%, 0 100%));
}

.popular-products-carousel__flag[data-point="left"] {
	clip-path: var(--popular-products-carousel__flag-clip, polygon(var(--popular-products-carousel__flag-point, 25px) 0, 100% 0, 100% 100%, 0 100%));
	padding-left: calc( var(--popular-products-carousel__flag-padding-left, 24px) + var(--popular-products-carousel__flag-point, 25px) );
}

.popular-products-carousel__flag[data-point="left"][data-flip="true"] {
	clip-path: var(--popular-products-carousel__flag-clip, polygon(0 0, 100% 0, 100% 100%, var(--popular-products-carousel__flag-point, 25px) 100%));
}

.popular-products-carousel__flag[data-position="top-right"],
.popular-products-carousel__flag[data-position="bottom-right"] {
	margin-left: auto;
}

/* A bottom corner puts the flag after the products. order needs a flex container, and the wrapper
   only becomes one when that is actually the case - so the normal layout is left exactly as the
   stock component had it. */

.popular-products-carousel[data-has-trailing-flag] {
	display: flex;
	flex-direction: column;
}

.popular-products-carousel__flag[data-position="bottom-left"],
.popular-products-carousel__flag[data-position="bottom-right"] {
	margin-bottom: 0;
	margin-top: var(--popular-products-carousel__flag-gap, 24px);
	order: 2;
}


/* 2. Dividers, and 3. space around each image
   ==========================================================================
   Both live on the slide, because the gap between slides belongs to mmx-hero-slider's shadow root
   and nothing outside it can reach in there.

   The divider is a background gradient rather than a border-left, because a border cannot be inset
   from the top and bottom, and that inset is what stops the rule running the full height of a tall
   slide. It is drawn on every slide except the first, so there is no line before the row starts.

   The spacing is NOT set here. mmx-hero-slider writes slide.style.paddingLeft inline on every
   slide from its own gap, and inline beats a stylesheet - a padding rule here loses its left half
   and keeps its right, which is what made the spacing lopsided. Space Between Images is handed to
   the slider as that gap instead, in the JS.
   ========================================================================== */

[part~="product"] + [part~="product"] {
	background-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--popular-products-carousel__divider-inset, 0px),
		var(--popular-products-carousel__divider-color, #111111) var(--popular-products-carousel__divider-inset, 0px),
		var(--popular-products-carousel__divider-color, #111111) calc(100% - var(--popular-products-carousel__divider-inset, 0px)),
		transparent calc(100% - var(--popular-products-carousel__divider-inset, 0px))
	);
	/* Centred in the gap: the slider pads each slide on the left by exactly the gap, so half of it
	   puts the line midway between one image and the next. */
	background-position: calc( var(--popular-products-carousel__item-gap, 0px) / 2 ) center;
	background-repeat: no-repeat;
	background-size: var(--popular-products-carousel__divider-thickness, 0px) 100%;
}


/* Phones
   ==========================================================================
   The dividers come off below 768px. At one or two items per view the line lands between a product
   and the edge of the screen rather than between two products, and a rule that separates nothing is
   just a mark on the page.

   background-size rather than display or background-image: none - the same reason the off switch
   uses zero thickness. Nothing about the slide's box changes, so the row cannot shift when the
   breakpoint is crossed.
   ========================================================================== */

@media ( max-width: 47.9375em ) {

	[part~="product"] + [part~="product"] {
		background-size: 0 100%;
	}

}