/* =========================================================================
   Dermal Cosmetics Canada — brand palette v3 (gold / navy / cream)
   Direction matched to vipderme.com (the reference the client liked): warm
   champagne-gold accents, deep navy for authority, light cream backgrounds,
   with candy pink kept as a soft minor accent. Fonts: Montserrat + Poppins.
   !important is required so these win over Blocksy's inline default palette.
   Reversible: remove this file to revert to stock Blocksy.
   ========================================================================= */

:root {
	--dcc-gold:       #c39e3a;  /* primary gold accent (links, highlights) */
	--dcc-gold-deep:  #a6842c;  /* gold hover                              */
	--dcc-champ:      #d3b574;  /* soft champagne                          */
	--dcc-navy:       #1c244b;  /* deep navy — headings, buttons           */
	--dcc-navy-soft:  #324a6d;  /* muted navy                              */
	--dcc-cream:      #f3f5f8;  /* light section background                */
	--dcc-cream-warm: #f7f3ea;  /* warm cream                              */
	--dcc-line:       #e6e2d4;  /* soft champagne-grey border              */
	--dcc-pink:       #e983a8;  /* SOFT ACCENT only                        */
	--dcc-body:       #4a4a4a;  /* body text                               */
	--dcc-white:      #ffffff;

	/* Blocksy palette slots (1 accent … 8 base bg). */
	--theme-palette-color-1: var(--dcc-gold) !important;
	--theme-palette-color-2: var(--dcc-gold-deep) !important;
	--theme-palette-color-3: var(--dcc-navy) !important;
	--theme-palette-color-4: var(--dcc-body) !important;
	--theme-palette-color-5: var(--dcc-line) !important;
	--theme-palette-color-6: var(--dcc-champ) !important;
	--theme-palette-color-7: var(--dcc-cream) !important;
	--theme-palette-color-8: var(--dcc-white) !important;

	--theme-link-initial-color: var(--dcc-gold) !important;
	--theme-link-hover-color:   var(--dcc-navy) !important;
	--theme-text-color:         var(--dcc-body) !important;
	--theme-headings-color:     var(--dcc-navy) !important;
	--theme-border-color:       var(--dcc-line) !important;

	/* Luxury gold button with navy text (legible, premium). */
	--theme-button-background-initial-color: var(--dcc-gold) !important;
	--theme-button-background-hover-color:   var(--dcc-gold-deep) !important;
	--theme-button-text-initial-color:       var(--dcc-navy) !important;
	--theme-button-text-hover-color:         var(--dcc-navy) !important;

	--theme-font-family: 'Poppins', -apple-system, system-ui, sans-serif !important;
	--theme-headings-font-family: 'Montserrat', Georgia, serif !important;
}

/* Soft cream page background (warm → cool), replaces Blocksy's grey. */
html { min-height: 100%; }
body {
	background: linear-gradient(170deg, #f8f5ee 0%, #f4f1ea 50%, #f3f5f8 100%) no-repeat fixed !important;
}

/* Remove Blocksy's auto page-title band on the front page and on standard
   pages that carry their own in-content hero (avoids duplicate titles). */
.home .hero-section[data-type="type-1"] { display: none !important; }
body.dcc-pro.page .hero-section[data-type="type-1"] { display: none !important; }

/* Keep all menu items visible — no "MORE" overflow dropdown. */
.ct-header [data-id="menu"] > ul,
.ct-header .menu {
	flex-wrap: nowrap !important;
}
.ct-header [data-id="menu"] { max-width: none !important; }
/* Blocksy leaves its (empty) "More" container li visible in this layout. */
.ct-header .more-items-container { display: none !important; }

/* ---- B2B professional section : navy-forward, more clinical ------------ */
body.dcc-pro {
	--theme-palette-color-7: #eef1f5 !important;  /* cooler cream */

	--theme-link-initial-color: var(--dcc-gold) !important;
	--theme-link-hover-color:   var(--dcc-navy-soft) !important;
	--theme-headings-color:     var(--dcc-navy) !important;

	/* Gold buttons (navy text) — same family as B2C; the pro lane is distinguished
	   by layout/labelling, not by blue. */
	--theme-button-background-initial-color: var(--dcc-gold) !important;
	--theme-button-background-hover-color:   var(--dcc-gold-deep) !important;
	--theme-button-text-initial-color:       var(--dcc-navy) !important;
	--theme-button-text-hover-color:         var(--dcc-navy) !important;
}
body.dcc-pro {
	background: linear-gradient(170deg, #f1f3f7 0%, #f6f7fa 60%, #ffffff 100%) no-repeat fixed !important;
}

/* ---- Type : modern, clean ---------------------------------------------- */
body {
	font-family: 'Poppins', -apple-system, system-ui, sans-serif !important;
	font-weight: 300;
	line-height: 1.75;
}
h1, h2, h3, h4,
.entry-title,
.ct-headline,
.woocommerce-loop-product__title,
.wp-block-heading {
	font-family: 'Montserrat', Georgia, serif !important;
	font-weight: 600;
	letter-spacing: .2px;
	line-height: 1.2;
	color: var(--dcc-navy);
}

/* =========================================================================
   Skinvault-style header: white bar, logo centered, nav centered below it,
   uppercase letter-spaced links. (Design reference: skinvault.ca collections.)
   ========================================================================= */
/* Black header bar (vipderme mobile reference, website001.jpg). */
.ct-header [data-row="middle"],
.ct-header [data-row="middle"] > .ct-container {
	background: #0d0d0d !important;
	--background-color: #0d0d0d !important;
	border-bottom: none;
	--height: auto;
}
/* The header logo is now the ivory dark-header variant (white ground made
   transparent, black wordmark recoloured, rose-gold artwork untouched), so it
   sits directly on the black bar. The white chip this used to need was the main
   reason the header read like a sticker. */
.ct-header .site-logo-container img {
	border-radius: 0;
	background: none;
	padding: 0;
}
/* ONE row: logo left, actions right — matching the vipderme reference
   (website001.jpg). The previous column layout stacked logo / icons / menu into
   three tiers, which read as clutter on a phone. It also gave Blocksy's menu a
   zero-width measurement, so its JS collapsed every item into the "More"
   dropdown that the rule further down hides — i.e. no visible navigation at all.
   A real row restores that measurement. */
.ct-header [data-row="middle"] .ct-container {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
	min-height: 0;
}
.ct-header [data-row="middle"] [data-column] {
	width: auto !important;
	display: flex !important;
	align-items: center !important;
}
.ct-header [data-row="middle"] [data-column="start"] { justify-content: flex-start !important; }
.ct-header [data-row="middle"] [data-column="end"] { justify-content: flex-end !important; }
/* Logo element: image only (hide the text title). */
.ct-header .site-title-container { display: none !important; }
/* No auto margins on the menu's siblings: they break Blocksy's width
   measurement and re-trigger the "More" collapse. */
.ct-header [data-row="middle"] [data-column="end"] > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* The cart total as text is noise — the reference header shows no amount.
   Icon plus count badge only. */
.ct-header .ct-header-cart .ct-cart-content,
.ct-header .ct-header-cart .ct-cart-price,
.ct-header .ct-header-cart .amount,
.ct-header .ct-header-cart .woocommerce-Price-amount { display: none !important; }
/* Header icons ride on the near-black middle row, but Blocksy's defaults are
   near-black ink (search resolved to #000, cart to #4a4a4a on a #0d0d0d bar),
   which made both effectively invisible. Force light ink here. */
.ct-header [data-row="middle"] [data-id="search"],
.ct-header [data-row="middle"] [data-id="search"] .ct-icon,
.ct-header [data-row="middle"] .ct-header-cart,
.ct-header [data-row="middle"] .ct-header-cart *,
.ct-header [data-row="middle"] .ct-header-cart .ct-icon {
	color: var(--dcc-cream) !important;
	--icon-color: var(--dcc-cream) !important;
	--theme-icon-color: var(--dcc-cream) !important;
	--theme-link-initial-color: var(--dcc-cream) !important;
	fill: currentColor;
}
.ct-header [data-row="middle"] [data-id="search"]:hover .ct-icon,
.ct-header [data-row="middle"] .ct-header-cart:hover * {
	color: var(--dcc-gold) !important;
	--icon-color: var(--dcc-gold) !important;
}
/* Spacing between the trailing header actions. */
.ct-header [data-row="middle"] [data-column="end"] { gap: 20px; }

/* The EN/FR pill is still rendered into wp_footer as an absolutely positioned
   overlay (functions.php: "Move into the header builder later"). Once the header
   actions moved to the right edge it started sitting on top of the cart and the
   hamburger. Reserve room for it wherever the header container reaches the
   viewport edge; on wide screens the pill clears the container anyway.
   Proper fix is still to render it inside the header row. */
@media (max-width: 1330px) {
	.ct-header [data-row="middle"] [data-column="end"] { padding-right: 104px; }
}
@media (max-width: 782px) {
	.ct-header [data-row="middle"] [data-column="end"] { padding-right: 88px; }
	.dcc-lang-switch { top: 10px; right: 10px; padding: 3px; }
	.dcc-lang-switch .dcc-lang { padding: 4px 10px; font-size: 11px; }
}

/* 96px overflowed the tightened single-row bar. A shorter mark also stops the
   logo dominating the header on a phone. */
.ct-header .site-logo-container { --logo-max-height: 60px; }
@media (max-width: 782px) {
	.ct-header .site-logo-container { --logo-max-height: 46px; }
	.ct-header [data-row="middle"] .ct-container { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
	.ct-header [data-row="middle"] [data-column="end"] { gap: 14px; }
}
.ct-header .site-logo-container img {
	max-height: 96px !important;
	width: auto !important;
}
@media (max-width: 689.98px) {
	.ct-header .site-logo-container { --logo-max-height: 60px; }
	.ct-header .site-logo-container img { max-height: 60px !important; }
}
.ct-header .ct-menu-link {
	text-transform: uppercase;
	letter-spacing: 1.6px;
	font-size: 13px;
	font-weight: 500;
	font-family: 'Poppins', sans-serif;
	color: #f5f2ea !important;
}
.ct-header .ct-menu-link:hover { color: var(--dcc-champ, #d3b574) !important; }
/* Header icons (search etc.) readable on black. */
.ct-header .ct-icon { fill: #f5f2ea; }

/* Hero as a rounded card with a NEUTRAL dark overlay — not navy/blue.
   (website001.jpg: inset rounded hero, black dim, white headline.) */
.home .wp-block-cover.alignfull,
.page .wp-block-cover.alignfull {
	width: calc(100% - 28px) !important;
	max-width: 1280px;
	margin: 14px auto 0 !important;
	border-radius: 26px;
	overflow: hidden;
}
/* The reference dim works because its photo is a bright portrait. Ours is a grey
   product flat-lay, so a flat neutral #101010 dim turned it muddy. Warm the tint
   and weight it towards the bottom: the image keeps its highlights at the top,
   and the copy still has contrast where it actually sits. */
.wp-block-cover .wp-block-cover__background {
	background-color: transparent !important;
	background-image: linear-gradient(
		180deg,
		rgba(30, 20, 14, .26) 0%,
		rgba(30, 20, 14, .46) 42%,
		rgba(26, 17, 12, .66) 100%
	) !important;
	opacity: 1 !important;
}

/* ---- Hero copy + actions : follow the reference ------------------------- */
/* Reference is left-aligned with a headline that dominates the card; ours was
   centred and undersized, which read timid. */
.home .wp-block-cover__inner-container,
.page .wp-block-cover__inner-container {
	text-align: left !important;
	max-width: 620px;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.home .wp-block-cover h1,
.home .wp-block-cover h2,
.page .wp-block-cover h1,
.page .wp-block-cover h2 {
	font-size: clamp(2.1rem, 8.4vw, 3.5rem) !important;
	line-height: 1.06 !important;
	letter-spacing: -.4px !important;
	text-wrap: balance;
}
/* The block carries its own centre alignment, so force left on the elements
   themselves — setting it on the container alone was not enough. */
.home .wp-block-cover h1,
.home .wp-block-cover h2,
.home .wp-block-cover p,
.page .wp-block-cover h1,
.page .wp-block-cover h2,
.page .wp-block-cover p {
	text-align: left !important;
}
.home .wp-block-cover p,
.page .wp-block-cover p {
	font-size: clamp(1rem, 4.2vw, 1.12rem) !important;
	line-height: 1.6;
	max-width: 34ch;
	margin-left: 0 !important;
}
/* Both buttons the same width, stacked — the reference look. Unequal pills were
   the single most "accidental"-looking detail on the phone. */
.home .wp-block-cover .wp-block-buttons,
.page .wp-block-cover .wp-block-buttons {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 12px;
	max-width: 400px;
}
.home .wp-block-cover .wp-block-button,
.page .wp-block-cover .wp-block-button { width: 100% !important; }
.home .wp-block-cover .wp-block-button__link,
.page .wp-block-cover .wp-block-button__link {
	display: block !important;
	width: 100% !important;
	text-align: center;
	box-sizing: border-box;
}
/* Gold hairline on the light button, as in the reference. */
.home .wp-block-cover .wp-block-button:first-child .wp-block-button__link,
.page .wp-block-cover .wp-block-button:first-child .wp-block-button__link {
	border: 1px solid var(--dcc-gold, #c39e3a);
}

/* ---- Buttons : refined pill -------------------------------------------- */
.wp-block-button__link,
.ct-button,
button,
input[type="submit"],
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit {
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: .82rem;
	padding: .9em 2.1em;
	box-shadow: 0 6px 18px rgba(28, 36, 75, .12);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wp-block-button__link:hover,
.ct-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(28, 36, 75, .18);
}

/* ---- Product grid : Skinvault style ------------------------------------ */
/* 4 columns on desktop, clean white cards, square corners, centered text,
   quiet add-to-cart that appears on hover. */
[data-products] { --shop-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 999.98px) { [data-products] { --shop-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 689.98px) { [data-products] { --shop-columns: repeat(2, minmax(0, 1fr)); } }

.woocommerce ul.products li.product {
	background: #ffffff;
	text-align: center;
	padding: 0 0 22px;
	transition: box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover {
	box-shadow: 0 10px 30px rgba(28, 36, 75, .08);
}
.woocommerce ul.products li.product img,
.woocommerce div.product .woocommerce-product-gallery__image img {
	border-radius: 0;
}
/* Montserrat, not Poppins: this rule is more specific than the headings rule
   near the top of the file, so it was silently overriding the designed pairing
   and rendering every product title in the body face. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600;
	font-size: 17px;
	color: var(--dcc-navy);
	letter-spacing: .2px;
	line-height: 1.3;
	margin-top: 14px;
	text-align: center;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: #6e6e6e;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 15px;
	justify-content: center;
	text-align: center;
}
/* Quiet add-to-cart: hidden until hover on desktop, always visible on touch. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .18s ease, transform .18s ease;
	margin-top: 10px;
	box-shadow: none;
	font-size: .72rem;
	padding: .7em 1.8em;
}
.woocommerce ul.products li.product:hover .button,
.woocommerce ul.products li.product:hover .add_to_cart_button {
	opacity: 1;
	transform: none;
}
@media (hover: none), (max-width: 999.98px) {
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .add_to_cart_button { opacity: 1; transform: none; }
}

/* Mobile: floating products (skinvault mobile reference, mobile001.png) —
   no card box, image floats on the page, title + price below, 2 columns,
   generous vertical air. Grid is forced on the UL itself so it applies to
   EVERY product grid (shop archive AND [products] shortcode on the
   homepage — the shortcode markup lacks Blocksy's [data-products] vars,
   which is why the homepage collapsed to 1 column). */
@media (max-width: 999.98px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 26px 14px !important;
		width: 100% !important;
	}
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product,
	.woocommerce ul.products li.product:hover {
		width: auto !important;
		float: none !important;
		margin: 0 0 20px !important;
		background: transparent;
		box-shadow: none;
		padding-bottom: 6px;
	}
}

/* Collection-style title bar on shop/category archives: slim white band,
   left-aligned title (Skinvault breadcrumb-bar look). */
.post-type-archive-product .hero-section,
.tax-product_cat .hero-section {
	background: #ffffff !important;
	border-bottom: 1px solid var(--dcc-line, #e6e2d4);
	--container-padding: 18px 0px !important;
	padding: 0 !important;
	min-height: 0 !important;
	text-align: left;
}
.post-type-archive-product .hero-section > .ct-container,
.tax-product_cat .hero-section > .ct-container {
	padding-top: 18px;
	padding-bottom: 18px;
}
.post-type-archive-product .hero-section .entry-header,
.tax-product_cat .hero-section .entry-header {
	min-height: 0 !important;
	height: auto !important;
}
.post-type-archive-product .page-title,
.tax-product_cat .page-title {
	font-size: 20px !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--dcc-navy);
	text-align: left;
}
/* Skinvault cards show image / title / price only — hide the category chip. */
.woocommerce ul.products li.product .entry-meta { display: none !important; }

/* ---- Dual-path cards (consumer vs professional) on the homepage -------- */
.dcc-path-card { border-radius: 20px; }
.dcc-path-card .wp-block-heading { margin-top: .3em; }
.dcc-path-label {
	font-size: 12px !important;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--dcc-gold, #c39e3a) !important;
	font-weight: 600;
}
.dcc-pro-band {
	background: linear-gradient(135deg, #f7f1e3 0%, #efe6cf 100%);
	color: #3a3a3a;
	border-radius: 24px;
	border: 1px solid var(--dcc-champ, #d3b574);
}

/* ---- Black feature strip (vipderme "Nos services", website003.jpg) ------ */
.dcc-dark-strip h4,
.dcc-dark-strip .wp-block-heading {
	color: var(--dcc-champ, #d3b574) !important;
}
.dcc-dark-strip p { color: #cfcabe; }

/* ---- Language toggle: lives IN the black header bar (top right).
   Absolute, so it scrolls away with the header instead of floating over
   content; dark styling to blend with the bar. ---------------------------- */
.dcc-lang-switch {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 9999;
	display: flex;
	gap: 2px;
	padding: 4px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	font-family: 'Poppins', system-ui, sans-serif;
}
.dcc-lang-switch .dcc-lang {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .5px;
	text-decoration: none;
	color: #d9d4c8;
	line-height: 1;
}
.dcc-lang-switch .dcc-lang.is-current {
	background: var(--dcc-gold, #c39e3a);
	color: #1a1a1a;
}
@media (max-width: 689.98px) {
	.dcc-lang-switch { top: 12px; right: 12px; }
}