/* T4U Product Carousel
   Inherits theme typography on purpose - only layout and the few chrome bits
   are opinionated. Override anything below from your child theme. */

.t4u-pc {
	/* The per-device values come in on the inline style attribute
	   (--t4u-pc-cols-d / -t / -m). --t4u-pc-cols is derived from them HERE,
	   never inline: an inline declaration outranks every stylesheet rule, so
	   setting it inline would make the media queries below powerless. */
	--t4u-pc-cols-d: 4;
	--t4u-pc-cols-t: 3;
	--t4u-pc-cols-m: 2;
	--t4u-pc-cols: var(--t4u-pc-cols-d);
	--t4u-pc-gap: 20px;
	/* Follows Newspaper's own accent variable when the theme defines it. */
	--t4u-pc-accent: var(--td_theme_color, #4db2ec);
	--t4u-pc-btn-bg: var(--t4u-pc-accent);
	--t4u-pc-btn-bg-hover: #222;
	--t4u-pc-btn-text: #fff;
	position: relative;
	margin-bottom: 32px;
}

/* ---- head -------------------------------------------------------------- */

.t4u-pc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	min-height: 28px;
}

.t4u-pc-title {
	margin: 0;
	font-size: 17px;
	line-height: 1.2;
	font-weight: 500;
}

.t4u-pc-title span {
	display: inline-block;
	border-bottom: 2px solid var(--t4u-pc-accent);
	padding-bottom: 6px;
}

.t4u-pc-title-spacer { flex: 1 1 auto; }

.t4u-pc-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.t4u-pc-viewall {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
	text-decoration: none;
}

.t4u-pc-nav { display: flex; gap: 6px; }

.t4u-pc-arrow {
	width: 30px;
	height: 30px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e0e0e0;
	background: #fff;
	color: #222;
	border-radius: 3px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}

.t4u-pc-arrow svg { width: 16px; height: 16px; display: block; }

.t4u-pc-arrow:hover:not(:disabled) {
	background: var(--t4u-pc-accent);
	border-color: var(--t4u-pc-accent);
	color: #fff;
}

.t4u-pc-arrow:disabled { opacity: .3; cursor: default; }

.t4u-pc-static .t4u-pc-nav { display: none; }

/* ---- track ------------------------------------------------------------- */

.t4u-pc-track {
	display: flex;
	gap: var(--t4u-pc-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}

.t4u-pc-track::-webkit-scrollbar { display: none; }

.t4u-pc-track:focus-visible {
	outline: 2px solid var(--t4u-pc-accent);
	outline-offset: 4px;
}

.t4u-pc-track.is-dragging {
	scroll-behavior: auto;
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.t4u-pc-item {
	flex: 0 0 calc((100% - (var(--t4u-pc-cols) - 1) * var(--t4u-pc-gap)) / var(--t4u-pc-cols));
	min-width: 0;
	scroll-snap-align: start;
}

/* ---- card -------------------------------------------------------------- */

.t4u-pc-card { display: flex; flex-direction: column; height: 100%; }

.t4u-pc-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	background: #f7f7f7;
	margin-bottom: 10px;
}

.t4u-pc-thumb .t4u-pc-img,
.t4u-pc-thumb img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .35s ease;
}

.t4u-pc-thumb:hover img { transform: scale(1.04); }

.t4u-pc-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	background: #ec4d4d;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 7px;
	border-radius: 2px;
}

.t4u-pc-body { display: flex; flex-direction: column; gap: 6px; }

.t4u-pc-name {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 500;
}

.t4u-pc-name a { text-decoration: none; color: inherit; }
.t4u-pc-name a:hover { color: var(--t4u-pc-accent); }

.t4u-pc-rating { font-size: 12px; line-height: 1; }
.t4u-pc-rating .star-rating { margin: 0; float: none; }

.t4u-pc-price { font-size: 14px; }
.t4u-pc-price del { opacity: .55; margin-right: 5px; font-weight: 400; }
.t4u-pc-price ins { text-decoration: none; font-weight: 600; }

.t4u-pc-cart { margin-top: 4px; }

/* WooCommerce's own button rules are low-specificity (.woocommerce a.button),
   and Newspaper resets buttons inside its blocks - which is why the button
   rendered with no background. !important on the paint properties settles it
   without having to guess the theme's selector. Restyle by overriding
   --t4u-pc-btn-* on .t4u-pc rather than editing this rule. */
.t4u-pc-cart a.button,
.t4u-pc-cart button.button,
.t4u-pc-cart .button {
	display: inline-block !important;
	background-color: var(--t4u-pc-btn-bg) !important;
	background-image: none !important;
	color: var(--t4u-pc-btn-text) !important;
	border: 0 !important;
	border-radius: 3px !important;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	padding: 9px 15px !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none;
	opacity: 1 !important;
	cursor: pointer;
	transition: background-color .15s ease;
}

.t4u-pc-cart a.button:hover,
.t4u-pc-cart button.button:hover,
.t4u-pc-cart .button:hover {
	background-color: var(--t4u-pc-btn-bg-hover) !important;
	color: var(--t4u-pc-btn-text) !important;
}

/* WooCommerce's in-flight state. The button deliberately stays visible and
   usable after .added, so the customer can add a second one. */
.t4u-pc-cart .button.loading { opacity: .7 !important; }

/* The "View cart" link Woo appends after an ajax add - a link, not a button. */
.t4u-pc-cart .added_to_cart {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	text-decoration: underline;
}

.t4u-pc-notice {
	padding: 10px 14px;
	border-left: 3px solid #ec4d4d;
	background: #fff6f6;
	font-size: 13px;
}

/* ---- breakpoints (match tagDiv's) -------------------------------------- */

@media (max-width: 1018px) {
	.t4u-pc { --t4u-pc-cols: var(--t4u-pc-cols-t); }
}

@media (max-width: 767px) {
	.t4u-pc { --t4u-pc-cols: var(--t4u-pc-cols-m); }
	.t4u-pc-title { font-size: 15px; }
}

/* Sitting inside a tagDiv block: drop our own outer margin, the block wrap
   already provides spacing, and let the theme's block title do the talking. */
.td_block_inner > .t4u-pc { margin-bottom: 0; }
.td_block_t4u_product_carousel .td-block-title-wrap { margin-bottom: 0; }
.td_block_t4u_product_carousel .t4u-pc-head:empty,
.td_block_t4u_product_carousel .t4u-pc-title-spacer { flex: 1 1 auto; }

/* ---- dark mode (Newspaper's night mode toggles this class on body) ------ */

.td-dark-mode .t4u-pc-arrow,
body.td_dark .t4u-pc-arrow {
	background: #1c1c1c;
	border-color: #333;
	color: #eee;
}

.td-dark-mode .t4u-pc-thumb,
body.td_dark .t4u-pc-thumb { background: #1c1c1c; }

/* #222 on a dark page reads as "disabled", so lift the hover instead. */
.td-dark-mode .t4u-pc,
body.td_dark .t4u-pc { --t4u-pc-btn-bg-hover: #4a4a4a; }