/* nordmannthuisbezorgd.nl: the shapes of a plain web shop over the shared theme. Flat cards with a
   thin line instead of shadows, a cream header, square-cornered buttons. The colours themselves
   come from theme-nordmann.css (tools/build-nordmann-theme.php); this file is written by hand.

   Every selector starts with "html" for the same reason as there: the header and footer bring
   their own styles further down the page and would otherwise win on order. */

:root {
    --nm-green: #183e32;
    --nm-green-hover: #2a5747;
    --nm-cream: #f7f4eb;
    --nm-paper: #fffef9;
    --nm-line: #dce3d8;
    --nm-muted: #53675b;
}

/* Header: cream bar under the green top bar. */
html .header-main,
html .header-main.home { background: var(--nm-cream); box-shadow: 0 1px 0 var(--nm-line); }
html .main-menu > ul > li > a { color: var(--nm-green); }
/* The logo is three times as wide as it is high. Below the desktop menu the shared theme gives it
   a fixed 100px height in a half-width column, which squeezes it; size it by width there. */
@media (max-width: 1199.98px) {
    html .header-logo img { width: 100%; max-width: 230px; height: auto; padding-top: 0; padding-bottom: 0; }
}

/* Buttons: one flat green, no glow, no lift. */
html body .btn-primary,
html body .submit,
html body .hero-btn-enhanced,
html body #navbar-cta-btn,
html body .add-cart,
html body .tw-bg-primary { background: var(--nm-green) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--nm-green) !important; border-radius: 4px !important; box-shadow: none !important; }
html body .btn-primary:hover,
html body .hero-btn-enhanced:hover,
html body #navbar-cta-btn:hover,
html body .tw-bg-primary:hover { background: var(--nm-green-hover) !important; border-color: var(--nm-green-hover) !important; }
html body .btn-primary::before,
html body .hero-btn-enhanced::before,
html body .hero-btn-enhanced::after { background: none !important; box-shadow: none !important; }

/* Hero: the round sticker becomes a quiet cream card. */
html .order-sticker { background: var(--nm-cream) !important; background-image: none !important; color: var(--nm-green) !important; border: 1px solid rgba(255, 255, 255, .45) !important; border-radius: 5px !important; box-shadow: 0 3px 18px rgba(0, 0, 0, .07) !important; transform: none !important; }
html .order-sticker span { color: var(--nm-green) !important; }
html .order-sticker::before,
html .order-sticker::after { display: none !important; }

/* The three selling points under the hero: line icon, title, one sentence, equal height. */
html body .single-feature.nordmann-usp { display: flex; align-items: flex-start; gap: 18px; height: 100%; min-height: 165px; padding: 28px 24px !important; text-align: left !important; background: var(--nm-paper) !important; background-image: none !important; border: 1px solid var(--nm-line) !important; border-radius: 5px !important; box-shadow: none !important; }
html body .single-feature.nordmann-usp::before,
html body .single-feature.nordmann-usp::after { display: none !important; }
html body .nordmann-usp-icon { flex: 0 0 42px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #edf1e8; color: var(--nm-green); }
html body .nordmann-usp-icon svg { width: 25px; height: 25px; }
html body .nordmann-usp .feature-content { flex: 1; min-width: 0; }
html body .nordmann-usp .feature-content .title { margin: 2px 0 9px !important; color: var(--nm-green) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; }
html body .nordmann-usp .feature-content .sub-title { display: block !important; color: var(--nm-muted) !important; font-size: 14px !important; line-height: 1.55 !important; }
@media (max-width: 767px) {
    html body .single-feature.nordmann-usp { min-height: 0; gap: 16px; padding: 22px !important; }
    html body .nordmann-usp .feature-content .title { font-size: 17px !important; }
}

/* Product cards: a line instead of a shadow, no lift on hover, no logo over the photo. */
html .section-title .title { background: none; -webkit-text-fill-color: var(--nm-green); }
html .product-area .tw-rounded-lg { border: 1px solid var(--nm-line); border-radius: 5px !important; }
html .tw-rounded-md { border-radius: 4px !important; }
html .tw-shadow-sm,
html .tw-shadow-md,
html .tw-shadow-lg { box-shadow: none !important; }
html .tw-transform:hover { transform: none !important; }
html .product-area .tw-aspect-square > a > .tw-absolute { display: none; }
html .tw-text-gray-900 { color: var(--nm-green); }

/* Product page: options as flat cards, gallery on cream, what the price covers. */
html .option-card { border-color: var(--nm-line); border-radius: 4px; box-shadow: none; }
html .option-card:has(input:checked) { background: #eef2e6; border-color: var(--nm-green); }
html .pgallery-main,
html .pgallery-thumb { background: var(--nm-cream) !important; }
html .price-includes-note { margin: 2px 0 0; color: #5f7165; font-size: 12px; font-weight: 400; line-height: 1.5; }

/* Questions: cream headings with a thin line. */
html .single-my-account h3.panel-title { background: var(--nm-cream); border-color: var(--nm-line); }

/* Footer: one green block. */
html .footer-area,
html .footer-bottom { background: var(--nm-green) !important; background-image: none !important; }
html .footer-area .footer-top .single-wedge .footer-herading { color: #fff; }
html .footer-area .footer-top .single-wedge .about-text,
html .footer-area .footer-top .single-wedge .footer-links .single-link,
html .footer-area .footer-top .single-wedge .footer-links p,
html .footer-area .footer-top .single-wedge .footer-links p a { color: #e0e8dd; }