/*
 * db-boutique-block.css v1.1.1
 * Base look comes from the global .homepage-visit-* classes in styles.css
 * (already tokenized). This file, scoped to .db-boutique-block so the legacy
 * SFNT markup is not affected:
 *   - replaces the fixed 944px panel height with a flexible row, so the panel
 *     matches the photo but grows when text is larger (text size / spacing modes)
 *   - keeps the about text visible at every width (styles.css hid it 901-1250px)
 *   - styles the text button, focus ring and screen-reader-only text
 * Contrast: white text on #1a1a1a / black texture 17.4:1; white button text on
 * --brand-red-dark 8.91:1; white focus ring on the dark panel.
 */

/* -- Layout -- */
.db-boutique-block {
	display: flex;
	align-items: stretch;
	background-color: var(--color-black, #000000);
}

.db-boutique-block .homepage-visit-db-image-wrapper {
	float: none;
	width: 70%;
	flex: 0 0 70%;
	background-color: var(--surface-dark, #1a1a1a);
}

.db-boutique-block .homepage-visit-db-image-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* fills the row if the panel grows taller than the photo */
}

.db-boutique-block .homepage-visit-db-info-wrapper {
	float: none;
	flex: 1 1 30%;
	width: auto;
	height: auto;          /* was a fixed 944px in styles.css */
	min-width: 0;
	padding: 0 20px 30px;  /* side padding keeps text and the focus ring off the edges */
	box-sizing: border-box;
	background-repeat: repeat;
	overflow-wrap: anywhere;
}

/* The site's db.js (lines 52-58) writes the photo's height inline on the section and
   panel at widths over 900px, on load and resize. Inline styles beat normal CSS,
   so !important is needed for the panel to grow with larger text. */
.db-boutique-block,
.db-boutique-block .homepage-visit-db-info-wrapper {
	height: auto !important;
}

/* About text stays visible at every width */
.db-boutique-block .homepage-visit-db-info-wrapper .about-text {
	display: block;
}

/* No photo set: panel uses the full width */
.db-boutique-block .homepage-visit-db-info-wrapper:only-child {
	flex-basis: 100%;
}

/* Stack on tablets and phones (matches the styles.css 900px breakpoint) */
@media (max-width: 900px) {
	.db-boutique-block {
		display: block;
	}

	.db-boutique-block .homepage-visit-db-image-wrapper,
	.db-boutique-block .homepage-visit-db-info-wrapper {
		width: 100%;
	}

	.db-boutique-block .homepage-visit-db-image-wrapper img {
		height: auto;
	}

	.db-boutique-block .homepage-visit-db-info-wrapper {
		padding: 20px;
	}
}

/* -- Button (text, replaces the image of text) -- */
.db-boutique-block .db-boutique-block__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 394px;
	min-height: 50px;              /* grows with larger text */
	margin: 40px auto 15px;
	padding: 10px 20px;
	box-sizing: border-box;
	background-image: url('https://www.deliciousboutique.com/mm5/graphics/store-button-background.jpg');
	background-color: var(--brand-red-dark, #94111e);
	background-size: cover;
	color: var(--color-white, #ffffff) !important;
	font-family: var(--font-primary, 'Lato', sans-serif);
	font-size: var(--font-size-xl, 20px);
	font-weight: var(--font-weight-black, 900);
	line-height: 1.2;
	letter-spacing: var(--letter-spacing-body, normal);
	word-spacing: var(--word-spacing-body, normal);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}

/* Higher specificity + !important: wins over the global a:hover rules in styles.css */
.db-boutique-block .homepage-visit-db-info-wrapper .db-boutique-block__cta:hover,
.db-boutique-block .homepage-visit-db-info-wrapper .db-boutique-block__cta:focus {
	color: var(--color-white, #ffffff) !important;
	opacity: 0.9;
}

/* Underline links mode */
html[data-links="underline"] .db-boutique-block .homepage-visit-db-info-wrapper .db-boutique-block__cta {
	text-decoration: underline !important;
	text-underline-offset: 0.15em;
}

/* -- Keyboard focus -- */
.db-boutique-block a:focus-visible {
	outline: 2px solid var(--color-white, #ffffff);
	outline-offset: 3px;
}

/* -- Text only screen readers hear -- */
.db-boutique-block .db-boutique-block__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}