/* Lovely Baby Print – site-specific components layered on the Varkala theme.
   Palette: teal #4b8e8d, peach #ffe7d1, sand #e6cebc, ink #222, muted #868e96. */

.lbp-kicker {
    font-size: .75rem;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: #e6cebc;
    margin-bottom: 1rem;
}

.lbp-section {
    padding: 5rem 0;
}

.lbp-section--wash {
    background: #fff8f2;
}

.lbp-narrow {
    max-width: 44rem;
    margin: 0 auto;
}

.lbp-lead {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.8;
    color: #6c757d;
}

/* How it works: three numbered steps */
.lbp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem 2.5rem;
    margin-top: 3.5rem;
    text-align: right;
}

.lbp-step__number {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    color: #4b8e8d;
    margin-bottom: 1.25rem;
}

.lbp-step__title {
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
    color: #222;
    margin-bottom: .75rem;
}

.lbp-step__text {
    color: #868e96;
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
}

/* Facts: spec grid with hairlines, no boxes */
.lbp-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 3.5rem;
    border-top: 1px solid #ece4dc;
    border-right: 1px solid #ece4dc;
    text-align: right;
}

.lbp-spec {
    padding: 2rem 1.75rem;
    border-left: 1px solid #ece4dc;
    border-bottom: 1px solid #ece4dc;
}

.lbp-spec__label {
    display: block;
    font-size: .7rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #868e96;
    margin-bottom: .75rem;
}

.lbp-spec__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.2;
    color: #222;
}

.lbp-spec__note {
    display: block;
    font-size: .85rem;
    font-weight: 300;
    color: #868e96;
    margin-top: .5rem;
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    .lbp-steps { grid-template-columns: 1fr; gap: 2.5rem; }
    .lbp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .lbp-section { padding: 3.5rem 0; }
    .lbp-specs { grid-template-columns: 1fr; }
    .lbp-spec { padding: 1.5rem 1.25rem; }
}


/* Motif pages */
.lbp-crumbs {
    font-size: .8rem;
    color: #868e96;
    margin-bottom: 1.5rem;
}

.lbp-crumbs a { color: #868e96; }

.lbp-motif {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 3rem;
    align-items: start;
    text-align: right;
}

.lbp-motif__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.lbp-motif__buy { position: sticky; top: 1rem; }

.lbp-price { margin: 1.5rem 0; }

.lbp-price__amount {
    font-size: 2rem;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

.lbp-price__note, .lbp-motif__hint {
    font-size: .85rem;
    color: #868e96;
    font-weight: 300;
}

.lbp-options {
    border-top: 1px solid #ece4dc;
    margin: 0 0 1.5rem;
}

.lbp-options > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid #ece4dc;
    font-size: .9rem;
}

.lbp-options dt {
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #868e96;
    font-weight: 500;
    padding-top: .15rem;
}

.lbp-options dd { margin: 0; color: #222; font-weight: 300; }

.lbp-motif__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }

.lbp-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.lbp-gallery--landscape { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.lbp-gallery__item { color: #222; text-decoration: none; }

.lbp-gallery__item img {
    width: 100%;
    height: auto;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, .25);
    margin-bottom: 1rem;
}

.lbp-gallery__label { display: block; font-weight: 500; }

.lbp-gallery__note, .lbp-motifs__note { display: block; font-size: .85rem; color: #868e96; font-weight: 300; }

.lbp-table-wrap { overflow-x: auto; margin-top: 2.5rem; }

.lbp-table {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    border-collapse: collapse;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lbp-table th, .lbp-table td {
    padding: 1rem .75rem;
    border-bottom: 1px solid #ece4dc;
    font-weight: 300;
    vertical-align: top;
}

.lbp-table thead th {
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #868e96;
    font-weight: 500;
}

.lbp-table tbody th small { display: block; font-size: .8rem; color: #868e96; }

.lbp-table td { text-align: left; }

.lbp-specs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lbp-faq > div { padding: 1.25rem 0; border-bottom: 1px solid #ece4dc; }

.lbp-faq dt { font-weight: 500; margin-bottom: .4rem; }

.lbp-faq dd { margin: 0; color: #6c757d; font-weight: 300; line-height: 1.7; }

.lbp-motifs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 2rem 1.5rem;
    margin-top: 2rem;
}

.lbp-motifs--all { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 3rem; }

.lbp-motifs__item { color: #222; text-decoration: none; }

.lbp-motifs__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-bottom: .75rem;
}

.lbp-motifs__name { display: block; font-weight: 500; }

@media (max-width: 991.98px) {
    .lbp-motif { grid-template-columns: 1fr; gap: 2rem; }
    .lbp-motif__buy { position: static; }
    .lbp-gallery { grid-template-columns: 1fr; gap: 1.5rem; }
    .lbp-specs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .lbp-options > div { grid-template-columns: 1fr; gap: .25rem; }
    .lbp-specs--4 { grid-template-columns: 1fr; }
}

/* Reviews: the start-page carousel, the reviews page and the review form.
   One card for every source; only the avatar, the rating row and the badge
   change with the source. */
.lbp-rv { --rv-star: #e9a93b; --rv-teal-ink: #2f6362; --rv-teal-wash: #e4f0ef; --rv-line: #ece4dc; }
.lbp-rv-head { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem 2rem; align-items: end; margin-bottom: 1.6rem; }
.lbp-rv-head .display-3 { margin-bottom: .6rem; }
.lbp-rv-head > * { min-width: 0; } /* a long heading word (Kundenbewertungen) wraps instead of widening the page */
.lbp-rv-write { justify-self: end; white-space: nowrap; }
.lbp-rv-agg { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .95rem; color: #444; }
.lbp-rv-agg__num { font-size: 2rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.lbp-rv-agg__cnt { color: #868e96; }
.lbp-rv-agg__cnt a { color: inherit; }
.lbp-rv-stars { color: var(--rv-star); letter-spacing: .08em; font-size: 1rem; line-height: 1; white-space: nowrap; }
.lbp-rv-stars i { font-style: normal; }
.lbp-rv-stars i.off { color: #ddd; }
.lbp-rv-stars--lg { font-size: 1.15rem; }
.lbp-rv-srcs { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .78rem; color: #444; margin-top: .6rem; }
.lbp-rv-srcs span { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--rv-line); border-radius: 999px; padding: .2rem .45rem .2rem .7rem; }
.lbp-rv-srcs svg { width: 14px; height: 14px; }
.lbp-rv-srcs__as { color: #868e96; border: 0 !important; background: none !important; padding-right: 0 !important; }
.lbp-rv-info { position: relative; display: inline-flex; }
.lbp-rv-info > button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #cfc6bb; background: #fff; color: #5e564d; font-size: .72rem; font-weight: 600; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.lbp-rv-info > button:hover, .lbp-rv-info > button:focus-visible { border-color: #4b8e8d; color: var(--rv-teal-ink); outline: none; box-shadow: 0 0 0 3px var(--rv-teal-wash); }
.lbp-rv-pop { position: absolute; z-index: 20; top: calc(100% + 10px); right: 0; width: min(340px, 86vw); background: #fff; border: 1px solid var(--rv-line); border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, .14); padding: .9rem 1rem; font-size: .8rem; line-height: 1.55; color: #333; display: none; text-align: right; }
.lbp-rv-pop::before { content: ""; position: absolute; top: -6px; right: 7px; width: 10px; height: 10px; background: #fff; border-right: 1px solid var(--rv-line); border-top: 1px solid var(--rv-line); transform: rotate(-45deg); }
.lbp-rv-info.is-open .lbp-rv-pop, .lbp-rv-info:hover .lbp-rv-pop, .lbp-rv-info:focus-within .lbp-rv-pop { display: block; }
.lbp-rv-pop h4 { font-size: .82rem; font-weight: 600; margin: 0 0 .4rem; letter-spacing: 0; text-transform: none; }
.lbp-rv-pop ul { margin: .3rem 0 .5rem; padding-right: 1rem; }
.lbp-rv-pop li { margin: .15rem 0; }
.lbp-rv-pop p { margin: .35rem 0; }
.lbp-rv-pop a { color: var(--rv-teal-ink); }
.lbp-rv-lbl { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; white-space: nowrap; }
.lbp-rv-lbl svg { width: 13px; height: 13px; }

/* The band of reviews (sketch 31): one CSS animation on transform, paused
   under the pointer, a finger or keyboard focus; still, and scrollable by
   hand, for anyone who asked for less motion. */
.lbp-rv-marquee { overflow: hidden; margin: 0 -12px; padding: .4rem 12px 1.2rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lbp-rv-marquee:focus-visible { outline: 2px solid #4b8e8d; outline-offset: 4px; }
.lbp-rv-track { display: flex; gap: 1.25rem; width: max-content; animation: lbp-rv-slide calc(21s * var(--copies, 2)) linear infinite; will-change: transform; }
.lbp-rv-copy { display: contents; }
.lbp-rv-track > .lbp-rv-card, .lbp-rv-copy > .lbp-rv-card { flex: 0 0 min(340px, 86vw); }
.lbp-rv-marquee:hover .lbp-rv-track, .lbp-rv-marquee:focus-within .lbp-rv-track, .lbp-rv-marquee.is-held .lbp-rv-track { animation-play-state: paused; }
@keyframes lbp-rv-slide { to { transform: translateX(calc(-1*(-100% / var(--copies, 2)))); } }
@media (prefers-reduced-motion: reduce) {
    .lbp-rv-marquee { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
    .lbp-rv-marquee::-webkit-scrollbar { display: none; }
    .lbp-rv-track { animation: none; will-change: auto; }
    .lbp-rv-track > .lbp-rv-card { scroll-snap-align: start; }
    .lbp-rv-copy { display: none; }
}
.lbp-rv-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; font-size: .82rem; color: #868e96; }
.lbp-rv-foot a { color: var(--rv-teal-ink); font-weight: 600; text-decoration: none; letter-spacing: .06em; }
.lbp-rv-foot a:hover { text-decoration: underline; }
.lbp-rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }

.lbp-rv-card { background: #fff; border: 1px solid var(--rv-line); border-radius: 12px; box-shadow: 0 10px 30px -18px rgba(34, 34, 34, .25); padding: 1.1rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .6rem; min-height: 240px; position: relative; font-size: .95rem; line-height: 1.55; color: #333; text-align: right; }
.lbp-rv-card__head { display: flex; align-items: center; gap: .75rem; }
.lbp-rv-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; overflow: hidden; display: grid; place-items: center; font-weight: 600; font-size: 1rem; background: #ffe7d1; color: #7a4a25; }
.lbp-rv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lbp-rv-avatar--2 { background: #dcecec; color: var(--rv-teal-ink); }
.lbp-rv-avatar--3 { background: #e9e2f2; color: #5a4a7a; }
.lbp-rv-avatar--4 { background: #e3ecdf; color: #456546; }
.lbp-rv-avatar--5 { background: #f3e3e3; color: #7d4646; }
.lbp-rv-avatar--6 { background: #efe6d6; color: #6b5330; }
.lbp-rv-avatar--anon { background: #ebe7e1; color: #8a8279; }
.lbp-rv-avatar--anon svg { width: 24px; height: 24px; fill: currentColor; }
.lbp-rv-who { min-width: 0; flex: 1; }
.lbp-rv-who b { display: block; font-weight: 600; font-size: .95rem; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbp-rv-meta { display: flex; align-items: center; gap: .35rem; font-size: .76rem; color: #868e96; flex-wrap: wrap; }
.lbp-rv-src { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.lbp-rv-src svg { width: 14px; height: 14px; flex: 0 0 14px; }
.lbp-rv-lang { font-size: .66rem; color: #868e96; border: 1px solid var(--rv-line); border-radius: 4px; padding: 0 .3rem; text-transform: uppercase; letter-spacing: .06em; }
.lbp-rv-rate { display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; flex-wrap: wrap; }
.lbp-rv-rec { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; font-weight: 600; color: #2d5f5e; }
.lbp-rv-rec svg { width: 16px; height: 16px; }
.lbp-rv-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: .2rem .4rem .2rem .6rem; white-space: nowrap; cursor: default; }
.lbp-rv-badge svg { width: 13px; height: 13px; }
.lbp-rv-badge--purchase { background: var(--rv-teal-wash); color: var(--rv-teal-ink); }
.lbp-rv-badge--source { background: #f1eee9; color: #5e564d; }
.lbp-rv-badge--none { background: transparent; color: #8a8279; border: 1px dashed #cfc6bb; }
.lbp-rv-tip { position: absolute; z-index: 10; right: 1rem; left: 1rem; top: 6.6rem; background: #222; color: #fff; font-weight: 300; font-size: .78rem; line-height: 1.45; padding: .65rem .8rem; border-radius: 8px; display: none; letter-spacing: 0; white-space: normal; }
.lbp-rv-badge:hover .lbp-rv-tip, .lbp-rv-badge:focus-visible .lbp-rv-tip, .lbp-rv-badge.is-open .lbp-rv-tip { display: block; }
.lbp-rv-badge:focus-visible { outline: 2px solid #4b8e8d; outline-offset: 2px; }
.lbp-rv-text { margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lbp-rv-text.is-open { display: block; }
.lbp-rv-more, .lbp-rv-orig { align-self: flex-start; background: none; border: 0; padding: 0; color: #868e96; font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lbp-rv-more:hover, .lbp-rv-orig:hover { color: var(--rv-teal-ink); }
.lbp-rv-translated { margin: 0; font-size: .74rem; color: #868e96; }
.lbp-rv-reply { margin-top: auto; border-right: 2px solid var(--rv-teal-wash); padding: .25rem .6rem .1rem 0; font-size: .82rem; color: #555; }
.lbp-rv-reply b { display: block; font-weight: 600; color: var(--rv-teal-ink); font-size: .72rem; letter-spacing: .04em; }

.lbp-rv-labels { display: grid; gap: .9rem; margin: 2rem 0; text-align: right; }
.lbp-rv-labels div { background: #fff; border: 1px solid var(--rv-line); border-radius: 10px; padding: .9rem 1.1rem; }
.lbp-rv-labels dt { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: #222; margin-bottom: .25rem; }
.lbp-rv-labels dt svg { width: 16px; height: 16px; }
.lbp-rv-labels dd { margin: 0; color: #6c757d; font-weight: 300; line-height: 1.7; }
.lbp-rv-ways { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.lbp-rv-ways .btn { display: inline-flex; align-items: center; gap: .5rem; }
.lbp-rv-ways svg { width: 18px; height: 18px; }

.lbp-rv-form { text-align: right; }
.lbp-rv-field { margin-bottom: 1.6rem; border: 0; padding: 0; }
.lbp-rv-field > label, .lbp-rv-field legend { display: block; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: #222; margin-bottom: .5rem; }
.lbp-rv-field input[type="text"], .lbp-rv-field textarea { width: 100%; border: 1px solid #d9d2c8; border-radius: 0; padding: .8rem .9rem; font: inherit; font-weight: 300; color: #222; background: #fff; }
.lbp-rv-field input[type="text"]:focus, .lbp-rv-field textarea:focus { outline: none; border-color: #4b8e8d; box-shadow: 0 0 0 3px var(--rv-teal-wash); }
.lbp-rv-field.is-invalid input, .lbp-rv-field.is-invalid textarea { border-color: #a3533d; }
.lbp-rv-field--check label { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; font-weight: 300; text-transform: none; letter-spacing: 0; }
.lbp-rv-field--check input { margin-top: .3rem; }
.lbp-rv-hint { font-size: .78rem; color: #868e96; margin: .35rem 0 0; }
.lbp-rv-error { font-size: .82rem; color: #a3533d; margin: .35rem 0 0; }
.lbp-rv-hp { position: absolute; right: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lbp-rv-pick { display: inline-flex; flex-direction: row-reverse; gap: .1rem; }
.lbp-rv-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lbp-rv-pick label { font-size: 2.2rem; line-height: 1; color: #ddd; cursor: pointer; padding: 0 .1rem; transition: color .1s; }
.lbp-rv-pick input:checked ~ label, .lbp-rv-pick label:hover, .lbp-rv-pick label:hover ~ label { color: var(--rv-star); }
.lbp-rv-pick input:focus-visible + label { outline: 2px solid #4b8e8d; outline-offset: 2px; border-radius: 4px; }
.lbp-rv-delete { overflow-wrap: anywhere; font-size: .85rem; }

@media (max-width: 991px) {
    .lbp-rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .lbp-rv-head { grid-template-columns: 1fr; }
    .lbp-rv-write { justify-self: start; }
    .lbp-rv-track { gap: .75rem; }
    .lbp-rv-grid { grid-template-columns: 1fr; }
    .lbp-rv-agg__num { font-size: 1.7rem; }
}