/*
Theme Name:   Sieraden en Meer
Theme URI:    https://sieradenenmeer.nl
Description:  Child theme van Blocksy voor Sieraden en Meer. Bevat de kleuren, typografie en WooCommerce-aanpassingen uit de stijlgids en de goedgekeurde mockup.
Author:       Luce Holding
Author URI:   https://luceholding.nl
Template:     blocksy
Version:      1.0.8
Requires PHP: 8.0
Text Domain:  sieraden-en-meer
Tags:         e-commerce, custom-colors, custom-logo
*/

/* ==========================================================================
   INHOUD
   1.  Tokens
   2.  Brug naar het Blocksy-palet
   3.  Typografie
   4.  Knoppen
   5.  Formuliervelden
   6.  Header, logo en menu
   7.  WooCommerce — productkaart en archief
   8.  WooCommerce — productpagina
   9.  WooCommerce — winkelmand, afrekenen en meldingen
   10. Footer
   11. Hulpklassen (pareldivider, infobox, sluier)
   12. Homepagina-secties
   13. Toegankelijkheid en mobiel
   ========================================================================== */


/* ==========================================================================
   1. Tokens — exact de waarden uit de mockup
   ========================================================================== */

:root {
	/* Vlakken */
	--sm-pearl:        #FBF6F2;
	--sm-blush:        #F7E3E4;
	--sm-rose-shadow:  #EBCBC7;

	/* Roze */
	--sm-rosy:         #DE8A9C;
	--sm-deep-rose:    #A85F70;

	/* Accenten */
	--sm-gold:         #B89154;
	--sm-champagne:    #E6D3AE;
	--sm-lagoon:       #4E8F8B;
	--sm-sea:          #CBE5DF;

	/* Tekst */
	--sm-ink:          #3B2C2E;
	--sm-ink-soft:     #7A6669;

	/* Lijnen */
	--sm-line:         #EBD9D6;
	--sm-hair:         rgba(184, 145, 84, .35);

	/* Type */
	--sm-display:      'Italiana', Georgia, serif;
	--sm-serif:        'Bodoni Moda', Georgia, serif;
	--sm-script:       'Pinyon Script', cursive;
	--sm-sans:         'Jost', system-ui, -apple-system, sans-serif;

	/* Ritme */
	--sm-spacing:      clamp(3rem, 8vw, 5.5rem);
	--sm-track:        .28em;   /* spatiëring knoppen en labels */
	--sm-track-h1:     .11em;   /* spatiëring Italiana-koppen */
}


/* ==========================================================================
   2. Brug naar het Blocksy-palet

   Blocksy tekent zijn eigen onderdelen met --theme-palette-color-1 t/m -8.
   Door die hier te overschrijven volgt bijna alles automatisch de merkkleuren,
   ook onderdelen die hieronder niet apart worden genoemd.
   Zet in de Customizer het palet op dezelfde waarden, dan klopt de preview ook.
   ========================================================================== */

:root {
	--theme-palette-color-1: var(--sm-ink);          /* accent / knoppen  */
	--theme-palette-color-2: var(--sm-deep-rose);    /* accent hover      */
	--theme-palette-color-3: var(--sm-ink);          /* koppen            */
	--theme-palette-color-4: var(--sm-ink-soft);     /* lopende tekst     */
	--theme-palette-color-5: var(--sm-line);         /* randen            */
	--theme-palette-color-6: var(--sm-blush);        /* rustvlak          */
	--theme-palette-color-7: var(--sm-pearl);        /* pagina-achtergrond*/
	--theme-palette-color-8: #FFFFFF;

	--theme-text-color:            var(--sm-ink);
	--theme-headings-color:        var(--sm-ink);
	--theme-link-initial-color:    var(--sm-ink);
	--theme-link-hover-color:      var(--sm-deep-rose);
	--theme-border-color:          var(--sm-line);
	--theme-content-spacing:       1.5em;
	--theme-border-radius:         0;

	--theme-font-family:      var(--sm-sans);
	--theme-font-weight:      300;
	--theme-line-height:      1.7;
	--theme-headings-font-family: var(--sm-serif);
	--theme-headings-font-weight: 400;

	--theme-normal-container-max-width: 1240px;
	--theme-content-vertical-spacing:   var(--sm-spacing);
}


/* ==========================================================================
   3. Typografie
   ========================================================================== */

body {
	font-family: var(--sm-sans);
	font-weight: 300;
	line-height: 1.7;
	color: var(--sm-ink);
	background-color: var(--sm-pearl);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--sm-serif);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .02em;
	color: var(--sm-ink);
}

/* Italiana is de stem van het merk: alleen groot, in kapitalen, ruim gespatieerd. */
h1,
.entry-title,
.page-title {
	font-family: var(--sm-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--sm-track-h1);
	line-height: 1.08;
}

h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.1rem; }

p { max-width: 68ch; }

/* Regelbreedte niet afdwingen waar de layout hem zelf bepaalt. */
.entry-content .wp-block-columns p,
.woocommerce p,
td p,
.sm-vol-breed p { max-width: none; }

/* Bovenlabel boven een kop. Alleen gebruiken als het echt iets toevoegt. */
.sm-eyebrow {
	display: block;
	font-family: var(--sm-sans);
	font-weight: 400;
	font-size: .7rem;
	letter-spacing: var(--sm-track);
	text-transform: uppercase;
	color: var(--sm-deep-rose);
}

/* Het woordmerk in Pinyon Script. Nergens anders gebruiken: het script is
   voorbehouden aan het logo en de monogram-varianten. */
.sm-script {
	font-family: var(--sm-script);
	color: var(--sm-deep-rose);
	line-height: .95;
}

a { color: inherit; }

a:hover,
.entry-content a:hover { color: var(--sm-deep-rose); }

/* Links in lopende tekst krijgen de gouden haarlijn, geen onderstreping. */
.entry-content a:not(.button):not(.wp-block-button__link) {
	text-decoration: none;
	border-bottom: 1px solid var(--sm-gold);
	padding-bottom: 1px;
}


/* ==========================================================================
   4. Knoppen

   Inkt gevuld, bij hover leeg met een gouden haarlijn. Nooit gevuld roze,
   nooit een afgeronde hoek.
   ========================================================================== */

.ct-button,
.button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--sm-sans);
	font-weight: 400;
	font-size: .72rem;
	letter-spacing: var(--sm-track);
	text-transform: uppercase;
	line-height: 1.4;
	padding: 1em 2.6em;
	border-radius: 0;
	border: 1px solid var(--sm-ink);
	background-color: var(--sm-ink);
	color: var(--sm-pearl);
	text-align: center;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ct-button:hover,
.button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: transparent;
	color: var(--sm-ink);
	border-color: var(--sm-gold);
}

/* Tweede knop: leeg met haarlijn, bij hover blush.

   Let op: Gutenberg zet een eigen klasse op de wikkel (.wp-block-button),
   niet op de link. De link moet daarom apart worden geraakt, anders wint
   de gevulde standaardknop hierboven. */
.ct-button-ghost,
.is-style-outline .wp-block-button__link,
.woocommerce a.button.wc-backward,
.sm-btn-line,
.sm-btn-line > .wp-block-button__link,
.wp-block-button.sm-btn-line .wp-block-button__link {
	background-color: transparent;
	background-image: none;
	color: var(--sm-ink);
	border: 1px solid var(--sm-hair);
}

.ct-button-ghost:hover,
.is-style-outline .wp-block-button__link:hover,
.woocommerce a.button.wc-backward:hover,
.sm-btn-line:hover,
.sm-btn-line > .wp-block-button__link:hover,
.wp-block-button.sm-btn-line .wp-block-button__link:hover {
	background-color: var(--sm-blush);
	color: var(--sm-ink);
	border-color: var(--sm-gold);
}

/* Tekstlink met gouden lijn eronder. */
.sm-link {
	font-size: .8rem;
	letter-spacing: .1em;
	border-bottom: 1px solid var(--sm-gold);
	padding-bottom: 2px;
}


/* ==========================================================================
   5. Formuliervelden
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	font-family: var(--sm-sans);
	font-weight: 300;
	font-size: .92rem;
	color: var(--sm-ink);
	background-color: var(--sm-pearl);
	border: 1px solid var(--sm-line);
	border-radius: 0;
	padding: .85rem 1rem;
	box-shadow: none;
}

textarea { min-height: 140px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
	border-color: var(--sm-gold);
	outline: 2px solid var(--sm-lagoon);
	outline-offset: 2px;
}

::placeholder { color: var(--sm-ink-soft); opacity: .75; }

label,
.woocommerce form .form-row label {
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sm-ink-soft);
	margin-bottom: .45rem;
}


/* ==========================================================================
   6. Header, logo en menu
   ========================================================================== */

header[data-header] .ct-header-text,
.site-title {
	font-family: var(--sm-script);
	color: var(--sm-deep-rose);
}

/* Blocksy zet zijn eigen fontstack op de header-onderdelen. Die hier breed
   overschrijven, anders valt het menu terug op de systeemletter. */
header[data-header],
header[data-header] a,
header[data-header] button,
.ct-header-cart,
.ct-header-account,
.ct-header-search,
.ct-panel,
.ct-panel a {
	font-family: var(--sm-sans);
}

/* Menu-items: klein, gespatieerd, gouden lijn bij hover.
   .ct-menu-link is de klasse die Blocksy 2.x op menulinks zet. */
.ct-menu-link,
.header-menu-1 > li > a,
.menu > li > a,
[data-id="menu"] .menu-item > a {
	font-family: var(--sm-sans);
	font-weight: 300;
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sm-ink);
}

/* Zoeken en Mand staan in dezelfde toon als het menu, geen icoon-only. */
.ct-header-cart .ct-label,
.ct-header-search .ct-label {
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sm-ink);
}

.ct-header-cart:hover .ct-label,
.ct-header-search:hover .ct-label { color: var(--sm-deep-rose); }

[data-id="menu"] .menu-item > a::before,
[data-id="menu"] .menu-item > a::after {
	background-color: var(--sm-gold) !important;
}

/* Aankondigingsbalk boven de header. */
[data-row="top"] {
	background-color: var(--sm-blush);
	color: var(--sm-deep-rose);
	font-size: .64rem;
	letter-spacing: .22em;
	text-transform: uppercase;
}

/* Sticky header: pas een rand zodra hij vastplakt. */
header[data-header].ct-sticky--active [data-row="middle"] {
	border-bottom: 1px solid var(--sm-hair);
}


/* ==========================================================================
   7. WooCommerce — productkaart en archief

   Uit de stijlgids: geen schaduw, geen ronde hoeken, geen dikke rand.
   De foto krijgt één zachte lijn en wordt bij hover iets lichter.
   ========================================================================== */

.woocommerce-products-header,
.woocommerce-breadcrumb {
	font-size: .75rem;
	letter-spacing: .06em;
	color: var(--sm-ink-soft);
}

.woocommerce-result-count {
	font-size: .78rem;
	color: var(--sm-ink-soft);
}

[data-products] .product,
.woocommerce ul.products li.product {
	text-align: center;
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 0;
}

[data-products] .product .ct-media-container,
.woocommerce ul.products li.product img {
	border: 1px solid var(--sm-line);
	border-radius: 0;
	background-color: var(--sm-pearl);
	transition: opacity .35s ease;
}

[data-products] .product:hover .ct-media-container,
.woocommerce ul.products li.product:hover img { opacity: .88; }

.woocommerce-loop-product__title,
[data-products] .product .woocommerce-loop-product__title {
	font-family: var(--sm-serif);
	font-size: 1rem;
	margin: 1rem 0 .15rem;
	color: var(--sm-ink);
}

[data-products] .product .price,
.woocommerce ul.products li.product .price {
	font-family: var(--sm-sans);
	font-weight: 300;
	font-size: .95rem;
	color: var(--sm-ink);
}

/* Doorgestreepte oude prijs blijft stil, de nieuwe prijs is de hoofdrol. */
.price del {
	color: var(--sm-ink-soft);
	opacity: 1;
	margin-right: .5rem;
	font-size: .9em;
}

.price ins {
	text-decoration: none;
	color: var(--sm-ink);
}

/* Categorie of materiaal onder de titel, als de kaart dat toont. */
[data-products] .product .ct-woo-card-extra {
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sm-ink-soft);
}

/* Badge: ivoor met dieproze tekst en een gouden haarlijn.
   Aqua is hier bewust niet gebruikt; die kleur blijft voor sale en focus. */
.woocommerce span.onsale,
[data-products] .product .onsale,
.ct-product-badge,
.sm-badge {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	margin: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
	border-radius: 0;
	background-color: var(--sm-pearl);
	color: var(--sm-deep-rose);
	border: 1px solid var(--sm-hair);
	border-top: 0;
	border-right: 0;
	font-family: var(--sm-sans);
	font-weight: 400;
	font-size: .58rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: .5em .9em;
}

/* Uitverkocht mag wél aqua zijn: dat is een voorraadstatus, geen sier. */
.sm-badge--uitverkocht,
.ct-product-badge.out-of-stock {
	color: var(--sm-lagoon);
}

/* Paginering */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li { border: 0; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	font-size: .8rem;
	letter-spacing: .12em;
	color: var(--sm-ink-soft);
	border-radius: 0;
	background: transparent;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	color: var(--sm-ink);
	border-bottom: 1px solid var(--sm-gold);
	background: transparent;
}


/* ==========================================================================
   8. WooCommerce — productpagina
   ========================================================================== */

.single-product div.product .product_title {
	font-family: var(--sm-display);
	text-transform: uppercase;
	letter-spacing: var(--sm-track-h1);
	font-size: clamp(1.9rem, 4.2vw, 2.9rem);
	line-height: 1.08;
}

.single-product div.product .price {
	font-family: var(--sm-sans);
	font-weight: 300;
	font-size: 1.4rem;
	color: var(--sm-ink);
	margin-top: 1.2rem;
}

.single-product .woocommerce-product-details__short-description {
	color: var(--sm-ink-soft);
	max-width: 52ch;
}

/* Galerij: dezelfde zachte lijn als de productkaart. */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery .flex-control-thumbs li img {
	border: 1px solid var(--sm-line);
	border-radius: 0;
	background-color: var(--sm-pearl);
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	border-color: var(--sm-gold);
}

/* Varianten (metaal, maat) als vlakke keuzeblokjes. */
.variations th.label { display: none; }

.variations .label label,
.sm-optielabel {
	font-size: .68rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--sm-deep-rose);
}

.woocommerce div.product form.cart .variations select {
	padding: .8rem 1rem;
	border: 1px solid var(--sm-line);
	background-color: var(--sm-pearl);
}

/* Aantalveld */
.woocommerce .quantity .qty,
.woocommerce div.product form.cart div.quantity input.qty {
	border: 1px solid var(--sm-line);
	border-radius: 0;
	background-color: var(--sm-pearl);
	font-size: .95rem;
	padding: .6rem;
	box-shadow: none;
}

/* Voorraadmelding — hier hoort aqua wél. */
.stock.in-stock,
.woocommerce div.product .stock {
	color: var(--sm-lagoon);
	font-size: .82rem;
	letter-spacing: .06em;
}

.stock.out-of-stock { color: var(--sm-deep-rose); }

.single_add_to_cart_button { width: 100%; margin-top: 1.4rem; }

/* Sterren in goud. */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--sm-gold); }

/* Metagegevens onder de knop. */
.product_meta {
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--sm-ink-soft);
	border-top: 1px solid var(--sm-hair);
	padding-top: 1.2rem;
	margin-top: 1.8rem;
}

/* Tabbladen als accordeon-achtige lijst met haarlijnen. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--sm-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 2rem 0 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--sm-sans);
	font-weight: 300;
	font-size: .74rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sm-ink-soft);
	padding: 1rem 0;
	border-bottom: 1px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sm-ink);
	border-bottom-color: var(--sm-gold);
}

/* Specificatietabel */
.woocommerce table.shop_attributes,
.sm-spectabel {
	border: 0;
	width: 100%;
	border-collapse: collapse;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td,
.sm-spectabel td {
	border: 0;
	border-bottom: 1px solid var(--sm-hair);
	padding: .65rem 0;
	font-size: .9rem;
	font-style: normal;
	background: transparent;
}

.woocommerce table.shop_attributes th { color: var(--sm-ink-soft); font-weight: 300; width: 45%; }

/* Gerelateerde producten */
.related > h2,
.upsells > h2,
.cross-sells > h2 {
	text-align: center;
	font-family: var(--sm-display);
	text-transform: uppercase;
	letter-spacing: .09em;
	margin-bottom: 2rem;
}


/* ==========================================================================
   9. WooCommerce — winkelmand, afrekenen en meldingen
   ========================================================================== */

.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table th {
	font-family: var(--sm-sans);
	font-weight: 400;
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sm-ink-soft);
	border-bottom: 1px solid var(--sm-hair);
	padding: .9rem 0;
}

.woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--sm-line);
	padding: 1.1rem 0;
	font-size: .92rem;
}

.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order {
	background-color: var(--sm-blush);
	border: 1px solid var(--sm-hair);
	padding: clamp(1.4rem, 4vw, 2rem);
}

.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-checkout #order_review table.shop_table td { border-bottom-color: var(--sm-hair); }

/* Betaalmethoden (Mollie: iDEAL, Bancontact, creditcard). */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods {
	background: transparent;
	border: 0;
	padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	border-bottom: 1px solid var(--sm-hair);
	padding: .9rem 0;
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	background-color: var(--sm-pearl);
	border: 1px solid var(--sm-hair);
	border-radius: 0;
	font-size: .88rem;
	color: var(--sm-ink-soft);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Meldingen: blush met een gouden streep links, net als de infobox. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	background-color: var(--sm-blush);
	border: 1px solid var(--sm-hair);
	border-left: 2px solid var(--sm-gold);
	border-radius: 0;
	color: var(--sm-ink);
	font-size: .9rem;
	padding: 1.1rem 1.4rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-error { border-left-color: var(--sm-deep-rose); }

/* Coupon- en zoekvelden staan naast een knop; laat ze even hoog zijn. */
.woocommerce .coupon .button { padding: 1em 1.8em; }


/* ==========================================================================
   10. Footer
   ========================================================================== */

footer[data-footer] {
	background-color: var(--sm-pearl);
	border-top: 1px solid var(--sm-hair);
}

footer[data-footer] .widget-title,
footer[data-footer] h5 {
	font-family: var(--sm-sans);
	font-weight: 400;
	font-size: .66rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--sm-deep-rose);
}

footer[data-footer] a { color: var(--sm-ink-soft); font-size: .88rem; }
footer[data-footer] a:hover { color: var(--sm-ink); }

footer[data-footer] [data-row="bottom"] {
	border-top: 1px solid var(--sm-hair);
	font-size: .78rem;
	color: var(--sm-ink-soft);
}

/* Betaallogo's of -labels in de footer. */
.sm-betaalwijzen { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.2rem; }

.sm-betaalwijzen span {
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sm-ink-soft);
	border: 1px solid var(--sm-hair);
	padding: .35em .7em;
}


/* ==========================================================================
   11. Hulpklassen

   Deze klassen zijn bedoeld om in de blokeditor toe te kennen
   (Geavanceerd → Extra CSS-klasse) of via de shortcodes uit functions.php.
   ========================================================================== */

/* Pareldivider — de signatuur uit de stijlgids. Shortcode: [sm_parels] */
.sm-parels {
	display: flex;
	align-items: center;
	gap: 7px;
	opacity: .85;
	margin: 1.1rem auto;
	max-width: 200px;
}

.sm-parels::before,
.sm-parels::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--sm-hair);
}

.sm-parels i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, #fff 0%, #F6E4E3 45%, #DEC3C0 100%);
}

/* Losse gouden streep, bijvoorbeeld onder een hero-kop. */
.sm-streep {
	width: 44px;
	height: 1px;
	background: var(--sm-gold);
	border: 0;
	margin: 1.8rem 0;
}

/* Uitgelicht kader: blush met gouden streep links. */
.sm-infobox {
	background-color: var(--sm-blush);
	border: 1px solid var(--sm-hair);
	border-left: 2px solid var(--sm-gold);
	padding: 1.1rem 1.4rem;
	margin: 1.2rem 0;
}

.sm-infobox strong { color: var(--sm-ink); font-weight: 400; }

/* Rustvlak in blush, voor een hele sectie. */
.sm-vlak-blush {
	background-color: var(--sm-blush);
	border-top: 1px solid var(--sm-hair);
	border-bottom: 1px solid var(--sm-hair);
}

/* Ivoren sluier over een fotoblok, zodat tekst in inkt leesbaar blijft.
   Toekennen aan een Cover-blok met een achtergrondafbeelding. */
.sm-sluier .wp-block-cover__background,
.sm-sluier > .wp-block-cover__gradient-background {
	background: linear-gradient(100deg,
		rgba(251, 246, 242, .88) 0%,
		rgba(251, 246, 242, .70) 38%,
		rgba(251, 246, 242, .28) 68%,
		rgba(251, 246, 242, .06) 100%) !important;
	opacity: 1 !important;
}

.sm-sluier .wp-block-cover__inner-container,
.sm-sluier h1, .sm-sluier h2, .sm-sluier p { color: var(--sm-ink); }

/* Zegelpaneel voor de krans in de hero.
   De krans heeft een crèmekleurige binnenschijf die op blush zichtbaar wordt;
   op dit ivoren paneel valt hij weg. Altijd gebruiken bij plaatsing op foto. */
.sm-zegel {
	background: rgba(251, 246, 242, .94);
	border: 1px solid var(--sm-hair);
	padding: 14px;
	display: inline-block;
}


/* ==========================================================================
   12. Homepagina-secties

   Deze klassen horen bij het blokbestand homepage-blokken.html. Ze doen wat
   Gutenberg niet uit zichzelf kan: de hero-verhoudingen, de categorietegels
   en de USP-rij met haarlijnen.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

/* De hero loopt over de volle breedte, het tekstblok is 640 px en staat in
   het midden.

   Taakverdeling: deze CSS bepaalt alleen hoe breed het blok is en waar het
   staat. De uitlijning van de tekst zet je per blok in de editor. Eerder
   stond dat hier ook, en dan vechten twee systemen om dezelfde regel. */
.wp-block-cover.sm-hero {
	min-height: 88vh;
	padding-block: clamp(2rem, 6vw, 4rem);
	padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.sm-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
}

/* De constrained layout van WordPress geeft elk kindblok een eigen
   max-width en automatische marges. Die hier neutraliseren, anders wordt
   het blok hierboven alsnog omzeild. */
.sm-hero .wp-block-cover__inner-container > * {
	max-width: 100%;
	margin-inline: 0;
}

.sm-hero h1 {
	font-size: clamp(2.6rem, 6.4vw, 4.6rem);
	color: var(--sm-ink);
	margin-block: .5em 0;
}

.sm-hero p {
	color: var(--sm-ink);
	font-size: 1.02rem;
}

.sm-hero .wp-block-buttons { margin-top: 2.2rem; }

.sm-hero .wp-block-separator.sm-streep { margin-block: 1.8rem; }

/* De gouden streep werkt alleen als de rand van het scheidingsblok wijkt. */
.wp-block-separator.sm-streep {
	width: 44px;
	height: 1px;
	background-color: var(--sm-gold);
	border: 0;
	opacity: 1;
	margin: 1.8rem 0;
}

/* --- Sectiekop ----------------------------------------------------------- */

.sm-sec-head { text-align: center; }

.sm-sec-head h2 {
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	margin: .7rem 0 0;
}

.sm-sec-head p {
	color: var(--sm-ink-soft);
	max-width: 52ch;
	margin: .7rem auto 0;
}

/* --- Categorietegels ----------------------------------------------------- */

.wp-block-cover.sm-cat {
	aspect-ratio: 3 / 4;
	min-height: 0;
	padding: 0 0 1.2rem;
	align-items: flex-end;
	border-radius: 0;
}

/* Donker verloop vanaf de onderkant, zodat de titel leesbaar blijft
   zonder de foto plat te leggen. */
.sm-cat .wp-block-cover__background,
.sm-cat > .wp-block-cover__gradient-background {
	background: linear-gradient(to top,
		rgba(59, 44, 46, .55),
		rgba(59, 44, 46, 0) 55%) !important;
	opacity: 1 !important;
}

.sm-cat .wp-block-cover__inner-container { width: 100%; text-align: center; }

.sm-cat h3 {
	color: var(--sm-pearl);
	font-size: 1.05rem;
	margin: 0 0 .6rem;
}

.sm-cat .sm-pijl {
	color: var(--sm-pearl);
	font-size: .8rem;
	opacity: .75;
	margin: 0;
}

.sm-cat:hover .sm-pijl { opacity: 1; }

/* --- Verhaalsectie ------------------------------------------------------- */

.sm-verhaal {
	background-color: var(--sm-blush);
}

/* De foto vult de linkerkolom volledig, de tekst krijgt lucht rechts. */
.sm-verhaal .wp-block-columns { gap: 0; align-items: stretch; }

.sm-verhaal .sm-verhaal-foto,
.sm-verhaal .sm-verhaal-foto img {
	height: 100%;
	min-height: 460px;
	margin: 0;
	object-fit: cover;
	width: 100%;
}

.sm-verhaal .wp-block-column:last-child {
	padding: clamp(2rem, 6vw, 4.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sm-verhaal h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); margin: .7rem 0 0; }
.sm-verhaal p { color: var(--sm-ink-soft); max-width: 44ch; margin: 1.2rem 0 2rem; }

/* --- USP-rij ------------------------------------------------------------- */

.sm-usprow {
	border-top: 1px solid var(--sm-hair);
	border-bottom: 1px solid var(--sm-hair);
	padding: clamp(2.2rem, 5vw, 3rem) 0;
	text-align: center;
}

.sm-usprow h4 { font-size: 1rem; margin-bottom: .3rem; }
.sm-usprow p { font-size: .85rem; color: var(--sm-ink-soft); margin: 0 auto; max-width: 24ch; }

/* --- Nieuwsbrief --------------------------------------------------------- */

.sm-nieuwsbrief { text-align: center; }

.sm-nieuwsbrief h2 {
	font-family: var(--sm-display);
	text-transform: uppercase;
	letter-spacing: .09em;
	font-size: clamp(1.5rem, 3.6vw, 2.2rem);
	margin: .7rem 0 .8rem;
}

.sm-nieuwsbrief > p { color: var(--sm-ink-soft); max-width: 46ch; margin: 0 auto 2rem; }

/* Het Brevo-formulier meenemen in de stijl: één gouden lijn, verder niets. */
.sm-nieuwsbrief form { max-width: 440px; margin: 0 auto; }

.sm-nieuwsbrief input[type="email"],
.sm-nieuwsbrief input[type="text"] {
	border: 0;
	border-bottom: 1px solid var(--sm-gold);
	background: transparent;
	padding: .85em .2em;
	text-align: center;
}

.sm-nieuwsbrief input[type="submit"],
.sm-nieuwsbrief button[type="submit"] { margin-top: 1.2rem; }

@media (max-width: 980px) {
	.sm-verhaal .sm-verhaal-foto,
	.sm-verhaal .sm-verhaal-foto img { min-height: 300px; }
	.wp-block-cover.sm-hero { min-height: 72vh; }
}


/* ==========================================================================
   13. Toegankelijkheid en mobiel
   ========================================================================== */

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

/* Skiplink zichtbaar houden. */
.skip-link:focus {
	background-color: var(--sm-pearl);
	color: var(--sm-ink);
	outline: 2px solid var(--sm-lagoon);
}

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

@media (max-width: 767px) {
	body { font-size: .95rem; }

	.woocommerce-loop-product__title { font-size: 1rem; }

	.ct-button,
	.button,
	.woocommerce a.button,
	.woocommerce button.button { letter-spacing: .2em; padding: 1em 1.8em; }
}