/* Luuks Lunch — huisstijl-overlay
   Crème #F5F2EC + Donkergrijs #1A1A1A + Goud #C8A96A
   Typografie: Cormorant Garamond (serif headings) + Inter (sans body) */

:root {
	--luuks-cream: #F5F2EC;
	--luuks-white: #FFFFFF;
	--luuks-ink: #1A1A1A;
	--luuks-mid: #6B6B6B;
	--luuks-gold: #C8A96A;
	--luuks-gold-dark: #A8893F;
	--luuks-gold-soft: #E0CBA0;
	--luuks-line: rgba(26, 26, 26, 0.08);
	--luuks-line-strong: rgba(26, 26, 26, 0.14);

	--luuks-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--luuks-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--luuks-script: 'Pinyon Script', 'Brush Script MT', cursive;
}

/* Block-theme color tokens overrulen voor consistency */
:root {
	--wp--preset--color--background: var(--luuks-cream);
	--wp--preset--color--foreground: var(--luuks-ink);
	--wp--preset--color--primary: var(--luuks-gold-dark);
	--wp--preset--color--accent: var(--luuks-gold);
	--wp--preset--color--accent-1: var(--luuks-gold);
}

/* Body & typografie */
body {
	background-color: var(--luuks-cream);
	color: var(--luuks-ink);
	font-family: var(--luuks-sans);
	font-weight: 400;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.product_title,
.wc-block-grid__product-title,
.products .woocommerce-loop-product__title,
.widget-title {
	font-family: var(--luuks-serif);
	font-weight: 500;
	letter-spacing: 0.005em;
	color: var(--luuks-ink);
	line-height: 1.25;
}

h1, .entry-title { font-size: 2.6rem; font-weight: 500; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

/* Links */
a {
	color: var(--luuks-gold-dark);
	text-decoration-color: var(--luuks-gold);
	text-underline-offset: 3px;
}

a:hover,
a:focus {
	color: var(--luuks-ink);
}

/* Navigatie / menu */
.main-navigation ul li a,
.site-header-cart .cart-contents,
.site-branding .site-title a {
	font-family: var(--luuks-sans);
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.85rem;
	color: var(--luuks-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color 150ms ease, color 150ms ease;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	border-bottom-color: var(--luuks-gold);
	color: var(--luuks-ink);
}

/* Knoppen */
.wp-block-button__link,
button.wp-block-search__button,
.button,
.wp-block-button .wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page button.button,
.woocommerce-page input.button {
	background-color: var(--luuks-gold);
	color: var(--luuks-ink);
	border: 1px solid var(--luuks-gold);
	border-radius: 2px;
	padding: 0.7em 1.6em;
	font-family: var(--luuks-sans);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
	box-shadow: none;
	text-shadow: none;
}

.wp-block-button__link:hover,
.button:hover,
.wp-block-button .wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--luuks-ink);
	color: var(--luuks-cream);
	border-color: var(--luuks-ink);
}

.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--luuks-gold);
	color: var(--luuks-ink);
	border-color: var(--luuks-gold);
}

.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--luuks-gold-dark);
	color: var(--luuks-cream);
	border-color: var(--luuks-gold-dark);
}

/* Outlined-button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--luuks-ink);
	border-color: var(--luuks-gold);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--luuks-gold);
	color: var(--luuks-ink);
}

/* Cart: productnamen in donkergrijs, geen underline.
   Twee varianten omdat WC zowel klassieke als block-based cart kent. */
.woocommerce-cart-form .product-name a,
.woocommerce table.shop_table .product-name a,
.woocommerce-cart table.cart .product-name a,
.wc-block-components-product-name,
a.wc-block-components-product-name,
.wc-block-cart-item__product a {
	color: var(--luuks-ink) !important;
	text-decoration: none !important;
	font-weight: 500;
}

.woocommerce-cart-form .product-name a:hover,
.woocommerce table.shop_table .product-name a:hover,
.woocommerce-cart table.cart .product-name a:hover,
.wc-block-components-product-name:hover,
a.wc-block-components-product-name:hover,
.wc-block-cart-item__product a:hover {
	color: var(--luuks-gold-dark) !important;
	text-decoration: none !important;
}

/* Productkaarten — wit, dunne goud lijn, ruim padding */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--luuks-white);
	padding: 1.5rem 1.25rem;
	border-radius: 4px;
	border: 1px solid var(--luuks-line);
	transition: border-color 200ms ease, transform 200ms ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--luuks-gold);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--luuks-serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--luuks-ink);
	margin: 0.5em 0 0.25em;
	padding: 0;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--luuks-ink);
	font-family: var(--luuks-sans);
	font-weight: 600;
	font-size: 1rem;
}

/* Sectie-koppen op de homepage (Storefront homepage template) */
.storefront-product-section h2.section-title,
section.storefront-product-categories h2.section-title,
section.storefront-product-section h2.section-title {
	font-family: var(--luuks-serif);
	font-size: 1.9rem;
	font-weight: 500;
	color: var(--luuks-ink);
	margin-bottom: 0.25em;
	letter-spacing: 0.01em;
}

/* Een hairline goud onder sectie-koppen — echo van het logo */
.storefront-product-section,
section.storefront-product-section {
	padding-top: 3rem;
	border-top: 1px solid var(--luuks-line);
	margin-top: 2rem;
}

/* Eerste sectie krijgt geen lijn (zit onder hero) */
.storefront-product-section:first-of-type {
	border-top: none;
	margin-top: 0;
}

/* Sierletter (eerste letter) — echo van het LL-monogram in het logo.
   Alleen op hero, sectie-koppen en eerste paragraaf, anders te druk. */
.luuks-hero-title::first-letter,
.entry-title::first-letter,
.storefront-product-section h2.section-title::first-letter,
section.storefront-product-section h2.section-title::first-letter,
.home .entry-content > p:first-of-type::first-letter {
	font-family: var(--luuks-script);
	font-weight: 400;
	font-style: normal;
	color: var(--luuks-gold-dark);
	font-size: 1.6em;
	line-height: 0.9;
	padding-right: 0.04em;
	vertical-align: -0.05em;
}

/* Hero-zone op homepage: ruime padding, serif welkomstkop */
.home .entry-content > p:first-child,
.home .entry-content .luuks-hero-title {
	font-family: var(--luuks-serif);
	font-size: 2.4rem;
	line-height: 1.2;
	font-weight: 500;
	color: var(--luuks-ink);
	margin: 1.5rem 0 1rem;
	max-width: 32ch;
}

.home .entry-content .luuks-hero-lead {
	font-family: var(--luuks-sans);
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--luuks-mid);
	max-width: 50ch;
	margin: 0 0 2rem;
}

/* WooCommerce notices: goud/bruin in plaats van de blauwe/groene defaults */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: rgba(200, 169, 106, 0.12) !important;
	border-top: 3px solid var(--luuks-gold) !important;
	color: var(--luuks-ink) !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--luuks-gold-dark) !important;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: var(--luuks-gold-dark) !important;
	text-decoration-color: var(--luuks-gold);
}

.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover {
	color: var(--luuks-ink) !important;
}

/* "Iets lekkers erbij?" — verschijnt na add-to-cart op shop-loop tegel */
.luuks-extras-prompt.button {
	display: inline-block;
	margin-top: 0.5em;
	background: transparent !important;
	color: var(--luuks-gold-dark) !important;
	border: 1px solid var(--luuks-gold) !important;
	border-radius: 2px;
	padding: 0.55em 1em !important;
	font-family: var(--luuks-sans) !important;
	font-weight: 500 !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	line-height: 1.3 !important;
}

.luuks-extras-prompt.button:hover {
	background: var(--luuks-gold) !important;
	color: var(--luuks-ink) !important;
	border-color: var(--luuks-gold) !important;
}

/* Homepage 6-tegel grid (3 bundels + 3 categorieen) */
.luuks-homepage-tiles {
	margin: 2.5rem auto;
	max-width: 1160px;
	padding: 0 1.5rem;
}

.luuks-homepage-tiles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.luuks-homepage-tile {
	display: block;
	background: var(--luuks-white);
	border: 1px solid var(--luuks-line);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--luuks-ink);
	transition: border-color 200ms ease, transform 200ms ease;
}

.luuks-homepage-tile:hover {
	border-color: var(--luuks-gold);
	transform: translateY(-2px);
	color: var(--luuks-ink);
}

.luuks-homepage-tile__image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--luuks-cream);
	display: flex;
	align-items: center;
	justify-content: center;
}

.luuks-homepage-tile__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.luuks-homepage-tile__image--placeholder {
	background: linear-gradient(135deg, var(--luuks-cream) 0%, var(--luuks-gold-soft) 100%);
}

.luuks-homepage-tile__label {
	font-family: var(--luuks-serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--luuks-ink);
	margin: 0;
	padding: 1rem 1.25rem;
	text-align: center;
}

@media (max-width: 900px) {
	.luuks-homepage-tiles__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.luuks-homepage-tiles__grid {
		grid-template-columns: 1fr;
	}
}

/* Gratis-bezorging-nudge in cart/checkout totalen */
.luuks-free-shipping-notice th {
	background: rgba(200, 169, 106, 0.10);
	border-top: 1px solid var(--luuks-gold-soft);
	border-bottom: 1px solid var(--luuks-gold-soft);
	color: var(--luuks-ink);
	font-family: var(--luuks-sans);
	font-weight: 400;
	font-style: italic;
	font-size: 0.9rem;
	line-height: 1.4;
	text-align: left;
	padding: 0.6em 0.75em;
}

.luuks-free-shipping-notice .woocommerce-Price-amount {
	font-weight: 600;
	font-style: normal;
}

/* Prijzen */
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--luuks-mid);
}

/* Header / site-logo */
.wp-block-site-logo img,
.site-branding img.custom-logo,
.custom-logo,
img.custom-logo {
	height: 144px !important;
	width: auto !important;
	max-width: none !important;
	image-rendering: -webkit-optimize-contrast;  /* Behoudt contrast bij downscaling van fijne lijnen */
}

.site-branding {
	padding: 1.25rem 0;
}

.site-header {
	background-color: var(--luuks-white);
	border-bottom: 1px solid var(--luuks-line);
}

/* Footer */
.site-footer {
	background-color: var(--luuks-ink);
	color: var(--luuks-cream);
	font-family: var(--luuks-sans);
	font-size: 0.9rem;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
	color: var(--luuks-gold);
	font-family: var(--luuks-serif);
}

.site-footer a {
	color: var(--luuks-cream);
	text-decoration-color: var(--luuks-gold);
}

.site-footer a:hover {
	color: var(--luuks-gold);
}

/* Eigen footer-blok met bedrijfsgegevens */
.luuks-footer {
	max-width: 1160px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 1.5rem;
}

.luuks-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(245, 242, 236, 0.12);
}

.luuks-footer__name {
	font-family: var(--luuks-serif);
	font-size: 1.9rem;
	font-weight: 500;
	color: var(--luuks-gold);
	display: inline-block;
}

.luuks-footer__name::first-letter {
	font-family: var(--luuks-script);
	font-size: 1.4em;
	color: var(--luuks-gold);
}

.luuks-footer__tag {
	color: rgba(245, 242, 236, 0.7);
	margin: 0.5rem 0 0;
	max-width: 34ch;
	line-height: 1.6;
}

.luuks-footer__col h3 {
	font-family: var(--luuks-serif);
	color: var(--luuks-gold);
	font-size: 1.2rem;
	font-weight: 500;
	margin: 0 0 0.75rem;
}

.luuks-footer__col p {
	color: var(--luuks-cream);
	line-height: 1.7;
	margin: 0 0 0.75rem;
}

.luuks-footer a {
	color: var(--luuks-cream);
	text-decoration: none;
}

.luuks-footer a:hover {
	color: var(--luuks-gold);
}

.luuks-footer__bottom {
	padding-top: 1.5rem;
	text-align: center;
	color: rgba(245, 242, 236, 0.5);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}

@media (max-width: 768px) {
	.luuks-footer__grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		text-align: center;
	}
	.luuks-footer__tag {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Categorieën-widget + product-cat lijsten: groter, leesbaarder */
.widget_product_categories ul,
.widget_categories ul,
.product-categories,
.wc-block-product-categories-list {
	font-family: var(--luuks-sans);
	font-size: 1rem;
	line-height: 1.6;
	list-style: none;
	padding-left: 0;
}

.widget_product_categories ul li,
.widget_categories ul li,
.product-categories li,
.wc-block-product-categories-list li,
.cat-item {
	padding: 0.4em 0;
	border-bottom: 1px solid var(--luuks-line);
	font-size: 1.05rem;
}

.widget_product_categories ul li:last-child,
.widget_categories ul li:last-child,
.cat-item:last-child {
	border-bottom: none;
}

.widget_product_categories ul li a,
.widget_categories ul li a,
.product-categories li a,
.cat-item a {
	color: var(--luuks-ink);
	text-decoration: none;
	font-weight: 500;
}

.widget_product_categories ul li a:hover,
.widget_categories ul li a:hover,
.cat-item a:hover {
	color: var(--luuks-gold-dark);
}

.widget_product_categories .count,
.widget_categories .count,
.cat-item .count {
	color: var(--luuks-mid);
	font-size: 0.9rem;
	font-weight: 400;
	margin-left: 0.3em;
}

/* WC subcategorie-grid op de shop-pagina (Winkel) */
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	font-family: var(--luuks-serif);
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--luuks-ink);
	margin: 0.5em 0;
}

.woocommerce ul.products li.product-category mark.count,
.woocommerce ul.products li.product-category .count {
	background: transparent;
	color: var(--luuks-mid);
	font-family: var(--luuks-sans);
	font-size: 0.95rem;
	font-weight: 400;
}

/* Focus-ring: goud i.p.v. browser-blauw. Alleen bij keyboard-focus tonen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.wp-block-button__link:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--luuks-gold) !important;
	outline-offset: 2px;
	box-shadow: none;
}

/* Stoor het browser-default 'focus' niet in muis-context (geen ring bij klik). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.button:focus:not(:focus-visible) {
	outline: none;
}

/* Forms: schoner */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--luuks-white);
	border: 1px solid var(--luuks-line-strong);
	border-radius: 2px;
	padding: 0.65em 0.75em;
	font-family: var(--luuks-sans);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--luuks-gold);
	outline: none;
}