:root {
    --hg-ink: #26221f;
    --hg-cream: #fbf7f1;
    --hg-pink: #edbfd0;
    --hg-plum: #63364c;
    --hg-line: #ded5cc;
    --hg-sage: #d8e1cd;
}

body { background: var(--hg-cream); color: var(--hg-ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
h1, h2, h3, h4, .h1, .h2, .h3 { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -.025em; }
a { transition: color .2s ease, background-color .2s ease, opacity .2s ease; }
.btn-primary, .btn-primary:hover, .btn-primary:focus { background: var(--hg-plum); border-color: var(--hg-plum); }
.form-control:focus { border-color: #a75379; box-shadow: 0 0 0 .2rem rgba(167,83,121,.15); }

/* Kopfbereich */
#header-top-bar { background: var(--hg-plum); color: #fff; border: 0; }
#header-top-bar a { color: #fff; }
header, .header-wrapper { background: var(--hg-cream); }
#shop-nav { border-bottom: 1px solid rgba(38,34,31,.1); }
#mainNavigation .nav-link { color: var(--hg-ink); font-weight: 600; font-size: .9rem; }
#mainNavigation .nav-link:hover { color: #a75379; }
.navbar-brand img { max-height: 54px; }
.cart-dropdown .cart-icon-dropdown-price, .fa-shopping-cart, .fa-user, .fa-heart { color: var(--hg-plum); }

/* Startseite */
.hg-hero { min-height: 640px; display: grid; grid-template-columns: 47% 53%; gap: 5%; padding: 3rem max(5vw, 1rem) 4.5rem; overflow: hidden; }
.hg-hero__content { align-self: center; max-width: 600px; }
.hg-eyebrow { color: #9d5574; font-size: .7rem; font-weight: 700; letter-spacing: .18em; margin: 0 0 1.1rem; text-transform: uppercase; }
.hg-hero h1 { font-size: clamp(3rem, 5.2vw, 5rem); font-weight: 500; line-height: 1.03; margin: 0; }
.hg-hero h1 em { color: #a75379; font-weight: 500; }
.hg-hero__lead { color: #665f59; font-size: 1.1rem; line-height: 1.7; margin: 1.7rem 0; max-width: 520px; }
.hg-hero__actions { align-items: center; display: flex; gap: 1.8rem; }
.hg-button { border-radius: 3rem; display: inline-flex; font-size: .9rem; font-weight: 700; gap: 1.5rem; padding: .85rem 1.45rem; }
.hg-button span { font-size: 1.2rem; }
.hg-text-link { border-bottom: 1px solid #776f69; color: var(--hg-ink); font-size: .88rem; padding-bottom: .2rem; }
.hg-rating { color: #c16f91; font-size: .78rem; letter-spacing: .14rem; margin-top: 2.5rem; }
.hg-rating span { color: #746d66; letter-spacing: 0; margin-left: .7rem; }
.hg-hero__visual { background: linear-gradient(145deg, #f0d8e1, #d7c5dc); border-radius: 12rem 1rem 12rem 1rem; box-shadow: 0 1.5rem 4rem rgba(76,42,55,.14); min-height: 520px; overflow: hidden; position: relative; }
.hg-scrunchie { border: 3rem solid; border-radius: 46% 54% 48% 52%; box-shadow: inset 0 .3rem .8rem rgba(70,45,58,.14), 0 1rem 2rem rgba(70,45,58,.12); height: 15rem; position: absolute; width: 15rem; }
.hg-scrunchie--rose { border-color: #b55f80; right: 9%; top: 11%; transform: rotate(-14deg); }
.hg-scrunchie--lilac { border-color: #f7eee9; bottom: 8%; left: 11%; height: 12rem; transform: rotate(11deg); width: 12rem; }
.hg-clip { background: #efaa92; border-radius: 2rem 4rem 2rem 4rem; bottom: 13%; box-shadow: 0 .8rem 1.7rem rgba(70,45,58,.12); height: 3rem; position: absolute; right: 12%; transform: rotate(-20deg); width: 9rem; }
.hg-note { background: #fff; bottom: 2.2rem; box-shadow: 0 1rem 2.4rem rgba(60,43,50,.15); display: flex; flex-direction: column; left: -2rem; padding: 1.1rem 1.4rem; position: absolute; }
.hg-note strong { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; }
.hg-note small { color: #786f69; margin-top: .25rem; }
.hg-benefits { background: #fff; border-bottom: 1px solid var(--hg-line); border-top: 1px solid var(--hg-line); display: grid; grid-template-columns: repeat(4,1fr); padding: 1.7rem 5vw; }
.hg-benefits div { border-right: 1px solid var(--hg-line); display: flex; flex-direction: column; padding: 0 1.7rem; }
.hg-benefits div:first-child { padding-left: 0; }
.hg-benefits div:last-child { border: 0; }
.hg-benefits strong { font-size: .82rem; }
.hg-benefits span { color: #817871; font-size: .75rem; margin-top: .3rem; }
.hg-products-heading { padding: 6rem 5vw 1rem; }
.hg-products-heading h2 { font-size: clamp(2.4rem, 4vw, 3.5rem); font-weight: 500; }

/* JTL-Produktkarten */
.product-slider-wrapper { padding-bottom: 3.5rem; }
.productbox-inner { background: transparent; border: 0; }
.productbox-image { background: #f1e5e9; border-radius: 0; overflow: hidden; }
.productbox-image img { transition: transform .35s ease; }
.productbox-inner:hover .productbox-image img { transform: scale(1.035); }
.productbox-title a { color: var(--hg-ink); font-family: 'Playfair Display', Georgia, serif; font-size: 1.08rem; }
.productbox-price { color: var(--hg-ink); font-weight: 700; }
.productbox .btn, .basket .btn { border-radius: 2rem; }
.badge-primary, .ribbon { background: #fff; color: var(--hg-plum); }
.slick-arrow { background: #fff; border: 1px solid var(--hg-line); border-radius: 50%; }

/* Markengeschichte */
.hg-story { align-items: center; background: #e9dce2; display: grid; gap: 8vw; grid-template-columns: 1fr 1fr; margin-top: 3rem; padding: 6rem 8vw; }
.hg-story__art { align-items: center; background: #c38aa1; border-radius: 12rem 12rem .8rem .8rem; box-shadow: 1.3rem 1.3rem 0 rgba(255,255,255,.35); display: flex; height: 27rem; justify-content: center; max-width: 27rem; }
.hg-story__art span { color: #f7edf0; font-family: 'Playfair Display', Georgia, serif; font-size: 6.5rem; font-style: italic; }
.hg-story__content h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 500; line-height: 1.08; }
.hg-story__content > p:last-child { color: #655d60; font-size: 1.05rem; line-height: 1.75; margin-top: 1.5rem; }

/* Artikeldetail, Warenkorb und Footer */
.product-detail .product-gallery, .product-gallery { background: #f3e7eb; }
.product-detail .product-title, .product-info-inner h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
.price.h1, .product-info-inner .price { color: var(--hg-plum); }
.card, .basket-summary, .checkout-payment-method { border-color: var(--hg-line); box-shadow: none; }
footer, #footer { background: #292325; color: #f6efeb; }
footer a, #footer a { color: #d8ced0; }
footer a:hover, #footer a:hover { color: #fff; }
.footer-social-media .btn { border-color: #6f6265; }

@media (max-width: 991.98px) {
    .hg-hero { grid-template-columns: 1fr; }
    .hg-hero__visual { min-height: 420px; }
    .hg-benefits { gap: 1.4rem; grid-template-columns: 1fr 1fr; }
    .hg-benefits div { border: 0; padding: 0; }
    .hg-story { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .hg-hero { min-height: auto; padding: 2.8rem 1.25rem 3.5rem; }
    .hg-hero h1 { font-size: 3rem; }
    .hg-hero__lead { font-size: 1rem; }
    .hg-hero__actions { gap: 1rem; }
    .hg-hero__visual { min-height: 330px; }
    .hg-scrunchie { border-width: 2rem; height: 10rem; width: 10rem; }
    .hg-scrunchie--lilac { height: 8rem; width: 8rem; }
    .hg-note { bottom: 1rem; left: 1rem; }
    .hg-benefits { padding: 1.5rem 1.25rem; }
    .hg-products-heading { padding: 4.5rem 1.25rem 1rem; }
    .hg-story { padding: 4.5rem 1.25rem; }
    .hg-story__art { height: 20rem; }
}