@charset "UTF-8";
/* BE.LOVA WP theme overrides */
:root {
  --rc-font: "Montserrat", sans-serif;
}
body.belova-wp {
  margin: 0;
}
.site-logo img,
.site-logo svg {
  max-width: 160px;
  height: auto;
}
.woocommerce .products-grid .product,
.products-grid .product {
  list-style: none;
}
.woocommerce-page .products-grid ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rc-admin-notice a { text-decoration: underline; }

/* Search overlay — visible state */
.search-wrapper.show { display: block; }
body.search-open { overflow: hidden; }

/* Favourites badge in header */
.header-icons .favourites { position: relative; }
.header-icons .favourites[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}
.header-icons .favourites[data-count="0"]::after,
.header-icons .favourites:not([data-count])::after { display: none; }

/* Product grid helpers */
.products-grid-container { display: flex; flex-wrap: wrap; gap: 8px; }
.products-grid-container .product,
.products-grid-container item { width: calc((100% - 8px) / 2); }
@media (min-width: 1024px) {
  .products-grid-container .product,
  .products-grid-container item { width: calc((100% - 24px) / 4); }
}
item { display: block; }
.not-products-found { width: 100%; text-align: center; padding: 40px 20px; color: #777; }

/* Appointment form */
.rc-appointment-form { max-width: 560px; margin: 0 auto; }
.rc-appointment-form label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; }
.rc-appointment-form .input_rc,
.rc-appointment-form .rc_textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid #ccc;
  font: 400 15px var(--rc-font);
  background: transparent;
  outline: none;
}
.rc-appointment-form .rc_textarea { border: 1px solid #ccc; padding: 10px; }
.rc-form-success { color: #1a7f37; }
.rc-form-error { color: #c0392b; }

/* Page hero */
.page-hero { padding: 80px 5% 40px; }
.page-hero .title { font-weight: 250; letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.page-hero .subtitle { color: #555; }

/* Load-more button (production keeps it display:none by default; reveal it) */
.products-grid .load-more-products button {
	display: inline-block;
}

/* PDP: plain location input (production uses Google autocomplete) */
#nameplace input {
	width: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--rc-font);
	font-size: 14px;
	padding: 8px 0;
	box-sizing: border-box;
}

/* PDP: related products grid padding */
.related-products .products-grid-container {
	padding: 0 3vw;
}

/* Language switcher */
.lang-switcher { position: relative; }
.lang-current {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	font: 400 11px var(--rc-font);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--grey, #73737a);
	padding: 4px 6px;
}

/*
 * The header has two variants: .transparent sits over the homepage hero and
 * colours its nav items white, .default is used on every other page and
 * colours them grey. The switcher has to follow the same rule instead of
 * sitting at one fixed colour, otherwise "EN" turns grey on the hero while
 * EVENTS / STORES / ABOUT stay white.
 */
.site-header.transparent .lang-current { color: var(--white, #fff); }

/*
 * With the mobile menu open the panel behind the icons turns white, so the
 * switcher has to follow the nav items back to grey — production does the same
 * with `.navbar-items.opened .site-header-products .category`.
 */
.site-header.transparent .navbar-items.opened .lang-current { color: var(--grey, #73737a); }

/* ------------------------------------------------------------------
   Mobile header (max-width: 1023px)

   Three things in the production stylesheet are desktop-only or mobile-only
   in a way that breaks the bar below 1024px:

   1. .header-icons is laid out ONLY from 1024px up
      (`@media only screen and (width>=1024px)`), so on phones .search and
      .favourites had no size at all and collapsed to zero width.
   2. .site-header-pages is itself the mobile search button there (22x22 with
      the magnifier as a background), and the switcher rendered inside it
      overflowed ~33px past the viewport edge.
   3. .site-header{,.transparent} .site-logo a is pinned to 160px, which the
      bar cannot afford next to four other controls.

   Layout below 1024px:  [menu]   BE.LOVA   [lang] [search] [favourites]
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
	/*
	 * Production turns .site-header-pages ITSELF into a 22x22 search button on
	 * mobile:
	 *   .site-header.transparent .site-header-pages {
	 *     background: url(../../img/search-btn-white.svg) no-repeat;
	 *     width:22px; height:22px; margin-right:20px }
	 * That is where the stray magnifier overlapping the language switcher came
	 * from. Here the element is a plain container for the switcher plus the
	 * icon row, and the search icon lives in its own .search element, so the
	 * background, the fixed box and the pointer cursor have to go.
	 */
	.site-header .navbar-items:not(.opened) .site-header-pages {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: auto;
		height: auto;
		flex: 0 0 auto;
		background-image: none;
		cursor: default;
		/*
		 * Production also keeps margin-right:20px here (.default:15px) to space
		 * the desktop "Make an appointment" button, which is hidden on mobile.
		 * Both that margin AND any padding on this element are added on top of
		 * the column's share of the free space (its flex-basis is 0), which made
		 * the right column wider than the left and pushed the centred logo off
		 * centre. Zero both here and put the 10px inset on .header-icons below.
		 */
		margin-right: 0;
		padding-right: 0;
	}

	/*
	 * Equal side columns put the logo in the optical centre of the bar; with
	 * plain space-between it drifts left because the icon group is far wider
	 * than the hamburger. Note these columns are NOT automatically equal: a
	 * flex item refuses to shrink below its min-content, which is why the
	 * breakpoints below trim the gaps and the logo.
	 */
	.site-header .navbar-items:not(.opened) .mobile-navbar,
	.site-header .navbar-items:not(.opened) .site-header-pages { flex: 1 1 0; }
	.site-header .navbar-items:not(.opened) .site-logo { flex: 0 0 auto; }

	.site-header .site-header-pages .header-icons {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 9px;
		margin-left: 9px;
		/* The bar's 10px right inset, kept off .site-header-pages so that the
		   flex columns stay the same width and the logo is truly centred. */
		padding-right: 10px;
	}

	/* The 22px box IS the icon: the artwork is a 22px background, so padding
	   would only push the magnifier and the heart into each other. */
	.site-header .site-header-pages .header-icons .search,
	.site-header .site-header-pages .header-icons .favourites {
		display: block;
		width: 22px;
		height: 22px;
		padding: 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 22px 22px;
	}

	/* Icons follow the same light/dark split as the rest of the header. */
	.site-header.default .site-header-pages .header-icons .search { background-image: url(../../img/search-btn-black.svg); }
	.site-header.default .site-header-pages .header-icons .favourites { background-image: url(../../img/heart.svg); }
	.site-header.transparent .site-header-pages .header-icons .search { background-image: url(../../img/search-btn-white.svg); }
	.site-header.transparent .site-header-pages .header-icons .favourites { background-image: url(../../img/heart-white.svg); }

	/* Compact switcher so five controls still fit on a 360px phone. */
	.site-header .lang-current {
		padding: 6px 2px;
		gap: 4px;
		letter-spacing: .04em;
	}
	.site-header .lang-current .chev { width: 10px; height: 10px; }

	/*
	 * A 160px logo plus five controls does not fit on small phones. Production
	 * pins the width on the anchor —
	 *   .site-header.default .site-logo a { width:160px }   (and .transparent)
	 * — so shrinking it means restating that (0,3,0) selector with a smaller
	 * value in the narrow breakpoints below. Do NOT use width:auto here: the
	 * image is sized with max-height and width:auto, so against a shrink-to-fit
	 * container it resolves to zero and the wordmark disappears.
	 */
	.site-header .site-logo img { max-height: 30px; width: auto; }
}

@media (max-width: 499px) {
	/*
	 * A flex item's automatic minimum size is its min-content width, and the
	 * right-hand group is wider than half the free space on phones. The column
	 * therefore refused to shrink to the same width as the hamburger column and
	 * the "centred" logo sat 5px left of centre. Tightening the gaps keeps the
	 * group's min-content inside its half, so both flex:1 columns measure the
	 * same and the logo is genuinely centred.
	 */
	.site-header .site-header-pages .header-icons { gap: 6px; margin-left: 6px; }
}

@media (max-width: 429px) {
	/*
	 * At 381-429px the right-hand group needs 121px but only gets (width-160)/2.
	 * Ten pixels off the logo (a 150px anchor instead of 160px) buys exactly the
	 * space needed, which is invisible — unlike dropping the "EN" label or
	 * leaving the wordmark a few px off centre.
	 */
	.site-header.default .site-logo a,
	.site-header.transparent .site-logo a { width: 150px; }
	.site-header .site-logo img { max-height: 28px; }
}

@media (max-width: 380px) {
	/* Drop the "EN" label: the flag plus the chevron still reads as a language
	   switcher, and at 360px the wordmark matters more than the label. */
	.site-header .lang-current .code { display: none; }
}

@media (max-width: 340px) {
	/* 320px phones: the wordmark has to give way so the columns stay equal. */
	.site-header.default .site-logo a,
	.site-header.transparent .site-logo a { width: 113px; }
	.site-header .site-logo img { max-height: 21px; }
}
.lang-current .flag,
.lang-menu .flag { display: inline-flex; line-height: 0; }
.lang-current .flag svg,
.lang-menu .flag svg { width: 18px; height: 13px; border-radius: 1px; }
.lang-current .code { font-weight: 600; }
.lang-current .chev { width: 12px; height: 12px; }
.lang-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin: 4px 0 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
	min-width: 150px;
	display: none;
	z-index: 100;
}
.lang-switcher.open .lang-menu { display: block; }
.lang-menu li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	font: 400 12px var(--rc-font);
	color: var(--grey, #73737a);
	text-decoration: none;
	white-space: nowrap;
}
.lang-menu li a .code { font-weight: 600; min-width: 20px; }
.lang-menu li a .name { color: var(--grey, #73737a); }
.lang-menu li a:hover,
.lang-menu li a.active { background: #f5f5f5; color: var(--black, #000); }

/* Content clears the absolutely-positioned header (56px tall).
   Pages that already ship a .page-hero (with its own 56px top margin) or a
   full-bleed hero on the homepage are excluded. */
.full-page:not(.has-hero):not(:has(.page-hero)) { padding-top: 56px; }
body.page-product-details .full-page { padding-top: 0; }

/* ------------------------------------------------------------------
   #deCLARAtions carousel
   theme.js upgrades .realbrides-slider into a slick-compatible carousel
   (.slick-list / .slick-track / .slick-slide / .slick-dots + arrows).
   The slick core styles already ship with the production stylesheet, so
   only the pieces production overrides for this block live here.
   ------------------------------------------------------------------ */

/* Fallback (before JS runs or if it never does): horizontal scroll strip
   instead of a 8000px-tall column of images. */
.realbrides-slider:not(.slick-initialized) {
	display: flex;
	gap: var(--slide-gap, 6px);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.realbrides-slider:not(.slick-initialized)::-webkit-scrollbar { display: none; }
.realbrides-slider:not(.slick-initialized) > * { flex: 0 0 25%; }
.realbrides-slider:not(.slick-initialized) img { width: 100%; }

.realbrides-slider.slick-initialized { position: relative; margin: 0; }
.realbrides-slider .slick-list { overflow: hidden; }
.realbrides-slider .slick-track {
	display: flex;
	transition: transform .35s ease;
	will-change: transform;
}
.realbrides-slider .slick-slide {
	float: none;
	display: block;
	height: auto;
	flex: 0 0 auto;
}
.realbrides-slider .slick-slide > a,
.realbrides-slider .slick-slide > .slide-media { display: block; }
.realbrides-slider .slick-slide img { min-width: 100%; max-width: 100%; }

/* Arrows — the slick core styles paint them white, which is invisible on
   the white block background, so restate them for this carousel. */
.realbrides-slider .slick-prev,
.realbrides-slider .slick-next {
	z-index: 5;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s ease, background-color .2s ease;
}
.realbrides-slider .slick-prev { left: 14px; }
.realbrides-slider .slick-next { right: 24px; }
.realbrides-slider .slick-prev:before,
.realbrides-slider .slick-next:before {
	color: var(--black, #151515);
	opacity: 1;
	font-size: 16px;
	line-height: 1;
}
.realbrides-slider .slick-prev:hover,
.realbrides-slider .slick-next:hover { background: #fff; }
.realbrides-slider .slick-prev.slick-disabled,
.realbrides-slider .slick-next.slick-disabled { opacity: .35; cursor: default; }

@media (max-width: 480px) {
	.realbrides-slider .slick-prev,
	.realbrides-slider .slick-next { width: 32px; height: 32px; }
	.realbrides-slider .slick-prev { left: 8px; }
	.realbrides-slider .slick-next { right: 16px; }
}

/* ------------------------------------------------------------------
   Content pages (about / contact / events / legal / FAQ …)
   The page.php wrapper gives a 900px column; these styles cover the
   building blocks used by the ported page content.
   ------------------------------------------------------------------ */

/* Inspiration / generic product-photo grid ([belova_gallery]). */
.belova-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 24px 0;
}
.belova-gallery__item { display: block; overflow: hidden; }
.belova-gallery__item img { display: block; width: 100%; height: auto; }

/* Native <details> FAQ accordion (no JS needed). */
.faq-item {
	border-bottom: 1px solid var(--grey-lighter, #e7e7ea);
	margin: 0;
}
.faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	padding: 18px 4px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: '+';
	font-weight: 400;
	font-size: 1.4em;
	line-height: 1;
	color: var(--grey, #73737a);
	transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item > p,
.faq-item > div { padding: 0 4px 18px; margin: 0; }

/* Generic lead forms embedded in page content. */
form[data-lead-form] .form--group { margin-bottom: 16px; }
form[data-lead-form] .form--group--title { display: block; margin-bottom: 6px; }
form[data-lead-form] .form--group--control--input {
	width: 100%;
	max-width: 640px;
	padding: 10px 12px;
	border: 1px solid #d6d6da;
	border-radius: 0;
	font: inherit;
}
form[data-lead-form] .form_btn { margin-top: 8px; }

@media (max-width: 767px) {
	.belova-gallery { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
	.belova-gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ------------------------------------------------------------------
   Page-transition curtain
   A white full-screen sheet with the logo pulsing very slowly, shown
   while an internal navigation is in flight. Raised by theme.js on link
   click and by the inline script in header.php on the arriving page, so
   the curtain covers the swap in both directions.
   ------------------------------------------------------------------ */
.belova-loader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s ease;
	pointer-events: none;
}
.belova-loader.is-active,
html.belova-loading .belova-loader {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/*
 * While the curtain is up the content behind it stays out of the way, so a
 * slow-loading page cannot flash its layout before the reveal. `visibility`
 * is inherited but overridable, so the curtain itself stays visible.
 */
html.belova-loading body { visibility: hidden; }
html.belova-loading .belova-loader { visibility: visible; }

.belova-loader__logo {
	width: 168px;
	max-width: 42vw;
	height: auto;
	animation: belova-loader-pulse 2.6s ease-in-out infinite;
}

/* Luxury pacing: barely-there breathing rather than a spinner. */
@keyframes belova-loader-pulse {
	0%,
	100% { opacity: .38; transform: scale(.975); }
	50%   { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.belova-loader__logo { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------------
   Empty state — shown where a page has no content yet
   ------------------------------------------------------------------ */
.belova-empty {
	text-align: center;
	padding: 7vh 0 9vh;
}
.belova-empty__logo {
	display: block;
	width: 168px;
	max-width: 46vw;
	height: auto;
	margin: 0 auto;
	opacity: .9;
}
.belova-empty__heart {
	display: block;
	width: 18px;
	height: 18px;
	margin: 18px auto 0;
	opacity: .35;
	animation: belova-loader-pulse 2.6s ease-in-out infinite;
}
.belova-empty__text {
	margin: 14px 0 0;
	font-size: 15px;
	letter-spacing: .02em;
	color: var(--grey, #73737a);
}
@media (prefers-reduced-motion: reduce) {
	.belova-empty__heart { animation: none; opacity: .5; }
}

/* ------------------------------------------------------------------
   Stores — list (left) + Google map (right)
   ------------------------------------------------------------------ */
.rc-shops {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 5% 80px;
}
.rc-shops__intro { max-width: 760px; margin: 0 0 32px; }

.rc-shops__layout {
	display: grid;
	grid-template-columns: minmax(300px, 460px) 1fr;
	gap: 32px;
	align-items: start;
}
.rc-shops__layout--no-map { grid-template-columns: minmax(300px, 640px); }

.rc-shops__col-map {
	position: sticky;
	top: 76px;
}
.rc-shops-map {
	display: block;
	width: 100%;
	height: min(72vh, 640px);
	border: 0;
	border-radius: 7px;
	background: #f4f2ee;
}

.rc-shops__filter { margin: 0 0 18px; }
.rc-shops-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.rc-shop-card {
	border: 1px solid #ececec;
	border-radius: 7px;
	padding: 18px 20px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.rc-shop-card.is-active,
.rc-shop-card:hover,
.rc-shop-card:focus-within {
	border-color: var(--black, #111);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}
.rc-shop-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.rc-shop-card__title {
	margin: 0 0 6px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.rc-shop-card__address {
	margin: 0;
	font-size: 13px;
	color: #555;
}
.rc-shop-card__cta {
	display: inline-block;
	margin-top: 10px;
	font-size: 12px;
	text-decoration: underline;
}
.rc-shop-card__map {
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12px;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.rc-shops-none {
	display: none;
	margin: 18px 0 0;
	color: #777;
}

@media (max-width: 900px) {
	.rc-shops__layout { grid-template-columns: 1fr; gap: 24px; }
	.rc-shops__col-map { position: static; }
	.rc-shops-map { height: 60vh; }
}