/**
 * The add-on block on the product page, and the way add-ons read in the cart.
 * Sizes are kept modest so the block sits inside a theme's product summary
 * without pushing the Add to cart button off the screen.
 */

/*
 * The block must never widen the page.
 *
 * A flex or grid child defaults to min-width:auto, which means it refuses to
 * shrink below its content: a row of tiles then pushes the whole column wider
 * instead of scrolling or wrapping inside it. min-width:0 is what lets it
 * shrink, so overflow becomes a wrap or a scroll rather than a wider page.
 */
/*
 * Fitting into whatever the theme lays the add-to-cart form out as.
 *
 * WooCommerce's own block theme makes the form a grid with
 * "grid-auto-flow: column" and pins the button to column 2. Dropping this block
 * in adds a third item, which takes a column of its own and pushes the button
 * across the row. Other themes use a flex row, which does not wrap by default,
 * so a full-width child would squeeze the quantity and button instead.
 *
 * Asking for row flow and allowing a wrap covers both, and :has() keeps it to
 * forms that actually contain the block, so no other form on the site changes.
 */
form.cart:has(.wcaq-set),
.cart:has(.wcaq-set),
.wp-block-woocommerce-add-to-cart-form form.cart:has(.wcaq-set) {
	grid-auto-flow: row;
	flex-wrap: wrap;
}

.wcaq-set {
	margin: 18px 0;
	clear: both;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;

	/*
	 * Claim the whole row, in a grid form and a flex form alike. A grid item
	 * ignores flex-basis and a flex item ignores grid-column, so both are given
	 * and whichever applies wins; in a plain block form the width does the job.
	 */
	grid-column: 1 / -1;
	flex: 1 0 100%;
	width: 100%;
}

.wcaq-set * {
	box-sizing: border-box;
}

.wcaq-set-link {
	display: inline-block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
}

.wcaq-set-title {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.wcaq-required {
	color: #b32d2e;
	border: 0;
	text-decoration: none;
}

.wcaq-set-help {
	margin: 0 0 10px;
	font-size: 13px;
	color: #666;
}

.wcaq-set-note {
	margin: 8px 0 0;
	font-size: 12px;
	color: #666;
}

/* --- grid ---------------------------------------------------------------- */

/*
 * As many tiles as genuinely fit, never narrower than the minimum.
 *
 * The track is deliberately a plain minmax(fixed, 1fr): an earlier version
 * divided a percentage by the column count to aim for an exact number across,
 * and when the containing width is not definite — which is common inside a
 * theme's product summary — that calculation falls back to sizing on content,
 * so the tiles ballooned and pushed the page sideways. A fixed minimum cannot
 * do that.
 *
 * "Items across" is applied as a cap on the block's width instead, so it still
 * means at most that many, while 100% always wins in a narrow column.
 */
.wcaq-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--wcaq-tile-min, 96px), 1fr));
	gap: var(--wcaq-gap, 10px);
	min-width: 0;
	max-width: min(
		100%,
		calc(
			var(--wcaq-columns, 6) * var(--wcaq-tile-min, 96px)
			+ (var(--wcaq-columns, 6) - 1) * var(--wcaq-gap, 10px)
		)
	);
}

.wcaq-item {
	min-width: 0;
	overflow-wrap: anywhere;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: var(--wcaq-tile-padding, 8px);
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	text-align: center;
	cursor: pointer;
}

.wcaq-item-title {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: #222;
	word-break: break-word;
}

/* Fixed box, contained image: the whole part shows whatever shape it is. */
.wcaq-item-image {
	display: block;
	width: 100%;
	height: var(--wcaq-image-height, 58px);
}

.wcaq-item-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wcaq-item-noimage {
	display: block;
	width: 100%;
	height: 100%;
	background: #f3f4f5;
	border-radius: 4px;
}

.wcaq-item-price {
	font-size: 12px;
	line-height: 1.3;
	color: #444;
}

/* WooCommerce puts the old price in <del> on a sale; keep it readable but quiet. */
.wcaq-item-price del {
	opacity: .6;
	margin-right: 3px;
}

.wcaq-item-price ins {
	text-decoration: none;
	font-weight: 700;
}

.wcaq-qty {
	width: 56px;
	padding: 4px;
	text-align: center;
	font-size: 13px;
}

.wcaq-pick {
	font-size: 12px;
	cursor: pointer;
}

.wcaq-item.wcaq-chosen {
	border-color: #1273c6;
	box-shadow: 0 0 0 1px #1273c6 inset;
}

.wcaq-set.wcaq-missing {
	outline: 2px solid #b32d2e;
	outline-offset: 6px;
}

/* --- slider -------------------------------------------------------------- */

/*
 * The same absolute cap the grid uses, and for the same reason: a scrolling
 * flex track still reports its content width to an ancestor that has no
 * definite width of its own, so "max-width: 100%" alone can resolve against a
 * column the track itself has stretched. A ceiling in real pixels cannot.
 * The 56px covers this element's own left and right padding, where the arrows
 * sit, because box-sizing is border-box.
 */
/*
 * The arrows and the track share a frame, so the arrows sit against the track
 * rather than at the far edges of a full-width block. The frame is built by
 * assets/js/frontend.js around the track it finds.
 */
.wcaq-slider-frame {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	/*
	 * An absolute ceiling, not a percentage. The frame's own width depends on
	 * its contents, so a percentage here would be measured against a box the
	 * contents are still deciding: the track would report the full width of
	 * every tile and stretch the column. 60px covers the two arrows and their
	 * gaps.
	 */
	max-width: calc(
		var(--wcaq-columns, 6) * var(--wcaq-tile-min, 96px)
		+ (var(--wcaq-columns, 6) - 1) * var(--wcaq-gap, 10px)
		+ 60px
	);
	width: 100%;
}

.wcaq-layout-slider .wcaq-items {
	display: flex;
	gap: var(--wcaq-gap, 10px);
	/*
	 * No width:100% here. As a flex item in an auto-width frame, a percentage
	 * width is indefinite while the frame is being sized, so the track falls
	 * back to the width of all its tiles. flex lets it fill what the frame
	 * allows, and the absolute ceiling keeps it honest.
	 */
	flex: 1 1 0;
	min-width: 0;
	max-width: calc(
		var(--wcaq-columns, 6) * var(--wcaq-tile-min, 96px)
		+ (var(--wcaq-columns, 6) - 1) * var(--wcaq-gap, 10px)
	);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;

	/* The arrows are the control here, so the browser's own scrollbar is not
	   needed and its permanent gutter was crowding the tiles. Swipe and keyboard
	   scrolling still work. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wcaq-layout-slider .wcaq-items::-webkit-scrollbar {
	display: none;
}

/*
 * 0 0 on the flex shorthand is what stops a short row stretching its tiles
 * across the full width. The basis is the same calculation the grid uses, so
 * both layouts size a tile identically.
 */
.wcaq-layout-slider .wcaq-item {
	flex: 0 0 var(--wcaq-tile-min, 96px);
	scroll-snap-align: start;
}

.wcaq-arrow {
	flex: 0 0 auto;
	width: 24px;
	height: 40px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* An arrow with nothing left to scroll to stays in place but reads as spent. */
.wcaq-arrow[disabled] {
	visibility: hidden;
}

/* --- list ----------------------------------------------------------------
 * One option per row: photo, code, price, quantity. Nothing here is sized as a
 * fraction of the row, so a narrow theme column costs it nothing, which makes
 * it the safest of the three layouts in a tight product summary.
 * ------------------------------------------------------------------------ */

.wcaq-layout-list .wcaq-items {
	display: flex;
	flex-direction: column;
	gap: var(--wcaq-gap, 10px);
	min-width: 0;
	max-width: 100%;
}

.wcaq-layout-list .wcaq-item {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	text-align: left;
	padding: var(--wcaq-tile-padding, 8px);
}

/* The markup order is title, photo, price, quantity; a row reads better as
   photo, title, price, quantity, so the pieces are reordered rather than
   duplicated in the template. */
.wcaq-layout-list .wcaq-item-image {
	order: 1;
	flex: 0 0 auto;
	width: var(--wcaq-tile-min, 96px);
	height: var(--wcaq-image-height, 58px);
}

.wcaq-layout-list .wcaq-item-title {
	order: 2;
	flex: 0 0 auto;
	min-width: 60px;
}

.wcaq-layout-list .wcaq-item-price {
	order: 3;
	flex: 1 1 auto;
	text-align: right;
}

.wcaq-layout-list .wcaq-qty,
.wcaq-layout-list .wcaq-pick {
	order: 4;
	flex: 0 0 auto;
}

@media (max-width: 480px) {
	.wcaq-layout-list .wcaq-item-image {
		width: 64px;
	}

	.wcaq-layout-list .wcaq-item-price {
		text-align: left;
	}
}

/* --- the cart ------------------------------------------------------------ */

/*
 * An add-on belongs to the item above it, so it is tucked under that item
 * rather than ruled off as a purchase of its own. The dividing line between a
 * parent and its add-ons is removed, the add-on is indented, and a single rule
 * runs down the left of the group to hold them together visually. The next
 * ordinary line gets its divider back, so separate purchases still read apart.
 */

/* Classic cart template. */
.wcaq-child-item > td {
	border-top: 0 !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

.wcaq-child-item td.product-name {
	padding-left: 34px;
	position: relative;
}

.wcaq-child-name::before {
	content: "\21B3";
	margin-right: 6px;
	opacity: .45;
}

.wcaq-child-qty {
	opacity: .8;
}

/* Cart block. The rows are tagged by assets/js/cart.js. */
.wc-block-cart-items__row.wcaq-nested > td,
.wc-block-cart-items__row.wcaq-nested > th {
	border-top: 0 !important;
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

.wc-block-cart-items__row.wcaq-nested .wc-block-cart-item__image {
	padding-left: 26px;
	position: relative;
}

/* The connector: a short rule down the left of the add-on group. */
.wc-block-cart-items__row.wcaq-nested .wc-block-cart-item__image::before {
	content: "";
	position: absolute;
	left: 8px;
	top: -6px;
	bottom: 0;
	width: 2px;
	background: currentColor;
	opacity: .16;
}

.wc-block-cart-items__row.wcaq-nested-last .wc-block-cart-item__image::before {
	bottom: 50%;
}

/* Add-ons sit tight under their parent, so the parent loses its lower gap. */
.wc-block-cart-items__row.wcaq-has-nested > td,
.wc-block-cart-items__row.wcaq-has-nested > th {
	padding-bottom: 4px !important;
}

/* A smaller photo, so an add-on never outweighs the item it belongs to. */
.wc-block-cart-items__row.wcaq-nested .wc-block-cart-item__image img {
	max-width: 42px;
}

/* "Part of" has done its job once the row is visibly nested; keep it, quietly. */
.wc-block-cart-items__row.wcaq-nested .wc-block-components-product-details {
	font-size: 11px;
	opacity: .6;
	margin: 0;
}

/* On a phone the column cap is dropped; the tile size alone decides. */
@media (max-width: 782px) {
	.wcaq-items {
		max-width: 100%;
	}
}