/* Product detail layout matching provided mock. */
.pd-shell { /* Page padding container - full-width on mobile (320px-767px). */
	padding: 32px 16px;
	width: 100%;
	margin: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 17px;
}

.pd-breadcrumb {
	display: none !important;
}

.pd-breadcrumb { /* Breadcrumb alignment matching screenshot design. */
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #9e9e9e;
	width: 100%;
	padding: 0;
}

.pd-breadcrumb a { /* Breadcrumb links inherit subtle color with hover state. */
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.pd-breadcrumb a:hover {
	color: #111111;
}

.pd-breadcrumb-sep { /* Breadcrumb separator styling matching screenshot ">" character. */
	color: #9e9e9e;
	font-size: 12px;
	font-weight: 600;
	margin: 0 2px;
}

.pd-card { /* Main product card background matching screenshot - clean white background. */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
	background: #ffffff;
	padding: 0;
	margin: 0;
}

.pd-media { /* Image gallery container. */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 100%;
}

.pd-figure { /* Main image wrapper with rounded corners - responsive from 390px baseline. */
	width: calc((354 / 390) * 100vw);
	max-width: 354px;
	aspect-ratio: 1 / 1; /* 1:1 ratio for product images */
	border-radius: 20px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0;
}

.pd-figure img { /* Ensure main image scales nicely. */
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ensure .pd-image maintains 1:1 aspect ratio */
.pd-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1; /* 1:1 ratio for product images */
	display: block;
}

.pd-thumbs { /* Thumbnail strip styles - responsive from 390px baseline. */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: calc((8 / 390) * 100vw);
	list-style: none;
	width: 100%;
	height: calc((120 / 390) * 100vw);
	margin: 0;
	padding: 0 calc((2 / 390) * 100vw);
	overflow-x: auto; /* Enable horizontal scroll - scrollbar appears only when needed */
	overflow-y: hidden; /* Prevent vertical scrollbar */
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin; /* Show thin scrollbar in Firefox when scrolling is needed */
	scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* Scrollbar color for Firefox */
}

/* Show scrollbar in WebKit browsers when scrolling is needed - mobile view */
.pd-thumbs::-webkit-scrollbar {
	height: 6px; /* Horizontal scrollbar height for mobile */
	width: 0; /* Hide vertical scrollbar */
	display: block; /* Show scrollbar when content overflows */
}

/* Style the scrollbar track - mobile view */
.pd-thumbs::-webkit-scrollbar-track {
	background: transparent; /* Transparent track */
	border-radius: 3px;
}

/* Style the scrollbar thumb - mobile view */
.pd-thumbs::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.3); /* Semi-transparent thumb */
	border-radius: 3px;
	transition: background 0.2s ease;
}

/* Hover state for scrollbar thumb - mobile view */
.pd-thumbs::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.5); /* Darker on hover */
}

.pd-thumb { /* Individual thumbnail item tooling - responsive from 390px baseline. */
	background: #ffffff;
	border-radius: calc((20 / 390) * 100vw);
	width: calc((115 / 390) * 100vw);
	max-width: 115px;
	aspect-ratio: 1 / 1; /* 1:1 ratio for thumbnail images */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: calc((1 / 390) * 100vw) solid transparent;
	flex: 0 0 calc((115 / 390) * 100vw);
	overflow: hidden;
	scroll-snap-align: start;
}

.pd-thumb img { /* Thumbnail images maintain aspect ratio. */
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ensure .pd-thumb-img maintains 1:1 aspect ratio */
.pd-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1; /* 1:1 ratio for thumbnail images */
	display: block;
}

/* Video thumbnail styling - matches image thumbnails */
.pd-thumb.video-thumb {
	position: relative;
}

.pd-thumb.video-thumb .pd-thumb-btn {
	position: relative;
}

.pd-thumb.video-thumb .video-thumb-preview {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #f0f0f0;
	display: block;
	aspect-ratio: 1 / 1; /* 1:1 ratio for video thumbnail preview */
}

.pd-thumb.video-thumb .video-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 1 / 1; /* 1:1 ratio for video thumbnail images */
}

.pd-thumb.video-thumb .video-play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	color: #ffffff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	z-index: 2;
	transition: transform 0.2s ease;
}

.pd-thumb.video-thumb:hover .video-play-overlay {
	transform: translate(-50%, -50%) scale(1.1);
}

.pd-thumb.video-thumb .video-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #666666;
	background: #f0f0f0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/* Video in main viewer */
.pd-figure video.pd-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	aspect-ratio: 1 / 1; /* 1:1 ratio for product videos */
}

/* Ensure .pd-video class maintains 1:1 aspect ratio */
.pd-video {
	aspect-ratio: 1 / 1; /* 1:1 ratio for product videos */
}

.pd-thumb-btn { /* Reset thumbnail button appearance. */
	background: transparent;
	border: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.pd-thumb-btn:focus-visible { /* Provide accessible focus indicator on thumbnails. */
	outline: 2px solid #ff6b8a;
	outline-offset: 3px;
}

.pd-thumb.is-active { /* Highlight active thumbnail matching screenshot. */
	border-color: #000000;
	border-width: 2px;
}

.pd-info { /* Summary column matching screenshot spacing. */
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: flex-start;
}

.pd-name { /* Product title styling - responsive from 390px baseline. */
	font-size: calc((32 / 390) * 100vw);
	line-height: calc((28 / 390) * 100vw);
	font-weight: 700;
	color: #181818;
	margin: 0;
	width: 100%;
}

.pd-rating { /* Rating row styles - responsive from 390px baseline, fully visible. */
	display: flex;
	align-items: center;
	gap: 5px;
	width: calc((154 / 390) * 100vw);
	max-width: 154px;
	height: auto;
	min-height: calc((19 / 390) * 100vw);
	position: relative;
	font-size: calc((14 / 390) * 100vw);
	color: #4c4c4c;
	margin: 12px 0;
}

.pd-rating .pd-star-rating { /* Product detail star rating adjustments - responsive. */
	margin: 0;
	font-size: calc((15 / 390) * 100vw);
	color: #ffb321;
	flex: 0 0 auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 18px; /* Fixed height to match span */
}

/* Remove WooCommerce default star rating pseudo-element */
.woocommerce .star-rating::before {
	content: none !important;
	display: none !important;
}

/* Star rating images - using same method as reviews section (img/star-1-4.svg) */
.pd-rating .pd-star-rating .review-star {
	width: 18px; /* Fixed width for mobile view */
	height: 18px; /* Fixed height for mobile view */
	display: inline-block;
	flex-shrink: 0;
	object-fit: contain;
	margin: 0;
}

/* Filled star (full rating) - same styling as reviews */
.pd-rating .pd-star-rating .review-star--filled {
	opacity: 1;
	filter: brightness(1);
}

/* Half star - same styling as reviews */
.pd-rating .pd-star-rating .review-star--half {
	opacity: 0.6;
	filter: brightness(0.8);
}

/* Empty star - same styling as reviews */
.pd-rating .pd-star-rating .review-star--empty {
	opacity: 0.3;
	filter: brightness(0.5) grayscale(0.3);
}

.pd-rating span { /* Numeric rating styling - responsive from 390px baseline. */
	font-weight: 600;
	font-size: calc((14 / 390) * 100vw);
	color: #4c4c4c;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1;
	height: 18px; /* Fixed height to match star-rating container */
	display: inline-flex;
	align-items: center;
}

.pd-price-row { /* Price + badge arrangement matching screenshot layout. */
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	height: auto;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.pd-price { /* Current sale price matching screenshot - bold black. */
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 28px;
	font-weight: 800;
	color: #000000;
	margin: 0;
	line-height: 1.2;
}

.pd-price del { /* Regular price styling matching screenshot - struck-through grey. */
	font-size: 18px;
	font-weight: 600;
	color: #bdbdbd;
	text-decoration-thickness: 2px;
	margin-left: 8px;
}

.pd-badge { /* Discount badge styling matching screenshot - red badge. */
	background: #ffe9ea;
	color: #ff5c5c;
	font-weight: 700;
	font-size: 13px;
	padding: 6px 14px;
	border-radius: 999px;
	line-height: 1;
	white-space: nowrap;
}

.pd-tags { /* Descriptor line for product traits (tags). */
	font-size: 14px;
	font-weight: 600;
	font-style: italic;
	color: #8a8a8a;
	margin: 0;
}

.pd-desc { /* Short description text styling - responsive from 390px baseline. */
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: calc((16 / 390) * 100vw);
	line-height: calc((26 / 390) * 100vw);
	letter-spacing: calc((0.4 / 390) * 100vw);
	color: #4f4f4f;
	width: 100%;
	margin: 0;
}

.pd-divider { /* Thin separator before controls - responsive from 390px baseline. */
	width: 100%;
	max-width: 100%;
	height: 0;
	border: 0;
	border-top: calc((1 / 390) * 100vw) solid rgba(0, 0, 0, 0.08);
	background: transparent;
}

/* Hide stock text on single product pages - CSS only, no PHP changes. */
.pd-cart .stock.in-stock,
.pd-info .stock.in-stock {
	display: none !important;
}

/* Remove WooCommerce default margin-bottom from cart form. */
.woocommerce div.product form.cart {
	margin-bottom: 0 !important;
}

.pd-cart { /* Add-to-cart row matching screenshot layout. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
	width: 100%;
	margin: 9px 0 14px;
}

.pd-cart form.cart { /* WooCommerce cart form wrapper - single-line layout for mobile. */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2.5vw, 16px); /* Responsive gap: 10px min, scales to 16px max */
	width: 100%;
}

.pd-cart form.cart .quantity { /* Quantity wrapper alignment for single-line layout. */
	display: flex;
	justify-content: flex-start;
	width: auto;
	min-width: 0;
	margin: 0;
	flex-shrink: 0;
	overflow: hidden;
}

.pd-qty { /* Styled quantity control wrapper - responsive from 390px baseline. */
	display: grid;
	grid-template-columns: calc((20 / 390) * 100vw) minmax(0, 1fr) calc((20 / 390) * 100vw);
	align-items: center;
	justify-items: center;
	width: calc((113 / 390) * 100vw);
	max-width: 113px;
	min-width: 0;
	height: calc((44 / 390) * 100vw);
	max-height: 44px;
	column-gap: calc((8 / 390) * 100vw);
	padding: calc((12 / 390) * 100vw) calc((8 / 390) * 100vw);
	border-radius: calc((62 / 390) * 100vw);
	background: #f0f0f0;
	border: none;
	box-shadow: none;
	box-sizing: border-box;
	overflow: visible;
	margin: 0;
	flex-shrink: 0;
}

.pd-qty .qty { /* Quantity input styling - responsive from 390px baseline. */
	border: 0;
	background: transparent;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: calc((20 / 390) * 100vw);
	text-align: center;
	font-size: calc((16 / 390) * 100vw);
	font-weight: 700;
	color: #141414;
	padding: 0;
	line-height: calc((20 / 390) * 100vw);
	outline: none;
	box-sizing: border-box;
	overflow: visible;
}

.pd-qty .qty::-webkit-outer-spin-button,
.pd-qty .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pd-qty-btn { /* Minus/plus control styling - responsive from 390px baseline. */
	width: calc((20 / 390) * 100vw);
	height: calc((20 / 390) * 100vw);
	display: block;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.pd-qty-btn:hover {
	opacity: 0.7;
}

.pd-qty-btn:focus-visible {
	outline: 2px solid #ff6b8a;
	outline-offset: 3px;
}

.pd-cart .single_add_to_cart_button { /* Style add to cart button - responsive from 390px baseline. */
	background: #000000 !important;
	border: none;
	border-radius: calc((62 / 390) * 100vw) !important;
	width: calc((236 / 390) * 100vw);
	max-width: 236px;
	height: calc((44 / 390) * 100vw);
	max-height: 44px;
	padding: calc((16 / 390) * 100vw) calc((54 / 390) * 100vw);
	gap: calc((12 / 390) * 100vw);
	font-weight: 700;
	font-size: calc((16 / 390) * 100vw);
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 calc((12 / 390) * 100vw) calc((22 / 390) * 100vw) rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.pd-cart .single_add_to_cart_button:hover { /* Provide hover feedback. */
	transform: translateY(calc((-1 / 390) * 100vw));
	box-shadow: 0 calc((16 / 390) * 100vw) calc((26 / 390) * 100vw) rgba(0, 0, 0, 0.28);
	background: #111111;
}

/* Accordion + media layout */
/* Product accordion list styling - matches design exactly */
.pd-accordion-list {
	display: flex;
	flex-direction: column;
	gap: 12px; /* Spacing between accordion cards */
	margin: 3px 0 16px;
	width: 100%;
}

.pd-accordion-card {
	background: #efefef; /* Light gray background */
	border-radius: 8px; /* Rounded corners */
	overflow: hidden; /* Contain content */
	transition: box-shadow 0.2s ease;
}


.pd-accordion-card__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 20px; /* Padding inside the trigger - matching design */

	border: none;
	font-size: 16px;
	font-weight: 700;
	color: #000000; /* Pure black text */
	cursor: pointer;
	text-align: left;
	transition: background-color 0.2s ease;
}

.pd-accordion-card__trigger:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
	border-radius: 18px;
}

.pd-accordion-card__meta {
	display: flex;
	align-items: center;
	gap: 14px; /* Space between icon and label - matching design */
	flex: 1;
	min-width: 0; /* Allow text to shrink if needed */
}

.pd-accordion-card__icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-shrink: 0;
	width: auto;
	height: 28px; /* Fixed height container */
}

.pd-accordion-card__icon img {
	display: block;
	width: auto;
	height: 28px; /* Consistent height for all icons */
	object-fit: contain;
	max-width: 28px; /* Prevent icons from being too wide */
}

.pd-accordion-card__label {
	font-weight: 700;
	color: #000000; /* Pure black text */
	line-height: 1.4;
	font-size: 16px;
}

.pd-accordion-card__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

.pd-accordion-card__toggle img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
	transition: transform 0.2s ease;
}

.pd-accordion-card.is-open .pd-accordion-card__toggle img {
	transform: rotate(45deg); /* Rotate plus to make X when open */
}

.pd-accordion-card__content {
	padding: 0; /* No padding on content container */
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #4f4f4f;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.pd-accordion-card.is-open .pd-accordion-card__content {
	max-height: 1200px;
}

.pd-accordion-card__content p {
	margin: 0;
	padding: 0 20px 16px; /* Padding applied only to paragraph elements - matching trigger horizontal padding */
}

.pd-accordion-card__content p:first-child {
	padding-top: 16px; /* Top padding on first paragraph when content is open */
}

.pd-accordion-card__content p:last-child {
	margin-bottom: 0;
}

/* List styling for accordion content - ensure bullet points are visible */
.pd-accordion-card__content ul,
.pd-accordion-card__content ol {
	margin: 0;
	padding: 0 20px 16px 40px; /* Left padding to accommodate bullet points */
	list-style-position: outside; /* Bullets appear outside the content box */
}

.pd-accordion-card__content ul {
	list-style-type: disc; /* Show disc bullets for unordered lists */
}

.pd-accordion-card__content ol {
	list-style-type: decimal; /* Show numbers for ordered lists */
}

.pd-accordion-card__content li {
	margin: 0 0 8px 0; /* Spacing between list items */
	padding: 0;
	line-height: 1.6; /* Match paragraph line height */
}

.pd-accordion-card__content li:last-child {
	margin-bottom: 0; /* Remove bottom margin from last list item */
}

/* Style paragraphs inside list items */
.pd-accordion-card__content li p {
	margin: 0;
	padding: 0; /* Remove padding from paragraphs inside list items */
	display: inline; /* Allow paragraph to flow with list item */
}

.pd-accordion-card__content a {
	color: #0f1419;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.pd-accordion-card__content a:hover {
	opacity: 0.7;
}

.pd-story {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 32px 0 16px;
}

.pd-story__header {
	display: flex;
	flex-direction: column;
	align-items: baseline;
	text-align: center;
	gap: 10px;
	margin: 0 auto 16px;
}

.pd-story__eyebrow {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	color: #111111;
}

.pd-story__rule {
	width: 160px;
	max-width: 70%;
	height: 2px;
	background: #111111;
	border-radius: 999px;
}


.pd-story-card p {
	margin: 0 0 14px;
}

.pd-story-card p:last-child {
	margin-bottom: 0;
}

.pd-story-media {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pd-story-media__item {
	background: #ffffff;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(17, 24, 39, 0.1);
}

.pd-story-media__item img,
.pd-story-media__item figure,
.pd-story-media__item iframe,
.pd-story-media__item video {
	width: 100%;
	display: block;
}


.pd-lower .woocommerce-tabs { /* Tabs spacing override - responsive from 390px baseline. */
	margin-bottom: calc((40 / 390) * 100vw);
}

.pd-story-card p img {
	margin-bottom: 10px;
	width: 100%;
	border-radius: 20px;
}

/* Responsive breakpoints scaling from 390px baseline */
@media (min-width: 375px) {
	/* Scale proportionally for 375px and up */
	.pd-figure {
		width: calc((354 / 375) * 100vw);
		max-width: 354px;
	}
	
	.pd-thumb {
		width: calc((115 / 375) * 100vw);
		max-width: 115px;
		flex: 0 0 calc((115 / 375) * 100vw);
	}
	
	.pd-thumbs {
		gap: calc((8 / 375) * 100vw);
		height: calc((106 / 375) * 100vw);
	}
	
	.pd-name {
		font-size: calc((32 / 375) * 100vw);
		line-height: calc((28 / 375) * 100vw);
	}
	
	.pd-rating {
		gap: 5px;
		width: calc((154 / 375) * 100vw);
		max-width: 154px;
		min-height: calc((19 / 375) * 100vw);
		font-size: calc((14 / 375) * 100vw);
	}
	
	.pd-rating .pd-star-rating {
		font-size: calc((15 / 375) * 100vw);
		height: 18px; /* Fixed height to match span */
	}
	
	.pd-rating .pd-star-rating .review-star {
		width: 18px; /* Fixed width for mobile view */
		height: 18px; /* Fixed height for mobile view */
	}
	
	.pd-rating span {
		height: 18px; /* Fixed height to match star-rating container */
	}
	
	.pd-rating span {
		font-size: calc((14 / 375) * 100vw);
	}
	
	.pd-desc {
		font-size: calc((16 / 375) * 100vw);
		line-height: calc((26 / 375) * 100vw);
		letter-spacing: calc((0.4 / 375) * 100vw);
	}
	
	.pd-qty {
		width: calc((113 / 375) * 100vw);
		max-width: 113px;
		min-width: 0;
		height: calc((44 / 375) * 100vw);
		max-height: 44px;
		column-gap: calc((8 / 375) * 100vw);
		padding: calc((12 / 375) * 100vw) calc((8 / 375) * 100vw);
		border-radius: calc((62 / 375) * 100vw);
		grid-template-columns: calc((20 / 375) * 100vw) minmax(0, 1fr) calc((20 / 375) * 100vw);
		box-sizing: border-box;
		overflow: visible;
	}
	
	.pd-qty .qty {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: calc((20 / 375) * 100vw);
		font-size: calc((16 / 375) * 100vw);
		line-height: calc((20 / 375) * 100vw);
		padding: 0;
		box-sizing: border-box;
		overflow: visible;
	}
	
	.pd-qty-btn {
		width: calc((20 / 375) * 100vw);
		height: calc((20 / 375) * 100vw);
	}
	
	.pd-cart .single_add_to_cart_button {
		width: calc((236 / 375) * 100vw);
		max-width: 236px;
		height: calc((44 / 375) * 100vw);
		max-height: 44px;
		padding: calc((16 / 375) * 100vw) calc((54 / 375) * 100vw);
		gap: calc((12 / 375) * 100vw);
		font-size: calc((16 / 375) * 100vw);
		border-radius: calc((62 / 375) * 100vw) !important;
		box-shadow: 0 calc((12 / 375) * 100vw) calc((22 / 375) * 100vw) rgba(0, 0, 0, 0.25);
	}
	
	.pd-cart .single_add_to_cart_button:hover {
		transform: translateY(calc((-1 / 375) * 100vw));
		box-shadow: 0 calc((16 / 375) * 100vw) calc((26 / 375) * 100vw) rgba(0, 0, 0, 0.28);
	}
}

@media (min-width: 425px) {
	/* Scale proportionally for 425px and up */
	.pd-figure {
		width: calc((354 / 425) * 100vw);
		max-width: 354px;
	}
	
	.pd-thumb {
		width: calc((115 / 425) * 100vw);
		max-width: 115px;
		flex: 0 0 calc((115 / 425) * 100vw);
	}
	
	.pd-thumbs {
		gap: calc((8 / 425) * 100vw);
		height: calc((106 / 425) * 100vw);
	}
	
	.pd-name {
		font-size: calc((32 / 425) * 100vw);
		line-height: calc((28 / 425) * 100vw);
	}
	
	.pd-rating {
		gap: 5px;
		width: calc((154 / 425) * 100vw);
		max-width: 154px;
		min-height: calc((19 / 425) * 100vw);
		font-size: calc((14 / 425) * 100vw);
	}
	
	.pd-rating .pd-star-rating {
		font-size: calc((15 / 425) * 100vw);
		height: 18px; /* Fixed height to match span */
	}
	
	.pd-rating .pd-star-rating .review-star {
		width: 18px; /* Fixed width for mobile view */
		height: 18px; /* Fixed height for mobile view */
	}
	
	.pd-rating span {
		height: 18px; /* Fixed height to match star-rating container */
	}
	
	.pd-rating span {
		font-size: calc((14 / 425) * 100vw);
	}
	
	.pd-desc {
		font-size: calc((16 / 425) * 100vw);
		line-height: calc((26 / 425) * 100vw);
		letter-spacing: calc((0.4 / 425) * 100vw);
	}
	
	.pd-qty {
		width: calc((113 / 425) * 100vw);
		max-width: 113px;
		min-width: 0;
		height: calc((44 / 425) * 100vw);
		max-height: 44px;
		column-gap: calc((8 / 425) * 100vw);
		padding: calc((12 / 425) * 100vw) calc((8 / 425) * 100vw);
		border-radius: calc((62 / 425) * 100vw);
		grid-template-columns: calc((20 / 425) * 100vw) minmax(0, 1fr) calc((20 / 425) * 100vw);
		box-sizing: border-box;
		overflow: visible;
	}
	
	.pd-qty .qty {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: calc((20 / 425) * 100vw);
		font-size: calc((16 / 425) * 100vw);
		line-height: calc((20 / 425) * 100vw);
		padding: 0;
		box-sizing: border-box;
		overflow: visible;
	}
	
	.pd-qty-btn {
		width: calc((20 / 425) * 100vw);
		height: calc((20 / 425) * 100vw);
	}
	
	.pd-cart .single_add_to_cart_button {
		width: calc((236 / 425) * 100vw);
		max-width: 236px;
		height: calc((44 / 425) * 100vw);
		max-height: 44px;
		padding: calc((16 / 425) * 100vw) calc((54 / 425) * 100vw);
		gap: calc((12 / 425) * 100vw);
		font-size: calc((16 / 425) * 100vw);
		border-radius: calc((62 / 425) * 100vw) !important;
		box-shadow: 0 calc((12 / 425) * 100vw) calc((22 / 425) * 100vw) rgba(0, 0, 0, 0.25);
	}
	
	.pd-cart .single_add_to_cart_button:hover {
		transform: translateY(calc((-1 / 425) * 100vw));
		box-shadow: 0 calc((16 / 425) * 100vw) calc((26 / 425) * 100vw) rgba(0, 0, 0, 0.28);
	}
}

@media (min-width: 768px) { /* Tablet and up adjustments - matching screenshot exactly. */	

	.pd-story__header {
		align-items: center;
	}

	.pd-breadcrumb {
		width: auto;
		font-size: 14px;
		gap: 6px;
	}
	
	.pd-breadcrumb-sep {
		margin: 0 4px;
	}

	.pd-card {
		width: 100%;
		padding: 0; /* Design specifies edge-to-edge card */
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr)); /* Two equal columns */
		align-items: flex-start;
	}

	/* .pd-media: Flex layout matching reference image exactly - main image on top, thumbnails below in horizontal row */
	.pd-media {
		display: flex;
		flex-direction: column; /* Stack main image and thumbnails vertically */
		align-items: flex-start; /* Align items to left */
		gap: clamp(7px, 0.9vw, 12px); /* Gap between main image and thumbnails: 12px at 1440px */
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/* .pd-figure: Main product image container - positioned on top */
	.pd-figure {
		width: 100%; /* Full width */
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		flex-shrink: 0;
		border-radius: 20px; /* Rounded corners matching reference */
		background: #ffffff; /* White background */
		max-width: 100%;
		aspect-ratio: 1 / 1; /* 1:1 ratio for product images */
	}

	/* Main product image styling */
	.pd-figure img {
		width: 100%;
		height: 100%;
		object-fit: cover; /* Cover entire container maintaining aspect ratio */
		border-radius: 20px; /* Match container border radius */
		display: block;
	}

	/* .pd-thumbs: Thumbnail row - positioned below main image, arranged horizontally */
	.pd-thumbs {
		display: flex;
		flex-direction: row; /* Horizontal row matching reference image */
		align-items: center; /* Center align thumbnails vertically */
		justify-content: flex-start; /* Align thumbnails to left */
		gap: clamp(8px, 1vw, 12px); /* Gap between thumbnails: 12px at 1440px */
		overflow-x: auto; /* Enable horizontal scroll for overflow thumbnails - scrollbar appears only when needed */
		overflow-y: hidden; /* Hide vertical overflow to keep layout clean */
		width: 100%; /* Full width */
		padding: 0;
		margin: 0;
		list-style: none; /* Remove default list styling */
		height: auto; /* Auto height to fit content */
		-webkit-overflow-scrolling: touch; /* Smooth scroll on touch devices */
		scrollbar-width: thin; /* Show thin scrollbar in Firefox when scrolling is needed */
		scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* Scrollbar color for Firefox */
	}

	/* Show scrollbar in WebKit browsers when scrolling is needed */
	.pd-thumbs::-webkit-scrollbar {
		height: 8px; /* Horizontal scrollbar height */
		width: 0; /* Hide vertical scrollbar */
		display: block; /* Show scrollbar when content overflows */
	}

	/* Style the scrollbar track */
	.pd-thumbs::-webkit-scrollbar-track {
		background: transparent; /* Transparent track */
		border-radius: 4px;
	}

	/* Style the scrollbar thumb */
	.pd-thumbs::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.3); /* Semi-transparent thumb */
		border-radius: 4px;
		transition: background 0.2s ease;
	}

	/* Hover state for scrollbar thumb */
	.pd-thumbs::-webkit-scrollbar-thumb:hover {
		background: rgba(0, 0, 0, 0.5); /* Darker on hover */
	}

	/* Individual thumbnail item - matches reference image dimensions */
	.pd-thumb {
		width: clamp(89px, 11.6vw, 167px); /* Width: 167px at 1440px, scales proportionally */
		height: clamp(89px, 11.6vw, 167px); /* Height: 167px at 1440px, scales proportionally */
		min-width: clamp(89px, 11.6vw, 167px); /* Ensure minimum width */
		min-height: clamp(89px, 11.6vw, 167px); /* Ensure minimum height */
		flex: 0 0 auto; /* Prevent shrinking or growing */
		padding: 0;
		margin: 0;
		background: #ffffff; /* White background matching reference */
		border-radius: clamp(14px, 1.4vw, 20px); /* Rounded corners: 20px at 1440px */
		border: 1px solid transparent; /* Transparent border by default */
		box-shadow: 0 14px 30px rgba(170, 184, 210, 0.24); /* Shadow matching reference */
		cursor: pointer;
		overflow: hidden; /* Hide overflow for rounded corners */
		transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Thumbnail image styling */
	.pd-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover; /* Cover entire thumbnail maintaining aspect ratio */
		display: block;
	}

	/* Active thumbnail state - matches reference image */
	.pd-thumb.is-active {
		border-color: #9e9e9e; /* Grey border for active thumbnail matching reference */
		border-width: 1px;
		box-shadow: 0 14px 30px rgba(170, 184, 210, 0.24); /* Maintain shadow on active state */
	}

	.pd-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-left: 0;
		width: 100%;
	}

	.pd-name {
		font-size: clamp(36px, 4vw, 48px);
		line-height: 1.2;
		font-weight: 700;
		color: #181818;
		margin: 0;
		width: 100%;
	}

	.pd-rating {
		display: flex;
		align-items: center;
		gap: 5px;
		width: auto;
		height: auto;
		font-size: clamp(14px, 1.5vw, 18px);
		min-width: clamp(170px, 13.3vw, 192px);
		min-height: clamp(20px, 1.8vw, 24px);
		margin: 10px 0 14px;
	}
	
	/* Star rating images for desktop breakpoint */
	.pd-rating .pd-star-rating {
		height: 24px; /* Fixed height to match span on desktop */
	}
	
	.pd-rating .pd-star-rating .review-star {
		width: 24px; /* Fixed width for desktop view */
		height: 24px; /* Fixed height for desktop view */
	}
	
	.pd-rating span {
		height: 24px; /* Fixed height to match star-rating container on desktop */
		font-size: 20px;
	}

	.pd-price-row {
		display: flex;
		align-items: center;
		gap: clamp(12px, 1.5vw, 16px);
		width: auto;
		min-height: clamp(38px, 3vw, 44px);
		flex-wrap: wrap;
		margin-bottom: 19px;
	}

	.pd-tags {
		font-size: clamp(16px, 1.6vw, 18px);
		color: #8a8a8a;
		font-style: italic;
		margin-bottom: 16px;
	}

	.pd-price {
		font-size: clamp(32px, 3.5vw, 44px);
		font-weight: 800;
		color: #000000;
		margin: 0;
		line-height: 1.2;
	}

	.pd-desc {
		max-width: clamp(420px, 42vw, 520px);
		font-size: clamp(18px, 1.6vw, 20px);
		line-height: 1.7;
		color: #4f4f4f;
		margin: 0;
		width: 100%;
	}

	.pd-desc p {
		font-size: clamp(18px, 1.6vw, 20px);
		line-height: 1.7;
		margin: 0;
	}

	.pd-cart {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: clamp(18px, 2vw, 24px);
		width: 100%;
		margin: 25px 0 28px;
	}

	.pd-cart form.cart {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: clamp(20px, 2.5vw, 28px);
		justify-content: center;
		width: 100%;
		margin: 0;
	}

	.pd-qty {
		width: clamp(150px, 17vw, 170px);
		min-width: 0;
		height: clamp(48px, 4.5vw, 52px);
		grid-template-columns: clamp(28px, 3vw, 36px) minmax(0, 1fr) clamp(28px, 3vw, 36px);
		column-gap: clamp(8px, 1vw, 12px);
		padding: clamp(12px, 1.2vw, 14px) clamp(8px, 1vw, 12px);
		border-radius: 62px;
		box-sizing: border-box;
		overflow: visible;
		flex-shrink: 0;
	}

	.pd-qty .qty {
		font-size: clamp(16px, 1.8vw, 20px);
		width: 100%;
		max-width: 100%;
		min-width: 0;
		line-height: 1.5;
		padding: 0;
		box-sizing: border-box;
		overflow: visible;
	}

	.pd-qty-btn {
		width: clamp(28px, 3vw, 36px);
		height: clamp(28px, 3vw, 36px);
	}

	.pd-cart .single_add_to_cart_button {
		height: clamp(48px, 5vw, 56px);
		padding: 0 clamp(32px, 4vw, 56px);
		flex: none;
		min-width: auto;
		border-radius: 62px;
		background: #000000;
		font-size: clamp(16px, 1.8vw, 20px);
		color: #ffffff;
		font-weight: 700;
		box-shadow: 0 20px 36px rgba(0, 0, 0, 0.25);
		white-space: nowrap;
	}

	/* Convert paragraphs containing images to grid containers - default 2 columns for 4 images */
	.pd-story-card p {
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* 2 columns for 2 images per row (4 images total) */
		gap: 50px;
	}

	/* Override for paragraphs with 6 images - use 3 columns */
	.pd-story-card p:has(img:nth-of-type(6):not(img:nth-of-type(7))) {
		grid-template-columns: repeat(3, 1fr); /* 3 columns for 3 images per row (6 images total) */
		gap: 10px;
	}

	/* Last paragraph - remove bottom margin */
	.pd-story-card p:last-child {
		margin-bottom: 0;
	}
}

/* Additional responsive breakpoint for very large screens (1440px+) */
@media (min-width: 1440px) {

	.pd-card {
		gap: 80px;
	}

	/* Add padding to story card container */
	.pd-story-card {
		padding: 0 100px;
	}

	.pd-story-card p img {
		width: 100%;
		height: 100%;
	}
}