/*
 * Peptilab — Product Card
 * Depends on: variables.css
 *
 * Block-generated class hierarchy:
 *  li.wc-block-product-template__product.pl-product-card
 *    ├── div.wc-block-product-image.pl-card__image-wrap
 *    │     └── a > img
 *    └── div.wp-block-group.pl-card__body
 *          ├── a.wc-block-components-product-name.pl-card__title
 *          ├── span.wc-block-components-product-price.pl-card__price
 *          └── div.wc-block-add-to-cart-button.pl-card__atc
 *                └── a.wp-block-button__link | button
 */

/* ============================================================
   Hide sale badge — across product cards and the single product page.
   Covers both WC Blocks markup and legacy theme markup.
   ============================================================ */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge,
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
.woocommerce-page span.onsale {
	display: none !important;
}

/* ============================================================
   Card wrapper
   ============================================================ */
ul.wc-block-product-template > li.wc-block-product {
	position:       relative;
	background:     var(--pl-bg-card);
	border-radius:  var(--pl-border-radius);
	overflow:       hidden;
	transition:     transform var(--pl-transition), box-shadow var(--pl-transition);
	display:        flex !important;
	flex-direction: column;
	margin:         0 !important;
	padding:        0 !important;
	align-self:    stretch;
}

ul.wc-block-product-template > li.wc-block-product:hover {
	transform:  translateY(-4px);
}

/* ============================================================
   Product tags — rendered by core/post-terms (taxonomy: product_tag)
   Positioned absolutely at the top of the card (li has position:relative).
   Each tag <a> displays as a lime pill badge.
   ============================================================ */
li.wc-block-product .pl-card__tags.wp-block-post-terms,
li.wc-block-product  .taxonomy-product_tag{
	position:   absolute;
	top:        0;
	left:       0;
	width: 100%;
	z-index:    3;
	display:    flex !important;
	flex-wrap:  wrap;
	margin:     0 !important;
	padding:    0 !important;
	/* suppress default paragraph margin/color from theme */
	font-size:  0;            /* hide any stray text nodes / separators */
	pointer-events: none !important;
}

/* hide the comma / space separators core/post-terms injects */
li.wc-block-product .pl-card__tags .wp-block-post-terms__separator {
	display: none;
}

/* hide WooCommerce Interactivity API store-notices injected into post-terms */
li.wc-block-product .pl-card__tags .wc-block-components-notices {
	display: none !important;
}
li.wc-block-product  .taxonomy-product_tag a[data-wp-on--click] {
	display: none !important;
}
li.wc-block-product .pl-card__tags a,
li.wc-block-product  .taxonomy-product_tag a{
	display:        flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding:        11px 6px;
	background:     var(--pl-tag-color, #D5F28B);
	color:          var(--pl-text) !important;
	border-radius:  31px 31px 0 0;
	font-size:      14px !important;   /* restore after parent font-size:0 */
	font-weight:    500;
	line-height:    1;
	text-decoration: none !important;
	white-space:    nowrap;
	transition:     background var(--pl-transition);
}

/* Tag rotator — when a card has more than one tag, they cycle every
   5s with a fade. Stack them via absolute positioning; the first stays
   relative so it defines the parent's height. JS in
   assets/js/product-card-tags.js toggles `.is-active`. The
   `:not(.is-tag-rotating)` rule keeps the first tag visible BEFORE the
   script runs so there's no flash of empty space. */
li.wc-block-product .pl-card__tags a[rel="tag"],
li.wc-block-product .taxonomy-product_tag a[rel="tag"] {
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}

li.wc-block-product .pl-card__tags a[rel="tag"]:first-of-type,
li.wc-block-product .taxonomy-product_tag a[rel="tag"]:first-of-type {
	position: relative;
}

li.wc-block-product .pl-card__tags a[rel="tag"] ~ a[rel="tag"],
li.wc-block-product .taxonomy-product_tag a[rel="tag"] ~ a[rel="tag"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box; /* otherwise padding adds on top of height: 100% */
}

/* Pre-JS: first tag visible */
li.wc-block-product .pl-card__tags:not(.is-tag-rotating) a[rel="tag"]:first-of-type,
li.wc-block-product .taxonomy-product_tag:not(.is-tag-rotating) a[rel="tag"]:first-of-type {
	opacity: 1;
	pointer-events: auto;
}

/* Post-JS: only the active tag visible */
li.wc-block-product .pl-card__tags.is-tag-rotating a[rel="tag"].is-active,
li.wc-block-product .taxonomy-product_tag.is-tag-rotating a[rel="tag"].is-active {
	opacity: 1;
	pointer-events: auto;
}

@media  screen and (max-width: 768px) {
	li.wc-block-product .pl-card__tags a,
li.wc-block-product  .taxonomy-product_tag a{ 
		font-size:      12px !important;
			padding:        8px 6px;
}
}

li.wc-block-product .pl-card__tags a:hover,
li.wc-block-product  .taxonomy-product_tag a:hover{
	background: color-mix(in srgb, var(--pl-tag-color, #D5F28B) 85%, #fff);
}

/* ============================================================
   Image area
   ============================================================ */
.pl-card__image-wrap {
	position:    relative;
	background:  #E7EAEF !important;
	overflow:    hidden;
	flex-shrink: 0;
}

.pl-card__image-wrap img,
.pl-card__image-wrap .wc-block-product-image img {
	display:         block !important;
	width:           100% !important;
	height:          210px !important;
	object-fit:      contain !important;
	object-position: center !important;
	padding:         24px !important;
	box-sizing:      border-box;
	transition:      transform .35s ease;
}

li.wc-block-product:hover .pl-card__image-wrap img { transform: scale(1.05); }

/* ============================================================
   Card body
   ============================================================ */
.pl-card__body {
	display:        flex !important;
	flex-direction: column !important;
	flex:           1;
	padding:        0 !important;
	gap:            0 !important;
}



/* ============================================================
   List view
   ============================================================ */
.peptilab-products-grid.pl-view--list ul.wc-block-product-template {
	grid-template-columns: 1fr !important;
}

.peptilab-products-grid.pl-view--list li.wc-block-product {
	flex-direction: row !important;
}

.peptilab-products-grid.pl-view--list .pl-card__image-wrap {
	width:      200px;
	flex-shrink: 0;
}

.peptilab-products-grid.pl-view--list .pl-card__image-wrap img,
.peptilab-products-grid.pl-view--list .pl-card__image-wrap .wc-block-product-image img {
	height: 100% !important;
}

.peptilab-products-grid.pl-view--list .pl-card__body {
	flex: 1;
	padding: 24px !important;
}

/* ============================================================
   Carousel layout — WC product-collection displayLayout.type="carousel"
   Targets the actual WC 10.6.2 carousel HTML structure.
   ============================================================ */

/* ── Carousel container ── */
.wp-block-woocommerce-product-collection[data-display-layout*="carousel"] {
	padding-top: 80px;
	padding-bottom: 80px;
	padding-left: max(60px, calc((100vw - 1360px) / 2 + 60px)  );
	margin-bottom: 0 !important;
}

@media (max-width: 1320px) {
	.wp-block-woocommerce-product-collection[data-display-layout*="carousel"] {
		padding-left: max(60px, calc((100% - 1360) / 2));
	}
}

@media (max-width: 1024px) {
	.wp-block-woocommerce-product-collection[data-display-layout*="carousel"] {
		padding-left: max(24px, calc((100% - 1240px) / 2));
	}
}

.wp-block-woocommerce-product-collection[data-display-layout*="carousel"] > .wp-block-group {
	padding-right: max(60px, calc((100vw - 1360px) / 2 + 60px)  );
	margin-bottom: 40px !important;
}

@media (max-width: 1320px) {
	.wp-block-woocommerce-product-collection[data-display-layout*="carousel"] > .wp-block-group {
		padding-left: max(60px, calc((100% - 1360) / 2));
	}
}

@media (max-width: 1024px) {
	.wp-block-woocommerce-product-collection[data-display-layout*="carousel"] > .wp-block-group {
		padding-right: max(24px, calc((100% - 1240px) / 2));
		margin-bottom: 24px !important;
	}
}


/* ── Carousel track ── */
.is-product-collection-layout-carousel {
	gap: 24px !important;
}

@media screen and (max-width: 768px) {
	.is-product-collection-layout-carousel {
		gap: 16px !important;
		margin-bottom: 90px !important;
	}
}

.is-product-collection-layout-carousel > li {
	flex:      0 0 286px !important;
	width:     286px !important;
	max-width: 286px !important;
}

/* ── Carousel card ── */
li.wc-block-product {
	position:       relative;
	background:     var(--pl-bg-card);
	border-radius:  var(--pl-border-radius);
	overflow:       hidden;
	display:        flex !important;
	flex-direction: column;
	transition:     transform var(--pl-transition), box-shadow var(--pl-transition);
}

 li.wc-block-product:hover {
	transform:  translateY(-4px);
}

/* ── Image ── */
 .wc-block-components-product-image {
	position:    relative;
	background:  var(--pl-bg-card) !important;
	overflow:    hidden;
	flex-shrink: 0;
	 padding-top: 36px;
}

 .wc-block-components-product-image a {
	display:     block;
	position:    relative;
	padding-top: 80%;
}

 .wc-block-components-product-image img {
	position:   absolute !important;
	top:        50% !important;
	left:       50% !important;
	transform:  translate(-50%, -50%) !important;
	object-fit: contain !important;
	width:      100% !important;
	height:     100% !important;
	padding:    16px !important;
	box-sizing: border-box;
	transition: transform .35s ease;
}

.is-product-collection-layout-carousel li.wc-block-product:hover .wc-block-components-product-image img {
	transform: translate(-50%, -50%) scale(1.05) !important;
}

/* ── Title ── */
.wp-block-post-title {
	font-family: var(--pl-font-body);
	font-size:       16px !important;
	font-weight:     400 !important;
	line-height:     1.5 !important;
	color:           var(--pl-text) !important;
	text-align:      center !important;
	margin:          0 !important;
	padding:         16px 24px 8px !important;
}

@media screen and (max-width: 768px) {
	.wp-block-post-title {
		padding:         16px 24px 4px !important;
	}
}

 .wp-block-post-title a {
	color:           var(--pl-text) !important;
	text-decoration: none !important;
	transition:      color var(--pl-transition);
	 font-family: var(--pl-font-body);
	 font-size:       16px !important;
	 font-weight:     400 !important;
	 line-height:     1.5 !important;
}

 .wp-block-post-title a:hover {
	color: var(--pl-accent) !important;
}

/* ── Price ── */
.wp-block-woocommerce-product-price {
	text-align: center !important;
	padding:    0 24px !important;
	margin:     0 0 16px !important;
}

.wc-block-components-product-price .woocommerce-Price-amount {
	font-size:   18px !important;
	font-weight: 600 !important;
	color:       var(--pl-text) !important;
}

/* Strikethrough on the regular price — browsers draw `text-decoration:
   line-through` low (font-baseline-relative). Replace with a centred
   pseudo-element so the line sits exactly through the middle of the
   characters, regardless of font/size. */
.wc-block-components-product-price del,
.woocommerce-Price-amount del,
.wc-block-grid__product-price del {
	text-decoration: none !important;
	position: relative;
	display: inline-block;
	color: var(--muted-grey-blue, #8A94A6);
	margin-right: 6px;
}

.wc-block-components-product-price del::after,
.woocommerce-Price-amount del::after,
.wc-block-grid__product-price del::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--pl-text);
	transform: translateY(-50%);
	pointer-events: none;
}

/* ── Add to Cart — carousel: icon button ── */
.wp-block-woocommerce-mini-cart-contents .is-product-collection-layout-carousel .wp-block-woocommerce-product-button {
	margin-top:  auto !important;
	padding:     0 24px 24px !important;
	width:       auto !important;
	box-sizing:  border-box;
	display:     flex !important;
	justify-content: flex-end !important;
}

.wp-block-woocommerce-mini-cart-contents .is-product-collection-layout-carousel .wp-block-woocommerce-product-button button {
	width:               40px !important;
	height:              40px !important;
	padding:             0 !important;
	background:          transparent !important;
	border:              none !important;
	cursor:              pointer;
	font-size:           0 !important;
	color:               transparent !important;
	background-image:    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23c)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.333.417c-2.071 0-3.75 1.679-3.75 3.75l-1.768 0c-.335 0-.612 0-.837.018-.234.02-.45.06-.651.164a1.667 1.667 0 0 0-.729.729c-.103.202-.144.417-.163.651-.018.226-.018.502-.018.838v6.285c0 .801 0 1.428.041 1.931.042.512.128.933.322 1.314a3.333 3.333 0 0 0 1.457 1.457c.38.194.801.28 1.313.322.504.041 1.13.041 1.931.041h3.337a.417.417 0 0 0 0-.833H5.5c-.824 0-1.416 0-1.882-.038-.46-.038-.76-.11-1.003-.234a2.5 2.5 0 0 1-1.093-1.093c-.124-.243-.196-.543-.234-1.003A25.5 25.5 0 0 1 1.25 12.833V6.583c0-.357 0-.6.015-.787.015-.183.042-.276.076-.341a.833.833 0 0 1 .364-.364c.065-.033.159-.06.341-.076.188-.015.43-.015.787-.015h9.667l.01 0h1.323c.357 0 .6 0 .787.016.183.015.276.042.341.076a.833.833 0 0 1 .364.364c.033.065.06.159.076.341.015.188.015.43.015.787v1.802a.417.417 0 0 0 .833 0V6.566c0-.335 0-.612-.018-.838a1.668 1.668 0 0 0-.163-.651 1.667 1.667 0 0 0-.729-.729 1.668 1.668 0 0 0-.651-.163c-.226-.018-.502-.018-.838-.018h-1.767c0-2.071-1.679-3.75-3.75-3.75ZM8.333 1.25c1.61 0 2.917 1.306 2.917 2.917H5.416c0-1.611 1.306-2.917 2.917-2.917Z' fill='%23537FF4'/%3E%3Cpath d='M5 7.292a.625.625 0 1 0 0 1.25.625.625 0 0 0 0-1.25Z' fill='%23537FF4'/%3E%3Cpath d='M11.041 7.917a.625.625 0 1 1 1.25 0 .625.625 0 0 1-1.25 0Z' fill='%23537FF4'/%3E%3Cpath d='M17.083 15a.417.417 0 0 1-.417.417h-1.25v1.25a.417.417 0 0 1-.833 0v-1.25h-1.25a.417.417 0 0 1 0-.834h1.25v-1.25a.417.417 0 0 1 .833 0v1.25h1.25c.23 0 .417.187.417.417Z' fill='%23537FF4'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 10.417a4.583 4.583 0 1 0 0 9.166 4.583 4.583 0 0 0 0-9.166ZM11.25 15a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0Z' fill='%23537FF4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-size:     20px 20px;
	background-repeat:   no-repeat;
	background-position: center;
	border-radius:       0 !important;
	box-shadow:          none !important;
	transition:          opacity var(--pl-transition);
}

.wp-block-woocommerce-mini-cart-contents .is-product-collection-layout-carousel .wp-block-woocommerce-product-button button span {
	display: none !important;
}

.wp-block-woocommerce-mini-cart-contents .is-product-collection-layout-carousel .wp-block-woocommerce-product-button button:hover {
	opacity:    .7;
	background: transparent !important;
	box-shadow: none !important;
	transform:  none;
}

/* ── Add to Cart — shop grid: full-width button ── */
 .wp-block-woocommerce-product-button {
	margin-top: auto !important;
	padding:    0 24px 24px !important;
	width:      100% !important;
	box-sizing: border-box;
}

 .wp-block-woocommerce-product-button button,
 .wp-block-woocommerce-product-button .added_to_cart,
 .wp-block-woocommerce-product-button .wp-block-button__link
{
	display:         block !important;
	width:           100% !important;
	padding:         13px !important;
	background:      var(--pl-accent) !important;
	color:           #fff !important;
	text-align:      center !important;
	border-radius:   var(--pl-border-radius) !important;
	font-size:       16px !important;
	 line-height: 1.63 !important;
	font-weight:     600 !important;
	border:          none !important;
	text-decoration: none !important;
	cursor:          pointer;
	box-sizing:      border-box;
	transition:      background var(--pl-transition), box-shadow var(--pl-transition),
	                 transform var(--pl-transition-fast);
}

.wp-block-woocommerce-product-button span {
	width: 100% !important;
}

 .wp-block-woocommerce-product-button button:hover,
 .wp-block-woocommerce-product-button .added_to_cart:hover {
	background: var(--pl-accent-dark) !important;
	box-shadow: var(--pl-shadow-card-atc) !important;
	transform:  translateY(-1px);
}

/* ── Prev/Next buttons ── */
.wc-block-next-previous-buttons {
	gap: 12px !important;
}

.wc-block-next-previous-buttons__button {
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	width:           40px !important;
	height:          40px !important;
	border-radius:   50% !important;
	border:          1.5px solid var(--pl-accent) !important;
	background:      var(--pl-accent) !important;
	cursor:          pointer;
	padding:         0 !important;
	transition:      background var(--pl-transition), border-color var(--pl-transition),
	                 transform var(--pl-transition);
}

/* Hide default WC arrow SVGs */
.wc-block-next-previous-buttons__button svg {
	display: none !important;
}

/* Custom arrow via CSS — next (right arrow) */
.wc-block-next-previous-buttons__button::after {
	content:             "";
	display:             block;
	width:               19px;
	height:              19px;
	background-image:    url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.703 9.231h13.055M15.758 9.231l-4.352-4.352M15.758 9.231l-4.352 4.352' stroke='%23F7F9FC' stroke-width='1.538' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size:     19px 19px;
	background-repeat:   no-repeat;
	background-position: center;
}

/* Previous button — flip the arrow */
.wc-block-next-previous-buttons__button:first-child::after {
	transform: rotate(180deg);
}

.wc-block-next-previous-buttons__button:hover {
	background:   var(--pl-accent-dark) !important;
	border-color: var(--pl-accent-dark) !important;
	transform:    scale(1.08);
}

.wc-block-next-previous-buttons__button[aria-disabled="true"] {
	background:   #8A94A6 !important;
	border-color: #8A94A6 !important;
	cursor:       default;
	transform:    none !important;

}

.wc-block-next-previous-buttons__button[aria-disabled="true"]::after {
	background-image:    url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.703 9.231h13.055M15.758 9.231l-4.352-4.352M15.758 9.231l-4.352 4.352' stroke='%23F7F9FC' stroke-width='1.538' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Hide WC store-notices inside carousel */
.is-product-collection-layout-carousel ~ .wc-block-components-notices,
.wp-block-woocommerce-product-collection > .wc-block-components-notices {
	display: none !important;
}

/* Force next/prev buttons visible even when WC sets [hidden] via context
   (on iOS Safari WC hides them thinking touch-scroll is enough) */
.wc-block-next-previous-buttons[hidden],
.wc-block-next-previous-buttons {
	display: flex !important;
}

.wc-block-next-previous-buttons__button[hidden] {
	display: flex !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
	/* Collection gets relative + bottom padding for buttons.
	   Skip carousels inside the mini-cart drawer — they keep the inline
	   prev/next buttons and don't need the absolute-bottom layout. */
	.wp-block-woocommerce-product-collection[data-display-layout*="carousel"]:not(.wp-block-woocommerce-mini-cart-contents *) {
		position:       relative;
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* Absolute-position the buttons below the carousel track */
	.wp-block-woocommerce-product-collection[data-display-layout*="carousel"]:not(.wp-block-woocommerce-mini-cart-contents *) .wc-block-next-previous-buttons {
		position:        absolute !important;
		bottom:          0;
		left:            50%;
		transform:       translate(-50%, -100%);
		justify-content: center !important;
		z-index:         5;
	}
}

@media (max-width: 480px) {

	.peptilab-products-grid.pl-view--list li.wc-block-product {
		flex-direction: column !important;
	}
	.peptilab-products-grid.pl-view--list .pl-card__image-wrap {
		width: 100%;
	}
}