/**
 * Header cart drawer skin.
 *
 * The drawer, icon and rows are plain Tailwind utilities (safelisted in
 * includes/compat/winden.php). This file only holds what utilities cannot
 * express: the thumbnail photo frame (warm background + logo placeholder, like
 * the slider cards) and the loading state.
 */

/* Cart line thumbnail: warm frame, the product image covers it, and a faded
   Curel logo shows when the product has no image (like .curel-group-photo). */
.cur-cart-photo {
	position: relative;
	overflow: hidden;
	background-color: #F4F2EE;
	border-radius: 2px;
}

.cur-cart-photo .cur-cart-thumb-img,
.cur-cart-photo img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center;
}

.cur-cart-photo:not(:has(img))::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/curel-logo.svg") center / 50% no-repeat;
	opacity: 0.12;
	filter: grayscale(1);
	pointer-events: none;
}

/* Quantity stepper: keep it compact. The theme's global input width would
   otherwise stretch the qty field and blow up the whole control. */
.cur-cart-qty {
	flex: none;
}
.cur-cart-qty-input {
	width: 1.75rem !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	height: auto !important;
	line-height: 1 !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}
.cur-cart-qty-input::-webkit-outer-spin-button,
.cur-cart-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Oxygen sets a large default font-size on <button> and drops the pointer; the
   cart's small button labels (qty +/- and Remover) need their sizes re-asserted. */
.cur-cart-qty button,
.cur-cart-item [data-curel-cart-remove] {
	cursor: pointer;
	line-height: 1 !important;
}
.cur-cart-qty button {
	font-size: 13px !important;
}
.cur-cart-item [data-curel-cart-remove] {
	font-size: 10px !important;
}

/* While a qty/remove request is in flight, dim the contents and block clicks. */
.cur-cart-loading [data-curel-cart-inner] {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* Checkout button: the theme's normalize `a` rules strip the black background and
   white text (the same reason the header links are pinned in menus.css), so assert
   them here. The utility classes still handle size/radius/hover-opacity. */
.cur-cart-checkout,
.cur-cart-checkout:link,
.cur-cart-checkout:visited,
.cur-cart-checkout:hover,
.cur-cart-checkout:focus {
	background-color: var( --color-fg, #0a0a0a ) !important;
	color: #fff !important;
}