/* Boodschappen Manager UI v7.1.1 */
* {
    box-sizing: border-box;
}

:root {
    --green: #2f855a;
    --green-dark: #246b49;
    --green-soft: #eaf6ef;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg: #f7f8f7;
    --danger-bg: #fff1f2;
    --danger: #b42318;
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
}

a {
    color: var(--green-dark);
    text-decoration: none;
}

.auth-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.auth-card {
    width: min(100%, 430px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--green-dark);
    font-weight: 800;
    margin-bottom: 28px;
}

h1, h2, p {
    margin-top: 0;
}

h1 {
    margin-bottom: 8px;
}

.muted {
    color: var(--muted);
    margin-bottom: 24px;
}

form {
    display: grid;
    gap: 16px;
}

label {
    display: grid;
    gap: 7px;
    font-size: 14px;
    font-weight: 650;
}

input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 0 14px;
    font: inherit;
    color: inherit;
    background: #fff;
    outline: none;
}

input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(47,133,90,.12);
}

button {
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    padding: 0 18px;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.primary {
    background: var(--green);
    color: #fff;
}

.primary:hover {
    background: var(--green-dark);
}

.secondary {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
}

.auth-switch {
    margin: 22px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.alert {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 14px;
}

.alert.error {
    background: var(--danger-bg);
    color: var(--danger);
}

.app-shell {
    min-height: 100vh;
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    padding-bottom: 84px;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px 16px;
    border-bottom: 1px solid var(--border);
}

.app-header h1 {
    font-size: 24px;
    margin: 2px 0 0;
}

.eyebrow {
    font-size: 13px;
    color: var(--green-dark);
    font-weight: 750;
}

.avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green-dark);
    font-weight: 850;
}

.content {
    padding: 20px;
}

.welcome-card,
.empty-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
}

.welcome-card {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
    margin-bottom: 16px;
}

.welcome-card p {
    color: var(--muted);
    margin: 3px 0 0;
    font-size: 14px;
}

.welcome-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--green-soft);
}

.empty-card {
    text-align: center;
    padding: 40px 24px;
    margin-bottom: 18px;
}

.big-icon {
    font-size: 34px;
    margin-bottom: 12px;
}

.empty-card p {
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 0;
}

.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100%, 680px);
    height: 70px;
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    backdrop-filter: blur(14px);
}

.bottom-nav a {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    color: var(--muted);
    font-size: 18px;
}

.bottom-nav a.active {
    color: var(--green-dark);
}

.bottom-nav small {
    font-size: 11px;
    font-weight: 700;
}


/* === Stap 3: boodschappenlijst === */
.shopping-page {
    background: #fff;
}

.shopping-content {
    padding-top: 14px;
}

.shopping-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
}

.add-panel {
    margin-bottom: 22px;
}

.add-form {
    display: grid;
    grid-template-columns: 1fr 62px 52px;
    gap: 8px;
}

.product-input,
.quantity-input {
    min-height: 52px;
    border-radius: 14px;
}

.quantity-input {
    text-align: center;
    padding: 0 5px;
}

.add-button {
    min-height: 52px;
    border-radius: 14px;
    background: var(--green);
    color: white;
    line-height: 1;
    box-shadow: 0 5px 15px rgba(47,133,90,.2);
}

.quick-section {
    margin-bottom: 24px;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.section-heading h2 {
    font-size: 15px;
    margin: 0;
}

.quick-products {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 1px 5px;
    scrollbar-width: none;
}

.quick-products::-webkit-scrollbar {
    display: none;
}

.quick-products form {
    display: block;
    flex: 0 0 auto;
}

.quick-chip {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
}

.shopping-groups {
    margin-left: -20px;
    margin-right: -20px;
    border-top: 1px solid var(--border);
}

.category-card {
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.category-header {
    list-style: none;
    cursor: pointer;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.category-header::-webkit-details-marker {
    display: none;
}

.category-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.category-icon {
    width: 24px;
    text-align: center;
    font-size: 18px;
}

.category-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #dff4e6;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 800;
}

.chevron {
    color: var(--muted);
    font-size: 16px;
    transition: transform .15s ease;
}

.category-card:not([open]) .chevron {
    transform: rotate(180deg);
}

.category-items {
    border-top: 1px solid #f0f1f2;
}

.shopping-item {
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 30px;
    gap: 9px;
    align-items: center;
    padding: 8px 16px 8px 20px;
    border-bottom: 1px solid #f0f1f2;
}

.shopping-item:last-child {
    border-bottom: 0;
}

.toggle-form,
.delete-form,
.quantity-control form {
    display: block;
}

.check-button {
    width: 28px;
    min-height: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 2px solid #cfd5d1;
    border-radius: 8px;
    background: #fff;
    color: #fff;
    font-size: 16px;
}

.shopping-item.is-checked .check-button {
    background: var(--green);
    border-color: var(--green);
}

.item-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 600;
    transition: .15s ease;
}

.shopping-item.is-checked .item-name {
    text-decoration: line-through;
    color: #9aa09c;
    font-weight: 500;
}

.quantity-control {
    display: grid;
    grid-template-columns: 32px 30px 32px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
}

.quantity-control button {
    width: 32px;
    min-height: 34px;
    height: 34px;
    border-radius: 0;
    padding: 0;
    background: #fff;
    color: var(--text);
    font-size: 18px;
}

.quantity-control span {
    text-align: center;
    font-size: 14px;
    font-weight: 750;
}

.shopping-item.is-checked .quantity-control {
    opacity: .55;
}

.delete-button {
    width: 30px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    color: #b0b5b1;
    font-size: 24px;
    font-weight: 400;
}

.progress-card {
    margin: 18px 0 6px;
    border: 1px solid #dcebe1;
    background: #f2faf5;
    border-radius: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
}

.progress-card > div:first-child {
    display: grid;
    gap: 2px;
}

.progress-card strong {
    font-size: 13px;
}

.progress-card span {
    font-size: 11px;
    color: var(--muted);
}

.progress-track {
    height: 8px;
    overflow: hidden;
    background: #dce6df;
    border-radius: 999px;
}

.progress-track span {
    display: block;
    height: 100%;
    background: var(--green);
    border-radius: inherit;
}

.progress-number {
    color: var(--green-dark);
}

.logout-form {
    margin-top: 22px;
}

.text-button {
    width: 100%;
    background: transparent;
    color: var(--muted);
    min-height: 42px;
    font-weight: 650;
}

.shopping-empty {
    margin-top: 8px;
}

@media (max-width: 390px) {
    .add-form {
        grid-template-columns: 1fr 54px 48px;
    }

    .shopping-item {
        grid-template-columns: 32px minmax(0, 1fr) auto 26px;
        gap: 6px;
        padding-left: 14px;
        padding-right: 10px;
    }

    .quantity-control {
        grid-template-columns: 28px 26px 28px;
    }

    .quantity-control button {
        width: 28px;
    }
}


/* === Stap 4: gerechten === */
.recipe-content,
.recipe-edit-content {
    padding-top: 18px;
}

.recipe-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.recipe-intro h2 {
    margin-bottom: 5px;
    font-size: 19px;
}

.recipe-intro p,
.recipe-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.icon-link-button {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--green);
    color: #fff;
    font-size: 27px;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(47,133,90,.2);
}

.link-button {
    display: inline-grid;
    place-items: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 13px;
    margin-top: 6px;
}

.recipe-list {
    display: grid;
    gap: 10px;
}

.recipe-card {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    color: var(--text);
    box-shadow: 0 3px 12px rgba(0,0,0,.025);
}

.recipe-symbol {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    border-radius: 14px;
    font-size: 22px;
}

.recipe-card-copy {
    display: grid;
    gap: 4px;
}

.recipe-card-copy strong {
    font-size: 15px;
}

.recipe-card-copy small {
    color: var(--muted);
}

.recipe-arrow {
    font-size: 28px;
    color: #a5aaa7;
}

.back-link {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--text);
    font-size: 32px;
}

.recipe-edit-heading {
    min-width: 0;
    text-align: center;
}

.recipe-edit-heading h1 {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
}

.form-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    margin-bottom: 26px;
}

.inline-save {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.compact-button {
    min-height: 48px;
}

.ingredient-section {
    margin-bottom: 26px;
}

.recipe-section-heading {
    margin-bottom: 12px;
}

.recipe-section-heading h2 {
    font-size: 18px;
    margin-bottom: 4px;
}

.ingredient-add-form {
    display: grid;
    grid-template-columns: 1fr 60px 50px;
    gap: 8px;
    margin-bottom: 14px;
}

.ingredient-add-form input {
    min-width: 0;
}

.ingredient-list {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.ingredient-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 30px;
    gap: 8px;
    align-items: center;
    padding: 10px 10px 10px 14px;
    border-bottom: 1px solid #f0f1f2;
}

.ingredient-row:last-child {
    border-bottom: 0;
}

.ingredient-category {
    font-size: 19px;
}

.ingredient-name {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ingredient-name strong {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.ingredient-name small {
    color: var(--muted);
    font-size: 11px;
}

.ingredient-empty {
    padding: 22px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 14px;
    font-size: 13px;
}

.danger-zone {
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.danger-button {
    width: 100%;
    background: #fff1f2;
    color: #b42318;
    border: 1px solid #ffd6d9;
}

@media (max-width: 390px) {
    .ingredient-add-form {
        grid-template-columns: 1fr 54px 46px;
    }

    .ingredient-row {
        grid-template-columns: 28px minmax(0, 1fr) auto 26px;
        gap: 6px;
        padding-left: 10px;
        padding-right: 7px;
    }

    .inline-save {
        grid-template-columns: 1fr;
    }
}


/* === Gerecht direct naar boodschappenlijst === */
.alert.success {
    background: #ecfdf3;
    color: #246b49;
    border: 1px solid #ccebd8;
}

.recipe-shopping-action {
    margin: 8px 0 24px;
    padding: 16px;
    border: 1px solid #dcebe1;
    border-radius: 16px;
    background: #f2faf5;
}

.recipe-to-list-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
}

.action-help {
    margin: 9px 2px 0;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}


/* === Stap 5: weekplanner === */
.planner-content {
    padding-top: 16px;
}

.week-switcher {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
}

.week-switcher > div {
    display: grid;
    gap: 3px;
    text-align: center;
}

.week-switcher strong {
    font-size: 14px;
}

.week-switcher small {
    color: var(--muted);
    font-size: 11px;
}

.week-arrow {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: 28px;
}

.planner-days {
    display: grid;
    gap: 12px;
}

.planner-day {
    border: 1px solid var(--border);
    border-radius: 17px;
    background: #fff;
    overflow: hidden;
}

.planner-day-header {
    padding: 13px 14px 10px;
    background: #fafbfa;
    border-bottom: 1px solid #f0f1f2;
}

.planner-day-header > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.planner-day-header strong {
    font-size: 15px;
}

.planner-day-header small {
    color: var(--muted);
    font-size: 11px;
}

.planned-meals {
    display: grid;
}

.planned-meal {
    min-height: 48px;
    display: grid;
    grid-template-columns: 30px 1fr 28px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f1f2;
}

.planned-meal-icon {
    font-size: 17px;
}

.planned-meal-name {
    font-size: 14px;
    font-weight: 650;
}

.plan-add-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px 12px 12px;
}

.plan-add-form select {
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 11px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.plan-add-button {
    min-height: 44px;
    padding: 0 13px;
}

.week-shopping-card {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #dcebe1;
    border-radius: 17px;
    background: #f2faf5;
}

.week-shopping-card > div {
    margin-bottom: 12px;
}

.week-shopping-card strong {
    font-size: 15px;
}

.week-shopping-card p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.week-shopping-button {
    width: 100%;
}


/* === Kalendergestuurde planner === */
.calendar-toolbar {
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: #fff;
}

.calendar-nav {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    gap: 10px;
    align-items: center;
}

.calendar-title {
    display: grid;
    gap: 2px;
    text-align: center;
}

.calendar-title strong {
    font-size: 15px;
}

.calendar-title small {
    color: var(--muted);
    font-size: 11px;
}

.calendar-jump {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f1f2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: end;
}

.today-button {
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0 13px;
    border-radius: 12px;
    white-space: nowrap;
}

.calendar-date-form {
    display: grid;
    gap: 5px;
}

.calendar-date-form label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 650;
}

.calendar-date-form > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.calendar-date-form input {
    min-height: 44px;
}

.calendar-date-form button {
    min-height: 44px;
}

.planner-day.is-today {
    border-color: #a7d7b8;
    box-shadow: 0 0 0 2px rgba(47,133,90,.07);
}

.planner-day.is-today .planner-day-header {
    background: #f2faf5;
}

@media (max-width: 390px) {
    .calendar-jump {
        grid-template-columns: 1fr;
    }

    .today-button {
        width: 100%;
    }
}


/* === Flexibele kalenderplanning === */
.flexible-plan-form {
    grid-template-columns: 1fr;
    gap: 7px;
}

.flexible-plan-form select,
.flexible-plan-form input[type="text"] {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 11px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.plan-or {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.custom-plan-label {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}


/* === Read-only historie === */
.history-banner {
    display: grid;
    gap: 3px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #e6dfc7;
    border-radius: 14px;
    background: #fffaf0;
    color: #6b5b2a;
}

.history-banner strong {
    font-size: 13px;
}

.history-banner span {
    font-size: 12px;
    line-height: 1.4;
}

.history-lock {
    width: 28px;
    text-align: center;
    font-size: 14px;
    opacity: .65;
}


/* === Weekarchief === */
.history-empty-day {
    padding: 13px 14px;
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
    background: #fcfcfc;
}

.history-banner {
    position: relative;
}

.history-banner::before {
    content: "📚";
    position: absolute;
    right: 13px;
    top: 11px;
    font-size: 18px;
}


/* === Beheer Vaak toegevoegd === */
.manage-link {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 750;
}

.quick-manage-content {
    padding-top: 18px;
}

.quick-manage-intro {
    margin-bottom: 14px;
}

.quick-manage-intro h2 {
    font-size: 18px;
    margin-bottom: 4px;
}

.quick-manage-intro p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.quick-manual-add {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 18px;
}

.quick-manage-list {
    display: grid;
    gap: 8px;
}

.quick-manage-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.quick-manage-row.is-hidden-product {
    opacity: .58;
    background: #fafafa;
}

.quick-product-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.quick-product-copy strong {
    overflow-wrap: anywhere;
    font-size: 14px;
}

.quick-product-copy small {
    color: var(--muted);
    font-size: 10px;
}

.quick-manage-actions {
    display: flex;
    gap: 5px;
}

.quick-manage-actions form {
    display: block;
}

.mini-action {
    width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 16px;
}

.danger-mini {
    color: #b42318;
}

@media (max-width: 390px) {
    .quick-manual-add {
        grid-template-columns: 1fr;
    }

    .quick-manage-row {
        grid-template-columns: 1fr;
    }

    .quick-manage-actions {
        justify-content: flex-end;
    }
}


/* === Boodschappen Manager branding === */
.brand-top-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 142px;
    margin-right: 8px;
}

.brand-top-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 42px;
    object-fit: contain;
}

.login-brand {
    width: min(82vw, 390px);
    margin: 26px auto 8px;
    padding: 0 18px;
}

.login-brand img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 390px) {
    .brand-top-logo {
        max-width: 118px;
    }

    .brand-top-logo img {
        max-height: 36px;
    }

    .login-brand {
        width: min(88vw, 340px);
        margin-top: 20px;
    }
}


/* === Stap 7: mobiele visuele refresh === */
:root {
    --icon: #246b49;
}

.main-brand-header {
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 12px;
}

.app-brand-logo {
    display: block;
    width: min(58%, 250px);
    min-width: 0;
}

.app-brand-logo img {
    display: block;
    width: 100%;
    height: 48px;
    object-fit: contain;
    object-position: left center;
}

.user-household {
    margin-left: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.user-household-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
    text-align: right;
}

.user-household-copy strong,
.user-household-copy small {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-household-copy strong {
    font-size: 12px;
    color: var(--text);
}

.user-household-copy small {
    font-size: 10px;
    color: var(--green-dark);
    font-weight: 700;
}

.ui-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    background: currentColor;
    vertical-align: middle;
}

/* Solid, monochrome icon masks */
.icon-cart { clip-path: polygon(0 10%,12% 10%,20% 58%,78% 58%,92% 25%,27% 25%,24% 14%,0 14%,0 10%,22% 10%,31% 67%,82% 67%,82% 75%,30% 75%,25% 66%,20% 66%,20% 58%,28% 58%,31% 72%,80% 72%,80% 80%,32% 80%,28% 76%,28% 86%,40% 86%,40% 100%,28% 100%,28% 86%,72% 86%,72% 100%,60% 100%,60% 86%); }
.icon-calendar { border-radius: 12%; clip-path: polygon(10% 15%,25% 15%,25% 0,35% 0,35% 15%,65% 15%,65% 0,75% 0,75% 15%,90% 15%,90% 100%,10% 100%); }
.icon-utensils { clip-path: polygon(8% 0,18% 0,18% 34%,25% 34%,25% 0,35% 0,35% 34%,42% 34%,42% 0,52% 0,52% 38%,42% 52%,36% 52%,36% 100%,24% 100%,24% 52%,18% 52%,8% 38%,68% 0,82% 0,82% 48%,92% 48%,92% 60%,82% 60%,82% 100%,70% 100%,70% 60%,60% 60%,60% 48%,70% 48%); }
.icon-more { border-radius: 50%; box-shadow: .42em 0 0 currentColor, -.42em 0 0 currentColor; width:.28em; height:.28em; }
.icon-plus { clip-path: polygon(42% 0,58% 0,58% 42%,100% 42%,100% 58%,58% 58%,58% 100%,42% 100%,42% 58%,0 58%,0 42%,42% 42%); }
.icon-chevron { clip-path: polygon(10% 62%,50% 22%,90% 62%,78% 74%,50% 46%,22% 74%); }
.icon-leaf { border-radius: 100% 0 100% 0; transform: rotate(-18deg); }
.icon-bread { border-radius: 45% 45% 18% 18%; }
.icon-bottle { clip-path: polygon(36% 0,64% 0,64% 15%,72% 25%,78% 100%,22% 100%,28% 25%,36% 15%); }
.icon-protein { border-radius: 55% 45% 55% 45%; }
.icon-package { border-radius: 14%; }
.icon-home { clip-path: polygon(50% 0,100% 42%,88% 42%,88% 100%,12% 100%,12% 42%,0 42%); }
.icon-snowflake { clip-path: polygon(45% 0,55% 0,55% 35%,82% 19%,87% 28%,60% 44%,90% 44%,90% 56%,60% 56%,87% 72%,82% 81%,55% 65%,55% 100%,45% 100%,45% 65%,18% 81%,13% 72%,40% 56%,10% 56%,10% 44%,40% 44%,13% 28%,18% 19%,45% 35%); }
.icon-tag { clip-path: polygon(0 0,62% 0,100% 38%,38% 100%,0 62%); }

.bottom-nav a,
.bottom-nav .nav-disabled {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    font-size: 18px;
}

.bottom-nav .ui-icon {
    color: currentColor;
}

.bottom-nav .nav-disabled {
    color: #c2c6c3;
    cursor: default;
    user-select: none;
}

.bottom-nav .nav-disabled small {
    font-size: 11px;
    font-weight: 700;
}

.icon-button,
.add-qty-button,
.quantity-control button,
.delete-button,
.check-button,
.mini-action,
.week-arrow {
    display: grid;
    place-items: center;
    line-height: 1;
}

.add-form {
    grid-template-columns: minmax(0, 1fr) auto 52px;
    align-items: stretch;
}

.add-quantity-control {
    height: 52px;
    display: grid;
    grid-template-columns: 34px 40px 34px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.add-quantity-control .quantity-input {
    width: 40px;
    min-height: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.add-quantity-control .quantity-input::-webkit-inner-spin-button,
.add-quantity-control .quantity-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.add-qty-button {
    width: 34px;
    min-height: 50px;
    height: 50px;
    padding: 0;
    border-radius: 0;
    background: #fff;
    color: var(--green-dark);
    font-size: 20px;
}

.category-icon {
    display: grid;
    place-items: center;
    color: var(--icon);
}

.category-icon .ui-icon {
    width: 18px;
    height: 18px;
}

.collapse-button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--green-dark);
    transition: transform .15s ease, background .15s ease;
}

.collapse-button .ui-icon {
    width: 14px;
    height: 14px;
}

.category-card:not([open]) .collapse-button {
    transform: rotate(180deg);
}

.login-logo {
    width: min(100%, 290px);
    margin: -4px auto 24px;
}

.login-logo img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
}

@media (max-width: 390px) {
    .main-brand-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .app-brand-logo {
        width: 55%;
    }

    .app-brand-logo img {
        height: 42px;
    }

    .user-household-copy strong,
    .user-household-copy small {
        max-width: 88px;
    }

    .avatar {
        width: 38px;
        height: 38px;
    }

    .add-form {
        grid-template-columns: minmax(0, 1fr) auto 48px;
        gap: 6px;
    }

    .add-quantity-control {
        grid-template-columns: 30px 34px 30px;
    }

    .add-quantity-control .quantity-input {
        width: 34px;
    }

    .add-qty-button {
        width: 30px;
    }
}


/* === Visuele gelijkrekking planner/gerechten === */
.page-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 20px 4px;
    background: #fff;
}

.page-title-row h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}

.page-title-icon {
    width: 20px;
    height: 20px;
    color: var(--green-dark);
}

.app-brand-logo-centered {
    margin: 0 auto;
    width: min(58%, 220px);
}

.icon-chevron-left {
    clip-path: polygon(70% 8%, 30% 50%, 70% 92%, 58% 100%, 10% 50%, 58% 0);
}

.icon-star {
    clip-path: polygon(50% 0, 61% 34%, 98% 34%, 68% 55%, 79% 91%, 50% 69%, 21% 91%, 32% 55%, 2% 34%, 39% 34%);
}

.planner-content,
.recipe-content,
.recipe-edit-content,
.quick-manage-content {
    background: #fff;
}

.planner-day,
.recipe-card,
.form-card,
.ingredient-list,
.week-shopping-card,
.calendar-toolbar {
    box-shadow: 0 3px 12px rgba(0,0,0,.025);
}

.recipe-card,
.planner-day,
.form-card,
.ingredient-list,
.calendar-toolbar,
.week-shopping-card {
    border-radius: 16px;
}

.plan-add-button,
.week-shopping-button,
.compact-button,
.recipe-to-list-button {
    display: grid;
    place-items: center;
    text-align: center;
}

@media (max-width: 390px) {
    .page-title-row {
        padding-left: 14px;
        padding-right: 14px;
    }

    .page-title-row h1 {
        font-size: 20px;
    }
}


/* === Iconen + header/baseline fix === */
.icon-note {
    clip-path: polygon(12% 0,72% 0,100% 28%,100% 100%,12% 100%);
    position: relative;
}

.recipe-symbol,
.planned-meal-icon,
.ingredient-category {
    color: var(--green-dark);
    display: grid;
    place-items: center;
}

.recipe-symbol .ui-icon {
    width: 22px;
    height: 22px;
}

.planned-meal-icon .ui-icon,
.ingredient-category .ui-icon {
    width: 17px;
    height: 17px;
}

.recipe-page-title-row {
    display: flex;
    align-items: center;
}

.inline-back-link {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    color: var(--text);
    flex: 0 0 34px;
    margin-right: 1px;
}

.inline-back-link .ui-icon {
    width: 15px;
    height: 15px;
}

/* Inline icon + text buttons: same color, same baseline */
.button-with-icon,
.recipe-to-list-button,
.week-shopping-button,
.plan-add-button,
.compact-button,
.primary,
.secondary {
    line-height: 1.2;
}

.button-with-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.button-with-icon .ui-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    color: currentColor;
    transform: translateY(0);
}

button .ui-icon,
a .ui-icon {
    color: currentColor;
}

.recipe-to-list-button .ui-icon,
.week-shopping-button .ui-icon {
    width: 17px;
    height: 17px;
}

/* Remove old emoji-oriented visual sizing */
.recipe-symbol {
    font-size: 0;
}

.planned-meal-icon {
    font-size: 0;
}


/* === Laatste CSS-correcties === */
.add-button {
  min-height: 52px;
  border-radius: 14px;
  background: var(--green);
  color: white;
  line-height: 1;
  box-shadow: 0 5px 15px rgba(47,133,90,.2);
}

.logout-button,
a.logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.logout-button .ui-icon {
  width: 12px;
  height: 12px;
  color: currentColor;
}

.logout-button:hover {
  background: #f7f8f7;
}


/* === v8: huishouden delen === */
.household-mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mode-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.mode-option input {
    width: auto;
    min-height: 0;
    margin: 0;
}

.mode-option span {
    font-size: 12px;
}

a.user-household {
    color: inherit;
    text-decoration: none;
}

.invite-code-card {
    display: grid;
    gap: 5px;
    padding: 16px;
    border-radius: 14px;
    background: var(--green-soft);
    text-align: center;
}

.invite-code-card > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.invite-code-card strong {
    color: var(--green-dark);
    font-size: 24px;
    letter-spacing: .12em;
}

.invite-code-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.member-list {
    display: grid;
    gap: 8px;
}

.member-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.member-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green-dark);
    font-weight: 800;
}

.member-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.member-copy strong,
.member-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-copy small {
    color: var(--muted);
    font-size: 11px;
}

.member-role {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f2f4f3;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
}

.household-help {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.copy-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--green-dark);
    font-size: 12px;
}

@media (max-width: 390px) {
    .household-mode-switch {
        grid-template-columns: 1fr;
    }

    .member-row {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .member-avatar {
        width: 38px;
        height: 38px;
    }
}


/* === v8.1: gepland gerecht eenmalig naar boodschappenlijst === */
.planned-meal {
    grid-template-columns: 30px minmax(0, 1fr) auto 28px;
}

.plan-shopping-form {
    display: block;
}

.plan-shopping-button {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid #cfe5d7;
    border-radius: 9px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.plan-shopping-button .ui-icon {
    width: 12px;
    height: 12px;
    color: currentColor;
}

.plan-shopping-button.is-used,
.plan-shopping-button:disabled {
    border-color: var(--border);
    background: #f3f4f3;
    color: #969c98;
    cursor: default;
    opacity: 1;
}

.ingredients-added-label {
    color: var(--green-dark);
}

.icon-check {
    clip-path: polygon(8% 52%, 19% 42%, 42% 66%, 82% 20%, 94% 30%, 43% 88%);
}

@media (max-width: 430px) {
    .planned-meal {
        grid-template-columns: 26px minmax(0, 1fr) auto 26px;
        gap: 6px;
        padding-left: 9px;
        padding-right: 8px;
    }

    .plan-shopping-button {
        padding: 0 7px;
    }

    .plan-shopping-button span:last-child {
        display: none;
    }

    .plan-shopping-button .ui-icon {
        width: 14px;
        height: 14px;
    }
}


/* v8.1.8 - productgroep beheren in Vaak toegevoegd */
.quick-category-control {
    margin-left: auto;
}

.quick-category-control form {
    margin: 0;
}

.quick-category-control select {
    min-height: 38px;
    max-width: 150px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.quick-manage-row {
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 430px) {
    .quick-product-copy {
        flex: 1 1 calc(100% - 165px);
        min-width: 120px;
    }

    .quick-category-control {
        flex: 0 0 auto;
    }

    .quick-category-control select {
        max-width: 135px;
    }

    .quick-manage-actions {
        flex: 1 0 100%;
        justify-content: flex-end;
    }
}


/* v8.1.9 - gedeelde huishoudnotities */
.notes-content { padding-bottom: 96px; }
.notes-add-card,
.note-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
}
.notes-add-card { padding: 14px; margin-bottom: 14px; }
.notes-add-form,
.note-edit-form { display: grid; gap: 9px; }
.notes-add-form input,
.notes-add-form textarea,
.note-edit-form input,
.note-edit-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 11px 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
    resize: vertical;
}
.notes-list { display: grid; gap: 10px; }
.note-card {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 36px 36px;
    gap: 8px;
    align-items: start;
    padding: 12px;
}
.note-copy { min-width: 0; padding-top: 4px; }
.note-copy strong { display: block; }
.note-copy p { margin: 5px 0 0; white-space: normal; overflow-wrap: anywhere; }
.note-card.is-done .note-copy { opacity: .55; }
.note-card.is-done .note-copy strong { text-decoration: line-through; }
.note-edit { position: relative; }
.note-edit summary { list-style: none; }
.note-edit summary::-webkit-details-marker { display: none; }
.note-edit-form {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 42px;
    width: min(310px, calc(100vw - 44px));
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.icon-edit {
    clip-path: polygon(8% 72%, 8% 92%, 28% 92%, 89% 31%, 69% 11%);
}
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* v8.2.0 - Meer + Te kopen */
.more-content,.buy-content{padding-bottom:96px}
.more-grid{display:grid;gap:10px}
.more-card{display:grid;grid-template-columns:42px minmax(0,1fr) 18px;gap:10px;align-items:center;padding:15px;background:#fff;border:1px solid var(--border);border-radius:16px;color:var(--text);text-decoration:none}
.more-card-icon{width:22px;height:22px;color:var(--green)}
.more-card span:nth-child(2){display:grid;gap:3px}
.more-card small{color:var(--muted)}
.more-card b{font-size:24px;font-weight:400;color:var(--muted)}
.buy-add-card{padding:14px;margin-bottom:14px;background:#fff;border:1px solid var(--border);border-radius:16px}
.buy-add-form{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.buy-add-form>input{min-width:0;border:1px solid var(--border);border-radius:11px;padding:11px 12px;font:inherit}
.buy-quantity{display:flex;align-items:center;border:1px solid var(--border);border-radius:11px;overflow:hidden}
.buy-quantity button{width:34px;height:42px;border:0;background:#fff;color:var(--green);font-size:20px}
.buy-quantity input{width:38px;border:0;text-align:center;font:inherit;-moz-appearance:textfield}
.buy-quantity input::-webkit-inner-spin-button{display:none}
.buy-list{display:grid;gap:8px}
.buy-row{display:grid;grid-template-columns:38px minmax(0,1fr) 36px;gap:9px;align-items:center;padding:11px 12px;background:#fff;border:1px solid var(--border);border-radius:14px}
.buy-copy{display:flex;gap:8px;align-items:baseline;min-width:0}
.buy-copy strong{overflow-wrap:anywhere}
.buy-copy small{color:var(--muted)}
.buy-row.is-done .buy-copy{opacity:.5;text-decoration:line-through}
.icon-bag{clip-path:polygon(18% 28%,34% 28%,34% 20%,40% 9%,60% 9%,66% 20%,66% 28%,82% 28%,88% 91%,12% 91%)}
.icon-users{clip-path:polygon(15% 36%,23% 20%,37% 20%,45% 36%,39% 49%,49% 58%,56% 47%,52% 34%,60% 20%,73% 20%,81% 35%,76% 48%,91% 60%,96% 91%,51% 91%,49% 72%,43% 60%,37% 55%,28% 55%,17% 61%,10% 72%,8% 91%,0 91%,5% 61%)}
@media(max-width:430px){.buy-add-form{grid-template-columns:minmax(0,1fr) auto}.buy-add-form .primary{grid-column:1/-1}.buy-quantity{height:44px}}


/* v8.2.4 - Te kopen sorteren + 5 seconden Ongedaan maken */
.buy-row {
    grid-template-columns: 54px 38px minmax(0,1fr) 36px;
}
.buy-reorder {
    display: flex;
    align-items: center;
    gap: 3px;
}
.drag-handle {
    width: 28px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 24px;
    line-height: 1;
    cursor: grab;
    touch-action: manipulation;
}
.drag-handle:active { cursor: grabbing; }
.buy-move-buttons {
    display: grid;
    gap: 1px;
}
.buy-move-buttons button {
    width: 22px;
    height: 21px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--surface, #f5f5f5);
    color: var(--text);
    line-height: 1;
}
.buy-row.is-dragging {
    opacity: .45;
}
.undo-toast {
    position: fixed;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    z-index: 1000;
    width: min(calc(100% - 28px), 430px);
    min-height: 50px;
    padding: 9px 10px 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 14px;
    background: #202522;
    color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.undo-toast[hidden] { display: none !important; }
.undo-toast span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.undo-toast button {
    flex: 0 0 auto;
    min-height: 34px;
    border: 0;
    border-radius: 9px;
    padding: 0 10px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font: inherit;
    font-weight: 700;
}
@media (max-width: 430px) {
    .buy-row { grid-template-columns: 48px 38px minmax(0,1fr) 36px; }
}


/* v8.2.5 - inline undo + Te kopen dragfix */
.buy-row {
    grid-template-columns: 38px 38px minmax(0, 1fr) auto;
}

.drag-handle {
    width: 38px;
    min-height: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.drag-grip {
    font-size: 24px;
    line-height: 1;
    transform: rotate(90deg);
}

.buy-row-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.buy-move-buttons {
    display: flex;
    gap: 3px;
}

.buy-move-buttons button {
    width: 30px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    line-height: 1;
}

.buy-row.is-dragging {
    opacity: .5;
    outline: 2px solid var(--green-soft);
}

.row-undo {
    grid-column: 1 / -1;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px 6px 11px;
    border-radius: 10px;
    background: #202522;
    color: #fff;
}

.row-undo[hidden] {
    display: none !important;
}

.row-undo span {
    font-size: 12px;
    font-weight: 650;
}

.row-undo button {
    min-height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
}

.is-pending-delete > *:not(.row-undo) {
    opacity: .28;
}

.shopping-item {
    position: relative;
}

.shopping-row-undo {
    margin-top: 5px;
}

@media (max-width: 430px) {
    .buy-row {
        grid-template-columns: 34px 34px minmax(0, 1fr) auto;
        gap: 6px;
    }

    .drag-handle {
        width: 34px;
    }

    .buy-move-buttons button {
        width: 28px;
    }
}

.undo-toast { display: none !important; }


/* v8.2.6 - definitieve Te kopen volgordefix */
.drag-grip {
    display: block;
    transform: none;
    font-size: 0;
}

.drag-grip::before {
    content: "⋮⋮";
    display: block;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -5px;
    transform: rotate(90deg);
}

.buy-row.is-dragging {
    opacity: .55;
    background: var(--green-soft);
}

.buy-move-buttons {
    order: 1;
}

.buy-delete-form {
    order: 2;
}


/* v8.2.7 - inline boodschappen autocomplete */
.product-autocomplete {
    position: relative;
    min-width: 0;
}

.product-autocomplete .product-input {
    position: relative;
    z-index: 2;
    width: 100%;
    background: transparent;
}

.product-autocomplete-ghost {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    overflow: hidden;
    white-space: pre;
    border: 1px solid transparent;
    padding: 0 14px;
    font: inherit;
    line-height: normal;
}

.product-autocomplete-ghost [data-autocomplete-typed] {
    visibility: hidden;
}

.product-autocomplete-ghost [data-autocomplete-rest] {
    color: #a8aea9;
}

.product-autocomplete.has-suggestion .product-input {
    caret-color: var(--text);
}