/* ==========================================================================
   De Corbie — design layer for Shopkeeper
   Inspired by Shopkeeper's "Cosmeticals Store" template kit: Playfair Display
   display type over Jost UI type, high contrast, generous whitespace, full-bleed
   alternating sections.

   The demo's coral (#ff5943) is GetBowtied's own branding — De Corbie's black +
   gold is kept instead. Swap --dc-accent if you ever want the coral.

   Loaded after Shopkeeper's own stylesheets; scoped so it only restyles, never
   relayouts, the theme's structure.
   ========================================================================== */

:root {
	/* palette — De Corbie black/gold, extended */
	--dc-ink:       #151515;
	--dc-ink-soft:  #2b2b29;
	--dc-muted:     #6d6d66;
	--dc-accent:    #dd9933;   /* demo equivalent: #ff5943 */
	--dc-accent-dk: #b8781f;
	--dc-sage:      #9e9d89;
	--dc-cream:     #faf8f5;
	--dc-paper:     #ffffff;
	--dc-line:      rgba(21, 21, 21, .10);
	--dc-line-soft: rgba(21, 21, 21, .06);

	/* type */
	--dc-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
	--dc-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--dc-h1: clamp(2.3rem, 1.35rem + 3.9vw, 4.6rem);
	--dc-h2: clamp(1.8rem, 1.2rem + 2.5vw, 3.1rem);
	--dc-h3: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);

	--dc-ease: cubic-bezier(.2, .7, .3, 1);
	--dc-radius: 0px;          /* the demo is sharp-cornered */
	--dc-shadow-lift: 0 2px 6px rgba(21,21,21,.06), 0 18px 44px rgba(21,21,21,.13);
}

/* --------------------------------------------------------------------------
   1. Typography — the actual point of this pass
   -------------------------------------------------------------------------- */

body,
button, input, select, textarea, optgroup,
.woocommerce, .woocommerce-page,
p, li, td, th, label, span, div {
	font-family: var(--dc-body);
}

body {
	font-family: var(--dc-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--dc-ink-soft);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .product_title, .page-title,
.woocommerce-loop-product__title,
.section-title, .widget-title {
	font-family: var(--dc-display);
	color: var(--dc-ink);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.12;
	text-wrap: balance;
}

h1, .page-title, .product_title { font-size: var(--dc-h1); font-weight: 700; }
h2 { font-size: var(--dc-h2); }
h3 { font-size: var(--dc-h3); }

p { max-width: 74ch; }

::selection { background: var(--dc-accent); color: #fff; }

a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--dc-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Navigation + small UI text: Jost, spaced caps — the demo's signature. */
.main-navigation a,
.top-bar-navigation a,
#site-navigation a,
.menu-item a,
.footer-navigation a {
	font-family: var(--dc-body);
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. Buttons — sharp, uppercase, letterspaced
   -------------------------------------------------------------------------- */

.button, a.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.elementor-button {
	font-family: var(--dc-body);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--dc-radius);
	transition: background .28s var(--dc-ease), color .28s var(--dc-ease),
	            border-color .28s var(--dc-ease);
}

.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
	background: var(--dc-ink);
	color: #fff;
	border: 1px solid var(--dc-ink);
	padding: 1.05em 2.1em;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
	background: var(--dc-accent);
	border-color: var(--dc-accent);
	color: #fff;
}

/* --------------------------------------------------------------------------
   3. Product grid
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-family: var(--dc-display);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--dc-body);
	font-weight: 600;
	color: var(--dc-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}
.woocommerce ul.products li.product .price del { color: var(--dc-muted); opacity: 1; }
.woocommerce ul.products li.product .price ins { color: var(--dc-accent-dk); text-decoration: none; }

.woocommerce ul.products li.product img {
	transition: transform .6s var(--dc-ease);
}
.woocommerce ul.products li.product:hover img { transform: scale(1.04); }

/* Sale flash: sharp pill, brand gold. */
.woocommerce span.onsale {
	background: var(--dc-accent);
	color: #fff;
	font-family: var(--dc-body);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: 0;
	padding: .6em 1em;
	line-height: 1;
	min-height: 0;
	min-width: 0;
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--dc-accent); }

/* --------------------------------------------------------------------------
   4. Forms + notices
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	font-family: var(--dc-body);
	border: 1px solid var(--dc-line);
	border-radius: var(--dc-radius);
	padding: .9em 1em;
	background: var(--dc-paper);
	color: var(--dc-ink);
	transition: border-color .2s var(--dc-ease), box-shadow .2s var(--dc-ease);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--dc-accent);
	box-shadow: 0 0 0 3px rgba(221, 153, 51, .16);
	outline: none;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--dc-accent);
	border-radius: var(--dc-radius);
	background: var(--dc-paper);
	color: var(--dc-ink-soft);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--dc-accent); }

/* --------------------------------------------------------------------------
   5. Section rhythm for the WPBakery content that came from decorbie.be
   The imported homepage/salon pages are vc_row based; give them the demo's
   breathing room without touching their internal layout.
   -------------------------------------------------------------------------- */

.wpb_row, .vc_row { margin-bottom: 0; }

.entry-content > .wpb_row,
.entry-content > .vc_row {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

.wpb_text_column p:last-child { margin-bottom: 0; }

/* Section headings from the imported pages read as display type. */
.wpb_text_column h2,
.wpb_text_column h3,
.vc_custom_heading {
	font-family: var(--dc-display) !important;
	letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */

.site-footer, .footer-widgets, #footer {
	font-family: var(--dc-body);
}
.site-footer a:hover, #footer a:hover { color: var(--dc-accent); }

/* --------------------------------------------------------------------------
   7. Hide any shortcode that has no plugin behind it.
   Stockholm Core and Instagram Feed are not installed here, so their tags
   would otherwise print as literal text mid-page. This is a safety net only —
   the real fix is rebuilding those blocks (in progress).
   -------------------------------------------------------------------------- */

.dc-unrendered-shortcode { display: none !important; }