/* =================================================================
   Boutique Appointments — public opening-hours block
   ([boutique_opening_hours] shortcode)

   Values are reference-exact, read from the LIVE computed styles of
   rolexboutique-geneve.com/en/rolex/contact-rolex (2026-07-30):
   light Helvetica 300 base, label 600, day names 900 vs hours 300,
   week list as an absolute fade-in overlay (#f9f7f4, soft shadow)
   that floats over the content instead of pushing it down.
   ================================================================= */

.boutique-hours {
	--bh-font: "Helvetica W01", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--bh-text: #212121;
	--bh-green: #127749;     /* today-hours green, rgb(18,119,73) */
	--bh-panel-bg: #f9f7f4;  /* dropdown beige, rgb(249,247,244) */
	position: relative;
	margin: 20px 0 30px;
	font-family: var(--bh-font);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.1;
	color: var(--bh-text);
}
/* Neutralise theme/vc styles inside the block. !important is deliberate —
   the theme wins the cascade otherwise (16px p-margins, brown strong), same
   fight appointment-form.css already resolves this way. */
.boutique-hours p {
	margin: 0 !important;
	color: inherit !important; /* theme paints p brown; pull #212121 from the block instead */
}
.boutique-hours strong {
	color: inherit !important; /* reference uses #212121, not the theme brown */
}

/* --- "Open today" summary line --- */
.boutique-hours__details {
	position: relative; /* anchor for the absolute week dropdown */
}
.boutique-hours__today {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	list-style: none; /* hide default <summary> marker */
	-webkit-tap-highlight-color: transparent;
}
.boutique-hours__today::-webkit-details-marker {
	display: none;
}
.boutique-hours__today-label {
	font-weight: 600;
}
.boutique-hours__today-hours {
	color: var(--bh-green);
	font-weight: 300;
}

/* Chevron (thin, rotates when open) */
.boutique-hours__chevron {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 0.15s ease;
}
.boutique-hours__details[open] .boutique-hours__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* --- Week list: absolute overlay dropdown, fades in (reference fadeToggles) --- */
.boutique-hours__week {
	position: absolute;
	z-index: 10;
	width: 110%; /* slight right overhang like the reference (desktop) */
	max-width: 400px;
	margin: 10px 0 0;
	padding: 15px 20px 10px;
	background: var(--bh-panel-bg);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
	animation: boutique-hours-fade 0.25s ease;
}
@media (max-width: 480px) {
	.boutique-hours__week {
		width: 100%; /* zoppi's card padding is wider than the reference's — no overhang on phones */
	}
}
@keyframes boutique-hours-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.boutique-hours__day {
	display: flex;
	justify-content: space-between;
	padding: 0 0 5px;
	font-size: 13.5px;
	line-height: 23px;
}
.boutique-hours__day strong {
	font-weight: 900;
	color: inherit;
}
.boutique-hours__day span {
	font-weight: 300;
	margin-left: 10px;
	color: inherit;
}

/* --- Special opening hours --- */
.boutique-hours__special {
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.3;
}
.boutique-hours__special-title {
	display: block;
	font-weight: 600;
	margin: 0 0 12px;
}
.boutique-hours__special-day {
	font-weight: 300;
}