/*!
 * Palette Kits - presentation overrides.
 *
 * Rules that are not part of the original site's own CSS but are required for
 * the replica to render the same way:
 *
 *   1. Product gallery - a left thumbnail strip plus a large main image that
 *      does not depend on the media library's intermediate sizes. The parent
 *      theme derives the strip's size from those intermediates; a catalogue
 *      that only exposes full-size originals (see installer/pk-import.php)
 *      would otherwise render the thumbnails at their natural dimensions.
 *
 *   2. The announcement strip pinned to the top of the viewport, with the
 *      sticky header offset so it lands underneath.
 *
 * Enqueued immediately after assets/css/replica.css.
 */

/* ======================================================================
 * 1. Product gallery
 *
 * Only two things are pinned here, because everything else the parent theme
 * does is already correct:
 *
 *   a. the thumbnail strip gets a fixed 132px width (the parent derives it
 *      from --wd-thumbs-width, which is never emitted on this build)
 *   b. the thumbnails themselves are scaled to that width
 *
 * What is deliberately NOT overridden: the main image. The parent sizes it
 * from woodmart's own rules plus the site's custom CSS, which is what makes
 * it fill the gallery box the way the original does. Adding `width:auto;
 * max-width:100%` there reintroduces aspect-ratio preservation and shrinks
 * the image to a narrow column in the middle - the exact regression this file
 * used to cause.
 * ==================================================================== */
@media (min-width: 1025px) {
	.thumbs-position-left {
		flex-wrap: nowrap;
	}

	.thumbs-position-left.wd-has-thumb .wd-gallery-images {
		flex: 0 0 auto;
		width: calc(100% - 132px);
		max-width: calc(100% - 132px);
	}

	/* The parent leaves the strip at `flex: 1 1 auto` and sizes it from
	   --wd-thumbs-height, which is only ever set by its carousel script. Pin the
	   width here and let the script own the height, so the vertical thumbnail
	   carousel keeps working the way it does on the original. */
	.thumbs-position-left .wd-gallery-thumb {
		flex: 0 0 132px;
		max-width: 132px;
		order: -1;
	}

	/* Cap the thumbnails themselves. The strip's visible height is driven by the
	   main gallery, so a thumbnail whose requested size is missing falls back to
	   a much larger intermediate and pushes its neighbours out of view. */
	.thumbs-position-left .wd-gallery-thumb .wd-carousel-item img {
		width: 100%;
		height: auto;
		max-height: 150px;
		object-fit: cover;
	}
}

/* ======================================================================
 * 2. Sticky announcement strip
 *
 * The parent theme positions .header-banner absolutely with z-index:-1, so it
 * scrolls away with the page. Pinning it keeps the message visible while the
 * sticky header parks underneath it.
 * ==================================================================== */
.header-banner-display .header-banner,
.header-banner-enabled .header-banner {
	position: fixed;
	z-index: 10000;
}

.header-banner-display .whb-sticked .whb-main-header,
.header-banner-enabled .whb-sticked .whb-main-header {
	top: calc(var(--wd-admin-bar-h) + var(--wd-header-banner-h));
}

/* The off-canvas panels start below the strip as well. */
.header-banner-display .wd-side-hidden,
.header-banner-enabled .wd-side-hidden {
	inset-block-start: calc(var(--wd-admin-bar-h) + var(--wd-header-banner-h));
}

/* ======================================================================
 * 3. Contact form
 *
 * Matches the original page's look: label above an underlined field, and a
 * full-width grey button.
 * ==================================================================== */
.pk-contact-form {
	margin-top: 26px;
}

.pk-contact-form .pk-field {
	margin: 0 0 22px;
}

.pk-contact-form .pk-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 2px;
}

.pk-contact-form .pk-field input[type="text"],
.pk-contact-form .pk-field input[type="email"],
.pk-contact-form .pk-field textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	background-color: transparent;
	border-radius: 0;
	padding: 9px 0;
	font-size: 15px;
	color: inherit;
}

.pk-contact-form .pk-field input:focus,
.pk-contact-form .pk-field textarea:focus {
	border-bottom-color: #000;
	outline: none;
}

.pk-contact-form .pk-field textarea {
	min-height: 110px;
	resize: vertical;
}

/* Honeypot: kept out of the flow but present in the DOM. */
.pk-contact-form .pk-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pk-contact-form .pk-submit {
	margin: 26px 0 0;
}

.pk-contact-form .pk-submit button {
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 0;
	background-color: #767676;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	cursor: pointer;
}

.pk-contact-form .pk-submit button:hover {
	background-color: #5a5a5a;
}