/*
Theme Name: Devora Ranells
Theme URI: https://devoraranells.com/
Author: Devora Ranells Beauty & Aesthetics Center
Description: Block theme for Devora Ranells Beauty & Aesthetics Center, Beit Shemesh. Brand colors: rose #A67B79, blush #F5EDEC, warm grey #716867, white. Edit everything in the WordPress editor, no page builder needed.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.9.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: devora-ranells
*/

/* English headings: a little air between the Cinzel capitals */
:lang(en) h1, :lang(en) h2, :lang(en) h3 { letter-spacing: 0.03em; }

/* Small label above headings ("Skin · Laser · Nails") */
.is-style-eyebrow,
.dr-eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--warm-grey);
}

/* Fact chips under a hero */
.dr-chips {
	list-style: none;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}
.dr-chips li {
	background: var(--wp--preset--color--rose-tint);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
	font-weight: 700;
}

/* Cards (treatments, roles, options) */
.dr-card {
	border-top: 3px solid var(--wp--preset--color--rose);
	height: 100%;
	box-sizing: border-box;
	position: relative;
}
.dr-card a { text-decoration: none; }
.dr-card a:hover { text-decoration: underline; }
/* A card's link covers the whole card, so the card is clickable anywhere.
 * Cards hold one link each; a second link in the same card would sit under this one.
 * Not in the editor, where the cover would block clicking into the card's text. */
:where(body:not(.editor-styles-wrapper)) .dr-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.dr-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}
.dr-card:has(a:focus-visible) a:focus-visible { outline: none; }

/* Outline button style */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--rose);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--white);
}

/* FAQ questions */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 1.0625rem;
}
.wp-block-details summary::marker { color: var(--wp--preset--color--rose); }
.wp-block-details > :not(summary) { margin-top: 0.75rem; color: var(--wp--preset--color--warm-grey); }

/* Big numbers (16 years, 7 specialists) */
.dr-stat-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--wp--preset--color--rose);
}

/* Opening hours list (synced from Google) */
.dr-hours { list-style: none; padding: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; max-width: 26rem; }
.dr-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; }
.dr-hours .dr-hours-day { font-weight: 700; }

/* Photo placeholder until real photos are added */
.dr-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--wp--preset--color--ink);
}

/* Sticky Call / WhatsApp / Book bar on phones */
.dr-mobile-bar { display: none !important; }
@media (max-width: 781px) {
	.dr-mobile-bar {
		display: grid !important;
		grid-template-columns: auto auto 1fr;
		gap: 0.5rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		margin: 0 !important;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--white);
		border-top: 1px solid var(--wp--preset--color--rose-tint);
	}
	.dr-mobile-bar .wp-block-button { width: 100%; }
	.dr-mobile-bar .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
		padding: 0.75rem 0.875rem;
		font-size: 1.0625rem;
		white-space: nowrap;
		border-radius: 12px;
	}
	body { padding-bottom: 5.5rem; }
	.dr-header-book { display: none !important; }
}

/* Keep the reviews readable when Hebrew is mixed in */
.wp-block-quote [dir="rtl"], .wp-block-quote:lang(he) { text-align: right; }

/* Logo: RD monogram + name in the header, full logo in the footer */
.dr-logo-mark, .dr-logo-full { margin: 0; }
.dr-logo-mark img, .dr-logo-full img { display: block; height: auto; }
.dr-brand-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	line-height: 1.1;
}
.dr-brand-name a { color: inherit; text-decoration: none; }
.dr-logo-full { margin: 0 !important; }
.dr-footer-logo-col { flex-grow: 0 !important; align-self: center !important; }
@media (max-width: 781px) {
	.dr-footer-logo-col { flex-basis: 100% !important; }
	.dr-logo-full { display: table; margin: 0 auto !important; }
}
@media (max-width: 600px) {
	.dr-logo-mark img { width: 38px !important; }
	.dr-brand-name { font-size: 1.25rem; }
	.dr-brand .is-style-eyebrow { display: none; }
}

@property --dr-tint {
	syntax: "<color>";
	inherits: false;
	initial-value: transparent;
}

/* -------------------------------------------------------------------------
 * Motion. Everything here is off for visitors who prefer reduced motion.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* Smooth jump to #reviews, #visit, #treatments */
	html { scroll-behavior: smooth; }

	/* Fade up on scroll (classes added by assets/js/motion.js) */
	.dr-reveal {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--dr-delay, 0ms);
	}
	.dr-reveal.is-visible { opacity: 1; transform: none; }

	/* Clickable cards lift on hover */
	@media (hover: hover) {
		.dr-card {
			transition: transform 0.4s ease, box-shadow 0.4s ease;
		}
		.dr-card:has(a):hover {
			transform: translateY(-4px);
			box-shadow: 0 12px 28px -14px rgba(113, 104, 103, 0.45);
		}
	}

	/* Header monogram: copper shimmer every 1.5 seconds on every page; fades in on the homepage */
	.dr-logo-mark a { position: relative; display: block; }
	.home .dr-logo-mark img { animation: dr-logo-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
	.dr-logo-mark a::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 225, 0.85) 50%, transparent 70%) no-repeat;
		background-size: 250% 100%;
		background-position: 150% 0;
		-webkit-mask: url("assets/images/logo-mark.webp") center / contain no-repeat;
		mask: url("assets/images/logo-mark.webp") center / contain no-repeat;
		animation: dr-shimmer 1.5s ease-in-out 0.8s infinite both;
		pointer-events: none;
	}
	@keyframes dr-logo-in {
		from { opacity: 0; transform: scale(0.92); }
		to { opacity: 1; transform: none; }
	}
	@keyframes dr-shimmer {
		0% { background-position: 150% 0; }
		80% { background-position: -60% 0; }
		100% { background-position: -60% 0; }
	}

	/* FAQ answers glide open (browsers that support it) and fade in (all) */
	.wp-block-details { interpolate-size: allow-keywords; }
	.wp-block-details::details-content {
		height: 0;
		overflow: clip;
		transition: height 0.45s ease, content-visibility 0.45s allow-discrete;
	}
	.wp-block-details[open]::details-content { height: auto; }
	.wp-block-details[open] > :not(summary) { animation: dr-fade-in 0.5s ease both; }
	@keyframes dr-fade-in {
		from { opacity: 0; transform: translateY(-4px); }
		to { opacity: 1; transform: none; }
	}

	/* Hero photos at the top of each page: slow zoom in and out (14 s cycle) */
	.wp-block-post-content > section:first-child figure.wp-block-image {
		overflow: hidden;
		border-radius: 24px;
	}
	.wp-block-post-content > section:first-child figure.wp-block-image img {
		animation: dr-kenburns 7s ease-in-out infinite alternate;
		transform-origin: 55% 45%;
	}
	@keyframes dr-kenburns {
		from { transform: scale(1); }
		to { transform: scale(1.08); }
	}

	/* "Prices & booking" buttons: soft rose glow every 4 seconds, each lasting about 2.8 seconds */
	a.wp-block-button__link[href*="ezbz.me"] { animation: dr-glow 4s ease-out 1.5s infinite; }
	@keyframes dr-glow {
		0% { box-shadow: 0 0 0 0 rgba(166, 123, 121, 0.55); }
		70% { box-shadow: 0 0 0 18px rgba(166, 123, 121, 0); }
		100% { box-shadow: 0 0 0 0 rgba(166, 123, 121, 0); }
	}

	/* Blush and rose sections: background gently shifts shade every 4 seconds */
	section.has-blush-background-color {
		--dr-tint-a: #F5EDEC;
		--dr-tint-b: #EEDDDB;
	}
	section.has-rose-tint-background-color {
		--dr-tint-a: #D5C1C0;
		--dr-tint-b: #E0CFCD;
	}
	section.has-blush-background-color,
	section.has-rose-tint-background-color {
		background-image: linear-gradient(var(--dr-tint), var(--dr-tint));
		animation: dr-breathe 4s ease-in-out infinite alternate;
	}
	@keyframes dr-breathe {
		from { --dr-tint: var(--dr-tint-a); }
		to { --dr-tint: var(--dr-tint-b); }
	}

	/* Reviews strip (built by assets/js/motion.js) */
	.dr-marquee {
		overflow: hidden;
		margin-top: var(--wp--preset--spacing--40);
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	}
	.dr-marquee-track {
		display: flex;
		width: max-content;
		gap: var(--wp--preset--spacing--50);
		animation: dr-marquee var(--dr-marquee-duration, 40s) linear infinite;
	}
	.dr-marquee:hover .dr-marquee-track,
	.dr-marquee:focus-within .dr-marquee-track,
	.dr-marquee.is-paused .dr-marquee-track { animation-play-state: paused; }
	.dr-marquee-item {
		flex: 0 0 min(80vw, 440px) !important;
		max-width: min(80vw, 440px);
	}
	@keyframes dr-marquee {
		from { transform: translateX(0); }
		to { transform: translateX(calc(-50% - var(--wp--preset--spacing--50) / 2)); }
	}
}

/* Google reviews */
.dr-stars {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--rose);
	letter-spacing: 0.15em;
	font-size: 1rem;
}
#reviews .wp-block-quote p:not(.dr-stars) {
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#reviews cite a { color: inherit; }
.dr-google-attribution {
	margin-top: var(--wp--preset--spacing--30);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--warm-grey);
}
.dr-rating-summary {
	margin: 0.25rem 0 0;
	font-weight: 700;
	font-size: 1.0625rem;
}
.dr-rating-summary a { color: var(--wp--preset--color--ink); text-decoration: none; }
.dr-rating-summary a:hover { text-decoration: underline; }
.dr-rating-star { color: var(--wp--preset--color--rose); }

/* Icon links (phone, WhatsApp, Instagram, Facebook, Waze) */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.dr-icon-link svg {
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.25em;
	flex-shrink: 0;
}
.wp-block-button__link.dr-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
}
.wp-block-button__link.dr-icon-link svg { width: 1.5em; height: 1.5em; vertical-align: 0; }
.dr-icon-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.dr-icon-row a.dr-icon-link {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--rose);
	transition: background 0.2s ease, color 0.2s ease;
}
.dr-icon-row a.dr-icon-link:hover,
.dr-icon-row a.dr-icon-link:focus-visible {
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--white);
}
.dr-icon-row a.dr-icon-link svg { width: 1.375rem; height: 1.375rem; vertical-align: 0; }

/* Words and icons share one spot and take turns (booking: ₪ + calendar; contact links: their icon).
   Only the words show without motion. */
.dr-swap { display: inline-grid; vertical-align: bottom; }
.dr-swap > * { grid-area: 1 / 1; }
.dr-swap-icons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	visibility: hidden;
}
.dr-shekel {
	font-family: Arial, "Noto Sans", "Segoe UI", "Helvetica Neue", sans-serif;
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1;
}
.dr-swap-icons svg { width: 1.2em; height: 1.2em; }
@media (prefers-reduced-motion: no-preference) {
	.dr-swap-icons { visibility: visible; }
	/* 8 s loop = two glows: words during one glow, icons during the next */
	.dr-swap-text { animation: dr-swap-out 8s ease-in-out 1.5s infinite; }
	.dr-swap-icons { opacity: 0; animation: dr-swap-in 8s ease-in-out 1.5s infinite; }
	@keyframes dr-swap-out {
		0%, 42% { opacity: 1; transform: none; }
		50%, 92% { opacity: 0; transform: translateY(-6px); }
		100% { opacity: 1; transform: none; }
	}
	@keyframes dr-swap-in {
		0%, 42% { opacity: 0; transform: translateY(6px); }
		50%, 92% { opacity: 1; transform: none; }
		100% { opacity: 0; transform: translateY(6px); }
	}
}

/* Hover tooltip on switching buttons: always the opposite of what the button shows */
.dr-swap { position: relative; }
.dr-tip {
	position: absolute;
	top: calc(100% + 1.1rem);
	left: 50%;
	z-index: 60;
	display: inline-grid;
	padding: 0.4rem 0.65rem;
	border-radius: 8px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity 0.15s ease, visibility 0.15s;
}
.dr-tip::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-bottom-color: var(--wp--preset--color--ink);
}
.dr-tip > * {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
}
.dr-tip svg { width: 1.1rem; height: 1.1rem; }
.dr-tip .dr-shekel { font-size: 1.05rem; }
/* Without motion the button shows words, so the tooltip shows the icon */
.dr-tip-text { visibility: hidden; }
@media (hover: hover) {
	a:hover .dr-tip,
	a:focus-visible .dr-tip { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: no-preference) {
	.dr-tip-text { visibility: inherit; opacity: 0; animation: dr-swap-in 8s ease-in-out 1.5s infinite; }
	.dr-tip-icon { animation: dr-swap-out 8s ease-in-out 1.5s infinite; }
}

/* Visit us: buttons in one row */
#visit .wp-block-buttons {
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center;
}

/* Phones: smaller button text so button rows fit on one line */
@media (max-width: 781px) {
	.wp-block-button__link {
		font-size: 0.8125rem !important;
		padding: 0.6rem 0.7rem !important;
		white-space: nowrap;
	}
	.wp-block-buttons { gap: 0.5rem !important; }
	.dr-mobile-bar .wp-block-button__link { padding: 0.75rem 0.7rem !important; }
}
@media (max-width: 380px) {
	.wp-block-button__link {
		font-size: 0.75rem !important;
		padding: 0.55rem 0.6rem !important;
	}
	.dr-mobile-bar .wp-block-button__link { padding: 0.7rem 0.6rem !important; }
}

/* Same height for filled and outline buttons side by side */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link { border: 2px solid transparent; }

/* Bigger icons inside buttons so the icon turn fills the button; negative margins keep the button height */
.wp-block-button__link .dr-swap-icons { gap: 0.45em; }
.wp-block-button__link .dr-swap-icons svg {
	width: 2.35em;
	height: 2.35em;
	margin-block: -0.6em;
}
.wp-block-button__link .dr-swap-icons .dr-shekel {
	font-size: 2.1em;
	line-height: 1;
	margin-block: -0.4em;
}
.dr-amp {
	font-weight: 700;
	font-size: 1.3em;
	line-height: 1;
}
.wp-block-button__link .dr-swap-icons .dr-amp { margin-block: -0.2em; }

/* -------------------------------------------------------------------------
 * Language switcher and right-to-left (Hebrew) adjustments.
 * Hebrew letters use Bellefair (headings) and Assistant (text),
 * picked up automatically from the font stacks in theme.json.
 * ---------------------------------------------------------------------- */
.dr-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}
.dr-lang a { color: var(--wp--preset--color--warm-grey); text-decoration: none; }
.dr-lang a:hover, .dr-lang a:focus-visible { color: var(--wp--preset--color--rose); text-decoration: underline; }
.dr-lang-current { color: var(--wp--preset--color--ink); }
.dr-lang-sep { color: var(--wp--preset--color--rose-tint); font-weight: 400; }

/* Hebrew has no capitals: drop the wide letter-spacing used on small English labels */
:lang(he) .is-style-eyebrow,
:lang(he) .dr-chips li { letter-spacing: 0.02em; }
/* Hebrew reads a little small at the same size; nudge body text up */
:lang(he) body { font-size: 1.0625em; }

/* Hebrew headings: Bellefair's letters stand 0.456em tall against Cinzel's 0.714em capitals,
 * so Hebrew headings, quotes and the site name are set 1.3x larger to read at a matching size.
 * Keep these in step with the sizes in theme.json. */
:root:lang(he) {
	--wp--preset--font-size--huge: calc(clamp(2rem, 4vw, 3rem) * 1.3);
	--wp--preset--font-size--xx-large: calc(clamp(1.6rem, 3vw, 2.2rem) * 1.3);
	--wp--preset--font-size--x-large: calc(1.4rem * 1.3);
}
:lang(he) :is(h1, h2, h3, h4).has-large-font-size { font-size: calc(var(--wp--preset--font-size--large) * 1.3) !important; }
:lang(he) .dr-brand-name { font-size: calc(1.5rem * 1.3); }
@media (max-width: 600px) {
	:lang(he) .dr-brand-name { font-size: calc(1.25rem * 1.3); }
}
/* A review in the other language keeps the size of its own script */
:root:lang(he) .wp-block-quote p:is([lang]:not(:lang(he)), [dir="ltr"]) { font-size: calc(1em / 1.3); }
/* Reviewer names are mostly in English (Cinzel), so the name line keeps the English size */
:root:lang(he) .wp-block-quote cite { font-size: calc(1em / 1.3); }
:root:lang(en) .wp-block-quote p:is(:lang(he), [dir="rtl"]) { font-size: 1.3em; }

/* Latin words inside Hebrew headings (e.g. "טיפול RF"): at the 1.3x Hebrew size Cinzel's capitals
 * would tower over the Hebrew, so Hebrew pages use a copy of Cinzel scaled to Bellefair's height
 * (0.70em x 65% = 0.455em). Reviews written in English, and the reviewer names, keep the full-size Cinzel. */
@font-face {
	font-family: "Cinzel on Hebrew pages";
	src: url(assets/fonts/cinzel-latin-wght-normal.woff2) format("woff2");
	font-weight: 400 900;
	font-display: swap;
	size-adjust: 65%;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root:lang(he) { --wp--preset--font-family--heading: "Cinzel on Hebrew pages", Bellefair, Georgia, "Times New Roman", serif; }
:root:lang(he) .wp-block-quote p:is([lang]:not(:lang(he)), [dir="ltr"]),
:root:lang(he) .wp-block-quote cite { font-family: Cinzel, Bellefair, Georgia, "Times New Roman", serif; }

/* Reviews strip glides the other way in Hebrew */
@media (prefers-reduced-motion: no-preference) {
	[dir="rtl"] .dr-marquee-track { animation-name: dr-marquee-rtl; }
	@keyframes dr-marquee-rtl {
		from { transform: translateX(0); }
		to { transform: translateX(calc(50% + var(--wp--preset--spacing--50) / 2)); }
	}
}
/* Arrows in text links point the reading direction */
[dir="rtl"] .wp-block-quote cite { direction: rtl; }
/* Times read left to right in Hebrew too (9:00–15:00), as on Google Maps */
[dir="rtl"] .dr-hours li > span:last-child { direction: ltr; unicode-bidi: isolate; }

/* Comparison table (RF page): a table block with the "dr-compare" class.
 * Column 1 = row label, column 2 = our treatment (highlighted), column 3 = the alternative.
 * On phones each row stacks: the label on its own line, then the two answers side by side. */
.wp-block-table.dr-compare { margin-top: var(--wp--preset--spacing--40); overflow: visible; }
.dr-compare table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--rose-tint);
	border-radius: 20px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	font-size: 1rem;
	line-height: 1.5;
}
.dr-compare :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rose-tint);
	padding: 1rem 1.25rem;
	text-align: start;
	vertical-align: top;
}
.dr-compare tbody tr:last-child td { border-bottom: 0; }
.dr-compare thead th {
	background: var(--wp--preset--color--blush);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.dr-compare thead th:nth-child(2) { background: var(--wp--preset--color--rose-tint); }
/* Hebrew headings are set 1.3x larger (see above); the header row follows */
:lang(he) .dr-compare thead th { font-size: calc(1.1rem * 1.3); }
.dr-compare td:nth-child(2) { background: color-mix(in srgb, var(--wp--preset--color--blush) 55%, var(--wp--preset--color--white)); }
.dr-compare td:first-child { color: var(--wp--preset--color--ink); width: 24%; }
.dr-compare td:not(:first-child) { color: var(--wp--preset--color--warm-grey); }
.dr-compare td strong { color: var(--wp--preset--color--ink); }
@media (max-width: 600px) {
	.dr-compare :is(thead, tbody) tr { display: grid; grid-template-columns: 1fr 1fr; }
	.dr-compare thead th:first-child { display: none; }
	.dr-compare thead th { font-size: 1rem; }
	:lang(he) .dr-compare thead th { font-size: calc(1rem * 1.3); }
	.dr-compare :is(th, td) { padding: 0.75rem 0.875rem; }
	.dr-compare td:first-child { grid-column: 1 / -1; width: auto; padding-bottom: 0.25rem; border-bottom: 0; background: var(--wp--preset--color--white); }
	.dr-compare tbody tr:last-child td:first-child { border-bottom: 0; }
	.dr-compare tbody tr:not(:last-child) td:not(:first-child) { border-bottom: 1px solid var(--wp--preset--color--rose-tint); }
}