/*
 * Cart / checkout / mini-cart item meta: pairs flow inline on ONE row,
 * 10px space between each "Label: value" pair; anything that does not fit
 * the row is behind a "show more" toggle (cart-meta.js measures overflow
 * and adds the classes + button).
 */
.woocommerce-cart-form dl.variation,
.woocommerce-checkout-review-order-table dl.variation,
.widget_shopping_cart dl.variation {
	margin: 6px 0 0;
	line-height: 1.6;
	font-size: 13px;
	color: #999;
}

.woocommerce-cart-form dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dt,
.widget_shopping_cart dl.variation dt {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: 500;
	line-height: inherit;
	color: inherit;
}

/* 10px gap between pairs = right margin on each value. */
.woocommerce-cart-form dl.variation dd,
.woocommerce-checkout-review-order-table dl.variation dd,
.widget_shopping_cart dl.variation dd {
	display: inline;
	margin: 0 10px 0 0;
	padding: 0;
	color: inherit;
}

.woocommerce-cart-form dl.variation dd p,
.woocommerce-checkout-review-order-table dl.variation dd p,
.widget_shopping_cart dl.variation dd p {
	display: inline;
	margin: 0;
	color: inherit;
}

/* Shoptimizer's drawer rule is more specific (12px / #111) — match it. */
.shoptimizer-mini-cart-wrap .widget_shopping_cart li.mini_cart_item dl.variation,
.shoptimizer-mini-cart-wrap .widget_shopping_cart li.mini_cart_item dl.variation p {
	font-size: 11px;
	color: #999;
}

/* Clamp to a single row until expanded (classes managed by cart-meta.js;
   the inline dt/dd content flows as lines inside the -webkit-box). */
dl.variation.tpux-meta-clamp:not(.tpux-meta-open) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
}

.tpux-meta-toggle {
	display: inline-block;
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 12px;
	line-height: 1.4;
	color: #777;
	text-decoration: underline;
	cursor: pointer;
}

.tpux-meta-toggle:hover,
.tpux-meta-toggle:focus {
	background: none;
	color: #111;
}

/* Teddypost cart tweak (Shoptimizer stacked mobile cart): the theme gives
   every stacked cell `padding: 5px 0`, which leaves the quantity stepper
   sitting 5px above its cell divider. Give that cell room below. */
@media (max-width: 768px) {
	.m-cart table.cart td.product-quantity {
		padding-bottom: 16px;
	}
}

.widget_shopping_cart .tpux-meta-toggle {
	font-size: 11px;
}

/* CommerceKit image swatches (colour/variant thumbnails): selected state
   as a 2px teal frame instead of the 1px dark one CommerceKit draws on the
   button's ::before (v2.13.2, per Erik). `body` prefix outranks
   CommerceKit's own selector whatever the stylesheet order. */
body .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-image > button.cgkit-swatch-selected:before,
body .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-image > a.cgkit-swatch-selected:before {
	border: 2px solid #4fb7b2;
}

/* …and rounded 8px (CommerceKit sets border-radius: 0 on the button; the
   ::before frame and the image inside need the same radius, v2.13.3). */
body .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-image > button,
body .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-image > a,
body .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-image > button:before,
body .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-image > a:before,
body .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-image img {
	border-radius: 8px;
}

body .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-image > button,
body .cgkit-as-wrap .cgkit-attribute-swatches .cgkit-attribute-swatch.cgkit-image > a {
	overflow: hidden;
}