/* PA Shop Builder — product grid and cards (values taken from the WowStore design). */
:root {
	--pasb-accent: var(--ast-global-color-1, #5511f8);
	--pasb-accent-2: var(--ast-global-color-0, #6528f7);
	--pasb-text: #070707;
	--pasb-muted: var(--ast-global-color-3, #454f5e);
	--pasb-line: #e0e0e0;
	--pasb-soft: var(--ast-global-color-6, #d8d8f5);
	--pasb-white: var(--ast-global-color-5, #fff);
}

/* ---------- grid ---------- */
.pasb-grid {
	display: grid;
	grid-template-columns: repeat(var(--pasb-cols, 4), minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 19px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pasb-grid::before,
.pasb-grid::after { display: none !important; } /* WooCommerce clearfix on ul.products */
@media (max-width: 992px) {
	.pasb-grid { grid-template-columns: repeat(var(--pasb-cols-sm, 2), minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.pasb-grid { grid-template-columns: repeat(var(--pasb-cols-xs, 2), minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; }
}
.pasb-grid__empty {
	grid-column: 1 / -1;
	padding: 40px 20px;
	text-align: center;
	color: var(--pasb-muted);
	border: 1px dashed var(--pasb-line);
}

/* ---------- card ---------- */
.woocommerce ul.products li.pasb-card,
.pasb-card {
	position: relative;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	list-style: none;
	text-align: center;
	height: 100%;
}
.pasb-card__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--pasb-line);
	background: var(--pasb-white);
	box-sizing: border-box;
	transition: box-shadow .25s ease;
}
.pasb-card__inner > :last-child { margin-top: auto; }
.pasb-card:hover .pasb-card__inner { box-shadow: 0 6px 18px rgba(13, 6, 20, .08); }
@media (max-width: 768px) {
	.pasb-card__inner { padding: 12px; }
	.pasb-card__stock { left: 6px; right: 6px; padding: 4px 6px; font-size: 12px; white-space: nowrap; }
}

/* media */
.pasb-card__media {
	position: relative;
	width: 100%;
	height: 150px;
	margin: 0 0 20px;
	overflow: hidden;
}
.pasb-card__image-link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.pasb-card__img {
	display: block;
	width: 100% !important;
	height: 150px !important;
	max-width: none;
	object-fit: contain;
	margin: 0 !important;
	transition: opacity .35s ease;
}
.pasb-card__img--flip,
.pasb-card__video {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}
.pasb-card__video {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: #fff;
	transition: opacity .3s ease;
}
.pasb-card.is-flipped .pasb-card__img--flip,
.pasb-card.is-playing .pasb-card__video { opacity: 1; }
.pasb-card.is-flipped .pasb-card__img:not(.pasb-card__img--flip) { opacity: 0; }
.pasb-card__play {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(13, 6, 20, .65);
	color: #fff;
	font-size: 14px;
	transition: opacity .2s;
	pointer-events: none;
}
.pasb-card.is-playing .pasb-card__play { opacity: 0; }
/* While the video plays, it alone fills the image area: the photo is hidden and the empty
   space beside a portrait (or above a very wide) video is a plain background. */
.pasb-card.is-playing .pasb-card__media .pasb-card__img { opacity: 0 !important; }
.pasb-card__stock,
.pasb-card__sale { transition: opacity .3s ease; }
.pasb-card.is-playing .pasb-card__stock,
.pasb-card.is-playing .pasb-card__sale { opacity: 0; }
.pasb-card__media { transition: background-color .3s ease; }
.pasb-card.is-playing .pasb-card__media { background: #f4f4f6; }
.pasb-card__video { background: transparent; }

/* badges */
.pasb-card__stock {
	position: absolute;
	left: 25px;
	right: 25px;
	bottom: 40%;
	z-index: 2;
	padding: 6px 15px 7px;
	border-radius: 2px;
	background: #de4646;
	color: #fff;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
	pointer-events: none;
}
.pasb-card__sale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 6px 10px;
	background: rgba(31, 31, 31, 1);
	color: #fff;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	text-transform: uppercase;
	pointer-events: none;
}
.pasb-card.outofstock .pasb-card__img { opacity: .85; }

/* text */
.woocommerce .pasb-card__title,
.pasb-card__title {
	width: 100%;
	margin: 0;
	padding: 2px 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.45;
}
.pasb-card__title a {
	color: var(--pasb-text);
	text-decoration: none !important;
}
.pasb-card__title a:hover,
.pasb-card__title a:focus { color: var(--pasb-accent); }
.pasb-card__price {
	padding: 10px 0 8px;
	color: var(--pasb-text);
	font-size: 20px;
	line-height: 20px;
	font-weight: 700;
}
.pasb-card__price del { opacity: .55; font-weight: 400; font-size: .8em; margin-right: 4px; }
.pasb-card__price ins { text-decoration: none; }
.pasb-card__rating { line-height: 1; padding: 2px 0 4px; }

/* stars (shared with filters and reviews) */
/* Outlined empty stars with a solid fill on top (like WooCommerce's star font). */
.pasb-stars {
	--pasb-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.6.6-5 4.5 1.5 6.6L12 17l-6 3.4 1.5-6.6-5-4.5 6.6-.6z'/%3E%3C/svg%3E");
	--pasb-star-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.5l2.9 6.2 6.6.6-5 4.5 1.5 6.6L12 17l-6 3.4 1.5-6.6-5-4.5 6.6-.6zm0 3.6-1.9 4-4.3.4 3.3 2.9-1 4.3 3.9-2.2 3.9 2.2-1-4.3 3.3-2.9-4.3-.4z'/%3E%3C/svg%3E");
	position: relative;
	display: inline-block;
	width: 5.4em;
	height: 1.08em;
	font-size: 13px;
	vertical-align: middle;
}
.pasb-stars::before,
.pasb-stars::after {
	content: "";
	position: absolute;
	inset: 0;
}
.pasb-stars::before {
	background: var(--pasb-accent);
	-webkit-mask: var(--pasb-star-o) left center / 1.08em 1.08em repeat-x;
	mask: var(--pasb-star-o) left center / 1.08em 1.08em repeat-x;
}
.pasb-stars::after {
	background: linear-gradient(90deg, var(--pasb-accent) calc(var(--pasb-rating, 0) / 5 * 100%), transparent 0);
	-webkit-mask: var(--pasb-star) left center / 1.08em 1.08em repeat-x;
	mask: var(--pasb-star) left center / 1.08em 1.08em repeat-x;
}

/* in-card variation form */
.pasb-card__variations {
	width: 100%;
	margin: 4px 0 0;
}
.pasb-card__attr + .pasb-card__attr { margin-top: 2px; }
.pasb-card__variations .reset_variations { display: none !important; }

/* button */
.pasb-card__actions { width: 100%; }
.woocommerce .pasb-card a.button.pasb-card__btn,
.pasb-card a.pasb-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 18px 0 0;
	padding: 6px 12px;
	border: 1px solid var(--pasb-accent);
	border-radius: 0;
	background: transparent;
	color: var(--pasb-accent);
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color .2s, color .2s, border-radius .2s;
}
.woocommerce .pasb-card a.button.pasb-card__btn:hover,
.woocommerce .pasb-card a.button.pasb-card__btn:focus-visible,
.pasb-card a.pasb-card__btn:hover {
	background: var(--pasb-accent);
	color: #fff;
	border-radius: 5px;
}
.pasb-card a.pasb-card__btn.loading { opacity: .6; pointer-events: none; }
.pasb-card a.pasb-card__btn.added::after { content: " ✓"; }
.pasb-card .added_to_cart {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--pasb-accent);
}
@media (max-width: 768px) {
	.woocommerce .pasb-card__title, .pasb-card__title { font-size: 15px; }
	.pasb-card__price { font-size: 17px; }
	.woocommerce .pasb-card a.button.pasb-card__btn, .pasb-card a.pasb-card__btn { font-size: 12px; padding: 6px 8px; }
}

/* ---------- carousels (categories and products) ---------- */
.pasb-carousel {
	position: relative;
}
.pasb-carousel__track {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--pasb-cols, 3) - 1) * var(--pasb-gap, 20px)) / var(--pasb-cols, 3));
	grid-template-columns: none !important;
	column-gap: var(--pasb-gap, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.pasb-carousel__track::-webkit-scrollbar { display: none; }
.pasb-carousel__track > li { scroll-snap-align: start; min-width: 0; }
@media (max-width: 992px) {
	.pasb-carousel__track { grid-auto-columns: calc((100% - (var(--pasb-cols-sm, 2) - 1) * var(--pasb-gap, 20px)) / var(--pasb-cols-sm, 2)); }
}
@media (max-width: 768px) {
	.pasb-carousel__track { grid-auto-columns: calc((100% - (var(--pasb-cols-xs, 1) - 1) * var(--pasb-gap, 20px)) / var(--pasb-cols-xs, 1)); }
}
.pasb-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-top: -30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #000;
	color: #fff;
	font-size: 26px;
	cursor: pointer;
	transition: background-color .2s, opacity .2s;
}
.pasb-carousel__arrow:hover,
.pasb-carousel__arrow:focus-visible { background: var(--pasb-accent); color: #fff; }
.pasb-carousel__arrow--prev { left: -25px; }
.pasb-carousel__arrow--next { right: -25px; }
.pasb-carousel.is-static .pasb-carousel__arrow { display: none; }
@media (max-width: 1480px) {
	.pasb-carousel__arrow--prev { left: 0; }
	.pasb-carousel__arrow--next { right: 0; }
}
@media (max-width: 768px) {
	.pasb-carousel__arrow { width: 40px; height: 40px; margin-top: -20px; font-size: 20px; }
}

/* Carousel arrows: lighter, smaller, out of the way of the images. */
.pasb-carousel__arrow {
	width: 44px;
	height: 44px;
	margin-top: -22px;
	background: rgba(255, 255, 255, .95);
	color: var(--pasb-accent);
	font-size: 22px;
	box-shadow: 0 4px 14px rgba(13, 6, 20, .18);
}
.pasb-carousel__arrow:hover,
.pasb-carousel__arrow:focus-visible { background: var(--pasb-accent); color: #fff; }
.pasb-carousel__arrow--prev { left: -22px; }
.pasb-carousel__arrow--next { right: -22px; }
@media (max-width: 1480px) {
	.pasb-carousel__arrow--prev { left: -8px; }
	.pasb-carousel__arrow--next { right: -8px; }
}
@media (max-width: 768px) {
	.pasb-carousel__arrow { width: 36px; height: 36px; margin-top: -18px; font-size: 18px; }
	.pasb-carousel__arrow--prev { left: -4px; }
	.pasb-carousel__arrow--next { right: -4px; }
}