/* Product gallery: large, proportional image without artificial side gaps. */
.product-gallery__main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
}

.product-gallery__main .fn-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

/* Compact monochrome controls for the additional-image carousel. */
.product-gallery .fn-slick-images {
    position: relative;
    padding-inline: 12px;
}

.product-gallery .fn-slick-images .slick-prev,
.product-gallery .fn-slick-images .slick-next {
    width: 20px;
    height: 36px;
    margin: 0;
    padding: 0;
    top: 50%;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    opacity: .58;
    transform: translateY(-50%);
    transition: opacity .18s ease;
}

.product-gallery .fn-slick-images .slick-prev {
    left: -2px;
}

.product-gallery .fn-slick-images .slick-next {
    right: -2px;
}

.product-gallery .fn-slick-images .slick-prev::before,
.product-gallery .fn-slick-images .slick-next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid #6f7478;
    border-right: 1.5px solid #6f7478;
}

.product-gallery .fn-slick-images .slick-prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.product-gallery .fn-slick-images .slick-next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

.product-gallery .fn-slick-images .slick-prev:hover,
.product-gallery .fn-slick-images .slick-prev:focus,
.product-gallery .fn-slick-images .slick-next:hover,
.product-gallery .fn-slick-images .slick-next:focus {
    background: transparent !important;
    opacity: .9;
    outline: none;
}

.product-gallery .fn-slick-images .slick-prev:focus-visible,
.product-gallery .fn-slick-images .slick-next:focus-visible {
    outline: 1px solid #8a8f93;
    outline-offset: 1px;
}

/* Individual product adjustments with per-product browser persistence. */
.product-customization {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
    margin-top: .65rem;
    padding: .75rem .9rem;
    border: 1px solid #e1e4e6;
    background: #fafafa;
	overflow: hidden;
}

.product-customization__header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: flex-start;
	gap: .6rem;
	margin-bottom: .5rem;
}

.product-customization__heading {
	min-width: 0;
}

.product-customization__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: #667078;
    border: 1px solid #d8dcdf;
    background: #fff;
}

.product-customization__icon .system-icon {
    width: 1rem;
    height: 1rem;
}

.product-customization__title {
    margin: 0 0 .1rem;
    color: #243541;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.3;
}

.product-customization__intro {
    margin: 0;
    color: #687178;
    font-size: .76rem;
    line-height: 1.35;
	overflow-wrap: anywhere;
}

.product-customization__status {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	margin-top: .1rem;
	color: #69747a;
	font-size: .7rem;
	line-height: 1.3;
	white-space: nowrap;
}

.product-customization__status[hidden] {
	display: none;
}

.product-customization__status .system-icon {
	width: .85rem;
	height: .85rem;
}

.product-customization__status[data-state="saving"] {
	color: #858d92;
}

.product-customization__status[data-state="error"] {
	color: #8a6464;
}

.product-customization__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.product-customization__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
    min-height: 3.75rem;
    padding: .55rem .7rem;
    color: #35434c;
    border-color: #d5dadd;
    border-radius: 0;
    background: #fff;
	line-height: 1.45;
	resize: vertical;
}

.product-customization__input::placeholder {
    color: #949ba0;
    opacity: 1;
}

.product-customization__input:focus {
    border-color: #8d9498;
    box-shadow: 0 0 0 1px #8d9498;
    outline: none;
}

.product-customization__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .45rem;
    color: #747d83;
    font-size: .72rem;
    line-height: 1.35;
}

.product-customization__note {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.product-customization__note .system-icon {
    flex: 0 0 auto;
    width: .95rem;
    height: .95rem;
    color: #6f777c;
}

.product-customization__limit {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 991px) {
	.product-service-info {
		display: none;
	}

    .product-gallery__main {
        aspect-ratio: auto;
        min-height: 280px;
        max-height: 70vh;
    }

    .product-gallery__main .fn-img {
        height: auto;
        max-height: 70vh;
    }

    .product-customization {
        margin-bottom: 1rem;
    }

	.product-mobile-features-title {
		margin: .75rem 0 .5rem;
		padding: .65rem .75rem;
		color: #243541;
		border-left: 3px solid #ffe066;
		background: #f5f5f5;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.35;
	}

	.product-features-pane {
		display: block !important;
		height: auto !important;
		opacity: 1 !important;
	}

	.product-features-pane > .row {
		margin-right: 0;
		margin-left: 0;
	}

	.product-features-pane .col-lg-7 {
		padding-right: 0;
		padding-left: 0;
	}

	.product-features-pane .table {
		width: 100%;
		margin-bottom: 1rem;
		table-layout: fixed;
	}

	.product-features-pane .table td {
		padding: .55rem .6rem;
		vertical-align: top;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}

	.product-features-pane .table td:first-child {
		width: 38%;
		color: #34444f;
		font-weight: 600;
	}

	.product-mobile-comments-toggle {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: .75rem 0 0;
		padding: .65rem .75rem;
		color: #243541;
		border: 0;
		border-left: 3px solid #ffe066;
		border-radius: 0;
		background: #f5f5f5;
		font-family: inherit;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.35;
		text-align: left;
		cursor: pointer;
		transition: background-color .18s ease;
	}

	.product-mobile-comments-toggle::after {
		content: "";
		flex: 0 0 auto;
		width: .45rem;
		height: .45rem;
		margin: -.2rem .15rem 0 .75rem;
		border-right: 1.5px solid #737b80;
		border-bottom: 1.5px solid #737b80;
		transform: rotate(45deg);
		transition: transform .18s ease;
	}

	.product-mobile-comments-toggle[aria-expanded="true"]::after {
		margin-top: .2rem;
		transform: rotate(225deg);
	}

	.product-mobile-comments-toggle:hover,
	.product-mobile-comments-toggle:focus {
		color: #243541;
		background: #eeeeee;
		outline: none;
	}

	.product-mobile-comments-toggle:focus-visible {
		box-shadow: inset 0 0 0 1px #8d9498;
	}

	.product-comments-pane {
		box-sizing: border-box;
		width: 100%;
		padding-top: .75rem;
	}
}

@media (max-width: 480px) {
	.product-customization {
		width: calc(100vw - 30px);
		max-width: calc(100vw - 30px);
		margin-right: 0;
		padding: .75rem;
	}

	.product-mobile-features-title,
	.product-features-pane,
	.product-mobile-comments-toggle,
	.product-comments-pane {
		box-sizing: border-box;
		width: calc(100vw - 30px);
		max-width: calc(100vw - 30px);
	}

	.product-customization__header {
		gap: .4rem;
	}

	.product-customization__status {
		font-size: .66rem;
	}

	.product-customization__input {
		min-height: 6rem;
		font-size: 16px;
	}

	.product-customization__footer {
		align-items: flex-start;
		flex-direction: column;
		gap: .35rem;
	}

	.product-customization__limit {
		align-self: flex-end;
	}
}

@media (max-width: 360px) {
	.product-customization__header {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.product-customization__status {
		grid-column: 2;
		justify-self: start;
		margin-top: -.15rem;
	}
}
