/*
Theme Name: Creative3Decor
Theme URI: https://creative3decor.hu
Author: Creative3Decor Team
Author URI: https://creative3decor.hu
Description: Premium editorial WooCommerce theme for 3D printed decor. Earth-tone design system with full Elementor + Gutenberg + WooCommerce 9 + HPOS support, AJAX cart, off-canvas menu, search overlay and quick view.
Version: 1.1.7
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: creative3decor
Tags: e-commerce, woocommerce, elementor, custom-background, custom-logo, custom-menu, editor-style, full-width-template, threaded-comments, translation-ready, two-columns, blog
*/

/* =====================================================================
   Creative3Decor — Design System (root tokens)
   Warm, organic, editorial — earth tones
   ===================================================================== */

:root {
	/* Earth palette */
	--c-bg: #F5EFE6;
	--c-bg-soft: #EDE3D2;
	--c-bg-cream: #FAF6EF;
	--c-paper: #FFFCF6;
	--c-ink: #1F1A14;
	--c-ink-soft: #3A2F24;
	--c-muted: #6B5D4C;
	--c-line: #D9CDB8;
	--c-line-soft: #E8DDC9;

	--c-terracotta: #B5563A;
	--c-terracotta-deep: #8E3F28;
	--c-clay: #C97B5C;
	--c-olive: #6B7445;
	--c-olive-deep: #4F5733;
	--c-ochre: #C8923D;
	--c-stone: #A89A85;

	/* Typography */
	--f-serif: 'Cormorant Garamond', 'EB Garamond', 'Playfair Display', Georgia, serif;
	--f-sans: 'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif;
	--f-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

	/* Spacing rhythm (4px grid) */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;
	--s-10: 128px;

	/* Radii */
	--r-sm: 2px;
	--r-md: 6px;
	--r-lg: 14px;
	--r-pill: 999px;

	/* Layout */
	--container-max: 1440px;
	--container-pad: var(--s-7);
	--header-h: 76px;
	--announcement-h: 38px;

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in: cubic-bezier(0.55, 0, 1, 0.45);
	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-slow: 420ms;

	/* Z-index */
	--z-header: 50;
	--z-overlay: 80;
	--z-modal: 90;
}

/* Additional Design System Styles */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Typography utilities */
.h-display {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.h-serif {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-muted);
  font-weight: 500;
}
.body-sm { font-size: 14px; line-height: 1.55; color: var(--c-ink-soft); }
.body-md { font-size: 16px; line-height: 1.6; color: var(--c-ink-soft); }
.body-lg { font-size: 18px; line-height: 1.55; color: var(--c-ink-soft); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  text-decoration: none;
}
.btn-primary {
  background: var(--c-ink);
  color: var(--c-bg-cream);
}
.btn-primary:hover { background: var(--c-terracotta-deep); }
.btn-outline {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn-outline:hover { background: var(--c-ink); color: var(--c-bg-cream); }
.btn-ghost {
  background: transparent;
  color: var(--c-ink);
  padding: 10px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--c-ink);
}

/* Generic */
.divider-thin { height: 1px; background: var(--c-line); width: 100%; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-muted);
  background: transparent;
}

/* =====================================================================
   Reset & base
   ===================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
	color: var(--c-terracotta);
}

button {
	font-family: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--c-terracotta);
	outline-offset: 2px;
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	padding: 12px 18px;
	background: var(--c-ink);
	color: var(--c-bg-cream);
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	z-index: 9999;
	border-radius: var(--r-pill);
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

/* =====================================================================
   Typography utilities
   ===================================================================== */

.h-display {
	font-family: var(--f-serif);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.02em;
	line-height: 0.95;
}

.h-serif {
	font-family: var(--f-serif);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.eyebrow {
	font-family: var(--f-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--c-muted);
	font-weight: 500;
}

.body-sm {
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-ink-soft);
}

.body-md {
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-ink-soft);
}

.body-lg {
	font-size: 18px;
	line-height: 1.55;
	color: var(--c-ink-soft);
}

/* =====================================================================
   Buttons
   ===================================================================== */

.btn,
.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: var(--r-pill);
	font-family: var(--f-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
	text-decoration: none;
	background: var(--c-ink);
	color: var(--c-bg-cream);
}

.btn:hover,
.button:hover,
.wp-block-button__link:hover {
	background: var(--c-terracotta-deep);
	color: var(--c-bg-cream);
}

.btn-primary,
.is-style-primary .wp-block-button__link {
	background: var(--c-ink);
	color: var(--c-bg-cream);
}

.btn-outline,
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-ink);
}

.btn-outline:hover,
.is-style-outline .wp-block-button__link:hover {
	background: var(--c-ink);
	color: var(--c-bg-cream);
}

.btn-ghost,
.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--c-ink);
	padding: 10px 0;
	border-radius: 0;
	border-bottom: 1px solid var(--c-ink);
}

.btn-ghost:hover,
.is-style-ghost .wp-block-button__link:hover {
	background: transparent;
	color: var(--c-terracotta);
	border-bottom-color: var(--c-terracotta);
}

.btn--full {
	width: 100%;
}

.btn--lg {
	padding: 18px 28px;
	font-size: 15px;
}

.btn--sm {
	padding: 10px 16px;
	font-size: 12px;
}

/* =====================================================================
   Dividers, tags, badges
   ===================================================================== */

.divider-thin {
	height: 1px;
	background: var(--c-line);
	width: 100%;
}

.divider-thick {
	height: 2px;
	background: var(--c-ink);
	width: 100%;
}

.tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-family: var(--f-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	color: var(--c-muted);
	background: transparent;
}

.badge {
	position: absolute;
	top: var(--s-4);
	padding: 6px 12px;
	font-family: var(--f-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	border-radius: var(--r-pill);
	color: var(--c-bg-cream);
	background: var(--c-terracotta);
	z-index: 2;
}

.badge--featured {
	left: var(--s-4);
	background: var(--c-bg);
	color: var(--c-ink);
}

.badge--sale {
	right: var(--s-4);
}

/* =====================================================================
   Container & grid helpers
   ===================================================================== */

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.container--narrow {
	max-width: 880px;
}

.section {
	padding: var(--s-10) 0;
}

.section--soft {
	background: var(--c-bg-soft);
}

.section--cream {
	background: var(--c-bg-cream);
}

.section--paper {
	background: var(--c-paper);
}

.section--ink {
	background: var(--c-ink);
	color: var(--c-bg-cream);
}

.section--ink .body-md,
.section--ink .body-sm,
.section--ink .body-lg,
.section--ink .eyebrow {
	color: rgba(245, 239, 230, 0.78);
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-6);
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-6);
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
}

/* =====================================================================
   Forms (base)
   ===================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	font-family: var(--f-sans);
	font-size: 14px;
	color: var(--c-ink);
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	width: 100%;
	transition: border-color var(--dur-fast) var(--ease-out);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--c-ink);
}

label {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: var(--s-2);
	display: inline-block;
}

/* =====================================================================
   Page layout primitives
   ===================================================================== */

.site-content {
	display: block;
}

.site-content > .container {
	padding-top: var(--s-9);
	padding-bottom: var(--s-9);
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.elementor-page .site-content,
.elementor-page .entry-content {
	padding: 0;
	margin: 0;
}

.elementor-section-stretched {
	max-width: none;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1024px) {
	:root {
		--container-pad: var(--s-5);
	}
	.grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	:root {
		--container-pad: var(--s-4);
	}
	body {
		font-size: 15px;
	}
	.h-display {
		font-size: clamp(40px, 11vw, 72px) !important;
	}
	.section {
		padding: var(--s-8) 0;
	}
	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* =====================================================================
   Creative3Decor — Design System (root tokens)
   Warm, organic, editorial — earth tones
   ===================================================================== */
:root {
	/* Colors */
	--c-bg: #fffaf5;
	--c-bg-cream: #fefcf9;
	--c-paper: #f8f6f2;
	--c-ink: #1d1a17;
	--c-muted: #807b74;
	--c-line: #ebe6df;
	--c-terracotta: #9b5a3d;
	--c-clay: #8b4e32;
	--c-olive: #615f4d;
	--c-ochre: #7b5f3a;

	/* Fonts */
	--f-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	--f-serif: 'Cormorant Garamond', Georgia, serif;
	--f-mono: 'JetBrains Mono', monospace;

	/* Typography */
	--fs-1: clamp(28px, 5vw, 40px);
	--fs-2: clamp(32px, 5vw, 56px);
	--fs-3: clamp(40px, 5vw, 72px);
	--fs-4: clamp(56px, 5vw, 96px);
	--fs-5: clamp(72px, 5vw, 128px);

	/* Spacing scale */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;
	--s-10: 128px;

	/* Transitions */
	--dur-fast: 150ms;
	--dur-normal: 300ms;
	--dur-slow: 600ms;
	--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);

	/* Borders */
	--border-radius: 2px;
	--border-width: 1px;

	/* Shadows */
	--shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
	--shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.06);

	/* Z-index */
	--z-modal: 9999;
	--z-sticky: 100;
}

/* =====================================================================
   Typography — Editorial
   ===================================================================== */
.h-display {
	font-family: var(--f-serif);
	font-size: var(--fs-5);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.h-serif {
	font-family: var(--f-serif);
	font-size: var(--fs-4);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.h-lg {
	font-family: var(--f-serif);
	font-size: var(--fs-3);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.h-md {
	font-family: var(--f-serif);
	font-size: var(--fs-2);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.h-sm {
	font-family: var(--f-serif);
	font-size: var(--fs-1);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.body-lg {
	font-family: var(--f-sans);
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0.01em;
}

.body-md {
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.01em;
}

.body-sm {
	font-family: var(--f-mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: var(--r-pill);
	font-family: var(--f-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all var(--dur-fast) var(--ease-out);
	text-decoration: none;
}

.btn-primary {
	background: var(--c-ink);
	color: var(--c-bg-cream);
}

.btn-primary:hover {
	background: var(--c-terracotta-deep);
}

.btn-outline {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-ink);
}

.btn-outline:hover {
	background: var(--c-ink);
	color: var(--c-bg-cream);
}

.btn-ghost {
	background: transparent;
	color: var(--c-ink);
	padding: 10px 0;
	border-radius: 0;
	border-bottom: 1px solid var(--c-ink);
}

/* =====================================================================
   Generic
   ===================================================================== */
.divider-thin {
	height: 1px;
	background: var(--c-line);
	width: 100%;
}

.tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-family: var(--f-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	color: var(--c-muted);
	background: transparent;
}