/*!
 * NailShop custom styles (Bricks child theme)
 * Combined file: loaded once in <head>, cached by the browser.
 */

/* ==========================================================================
   MetaSlider equal-height slides
   ========================================================================== */
	/* Fallback ratio = average of the current homepage slides (1.9034:1). */
	.metaslider .flexslider .slides > li.ms-image {
		aspect-ratio: var(--ms-equal-ratio, 1.9034);
		overflow: hidden;
	}
	.metaslider .flexslider .slides > li.ms-image > a {
		display: block;
		height: 100%;
	}
	.metaslider .flexslider .slides > li.ms-image img.msDefaultImage {
		width: 100% !important;
		height: 100% !important;
		max-width: none;
		object-fit: cover;
		object-position: center center;
	}

/* ==========================================================================
   Paged sliders (categories, New Arrivals, Bestsellers)
   ========================================================================== */
	.ps-on { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; }
	.ps-on > .ps-viewport {
		width: 100%; overflow: hidden; transition: height .45s ease;
		grid-template-columns: inherit; /* pass the Bricks grid columns down */
	}
	.ps-on .ps-track {
		display: flex; align-items: flex-start;
		grid-template-columns: inherit;
		transition: transform .55s cubic-bezier(.4, 0, .2, 1);
		will-change: transform; touch-action: pan-y;
	}
	.ps-on .ps-page {
		flex: 0 0 100%; min-width: 0; box-sizing: border-box;
		column-gap: var(--ps-col-gap, 24px); row-gap: var(--ps-row-gap, 24px);
	}
	.ps-on.ps-grid .ps-page { display: grid; grid-template-columns: inherit; }
	.ps-on.ps-flex .ps-page {
		display: flex; flex-direction: row; flex-wrap: wrap;
		justify-content: var(--ps-justify, flex-start); align-items: var(--ps-align, stretch);
	}
	.ps-on .ps-page > * { min-width: 0; }
	.ps-on > .ps-dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin-top: 28px; width: 100%; }
	.ps-on { row-gap: 0 !important; }
	/* 24x24 tap area, 12px visible dot */
	.ps-dot {
		position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
		background: transparent; cursor: pointer;
	}
	.ps-dot::before {
		content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
		border-radius: 50%; background: #d4d4d4; transition: background .2s, transform .2s;
	}
	.ps-dot:hover::before { background: #999; }
	.ps-dot.is-active::before { background: #111; transform: scale(1.3); }
	.ps-dot:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
	@media (prefers-reduced-motion: reduce) {
		.ps-on > .ps-viewport, .ps-on .ps-track { transition: none; }
	}

/* ==========================================================================
   Infinite logo marquee
   ========================================================================== */
	#brxe-qebxjc, .logo-marquee {
		--mq-box-w: 180px; --mq-box-h: 80px; --mq-gap: 64px; --mq-speed: 40;
	}
	@media (max-width: 767px) {
		#brxe-qebxjc, .logo-marquee { --mq-box-w: 120px; --mq-box-h: 56px; --mq-gap: 40px; }
	}
	.mq-on {
		display: block !important; overflow: hidden; width: 100%;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	}
	.mq-on .mq-track {
		display: flex; width: max-content;
		animation: mq-scroll var(--mq-duration, 30s) linear infinite;
		will-change: transform;
	}
	.mq-on:hover .mq-track { animation-play-state: paused; }
	.mq-on .mq-group { display: flex; align-items: center; gap: var(--mq-gap); padding-right: var(--mq-gap); }
	.mq-on .mq-item {
		flex: 0 0 auto; width: var(--mq-box-w); height: var(--mq-box-h);
		display: flex; align-items: center; justify-content: center;
	}
	.mq-on .mq-item > img, .mq-on .mq-item > * > img {
		width: 100% !important; height: 100% !important; max-width: none;
		padding: 0 !important; margin: 0; object-fit: contain; object-position: center;
		filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s;
	}
	.mq-on .mq-item:hover img { filter: none; opacity: 1; }
	@keyframes mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
	@media (prefers-reduced-motion: reduce) {
		.mq-on { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
		.mq-on .mq-track { animation: none; }
	}

/* ==========================================================================
   "Read more" reveal
   ========================================================================== */
	.rm-on {
		display: flow-root; overflow: hidden; height: 0; opacity: 0;
		transition: height .6s cubic-bezier(.4, 0, .2, 1), opacity .45s ease;
	}
	.rm-on.is-open { opacity: 1; }
	.rm-toggle {
		display: flex; width: fit-content; align-self: flex-start; align-items: center; gap: 8px; margin: 12px 0 20px; padding: 0;
		background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
		color: #553d35; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
	}
	.rm-toggle:hover { color: #b59865; }
	.rm-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
	.rm-toggle .rm-icon { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: translateY(-3px) rotate(45deg); transition: transform .35s ease; }
	.rm-toggle[aria-expanded="true"] .rm-icon { transform: translateY(3px) rotate(-135deg); }
	@media (prefers-reduced-motion: reduce) { .rm-on, .rm-toggle .rm-icon { transition: none; } }

/* ==========================================================================
   Mobile & tablet responsiveness
   Phones: 320-600px, large phones/small tablets: 601-767px, tablets: 768-1024px
   ========================================================================== */

/* --- Safety nets (zero-specificity, never override your own styles) --- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; } /* nothing can cause sideways scrolling; sticky header keeps working */
:where(iframe, embed, object) { max-width: 100%; }
:where(h1, h2, h3, h4, h5, h6, p, li, a, span, .brxe-heading, .brxe-text, .brxe-text-basic) { overflow-wrap: break-word; }

/* --- iPhone/iPad zoom into form fields under 16px: stop it --- */
@media (max-width: 1024px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
	select, textarea { font-size: 16px !important; }
}

/* --- Bigger touch targets, same look --- */
.brxe-nav-menu .bricks-mobile-menu-toggle::before { top: -14px; bottom: -14px; left: -20px; right: -4px; } /* hamburger: 44px+ tap area, grows to the left so it never pokes off-screen */
.flexslider .flex-control-paging li a { position: relative; }
.flexslider .flex-control-paging li a::after { content: ""; position: absolute; inset: -7px; } /* MetaSlider dots */
.splide__pagination__page::after { content: ""; position: absolute; inset: -7px; } /* Bricks slider dots */
#brxe-gtvyvr a { display: inline-block; padding: 6px 2px; } /* footer bottom links */

/* --- Footer newsletter: heading above the form on tablets --- */
@media (max-width: 1024px) {
	#brxe-dqkrrz { flex-direction: column; align-items: center; }
	#brxe-dhvgab { width: 100%; text-align: center; margin: 0 0 16px; }
	#brxe-vkcizd { width: 100%; max-width: 640px; min-width: 0; }
}

/* --- Product & category grids: always 2 per row on phones --- */
@media (max-width: 600px) {
	#brxe-mwqpsl, #brxe-rlpswg, #brxe-yrhgsi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

	/* product cards (New Arrivals, Bestsellers) */
	.brxe-lzoshy .brxe-ctvvvi.brxe-image, .brxe-zgdfmt .brxe-ktzxrl.brxe-image {
		height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1 / 1;
	}
	/* overrides the element's own phone CSS (min-height 50vmin > max-height 30vmin made photos overflow their frame) */
	.brxe-lzoshy .brxe-ctvvvi.brxe-image img, .brxe-zgdfmt .brxe-ktzxrl.brxe-image img {
		display: block; width: 100%; height: auto !important; min-height: 0 !important; max-height: none !important;
		aspect-ratio: 1 / 1 !important; box-sizing: border-box;
	}
	.brxe-lzoshy .brxe-hkgptr.brxe-block, .brxe-zgdfmt .brxe-hgvybl.brxe-block { margin-bottom: 0 !important; } /* no overlap onto the text */
	.brxe-lzoshy .brxe-wjkatz.brxe-div, .brxe-zgdfmt .brxe-strkjk.brxe-div { padding: 12px !important; }
	.brxe-lzoshy .brxe-txcepa.brxe-heading, .brxe-zgdfmt .brxe-lzrfea.brxe-heading { font-size: 1.4rem; line-height: 1.3; }
	.brxe-lzoshy .brxe-tnzwiy.brxe-heading, .brxe-zgdfmt .brxe-polymk.brxe-heading { font-size: 1.5rem; margin-top: 8px; }
	.brxe-lzoshy .brxe-zkelcy.brxe-heading, .brxe-zgdfmt .brxe-kucrkw.brxe-heading { font-size: 1.2rem; }
	.brxe-lzoshy .brxe-zkelcy a:not(.brxe-div), .brxe-zgdfmt .brxe-kucrkw a:not(.brxe-div) { display: inline-block; padding: 6px 0; }
	.brxe-lzoshy .brxe-lcyljt a:not(.brxe-div), .brxe-zgdfmt .brxe-ichqay a:not(.brxe-div) { display: inline-block; font-size: 12px; padding: 6px; }
	.brxe-lzoshy .brxe-product-add-to-cart .button, .brxe-zgdfmt .brxe-product-add-to-cart .button {
		max-width: 100%; white-space: normal; font-size: 1.3rem; padding-left: 14px; padding-right: 14px;
	}

	/* category cards */
	.brxe-jiwhgq .brxe-gbagqd.brxe-image {
		height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1 / 1; padding: .6rem;
	}
	.brxe-zdldlz .brxe-fgpyqu.brxe-heading { font-size: 1.4rem; line-height: 1.25; }
	.brxe-zdldlz .brxe-cnryil.brxe-heading { font-size: 1.3rem; }
	.brxe-zdldlz .brxe-swnegy.brxe-div { gap: 8px; }
}
/* very small phones (under 340px): one per row */
@media (max-width: 339px) {
	#brxe-mwqpsl, #brxe-rlpswg, #brxe-yrhgsi { grid-template-columns: minmax(0, 1fr) !important; }
}