/**
 * Product card gallery thumbnails.
 *
 * Loaded solely in the card's "gallery" mode (functions.php), so colour mode ships no extra CSS.
 * Reuses the theme's .term-shape / .term-shape-bg / .term-shape-border geometry and only turns
 * the 26px round colour chip into a 42px rounded photo.
 *
 * Equal specificity with the theme rules (.variation-selector-type-image .term-shape); this file
 * wins because it is enqueued after the parent and child stylesheets.
 */

.minimog-child-gallery-selector .term-shape,
.minimog-child-gallery-selector .term-shape-bg,
.minimog-child-gallery-selector .term-shape-border {
	border-radius: 6px;
}

.minimog-child-gallery-selector .term-shape {
	width: 42px;
	height: 42px;
}

/* Theme marks selection by shrinking the image to 62% to reveal the ring; on a photo that reads as
   "the image got smaller", so keep the photo full bleed and let the ring do the marking. The photo's
   own 1px hairline (inset rgba(0,0,0,.1)) is dropped in that state, so the ring is the only line -
   the two would otherwise sit on the same pixels and double up on a curved edge. */
.minimog-child-gallery-selector .term-link:hover .term-shape-bg,
.minimog-child-gallery-selector .term-link.selected .term-shape-bg {
	transform: none;
	box-shadow: none;
}

/* Selection feedback is the theme's own ring (`.term-shape-border`) drawn on the box edge - i.e. on
   the photo's outermost pixels - instead of a second line somewhere else:
   - expanding it outwards (the first attempt) got clipped by the theme's product sliders, which are
     `.swiper { overflow: hidden }` whose clip box is exactly the card (left 2px of the first card,
     bottom 2px of every card);
   - insetting it by 2px (the second attempt) left the theme's 1px hairline visible underneath, so a
     selected thumbnail looked like it had two borders.
   At `--size: 100%; top: 0; left: 0` the ring sits on the box edge and can never leave it, so nothing
   is clipped wherever the card is rendered. Width stays at the theme's 1px; only the colour is
   re-pointed at the theme's brand colour (--minimog-color-primary), so it follows
   「主题设置 → 样式 → 颜色 → 通用颜色 → 主色」. */
.minimog-child-gallery-selector .term-link:hover .term-shape-border,
.minimog-child-gallery-selector .term-link.selected .term-shape-border {
	--size: 100%;
	top: 0;
	left: 0;
	border-color: var(--minimog-color-primary);
	opacity: 1;
}

/* -----------------------------------------------------------------------------
 * The thumbnails drive the image switching, so the theme's own hover-image swap is turned off on
 * the cards that render them: otherwise hovering anywhere on the card would fade the main image
 * out to the first gallery image and fight with the thumbnail under the pointer.
 * (Specificity beats the theme's `.minimog-product .has-hover-thumbnail ...` rules.)
 * -------------------------------------------------------------------------- */

.minimog-product .product.has-gallery-thumbnails .product-hover-image {
	display: none;
}

.minimog-product .product.has-gallery-thumbnails .product-thumbnail:hover .product-main-image {
	opacity: 1;
}

/* -----------------------------------------------------------------------------
 * How many thumbnails fit, decided by the card's own width.
 *
 * 42px thumb + 5px margin each side = 52px pitch - the theme's own rhythm, kept so the gallery
 * reads like the colour swatches it replaces (26px chips at the same 10px gap). .inner has -5px
 * side margins, so k items need k * 52 <= width + 10  ->  they fit from 52k - 10 px: 250 / 198 /
 * 146 / 94. The rules below hide an item once the width reaches that boundary, i.e. the exact-fit
 * case gives up one thumbnail rather than gambling on the last sub-pixel and wrapping.
 *
 * The count is also capped server-side (5, see functions.php), so on a 300px card the row is
 * 5 x 52 - 10 = 250px wide and leaves 50px at the end. That is tighter than the theme's colour
 * swatches, which put 5 x 36 - 10 = 170px in the same 300px and leave 130px.
 *
 * Hidden items are display:none, so their background images are never fetched - narrow cards get
 * both a single line and fewer requests.
 *
 * Container queries are supported by every current browser (Chrome 105 / Safari 16 / Firefox 110,
 * all 2022-2023); browsers without support get every rendered thumbnail on one line if it fits,
 * otherwise wrapped.
 * -------------------------------------------------------------------------- */

.minimog-child-gallery-selector {
	container-type: inline-size;
}

@container (max-width: 250px) {
	.minimog-child-gallery-selector .js-card-gallery-thumb:nth-child(n + 5) {
		display: none;
	}
}

@container (max-width: 198px) {
	.minimog-child-gallery-selector .js-card-gallery-thumb:nth-child(n + 4) {
		display: none;
	}
}

@container (max-width: 146px) {
	.minimog-child-gallery-selector .js-card-gallery-thumb:nth-child(n + 3) {
		display: none;
	}
}

@container (max-width: 94px) {
	.minimog-child-gallery-selector .js-card-gallery-thumb:nth-child(n + 2) {
		display: none;
	}
}