/**
 * Shop refresh: category and product pages for physical products.
 * Loaded only on pages with body.tr-shop (see inc/shop-refresh.php).
 * Plain CSS on purpose, so no build step is needed.
 */

.tr-shop {
	--tr-ink: #1d1d1f;
	--tr-muted: #6e6e73;
	--tr-surface: #f5f5f7;
	--tr-line: #e5e5ea;
	--tr-brand: #1d123a;      /* Trainimal plum */
	--tr-brand-hover: #5b238b; /* Trainimal purple */
	--tr-accent: #ff915c;     /* Trainimal peach */
	--tr-radius: 18px;
	--tr-radius-sm: 12px;
}

/* ---------- Shared buttons ---------- */

.tr-shop .tr-card-cta .button,
.tr-shop.woocommerce div.product form.cart .button,
.tr-shop .sticky-cart-form .button {
	background: var(--tr-brand);
	border: 0;
	border-radius: 980px;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color .2s ease, transform .1s ease;
}

.tr-shop .tr-card-cta .button:hover,
.tr-shop.woocommerce div.product form.cart .button:hover,
.tr-shop .sticky-cart-form .button:hover {
	background: var(--tr-brand-hover);
	color: #fff;
}

.tr-shop .tr-card-cta .button:active,
.tr-shop.woocommerce div.product form.cart .button:active {
	transform: scale(.98);
}

/* ===========================================================================
 * Category pages
 * ======================================================================== */

/* Category row */
.tr-catnav {
	margin: 32px 0 32px;
}

.tr-catnav__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 4px 0 12px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.tr-catnav__list::-webkit-scrollbar {
	display: none;
}

@media (min-width: 1024px) {
	.tr-catnav__list {
		justify-content: center;
		flex-wrap: wrap;
	}
}

.tr-catnav__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.tr-catnav__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 112px;
	padding: 14px 8px 12px;
	border-radius: var(--tr-radius-sm);
	color: var(--tr-ink);
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease;
}

.tr-catnav__item a:hover,
.tr-catnav__item.is-active a {
	background: var(--tr-surface);
	color: var(--tr-ink);
}

.tr-catnav__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tr-surface);
	color: var(--tr-brand-hover);
	transition: background-color .2s ease, color .2s ease;
}

.tr-catnav__item a:hover .tr-catnav__image {
	background: #fff;
}

.tr-catnav__item.is-active .tr-catnav__image {
	background: var(--tr-brand);
	color: #fff;
}

.tr-catnav__image svg {
	display: block;
	width: 30px;
	height: 30px;
}

/* The theme fills SVG icons; these are line icons */
.tr-catnav .tr-catnav__image svg,
.tr-catnav .tr-catnav__image svg * {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.6px !important;
}

.tr-catnav .tr-catnav__image svg {
	width: 30px !important;
	height: 30px !important;
}

.tr-catnav__label {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
}

.tr-catnav__item.is-active .tr-catnav__label {
	font-weight: 600;
}

/* Toolbar: quieter */
.tr-shop .shop-toolbar {
	border: 0;
	margin-bottom: 24px;
	font-size: 14px;
}

/* Product cards */
.tr-shop.woocommerce ul.products li.product {
	margin-bottom: 40px;
	text-align: left;
}

.tr-shop.woocommerce ul.products li.product .product-header {
	position: relative;
	background: var(--tr-surface);
	border-radius: var(--tr-radius);
	overflow: hidden;
	margin-bottom: 16px;
	transition: box-shadow .3s ease;
}

.tr-shop.woocommerce ul.products li.product:hover .product-header {
	box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}

.tr-shop.woocommerce ul.products li.product .product-header img {
	/* Product shots on white blend into the grey card, like the Apple Store */
	mix-blend-mode: multiply;
	transition: transform .5s ease, opacity .7s;
}

.tr-shop.woocommerce ul.products li.product:hover .product-header img {
	transform: scale(1.03);
}

/* The always-visible button below replaces the hover-only one */
.tr-shop.woocommerce ul.products li.product .product-header .buttons {
	display: none;
}

.tr-shop.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 4px;
	padding: 0 4px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	/* Two lines max keeps rows even */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

.tr-shop.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: var(--tr-ink);
}

.tr-card-tagline {
	margin: 0 0 8px;
	padding: 0 4px;
	color: var(--tr-muted);
	font-size: 14px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}

.tr-shop.woocommerce ul.products li.product .star-rating {
	margin: 0 4px 6px;
}

.tr-shop.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 4px;
	color: var(--tr-ink);
	font-size: 16px;
	font-weight: 600;
}

.tr-shop.woocommerce ul.products li.product .price del {
	color: var(--tr-muted);
	font-weight: 400;
}

.tr-shop.woocommerce ul.products li.product .price ins {
	color: var(--tr-brand-hover);
	text-decoration: none;
}

.tr-card-cta {
	margin-top: 12px;
	padding: 0 4px;
}

.tr-shop.woocommerce ul.products li.product .tr-card-cta .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 40px;
	margin: 0;
	padding: 0 20px;
	overflow: visible;
	opacity: 1;
	border-radius: 980px;
	font-size: 14px;
	line-height: 1;
}

/* Keep the button in the card even if the theme's mobile icon mode is on */
.tr-shop.woocommerce ul.products li.product .tr-card-cta .button {
	position: static !important;
	background: var(--tr-brand) !important;
	color: #fff !important;
}

.tr-shop.woocommerce ul.products li.product .tr-card-cta .button.loading {
	opacity: .6;
}

.tr-shop.woocommerce ul.products li.product .tr-card-cta .button.added::after {
	content: " \2713";
	margin-left: 6px;
}

/* The basket opens instead of showing a "View basket" link */
.tr-shop.woocommerce ul.products li.product .tr-card-cta .added_to_cart {
	display: none;
}

/* Badges */
.tr-shop.woocommerce ul.products li.product .ribbons {
	top: 12px;
	left: 12px;
}

.tr-shop.woocommerce .ribbons .ribbon {
	height: auto;
	min-width: 0;
	border-radius: 980px;
	padding: 4px 10px;
	line-height: 1.4;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.tr-shop.woocommerce .ribbons .onsale {
	background: var(--tr-accent);
}

/* ===========================================================================
 * Product pages
 * ======================================================================== */

/* Gallery */
.tr-shop.woocommerce div.product .woocommerce-product-gallery__image,
.tr-shop.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
	background: var(--tr-surface);
	border-radius: var(--tr-radius);
	overflow: hidden;
}

.tr-shop.woocommerce div.product .woocommerce-product-gallery__image img {
	mix-blend-mode: multiply;
}

.tr-shop.woocommerce div.product .flex-control-thumbs li img,
.tr-shop.woocommerce div.product .product-gallery-thumbnails img {
	border-radius: 10px;
	background: var(--tr-surface);
}

/* Summary */
.tr-shop.woocommerce div.product div.summary {
	text-align: left;
}

.tr-shop.woocommerce ins {
	background: none;
}
.tr-shop.woocommerce div.product .product_title {
	color: var(--tr-ink);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin-bottom: 12px;
}

@media (min-width: 1024px) {
	.tr-shop.woocommerce div.product .product_title {
		font-size: 40px;
	}
}

.tr-shop.woocommerce div.product .summary .woocommerce-product-details__short-description {
	color: var(--tr-ink);
	font-size: 17px;
	line-height: 1.5;
	margin-bottom: 20px;
}

/* Bullet lists in the short description become check-mark benefits */
.tr-shop.woocommerce div.product .woocommerce-product-details__short-description ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.tr-shop.woocommerce div.product .woocommerce-product-details__short-description ul li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 8px;
}

.tr-shop.woocommerce div.product .woocommerce-product-details__short-description ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tr-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.2 3.4 10l1.4-1.4 2.8 2.8 7.6-7.6 1.4 1.4z' fill='%235b238b'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.tr-shop.woocommerce div.product .summary p.price,
.tr-shop.woocommerce div.product .summary span.price {
	color: var(--tr-ink);
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 24px;
}

.tr-shop.woocommerce div.product .summary .price del {
	color: var(--tr-muted);
	font-size: .75em;
	font-weight: 400;
}

.tr-shop.woocommerce div.product .summary .price ins {
	text-decoration: none;
}

/* Add to basket */
.tr-shop.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin-bottom: 24px;
}

.tr-shop.woocommerce div.product form.cart.variations_form,
.tr-shop.woocommerce div.product form.cart.grouped_form {
	display: block;
}

.tr-shop.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tr-shop.woocommerce div.product form.cart .quantity {
	margin: 0;
	border: 1px solid var(--tr-line);
	border-radius: 980px;
	overflow: hidden;
}

.tr-shop.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 52px;
	padding: 0 32px;
	font-size: 17px;
}

.tr-shop.woocommerce div.product form.cart .variations select,
.tr-shop.woocommerce div.product form.cart .variations .wcboost-variation-swatches__item {
	border-radius: var(--tr-radius-sm);
}

.tr-shop.woocommerce div.product form.cart .variations select {
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--tr-line);
}

.tr-shop.woocommerce div.product form.cart .variations label {
	color: var(--tr-ink);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

/* Trust points */
.tr-trust {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding: 16px 20px;
	list-style: none;
	background: var(--tr-surface);
	border-radius: var(--tr-radius-sm);
	font-size: 14px;
	color: var(--tr-ink);
}

.tr-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	line-height: 1.4;
}

.tr-trust__icon {
	flex: 0 0 auto;
	color: var(--tr-brand-hover);
	margin-top: 1px;
}

/* Goes well with */
.tr-pairs {
	margin: 0 0 32px;
}

.tr-pairs__title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--tr-ink);
}

/* Accordion replaces tabs */
.tr-accordion {
	clear: both;
	max-width: 880px;
	margin: 64px auto;
	border-top: 1px solid var(--tr-line);
}

.tr-accordion__item {
	border-bottom: 1px solid var(--tr-line);
}

.tr-accordion__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
	color: var(--tr-ink);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.tr-accordion__title::-webkit-details-marker {
	display: none;
}

.tr-accordion__title .counter {
	color: var(--tr-muted);
	font-weight: 400;
	margin-left: 4px;
}

.tr-accordion__icon {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tr-surface);
}

.tr-accordion__icon::before,
.tr-accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	background: var(--tr-ink);
	border-radius: 2px;
	transition: transform .25s ease;
}

.tr-accordion__icon::after {
	transform: rotate(90deg);
}

.tr-accordion__item[open] .tr-accordion__icon::after {
	transform: rotate(0deg);
}

.tr-accordion__panel {
	padding: 0 0 32px;
	color: var(--tr-ink);
	font-size: 16px;
	line-height: 1.6;
}

.tr-accordion__panel table.shop_attributes {
	border: 0;
}

.tr-accordion__panel table.shop_attributes th,
.tr-accordion__panel table.shop_attributes td {
	border: 0;
	border-bottom: 1px solid var(--tr-line);
	padding: 12px 0;
	background: none;
	font-style: normal;
}

/* Related / up-sell sections */
.tr-shop.woocommerce div.product .related > h2,
.tr-shop.woocommerce div.product .upsells > h2,
.tr-shop .related.products > h2,
.tr-shop .upsells.products > h2 {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -.02em;
	text-transform: none;
	text-align: center;
	margin-bottom: 32px;
}

.tr-shop .related.products ul.products li.product .product-header,
.tr-shop .upsells.products ul.products li.product .product-header {
	background: var(--tr-surface);
	border-radius: var(--tr-radius);
	overflow: hidden;
}

.tr-shop .related.products ul.products li.product .product-header img,
.tr-shop .upsells.products ul.products li.product .product-header img {
	mix-blend-mode: multiply;
}

/* Sticky add-to-basket bar */
.tr-shop .sticky-cart-form {
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: 1px solid var(--tr-line);
	box-shadow: none;
}

.tr-shop .sticky-cart-form__product-image img {
	border-radius: 8px;
	background: var(--tr-surface);
}

.tr-shop .sticky-cart-form__product-title {
	font-weight: 600;
}

.tr-shop .sticky-cart-form .button {
	min-height: 44px;
	padding: 0 24px;
}

/* Mobile */
@media (max-width: 767px) {
	.tr-shop.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px;
	}

	.tr-card-tagline {
		font-size: 13px;
	}

	.tr-shop.woocommerce ul.products li.product .tr-card-cta .button {
		width: 100%;
		padding: 0 12px;
	}

	.tr-shop.woocommerce div.product form.cart .single_add_to_cart_button {
		flex-basis: 100%;
	}

	.tr-accordion {
		margin: 40px 0;
	}

	.tr-accordion__title {
		font-size: 18px;
		padding: 20px 0;
	}
}