/* Global dark presentation requested for every public page and WooCommerce. */
html {
  background: var(--nassen-ink);
  color-scheme: dark;
}

body,
.tm-page,
#tm-main,
.tm-main,
#tm-main .uk-section-default,
#tm-main .uk-section-muted,
#tm-main .uk-background-default,
#tm-main .uk-background-muted {
  background-color: var(--nassen-ink) !important;
  color: rgba(247, 241, 231, 0.86);
}

#tm-main h1,
#tm-main h2,
#tm-main h3,
#tm-main h4,
#tm-main h5,
#tm-main h6,
#tm-main .uk-h1,
#tm-main .uk-h2,
#tm-main .uk-h3,
#tm-main .uk-h4,
#tm-main .uk-h5,
#tm-main .uk-h6,
#tm-main .woocommerce-loop-product__title,
#tm-main .product_title,
#tm-main label,
#tm-main legend,
#tm-main th {
  color: var(--nassen-cream);
}

#tm-main p,
#tm-main li,
#tm-main dd,
#tm-main td,
#tm-main .woocommerce-result-count,
#tm-main .woocommerce-product-details__short-description {
  color: rgba(247, 241, 231, 0.84);
}

#tm-main a:not(.uk-button):not(.button),
#tm-main .woocommerce-Price-amount {
  color: var(--nassen-gold);
}

#tm-main a:not(.uk-button):not(.button):hover {
  color: var(--nassen-cream);
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .summary,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout,
.woocommerce form.woocommerce-form,
.woocommerce table.shop_table,
.woocommerce .cart_totals,
.woocommerce .checkout_coupon,
.woocommerce-checkout #payment,
.nassen-application,
.nassen-company-application,
form:has([name*="nassen"]) {
  background: var(--nassen-ink-soft) !important;
  border-color: rgba(195, 154, 109, 0.34) !important;
  color: rgba(247, 241, 231, 0.88);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  border-color: var(--nassen-gold) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

#tm-main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
#tm-main select,
#tm-main textarea {
  background: var(--nassen-ink-raised) !important;
  border-color: rgba(195, 154, 109, 0.45) !important;
  color: var(--nassen-cream) !important;
}

#tm-main input::placeholder,
#tm-main textarea::placeholder {
  color: rgba(247, 241, 231, 0.56);
}

#tm-main select option {
  background: var(--nassen-ink-raised);
  color: var(--nassen-cream);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice,
.woocommerce-store-notice {
  background: var(--nassen-ink-raised) !important;
  border-color: var(--nassen-gold) !important;
  color: var(--nassen-cream) !important;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
  border-color: rgba(195, 154, 109, 0.24) !important;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
  border-color: rgba(195, 154, 109, 0.42) !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--nassen-ink-soft) !important;
  color: var(--nassen-cream) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--nassen-gold) !important;
  color: var(--nassen-ink) !important;
}

img.wp-post-image,
.woocommerce-placeholder {
  background: var(--nassen-ink-raised) !important;
}

body.page-id-21 #tm-main .uk-section[style*="nassen-amsterdam-beemster-kaas"] {
  background-color: rgba(17, 16, 15, 0.72) !important;
}

/* Step 2: equal, responsive image tiles in the Onze winkel section. */
body.page-id-21 #tm-main .uk-section:has(img[src*="nassen-amsterdam-beemster-kaas"]) .uk-transition-toggle.uk-inline-clip {
  display: block;
  width: 100%;
  height: clamp(260px, 35vw, 440px);
  overflow: hidden;
}

body.page-id-21 #tm-main .uk-section:has(img[src*="nassen-amsterdam-beemster-kaas"]) .uk-transition-toggle.uk-inline-clip picture {
  display: block;
  width: 100%;
  height: 100%;
}

body.page-id-21 #tm-main .uk-section:has(img[src*="nassen-amsterdam-beemster-kaas"]) .uk-transition-toggle.uk-inline-clip img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

body.page-id-21 #tm-main .uk-section:has(img[src*="nassen-amsterdam-beemster-kaas"]) .uk-overlay-default {
  background: rgba(17, 16, 15, 0.76) !important;
}

body.page-id-21 #tm-main .uk-section:has(img[src*="nassen-amsterdam-beemster-kaas"]) .el-title {
  color: var(--nassen-cream) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
