/* ============================================================================
   Meta Jewelry — brand kit + archive layout.

   Kit: Heritage Green. Colours that the dici theme already exposes as Kirki
   theme mods (buttons, links, ratings, add-to-cart, page ground) are set in the
   Customizer, NOT here — this file only covers what no theme mod reaches:
   button shape, fonts, title sections and the archive layout.

   Archive-only rules are scoped to body.mjvt-archive; everything else is
   site-wide.
   ========================================================================= */

:root {
	--mj-ink: #1C3A2C;
	--mj-accent: #A98240;
	--mj-ground: #F5F1E6;
	--mj-surface: #FFFFFF;
	--mj-muted: #6B7A70;
	--mj-rule: #E2DDD0;

	--mj-head: "Jost", "Futura", Avenir, ui-sans-serif, system-ui, sans-serif;
	--mj-body: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--mj-radius: 4px;

	/* Site width. The theme and Elementor both cap content at 1200px; these
	   two values replace that cap everywhere in one place.

	   --mj-site-max  none = full browser width. Set a length (e.g. 1600px) to
	                  go back to a capped-but-wider layout.
	   --mj-gutter    breathing room at the window edges. */
	--mj-site-max: none;
	--mj-gutter: 40px;
}

/* ---------------------------------------------------------------------------
   Site width
   ------------------------------------------------------------------------ */

/* Theme pages: shop, category archives, blog, cart, account. */
.site-content {
	max-width: var(--mj-site-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--mj-gutter);
	padding-right: var(--mj-gutter);
}

/* .site-content is a CSS grid, and its content track already widens with the
   page — but the theme hard-caps #primary at 878px, a leftover from the 1200px
   layout, so the extra width would sit empty beside the product grid. */
.site-content > #primary,
#primary.content-area {
	max-width: none !important;
	width: auto !important;
}

/* Elementor sections: header, footer and the Elementor-built pages. */
.elementor-section > .elementor-container,
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--mj-site-max) !important;
	padding-left: var(--mj-gutter);
	padding-right: var(--mj-gutter);
}

/* The nav bar is deliberately edge-to-edge: no cap and no gutter, so the dark
   ground bleeds to both window edges. Its own inner padding keeps the logo and
   contact details clear of the sides. */
.elementor-1954 .elementor-element-9d8cb41 > .elementor-container {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media (max-width: 782px) {
	:root { --mj-gutter: 18px; }
}

/* ---------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------ */

/* The theme has a `headings_font` Kirki mod (now Jost) that outputs to
   h1–h4 at specificity 0,0,1. These selectors are raised past that so the
   classed titles — page title, product titles — cannot fall back to the old
   face, whichever stylesheet loads last. */
body h1, body h2, body h3, body h4, body h5, body h6,
body .page-title,
body .entry-title,
body .widget-title,
body .woocommerce-products-header__title,
body .woocommerce-loop-product__title,
body .product_title,
body .elementor-heading-title {
	font-family: var(--mj-head) !important;
	letter-spacing: .02em;
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   Buttons — one shape across theme, WooCommerce and Elementor
   ------------------------------------------------------------------------ */

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-element-button,
.wp-block-button__link,
.elementor-button,
.single_add_to_cart_button,
.add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-cart .wc-proceed-to-checkout a {
	border-radius: var(--mj-radius);
	font-family: var(--mj-body);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .13em;
	text-transform: uppercase;
	/* Keeps the hover arrow on the label's line. Without it a narrow button
	   wraps the glyph onto a second line and grows taller on hover. */
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Hover arrow.

   The glyph sits in the layout at zero opacity so the label never shifts and
   the button never reflows. A pseudo-element rather than markup, because these
   buttons are rendered by WooCommerce, Elementor and the theme.

   input[type=submit] is deliberately absent: replaced elements cannot carry
   ::after. Those buttons keep the shared shape but no arrow. */
.button::after,
.wp-element-button::after,
.wp-block-button__link::after,
.elementor-button .elementor-button-text::after,
.single_add_to_cart_button::after,
.add_to_cart_button::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce-cart .wc-proceed-to-checkout a::after {
	content: "\2192";
	display: inline-block;
	margin-left: .5em;
	opacity: 0;
	transform: translateX(-5px);
	transition: opacity .18s ease, transform .18s ease;
}

.button:hover::after,
.button:focus-visible::after,
.wp-element-button:hover::after,
.wp-element-button:focus-visible::after,
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after,
.elementor-button:hover .elementor-button-text::after,
.elementor-button:focus-visible .elementor-button-text::after,
.single_add_to_cart_button:hover::after,
.single_add_to_cart_button:focus-visible::after,
.add_to_cart_button:hover::after,
.add_to_cart_button:focus-visible::after,
.woocommerce a.button:hover::after,
.woocommerce a.button:focus-visible::after,
.woocommerce button.button:hover::after,
.woocommerce button.button:focus-visible::after,
.woocommerce-cart .wc-proceed-to-checkout a:hover::after,
.woocommerce-cart .wc-proceed-to-checkout a:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/* Hover colour.

   dici/style.css hardcodes #000070 (navy) on button hover in two places —
   a blanket `button:hover` rule and an !important one on the price filter's
   Filter button. Neither is reachable through a theme mod, so they are
   overridden here rather than by editing that hand-maintained file. Hover
   resolves to the brand accent, matching add_to_cart_listings_background_hover. */
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.widget_price_filter .price_slider_amount .button:hover,
.widget_price_filter .price_slider_amount .button:focus-visible {
	background-color: var(--mj-accent) !important;
	border-color: var(--mj-accent) !important;
	color: #fff !important;
}

/* Arrows would be noise on these: quantity steppers, close/remove controls,
   swatches, and anything already carrying its own icon. */
.woocommerce a.remove::after,
.quantity .button::after,
.woocommerce .product-remove a::after,
.mjvt-pill__opt::after,
.mjvt-refine__submit::after,
.wp-block-search__button::after {
	content: none !important;
}

/* ---------------------------------------------------------------------------
   Search widget — a compact icon button beside the field

   The block now renders icon-only (showLabel:false, buttonUseIcon:true), so
   there is no stray "Search" wordmark and no text for an arrow to wrap under.
   ------------------------------------------------------------------------ */

.wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* The theme gives inputs a 7.5px top margin, which dropped the field below the
   button; the button carried its own 10px left margin on top of the gap. Zero
   both and let the flex gap do the spacing. */
.wp-block-search .wp-block-search__input,
.wp-block-search .wp-block-search__button {
	margin: 0 !important;
}

.wp-block-search .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--mj-rule);
	border-radius: var(--mj-radius);
	background: var(--mj-surface);
	font-family: var(--mj-body);
	font-size: 13px;
}

.wp-block-search .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: var(--mj-radius);
	background: var(--mj-ink);
	color: var(--mj-ground);
	cursor: pointer;
	transition: background-color .18s ease;
}

.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:focus-visible {
	background: var(--mj-accent);
}

.wp-block-search .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ---------------------------------------------------------------------------
   Product cards — compact

   Measured at 492px tall for a 279px-wide card. The spec block alone ran to
   77px of 15px text. Tightening type and the gaps between rows brings the card
   back to roughly its own width plus a caption, without shrinking the photo.
   ------------------------------------------------------------------------ */

.woocommerce ul.products li.product .dici-prod-cat-list {
	margin-top: 8px;
	font-size: 10px;
	letter-spacing: .1em;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 3px 0 2px;
	font-size: 14px;
	line-height: 1.25;
}

.woocommerce ul.products li.product .woocommerce-product-details__short-description {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--mj-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .woocommerce-product-details__short-description p {
	margin: 0;
}

.woocommerce ul.products li.product .price {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.2;
}

.woocommerce ul.products li.product .dici-thumb-wrapper > a + .dici-prod-cat-list {
	margin-top: 10px;
}

/* ---------------------------------------------------------------------------
   Title sections — transparent, collapsed to their content

   (a) The theme's own header block: catalog, category archives, blog, single
   posts, cart, checkout, account, search, 404. The theme reserves
   height:20vh / min-height:150px regardless of content.
   ------------------------------------------------------------------------ */

.page-header-block {
	background: none !important;
	background-color: transparent !important;
	height: auto !important;
	min-height: 0 !important;
	padding-top: 18px;
	padding-bottom: 14px;
	margin-bottom: 1.5rem;
}

.page-header-block .woocommerce-breadcrumb,
.page-header-block .nav-crumbs {
	margin: 0 0 6px;
	font-family: var(--mj-body);
	font-size: 11px;
	letter-spacing: .08em;
	line-height: 1.5;
	opacity: .8;
}

.page-header-block .page-title,
.page-header-block .entry-title {
	margin: 0;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.15;
}

/* Keep the banner image working where one is set — only the flat grey ground
   is being removed, not the deliberate imagery. */
.page-header-block.dici-custom-image .dici-top-banner {
	display: block;
}

/* (b) Elementor title sections, which render on pages that get no theme header
   at all (is_elementor filters dici_show_page_title to false). Each of these
   four carried its own flat #f6f6f6 band. Targeted by element id so no other
   Elementor section is touched; !important because Elementor's per-page CSS
   is generated at a higher specificity. */
.elementor-element.elementor-element-d75fce6,   /* About Us   2198 */
.elementor-element.elementor-element-655e81e,   /* Contact Us 2119 */
.elementor-element.elementor-element-1d543c33,  /* Gallery    2156 */
.elementor-element.elementor-element-d4ec0a7 {  /* FAQ        2185 */
	background-color: transparent !important;
	background-image: none !important;
	padding-top: 26px !important;
	padding-bottom: 12px !important;
}

/* About Us testimonials: this section carried the same flat #f6f6f6 band plus
   70px of top padding, which read as a grey gap under the image above it. */
.elementor-element.elementor-element-5ec7b7a {
	background-color: transparent !important;
	padding-top: 22px !important;
}

/* Each of these sections also carries an Elementor min-height (~137px) around a
   52px heading, which with the background gone reads as a large empty gap.
   Collapse the container so the band is only as tall as its title. */
.elementor-element.elementor-element-d75fce6 > .elementor-container,
.elementor-element.elementor-element-655e81e > .elementor-container,
.elementor-element.elementor-element-1d543c33 > .elementor-container,
.elementor-element.elementor-element-d4ec0a7 > .elementor-container {
	min-height: 0 !important;
}

/* ---------------------------------------------------------------------------
   Header — one bar: logo left, menu centre, contact right

   The header template (1954) now holds all three widgets in a single column;
   this lays that column out as a row. Elementor renders a column's children
   inside .elementor-widget-wrap, which is a flex column by default.
   ------------------------------------------------------------------------ */

/* The dark ground belongs to the whole bar now. It used to come from Max Mega
   Menu's own ul.mega-menu, which is only as wide as the menu — so the logo and
   contact details would have sat outside it on the page ground. */
.elementor-1954 .elementor-element-225d47f > .elementor-widget-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 24px;
	/* Elementor's own column CSS zeroes this, so it has to be forced. Matches
	   the site gutter so the logo lines up with the content below it. */
	padding-left: var(--mj-gutter) !important;
	padding-right: var(--mj-gutter) !important;
	background-color: var(--mj-ink);
}

.elementor-1954 .elementor-element-fa07c1f .mega-menu-wrap,
.elementor-1954 .elementor-element-fa07c1f ul.mega-menu,
.elementor-1954 .elementor-element-fa07c1f ul.mega-menu.max-mega-menu,
.elementor-1954 .elementor-element-fa07c1f ul.mega-menu > li.mega-menu-item {
	background: transparent !important;
}

/* Menu sits centred in the space between logo and contact. */
.elementor-1954 .elementor-element-fa07c1f ul.mega-menu.max-mega-menu {
	display: flex !important;
	justify-content: center;
}

/* Logo and contact size to content; the menu takes the space between them. */
.elementor-1954 .elementor-element-225d47f > .elementor-widget-wrap > .elementor-element-d4226ee,
.elementor-1954 .elementor-element-225d47f > .elementor-widget-wrap > .elementor-element-f9ca1a2 {
	width: auto;
	flex: 0 0 auto;
	margin: 0;
}

.elementor-1954 .elementor-element-225d47f > .elementor-widget-wrap > .elementor-element-fa07c1f {
	width: auto;
	flex: 1 1 auto;
	margin: 0;
}

/* The logo lives on the dark bar now, so cap its height rather than its width —
   the tight crop is ~2.16:1, so height is what controls the bar.

   Its widget container still carried margin-right:80px from the old centred
   layout, and inline-baseline layout left the 46px image in a 55px box, which
   pushed it off-centre in the bar. Flex + zeroed margins settle both. */
.elementor-1954 .elementor-element-d4226ee .elementor-widget-container {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}

.elementor-1954 .elementor-element-d4226ee img {
	width: auto !important;
	max-height: 46px;
	margin: 0 !important;
	padding: 0 !important;
	display: block;
}

/* Contact details sit on the dark ground, so they take the light ink. */
.elementor-1954 .elementor-element-f9ca1a2 .elementor-icon-list-item,
.elementor-1954 .elementor-element-f9ca1a2 .elementor-icon-list-text,
.elementor-1954 .elementor-element-f9ca1a2 a {
	color: var(--mj-ground) !important;
	font-size: 12.5px;
	white-space: nowrap;
}

.elementor-1954 .elementor-element-f9ca1a2 .elementor-icon-list-icon svg,
.elementor-1954 .elementor-element-f9ca1a2 .elementor-icon-list-icon i {
	fill: var(--mj-accent) !important;
	color: var(--mj-accent) !important;
}

.elementor-1954 .elementor-element-f9ca1a2 .elementor-icon-list-items {
	display: flex;
	flex-direction: row;
	gap: 18px;
	margin: 0;
	padding: 0;
}

/* Below the breakpoint the three parts stack rather than crush together. */
@media (max-width: 1024px) {
	.elementor-1954 .elementor-element-225d47f > .elementor-widget-wrap {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		padding: 10px 16px;
	}

	.elementor-1954 .elementor-element-225d47f > .elementor-widget-wrap > .elementor-element-fa07c1f {
		flex: 1 0 100%;
		order: 3;
	}

	.elementor-1954 .elementor-element-f9ca1a2 .elementor-icon-list-items {
		justify-content: center;
		flex-wrap: wrap;
	}
}

/* ---------------------------------------------------------------------------
   Natural / Lab Grown pill
   ------------------------------------------------------------------------ */

.mjvt-pill-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 14px 0 0;
}

.mjvt-pill {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mj-ink) 9%, transparent);
	font-family: var(--mj-body);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
}

/* Three segments need less width each than two, or the catalog pill runs
   wider than the header it sits in. */
.mjvt-pill--tri .mjvt-pill__opt {
	min-width: 96px;
	padding-left: 18px;
	padding-right: 18px;
}

.mjvt-pill__opt,
.mjvt-pill__opt:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 124px;
	padding: 11px 24px;
	border-radius: 999px;
	color: var(--mj-muted);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .22s ease, color .22s ease;
}

.mjvt-pill__opt:hover,
.mjvt-pill__opt:focus-visible {
	color: var(--mj-ink);
	text-decoration: none;
}

.mjvt-pill__opt.is-active,
.mjvt-pill__opt.is-active:hover,
.mjvt-pill__opt.is-active:visited {
	background: var(--mj-ink);
	color: var(--mj-ground);
	cursor: default;
}

.mjvt-pill__opt:focus-visible {
	outline: 2px solid var(--mj-ink);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Sticky shop sidebar — catalog and category archives
   ------------------------------------------------------------------------ */

/* Sticky, but NOT its own scroll container. The earlier max-height turned the
   sidebar into a 644px box around 873px of widgets, so a scrollbar appeared
   over the filters on hover. Without it the column simply sticks and, when it
   is taller than the viewport, scrolls with the page like normal content. */
@media (min-width: 992px) {
	body.mjvt-archive #secondary.sidebar-shop-area {
		position: sticky;
		top: 20px;
		align-self: flex-start;
		max-height: none;
		overflow: visible;
	}
}

/* ---------------------------------------------------------------------------
   Sub-type filter panel
   ------------------------------------------------------------------------ */

.mjvt-refine {
	margin: 0;
	font-family: var(--mj-body);
}

.mjvt-refine.is-loading {
	opacity: .5;
	pointer-events: none;
}

.mjvt-refine__list,
.mjvt-refine__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mjvt-refine__box {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.mjvt-refine__label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--mj-rule);
	color: var(--mj-muted);
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
	transition: color .18s ease;
}

.mjvt-refine__item:last-child .mjvt-refine__label {
	border-bottom: 0;
}

/* The tick box is drawn on the label so it stays styleable across browsers. */
.mjvt-refine__label::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1px solid var(--mj-rule);
	border-radius: 2px;
	background: var(--mj-surface) no-repeat center;
	transition: background-color .18s ease, border-color .18s ease;
}

.mjvt-refine__box:checked + .mjvt-refine__label::before {
	border-color: var(--mj-ink);
	background-color: var(--mj-ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.3 2.3 4.7-4.8'/%3E%3C/svg%3E");
	background-size: 11px 11px;
}

.mjvt-refine__box:checked + .mjvt-refine__label,
.mjvt-refine__label:hover {
	color: var(--mj-ink);
}

.mjvt-refine__box:focus-visible + .mjvt-refine__label::before {
	outline: 2px solid var(--mj-ink);
	outline-offset: 2px;
}

.mjvt-refine__name {
	flex: 1 1 auto;
}

.mjvt-refine__count {
	flex: 0 0 auto;
	font-size: 11px;
	opacity: .6;
	font-variant-numeric: tabular-nums;
}

.mjvt-refine__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
}

.mjvt-refine__clear {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mj-muted);
	text-decoration: underline;
}

.mjvt-refine__clear:hover {
	color: var(--mj-ink);
}

/* With JS the boxes navigate on change, so Apply is redundant. */
.mjvt-refine--live .mjvt-refine__submit {
	display: none;
}

/* ---------------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------------ */

@media (max-width: 480px) {
	.mjvt-pill {
		display: flex;
		width: 100%;
	}

	.mjvt-pill__opt {
		flex: 1 1 0;
		min-width: 0;
		padding: 11px 10px;
		font-size: 11px;
		letter-spacing: .08em;
	}

	.page-header-block {
		padding-top: 12px;
		padding-bottom: 10px;
		margin-bottom: 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mjvt-pill__opt,
	.mjvt-refine__label,
	.mjvt-refine__label::before,
	.button,
	button,
	.elementor-button,
	.button::after,
	.wp-element-button::after,
	.elementor-button .elementor-button-text::after,
	.single_add_to_cart_button::after,
	.add_to_cart_button::after {
		transition: none;
	}
}