/* Image centered inside its box */
.ds-sdk-product-item__image {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Enforce consistent blocks so cards align */
.pp-img-box {
	height: 260px; /* adjust as needed for your grid */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 100%;
}

/* Keep product images contained inside the fixed box */
.pp-img-box img {
	height: 100%;
	width: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

/* Responsive heights so rows stay aligned on smaller screens */
@media (max-width: 1024px) {
	.pp-img-box { height: 220px; }
}
@media (max-width: 640px) {
	.pp-img-box { height: 180px; }
}

/* Product title */
.pp-plp-title {
	color: #000 !important;
	font-family: "Edu Monument Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 21px; /* 116.667% */
	text-transform: capitalize;
}
.pp-block-title {
	/* clamp to 3 lines with ellipsis */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 63px; /* 3 * 21px line-height */
}

/* "+ More Options Available" */
.pp-more-options {
	color: rgb(156 163 175) !important; /* Gray-400 color */
	font-family: "Edu Monument Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: .75rem; /* 12px */
	font-style: normal;
	font-weight: 400;
	line-height: 1rem;
	text-decoration-line: none !important; /* Remove underline */
	text-transform: none !important; /* Remove automatic text transform */
	text-align: left;
}

/* Use JavaScript to handle selective lowercase transformation */

/* Reserve space for "+ More Options Available" so rows align even when missing */
.pp-block-more-options { min-height: 16px; }

/* Stars row */
.pp-stars svg {
	margin-right: 4px;
    width: 24px !important; /* Updated star width to make fills ~17px */
    height: 24px !important; /* Updated star height to make fills ~17px */
}

/* More specific selectors to override inline styles */
.pp-stars svg[width="16"],
.pp-stars svg[height="16"],
.pp-stars span svg,
.pp-block-stars svg {
    width: 24px !important; /* Updated star width to make fills ~17px */
    height: 24px !important; /* Updated star height to make fills ~17px */
}

/* Override any inline width/height attributes */
.pp-stars svg[width],
.pp-stars svg[height] {
    width: 24px !important;
    height: 24px !important;
}

/* Ensure SVG content scales properly */
.pp-stars svg,
.pp-block-stars svg {
    /* Force the SVG to scale its content to fit the new dimensions */
    transform-origin: top left;
    /* Ensure the SVG preserves aspect ratio while scaling */
    preserveAspectRatio: xMidYMid meet;
}

/* Additional star sizing with transform scale as backup */
.pp-stars svg g,
.pp-block-stars svg g {
    /* Scale the inner graphics if needed */
    transform-origin: center;
}
.pp-card {
    border: 1px solid #d5d5d5;
    border-radius: 6px;
}

/* Product card interactive styling */
.card {
    border: 1px solid #e5e7eb; /* Default border */
    transition: border-color 0.15s ease-in-out;
}

.card-interactive:hover,
.hover\:border-black:hover {
    border-color: #000000 !important; /* Black border on hover */
}

/* Apply card classes to Live Search product items */
.ds-sdk-product-item,
[data-cy="product-item"],
.mls-product-grid .product-item,
.pp-card {
    /* Add the required classes via CSS */
    border: 1px solid #e5e7eb !important; /* border class */
    transition: border-color 0.15s ease-in-out !important; /* card-interactive behavior */
    padding: 1rem !important; /* Ensure padding for all content */
    border-radius: 0.375rem !important; /* Rounded corners */
    background: white !important;
    box-sizing: border-box !important; /* Include padding in border calculations */
    display: flex !important;
    flex-direction: column !important;
    position: relative !important; /* For proper containment */
    overflow: hidden !important; /* Ensure content stays within border */
}

.ds-sdk-product-item:hover,
[data-cy="product-item"]:hover,
.mls-product-grid .product-item:hover,
.pp-card:hover {
    border-color: #000000 !important; /* hover:border-black */
}

/* Ensure Auto-Ship content is contained within the card */
.ds-sdk-product-item .pp-autoship,
[data-cy="product-item"] .pp-autoship,
.mls-product-grid .product-item .pp-autoship,
.pp-card .pp-autoship {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure all content is properly contained */
.ds-sdk-product-item > *,
[data-cy="product-item"] > *,
.mls-product-grid .product-item > *,
.pp-card > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Main product grid container - add padding to contain Auto-Ship content */
.mls-product-grid,
[data-cy="product-grid"],
.ds-widgets_results,
.ds-sdk-product-list {
    box-sizing: border-box !important;
    /* Remove grid styling - let Live Search handle its own grid layout */
}

/* Add padding only on desktop, remove on mobile */
@media (min-width: 768px) {
    .mls-product-grid,
    [data-cy="product-grid"],
    .ds-widgets_results,
    .ds-sdk-product-list {
        padding: 1rem !important; /* Add padding to main grid on desktop only */
    }
}

/* Ensure no padding on mobile */
@media (max-width: 767px) {
    .mls-product-grid,
    [data-cy="product-grid"],
    .ds-widgets_results,
    .ds-sdk-product-list {
        padding: 0 !important; /* Remove padding on mobile */
    }
    
    /* Fix image margin on mobile */
    .ds-widgets .m-auto {
        margin-top: 0px !important;
    }
}

/* Targeted fix for Live Search product cards - add bottom padding for Auto-Ship content */
.ds-widgets .border-solid {
    padding-bottom: 30px !important;
}
.pp-block-stars { min-height: 20px; }

/* Group everything above price so heights align */
.pp-above-price {
	min-height: 140px; /* title + stars + more-options */
}

/* Starting At label */
.pp-price-label {
	color: #000 !important;
	font-family: "Edu Monument Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 17.223px; /* 123.022% */
}

/* Price */
.pp-price {
	color: #1927de !important; /* Updated color */
	font-family: Grotesk, sans-serif !important; /* Updated font family */
	font-size: 1.25rem !important; /* Updated to 1.25rem */
	font-style: normal;
	font-weight: 600 !important; /* Updated to font-weight 600 */
	line-height: 21px; /* 105% */
}
.pp-block-price { min-height: 28px; align-items: baseline; }

/* As low as label */
.pp-as-low-as {
    color: #000 !important;
    font-family: "Edu Monument Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 17.223px;
}

/* Autoship line */
.pp-autoship {
	margin-top: 8px;
}
.pp-block-autoship { min-height: 22px; }
.pp-autoship-bold {
	color: #000 !important;
	font-family: "Edu Monument Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 17.223px;
}
.pp-autoship-normal {
	color: #000 !important;
	font-family: "Edu Monument Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 17.223px;
}