/* La lavagna sul frigo. Scoped to pages that contain Family Hub. */
@font-face {
    font-family: "FH Hand";
    src: url("fonts/caveat-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "FH Sans";
    src: url("fonts/dm-sans-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

body:has(.family-hub),
body:has(.family-hub-login) {
    color-scheme: light;
    background: #e9e4da;
    background-image: radial-gradient(#a99e881c .65px, transparent .65px);
    background-size: 5px 5px;
    color: #343d34;
    font-family: "FH Sans", system-ui, sans-serif;
}
body:has([class*="family-hub"]) .site-header {
    width: min(1260px, calc(100% - 64px));
    max-width: none;
    margin: auto;
    padding: 27px 8px 23px;
    align-items: center;
    background: transparent;
}
body:has([class*="family-hub"]) .site-title,
body:has([class*="family-hub"]) .site-title a {
    color: #354d40;
    font: 700 35px/1.05 "FH Hand", cursive;
    letter-spacing: -.4px;
    text-decoration: none;
}
body:has([class*="family-hub"]) .site-description {
    margin: 5px 0 0;
    color: #6c7064;
    font: 12px/1.5 "FH Sans", sans-serif;
    letter-spacing: .05em;
}
body:has([class*="family-hub"]) .site-navigation a {
    padding: 10px 18px;
    border: 1px solid #adb8a7;
    border-radius: 30px;
    color: #425548;
    background: #f3f0e9;
    font: 600 13px/1.5 "FH Sans", sans-serif;
}
body:has([class*="family-hub"]) .site-navigation-toggle {
    background: #f3f0e9;
    color: #425548;
}
body:has([class*="family-hub"]) #content {
    width: 100%;
    max-width: none;
}
body:has([class*="family-hub"]) #content > .page-header { display: none; }
body:has([class*="family-hub"]) .header-inner,
body:has([class*="family-hub"]) .footer-inner { width: 100%; max-width: none; }
body:has([class*="family-hub"]) .e-con:has(.family-hub),
body:has([class*="family-hub"]) .e-con-inner:has(.family-hub) {
    --container-max-width: 100%;
    --padding-left: 0px;
    --padding-right: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
    width: 100%;
    max-width: none;
    padding: 0;
}
body:has([class*="family-hub"]) .site-navigation-dropdown a { color: #425548; background: #f8f6ed; font-family: "FH Sans", sans-serif; }
body:has([class*="family-hub"]) .site-footer {
    width: min(1220px, calc(100% - 64px));
    max-width: none;
    margin: auto;
    padding: 25px 6px 35px;
    color: #717367;
    background: transparent;
    font: 12px/1.5 "FH Sans", sans-serif;
}

.family-hub,
.family-hub-login {
    box-sizing: border-box;
    --fh-ink: #343d34;
    --fh-muted: #687064;
    --fh-line: #dddcd0;
    --fh-paper: #fffef7;
    --fh-page: #f0efe7;
    --fh-teal: #45654f;
    --fh-green: #526e41;
    --fh-blue: #486c85;
    --fh-coral: #a65340;
    --fh-yellow: #846019;
    color: var(--fh-ink);
    font-family: "FH Sans", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
}
.family-hub {
    position: relative;
    width: min(1260px, calc(100% - 64px));
    margin: 0 auto;
    padding: 30px 34px 20px 48px;
    border: 1px solid #d0d1c7;
    border-radius: 30px 30px 18px 18px;
    background: linear-gradient(105deg, #e9eae1 0, #f2f2eb 7%, #f0f0e8 92%, #e5e6dd 100%);
    box-shadow: inset 0 3px 2px #ffffffd9, inset 0 -4px 6px #999e821f, 0 14px 38px #554c3612;
}
.family-hub::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 108px;
    width: 11px;
    height: 215px;
    border: 1px solid #c1c5ba;
    border-radius: 9px;
    background: linear-gradient(90deg, #d6d9ce, #ffffff 45%, #e2e4db);
    box-shadow: 4px 3px 4px #66735a22;
    pointer-events: none;
}
.family-hub :is(h1, h2, h3, p) { font-family: inherit; }
.family-hub h2,
.family-hub-login h2 { font-family: "FH Hand", cursive; font-weight: 700; }
.family-hub :is(button, input, select, textarea) { font-family: "FH Sans", system-ui, sans-serif; }
.family-hub section[id] { scroll-margin-top: 55px; }
.fh-header {
    position: relative;
    align-items: center;
    gap: 26px;
    min-height: 222px;
    padding: 26px 35px;
    border: 9px solid #b18b62;
    border-radius: 9px;
    background: radial-gradient(ellipse at 20% 30%, #ffffff09, transparent 70%), #2f4a3f;
    box-shadow: inset 0 0 0 2px #203f32, inset 0 3px 13px #122d3855, 0 2px 0 2px #cba77b, 0 6px 10px #403c3026;
}
.fh-header::after {
    content: "";
    position: absolute;
    right: 67px;
    bottom: -3px;
    width: 43px;
    height: 6px;
    border-radius: 2px;
    background: #f6f1db;
    box-shadow: 1px 2px 3px #12251b80;
    transform: rotate(-3deg);
    pointer-events: none;
}
.fh-header .fh-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e6dfbf;
    font-size: 10px;
    letter-spacing: .16em;
    font-weight: 600;
}
.fh-home-mark { font-size: 24px; line-height: 1; }
.fh-header h1 {
    margin: 6px 0 10px;
    color: #faf8e9;
    font: 600 clamp(39px, 4.5vw, 60px)/1.1 "FH Hand", cursive;
    letter-spacing: -.5px;
    text-shadow: 1px 1px 0 #ffffff14;
}
.fh-header h1 span { color: #efd3a0; font-size: .7em; white-space: nowrap; }
.fh-header .fh-subtitle { color: #e0e5d6; font-size: 13px; }
.fh-header-date {
    position: relative;
    flex: 0 0 185px;
    min-width: 0;
    min-height: 115px;
    padding: 21px 18px 15px;
    align-content: center;
    gap: 1px;
    background: #f5e5ad;
    color: #4d4f38;
    text-align: center;
    box-shadow: 2px 5px 8px #112b3155;
    transform: rotate(3deg);
}
.fh-header-date::before,
.fh-main-panel::before,
.fh-side-panel > .fh-panel::before {
    content: "";
    position: absolute;
    top: -9px;
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    z-index: 1;
    border: 1px solid #974b38;
    border-radius: 50%;
    background: radial-gradient(circle at 33% 25%, #da9980, #b65f49 57%, #8d4233);
    box-shadow: inset 0 1px 2px #ffffff70, 1px 3px 3px #433e3640;
    pointer-events: none;
}
.fh-header-date span { color: #5d5b42; font: 500 20px/1 "FH Hand", cursive; }
.fh-header-date strong { color: #414b34; font: 700 25px/1.15 "FH Hand", cursive; text-transform: none; }
.fh-board-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 25px 0 8px;
}
.fh-board-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid #d9dbcd;
    border-radius: 4px;
    color: #4a5f48;
    background: #f9f8ef;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 2px #63594409;
}
.fh-board-nav a:first-child { background: #e0e8d7; border-color: #bccab4; }
.fh-board-nav a:hover { background: #dde5d6; color: #243f2d; }
.fh-board-nav > span { margin-left: auto; padding: 0 6px; color: #6d765e; font: 400 22px/1.3 "FH Hand", cursive; transform: rotate(-2deg); }
.fh-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding-top: 22px; }
.fh-main-column, .fh-side-panel { gap: 25px; }
.fh-main-panel,
.fh-panel {
    position: relative;
    padding: 27px 24px 22px;
    border: 1px solid #deddd0;
    border-radius: 3px 5px 4px 3px;
    background: var(--fh-paper);
    box-shadow: 1px 4px 7px #5a523113;
}
.fh-main-panel { padding: 29px 23px 20px; }
.fh-main-panel::before { left: 30px; border-color: #4a6655; background: radial-gradient(circle at 33% 25%, #96ad8a, #637f64 57%, #3c5b4c); }
.fh-main-panel::after {
    content: "";
    position: absolute;
    top: -10px;
    right: 38px;
    width: 77px;
    height: 24px;
    background: repeating-linear-gradient(90deg, #c2ccb555 0 3px, #c2ccb577 3px 5px);
    transform: rotate(5deg);
    pointer-events: none;
}
.fh-calendar-toolbar { gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.fh-calendar-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.fh-calendar-collapse { min-height: 38px; padding: 6px 10px; border: 1px solid #c7ceb9; }
#fh-calendar-content[hidden] { display: none !important; }
.fh-calendar-toolbar h2 { font-size: 31px; line-height: 1.1; }
.fh-panel h2 { font-size: 29px; line-height: 1.1; }
.fh-kicker, .fh-calendar-toolbar p.fh-kicker { margin: 0 0 6px; color: #66765a; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.fh-calendar-toolbar p:not(.fh-kicker) { color: #6e7263; font-size: 12px; }
.fh-view-switch { flex-shrink: 0; gap: 1px; padding: 3px; border: 1px solid #dfdfd1; border-radius: 6px; background: #eeefe3; }
.fh-view-switch button { min-height: 38px; padding: 5px 9px; color: #535e4c; font-size: 11px; font-weight: 600; }
.fh-view-switch button[aria-pressed="true"] { background: #48674f; color: #fffdf0; box-shadow: 0 1px 3px #2d493129; }
.fh-view-switch button:not([aria-pressed="true"]):hover { background: #dde3d3; color: #34492c; }
.fh-calendar-controls { gap: 7px; margin: 0 0 18px; }
.fh-calendar-controls input[type="date"] { width: 160px; flex: 0 0 160px; }
.fh-icon-button,
.fh-text-button,
.fh-primary-button,
.fh-secondary-button { min-height: 44px; border-radius: 5px; font-size: 12px; font-weight: 600; text-transform: none; }
.fh-icon-button { width: 44px; border-color: #dedecf; background: #fffef7; color: #496346; font-size: 19px; }
.fh-text-button { background: #e9eddc; color: #3f5c3b; }
.fh-primary-button { background: #45654f; color: #fffdf2; box-shadow: 0 2px 0 #294735; }
.fh-secondary-button { border-color: #bec8b0; background: #f1f2e3; color: #405a38; }
.fh-primary-button:hover { background: #334f3c; }
.fh-secondary-button:hover, .fh-icon-button:hover, .fh-text-button:hover { background: #e1e7d2; color: #2f482a; }
.family-hub :is(button, a, input, select, textarea, summary):focus-visible,
.family-hub-login :is(a, input):focus-visible { outline: 3px solid #a25336; outline-offset: 3px; }
.family-hub :is(input:not([type="checkbox"]):not([type="file"]), select, textarea),
.family-hub-login #fh-login-form :is(input[type="text"], input[type="password"]) {
    min-width: 0;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid #cecdb9;
    border-radius: 4px;
    color: #364432;
    background: #fffef9;
    font: 400 13px/1.5 "FH Sans", sans-serif;
    box-shadow: inset 0 1px 2px #3c402408;
}
.family-hub textarea { resize: vertical; }
.family-hub input[type="checkbox"] { accent-color: #48674f; }
.fh-member-filters { gap: 8px; padding: 12px 0 16px; border-top: 1px dashed #d5d7c7; }
.fh-member-filter { min-height: 38px; gap: 6px; padding: 5px 9px; border: 1px solid #e0e1d4; border-radius: 30px; color: #4b5543; background: #f8f8ef; font-size: 11px; }
.fh-member-filter input { width: 16px; height: 16px; }
.fh-member-dot { width: 7px; height: 7px; flex-basis: 7px; }
.fh-period-heading { margin: 2px 0 13px; color: #4d6144; font: 700 29px/1.2 "FH Hand", cursive; }
.fh-weekdays { border-color: #dfdfd1; border-radius: 4px 4px 0 0; background: #eeefdf; }
.fh-weekdays span { padding: 11px 3px; color: #58614e; font-size: 10px; letter-spacing: .04em; }
.fh-period-grid { border-color: #dfdfd1; border-radius: 0 0 4px 4px; }
.fh-day { min-height: 96px; padding: 5px; border-color: #e5e4d6; background: #fffef8; }
.fh-day-empty { background: repeating-linear-gradient(-45deg, #f4f4e9, #f4f4e9 4px, #f1f1e6 4px, #f1f1e6 5px); }
.fh-day-today { background: #f2f4de; box-shadow: inset 0 0 0 2px #889a70; }
.fh-day-number { width: 32px; height: 32px; margin-bottom: 5px; padding: 0; color: #54604b; font-size: 12px; font-weight: 600; }
.fh-day-number:hover { background: #e6ecd8; color: #344b2d; }
.fh-day-today .fh-day-number { color: #fffdf1; background: #49664e; }
.fh-view-week .fh-day-number,
.fh-view-day .fh-day-number { width: auto; max-width: 100%; height: auto; min-height: 32px; padding: 4px 6px; border-radius: 5px; text-align: left; white-space: normal; line-height: 1.4; }
.fh-mobile-weekday { display: none; }
.fh-entry { padding: 4px; background: #eaf0e2; color: #354833; font-size: 10px; line-height: 1.35; }
.fh-shift-morning { --fh-shift-paper: #ffedb1; --fh-shift-edge: #be8613; --fh-shift-ink: #5a4008; }
.fh-shift-afternoon { --fh-shift-paper: #ffd3bd; --fh-shift-edge: #bd5629; --fh-shift-ink: #6b2a16; }
.fh-shift-night { --fh-shift-paper: #334b82; --fh-shift-edge: #182e5e; --fh-shift-ink: #ffffff; }
.fh-shift-post_night { --fh-shift-paper: #e0d7f8; --fh-shift-edge: #8060b8; --fh-shift-ink: #4b3274; }
.fh-shift-rest { --fh-shift-paper: #d7edcf; --fh-shift-edge: #598b47; --fh-shift-ink: #305728; }
.fh-shift-leave { --fh-shift-paper: #d1eef0; --fh-shift-edge: #3e858b; --fh-shift-ink: #285b60; }
.family-hub .fh-entry-shift, .family-hub .fh-timed-shift {
    border-left: 4px solid var(--fh-shift-edge, #6e7263);
    background: var(--fh-shift-paper, #eeefe3);
    color: var(--fh-shift-ink, #354833);
    font-weight: 600;
}
.fh-timed-shift { padding-right: 6px; }
.fh-shift-legend { display: flex; align-items: baseline; gap: 9px 12px; flex-wrap: wrap; margin: 0 0 17px; padding: 10px 0 13px; border-bottom: 1px dashed #d5d7c7; }
.fh-shift-legend-title { color: #5b6852; font-size: 11px; font-weight: 700; }
.fh-shift-legend ul { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.fh-shift-legend li { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 4px 7px; border-radius: 4px; background: var(--fh-shift-paper); color: var(--fh-shift-ink); font-size: 11px; line-height: 1.4; font-weight: 600; }
.fh-shift-swatch { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--fh-shift-edge); }
.fh-shift-night .fh-shift-swatch { background: #cbd8ff; }
.fh-entry-event { background: #f8e7d9; color: #704b30; }
.fh-calendar-footer { flex-direction: column; align-items: flex-start; gap: 11px; margin-top: 15px; }
.fh-calendar-footer > span { font-size: 11px; }
.fh-calendar-actions { justify-content: flex-start; gap: 6px; }
.fh-calendar-actions .fh-secondary-button { min-height: 36px; padding: 6px 9px; font-size: 10px; }
.fh-calendar-actions small { color: #70715e; font-size: 10px; text-align: left; }
.fh-side-panel > .fh-panel { padding: 29px 21px 21px; }
.fh-side-panel > .fh-panel:first-child { background: #f6edc9; border-color: #e1d7ad; transform: rotate(.55deg); }
.fh-side-panel > .fh-panel::before { left: calc(50% - 10px); }
.fh-side-panel .fh-exceptions { margin: 2px 0; background: #f3e3d7; border-color: #ddcabb; transform: rotate(-.55deg); }
.fh-side-panel .fh-exceptions::before { border-color: #807044; background: radial-gradient(circle at 33% 25%, #cfbd86, #a28b55 57%, #87703c); }
.fh-panel-heading { margin-bottom: 15px; gap: 10px; }
.fh-cycle-mark { width: 44px; height: 44px; flex-shrink: 0; background: #e7ddb2; border: 1px dashed #a39763; color: #645b34; }
.fh-panel-copy { margin: 0 0 17px; color: #626550; font-size: 12px; line-height: 1.6; }
.fh-field { gap: 5px; margin-bottom: 13px; color: #48503f; font-size: 12px; font-weight: 600; }
.fh-field small, .fh-pattern-details > small, .fh-saved-note, .fh-first-setup { color: #696b53; font-size: 11px; line-height: 1.5; }
.fh-pattern-details summary { color: #4b633d; font-size: 12px; line-height: 1.7; }
.fh-pattern-details { margin-top: 10px; }
.fh-exception-list { border-color: #d9c7b8; }
.fh-exception-row { border-color: #dfd0c0; }
.fh-event-panel { background: #f9faf0; padding-top: 30px; }
.fh-event-panel::before, .fh-communication-panel::before {
    content: "";
    position: absolute;
    left: calc(50% - 36px);
    top: -10px;
    width: 72px;
    height: 24px;
    background: #c2cdb88c;
    transform: rotate(-3deg);
    pointer-events: none;
}
.fh-communication-panel { background: #faf3e0; }
.fh-shopping-panel { background: #fbfaf3; border-color: #d8d8c8; box-shadow: 0 5px 18px #414b3512; }
.fh-shopping-count { border-color: #c8d6c1; background: #eaf1e5; color: #3f6048; }
.fh-shopping-item { border-color: #e3e3d7; }
.fh-all-day-grid { background: #f4f3e6; border-color: #dedecb; }
.fh-all-day-axis, .fh-all-day-column { border-color: #dedecb; }
.fh-hours-scroll { border-color: #dedecb; }
.fh-time-axis { background: #f6f5ea; }
.fh-hour-column { border-color: #e2e2d2; background: repeating-linear-gradient(to bottom, #e4e3d4 0, #e4e3d4 1px, transparent 1px, transparent 60px), #fffef8; }
.fh-time-slot:hover { background: #82916a19; }
.fh-timed-event { color: #344432; }
.fh-communication-panel::before { background: #dbbc9880; transform: rotate(3deg); }
.fh-message { border-color: #e1d8bf; background: #fffcef; }
.fh-message p { color: #4f5847; }
.fh-message h3 { color: #354b36; font-size: 14px; }
.fh-message-list > h3 { color: #465841; font: 700 25px/1.3 "FH Hand", cursive; }
.fh-message-bottom .fh-text-button { min-height: 36px; }
.fh-board-signoff { margin: 26px 0 5px; color: #6b7561; text-align: center; font: 400 23px/1.3 "FH Hand", cursive !important; }
.fh-board-signoff span { color: #9f6853; }
.fh-toast { border-color: #adbba0; background: #f1f5e7; color: #354a2e; box-shadow: 0 6px 25px #3d492333; }
.fh-loading, .fh-error, .fh-empty { border-color: #d7d9c8; background: #fffdf2; }
.family-hub-login {
    position: relative;
    width: min(500px, calc(100% - 40px));
    margin: 45px auto 80px;
    padding: 40px;
    border: 1px solid #d5c8a0;
    border-radius: 4px;
    background: #fff9e5;
    box-shadow: 0 8px 24px #574c3122;
}
.family-hub-login::before { content: ""; position: absolute; left: calc(50% - 40px); top: -12px; width: 80px; height: 27px; background: #bfcdb6c4; transform: rotate(-3deg); }
.family-hub-login h2 { color: #425b43; font-size: 40px; line-height: 1.1; }
.family-hub-login p { color: #5e6652; }
.family-hub-login #fh-login-form { max-width: none; gap: 17px; }
.family-hub-login #fh-login-form input[type="submit"] { background: #45654f; min-height: 46px; }
.family-hub-login a { color: #45654f; font-size: 12px; }

@media (max-width: 1120px) {
    .fh-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 19px; }
    .fh-calendar-toolbar { flex-direction: column; gap: 14px; }
    .fh-side-panel { grid-template-columns: minmax(0, 1fr); }
    .fh-main-panel { padding-inline: 17px; }
    .fh-board-nav > span { display: none; }
}
@media (max-width: 920px) {
    .family-hub { padding: 24px 26px 20px 37px; }
    .fh-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .fh-calendar-toolbar { flex-direction: row; }
    .fh-side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .fh-header { padding: 23px; }
    .fh-header-date { flex-basis: 160px; }
    .fh-header h1 { font-size: 48px; }
}
@media (max-width: 700px) {
    body:has([class*="family-hub"]) .site-header { width: calc(100% - 32px); padding: 20px 2px; }
    body:has([class*="family-hub"]) .site-title a { font-size: 31px; }
    body:has([class*="family-hub"]) .site-description { font-size: 11px; }
    body:has([class*="family-hub"]) .site-footer { width: calc(100% - 40px); padding-block: 22px; }
    .family-hub { width: calc(100% - 20px); padding: 17px 13px 15px; border-radius: 22px 22px 14px 14px; }
    .family-hub::before { display: none; }
    .fh-header { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; padding: 21px 18px; border-width: 7px; }
    .fh-header h1 { margin: 8px 0; font-size: clamp(36px, 9.2vw, 52px); }
    .fh-header .fh-subtitle { max-width: 280px; font-size: 12px; line-height: 1.6; }
    .fh-header .fh-kicker { font-size: 9px; }
    .fh-header-date { display: flex; flex: auto; align-self: flex-start; align-items: baseline; gap: 8px; min-height: 0; padding: 9px 14px; margin: 0 0 1px 2px; transform: rotate(-2deg); }
    .fh-header-date::before { width: 13px; height: 13px; left: auto; right: 7px; top: -6px; }
    .fh-header-date span { font-size: 18px; }
    .fh-header-date strong { max-width: none; font-size: 22px; }
    .fh-header::after { right: 24px; }
    .fh-board-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 19px 0 5px; }
    .fh-board-nav a { justify-content: center; padding: 7px 6px; text-align: center; font-size: 10px; line-height: 1.4; }
    .fh-layout { padding-top: 20px; gap: 24px; }
    .fh-main-column { gap: 24px; }
    .fh-main-panel, .fh-panel { padding: 24px 15px 17px; }
    .fh-calendar-toolbar { flex-direction: column; gap: 16px; margin-bottom: 15px; }
    .fh-calendar-toolbar h2 { font-size: 31px; }
    .fh-calendar-toolbar p:not(.fh-kicker) { font-size: 11px; }
    .fh-view-switch { width: 100%; }
    .fh-view-switch button { min-height: 42px; font-size: 12px; }
    .fh-calendar-controls { flex-wrap: nowrap; gap: 5px; width: 100%; margin-bottom: 13px; }
    .fh-calendar-controls .fh-icon-button { flex: 0 0 37px; width: 37px; }
    .fh-calendar-controls input[type="date"] { flex: 1 1 0; width: 0; padding-inline: 5px; font-size: 12px; }
    .fh-calendar-controls .fh-text-button { padding-inline: 8px; font-size: 11px; }
    .fh-member-filters { gap: 6px; padding-bottom: 12px; }
    .fh-member-filter { min-height: 44px; padding: 5px 8px; }
    .fh-period-heading { font-size: 29px; }
    .fh-period-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid #dfdfd1; border-radius: 5px; }
    .fh-day, .fh-day:nth-child(7n), .fh-view-month .fh-day, .fh-view-week .fh-day { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; min-height: 66px; padding: 8px; border-bottom: 1px solid #e5e4d6; }
    .fh-day:last-child { border-bottom: 0; }
    .fh-day-empty { display: none; }
    .fh-day-number { display: flex; flex-direction: column; width: 42px; height: 44px; gap: 0; margin: 0; border-radius: 8px; font-size: 16px; }
    .fh-mobile-weekday { display: block; font-size: 9px; line-height: 1.2; font-weight: 400; text-transform: uppercase; }
    .fh-day-shifts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .fh-entry { min-height: 27px; padding: 5px 7px; font-size: 11px; }
    .fh-entry button { width: 32px; height: 32px; flex-basis: 32px; font-size: 20px; }
    .fh-calendar-actions { gap: 6px; }
    .fh-calendar-actions .fh-secondary-button { min-height: 44px; font-size: 10px; }
    .fh-view-day .fh-day, .fh-view-week .fh-day { grid-template-columns: minmax(0, 1fr); }
    .fh-view-day .fh-day-number, .fh-view-week .fh-day-number { width: auto; align-items: flex-start; height: 36px; font-size: 13px; }
    .fh-view-day .fh-day { min-height: 190px; }
    .fh-side-panel { grid-template-columns: minmax(0, 1fr); gap: 25px; }
    .fh-side-panel > .fh-panel { padding: 27px 18px 19px; transform: none; }
    .family-hub :is(input:not([type="checkbox"]):not([type="file"]), select, textarea) { font-size: 16px; }
    .family-hub .fh-calendar-controls input[type="date"] { font-size: 16px; }
    .fh-field { font-size: 12px; }
    .fh-event-form { grid-template-columns: minmax(0, 1fr); }
    .fh-message-meta, .fh-message-bottom { flex-wrap: wrap; }
    .fh-board-signoff { margin-top: 24px; font-size: 21px !important; }
    .family-hub-login { margin-top: 30px; padding: 30px 24px; }
    .family-hub-login #fh-login-form :is(input[type="text"], input[type="password"]) { font-size: 16px; }
}
@media (max-width: 380px) {
    .fh-calendar-controls { display: grid; grid-template-columns: 37px minmax(0, 1fr) 37px; }
    .fh-calendar-controls input[type="date"] { width: 100%; }
    .fh-calendar-controls .fh-text-button { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .family-hub *, .family-hub-login * { scroll-behavior: auto; transition: none; }
}
@media print {
    body:has(.family-hub) { background: white; }
    .family-hub { width: 100%; border: 0; padding: 0; background: white; box-shadow: none; }
    .fh-header { background: white; border: 1px solid #aaa; box-shadow: none; }
    .fh-header :is(h1, p), .fh-header h1 span { color: #333; text-shadow: none; }
    .fh-header-date { background: white; border: 1px solid #bbb; box-shadow: none; transform: none; }
    .fh-layout { display: block; }
    .fh-side-panel, .fh-event-panel, .fh-communication-panel, .fh-board-nav, .fh-calendar-actions, .fh-header-date::before, .fh-main-panel::before, .fh-main-panel::after, .family-hub::before { display: none; }
    .fh-main-panel { border: 1px solid #ccc; box-shadow: none; }
}

.fh-header-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.fh-push-toggle { max-width: 145px; min-height: 38px; padding: 6px 9px; line-height: 1.25; }
.fh-push-toggle:disabled { opacity: .72; cursor: not-allowed; }
.fh-email-toggle { max-width: 145px; min-height: 38px; padding: 6px 9px; line-height: 1.25; }
.fh-collapse-toggle { flex: 0 0 36px; width: 36px; min-width: 36px; min-height: 36px; padding: 0; font-size: 21px; font-weight: 500; line-height: 1; }
[data-family-hub] [hidden] { display: none !important; }
.fh-day-agenda-entry { --fh-person-color: var(--fh-dot-color, #42644c); }
.fh-day-agenda-entry.fh-dot-0 { --fh-person-color: #42644c; }
.fh-day-agenda-entry.fh-dot-1 { --fh-person-color: #417187; }
.fh-day-agenda-entry.fh-dot-2 { --fh-person-color: #a46e3c; }
.fh-day-agenda-entry.fh-dot-3 { --fh-person-color: #815b7a; }
.fh-day-agenda-entry.fh-dot-4 { --fh-person-color: #a44e43; }
.fh-account-greeting { margin: 0 0 3px; color: #45624b; font-size: 15px; font-weight: 700; }
.fh-logout { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 12px; border: 1px solid #738363; border-radius: 4px; background: #f7f4e8; color: #354b38; font-size: 12px; font-weight: 700; text-decoration: none; }
.fh-logout:hover { background: #e3eadc; }
.fh-family-alerts { position: relative; margin: 16px 0 18px; padding: 20px 22px; border: 1px solid #c7c2a5; border-radius: 5px; background: #fff8da; box-shadow: 0 4px 12px #23291816; }
.fh-family-alerts::before { position: absolute; top: -7px; left: 46%; width: 44px; height: 15px; background: #c7b16c88; content: ""; transform: rotate(-3deg); }
.fh-family-alerts .fh-panel-heading { margin: 0 0 10px; }
.fh-family-alerts .fh-panel-heading h2 { font-size: 24px; }
.fh-today-important-list, .fh-bulletin-list { display: grid; gap: 7px; }
.fh-today-important { display: flex; align-items: baseline; gap: 12px; padding: 9px 11px; border-left: 4px solid #b48b35; background: #fffdf0; color: #384734; font-size: 13px; }
.fh-today-important strong { flex: 0 0 auto; color: #715c25; }
.fh-family-alert { padding: 10px 12px; border: 1px solid #e1c66e; border-left: 5px solid #bd9635; border-radius: 4px; background: #fffdf0; }
.fh-alert-urgent { border-color: #d48b82; border-left-color: #a6443d; background: #fff0eb; }
.fh-alert-meta { display: flex; align-items: center; gap: 9px; color: #68705d; font-size: 11px; }
.fh-alert-meta strong { color: #785e22; }
.fh-alert-urgent .fh-alert-meta strong { color: #923c32; }
.fh-alert-meta button { margin-left: auto; }
.fh-family-alert h3 { margin: 4px 0; color: #344a36; font-size: 15px; }
.fh-family-alert p { margin: 0; color: #4e5948; font-size: 13px; white-space: pre-wrap; }
.fh-bulletin-task { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; padding-top: 7px; border-top: 1px solid #eee4c4; }
.fh-bulletin-assigned { color: #425640; font-size: 12px; }
.fh-bulletin-assigned strong { color: #344a36; }
.fh-bulletin-assigned.fh-unassigned { color: #727461; font-style: italic; }
.fh-bulletin-assignee { display: flex; align-items: center; gap: 7px; min-width: min(100%, 240px); color: #57614d; font-size: 11px; }
.fh-bulletin-assignee select { width: auto; max-width: 220px; min-width: 120px; min-height: 34px; padding: 5px 26px 5px 8px; font-size: 12px; }
.fh-schedule-tools { grid-column: 1 / -1; min-width: 0; }
.fh-schedule-tools > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border: 1px solid #d6d2bd; border-radius: 5px; background: #fff9e5; color: #354c3b; cursor: pointer; list-style: none; box-shadow: 0 3px 10px #23291812; }
.fh-schedule-tools > summary::-webkit-details-marker { display: none; }
.fh-schedule-tools > summary > span:first-child { display: grid; gap: 3px; min-width: 0; }
.fh-schedule-tools > summary strong { font: 700 21px/1.25 "FH Hand", cursive; }
.fh-schedule-tools > summary small { color: #68705d; font-size: 11px; }
.fh-schedule-chevron { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #b8bea5; border-radius: 50%; }
.fh-schedule-chevron::before { position: absolute; inset: 0; display: grid; place-items: center; color: #4c644b; content: "+"; font-size: 18px; line-height: 1; }
.fh-schedule-tools[open] > summary .fh-schedule-chevron::before { content: "−"; }
.fh-schedule-tool-panels { margin-top: 14px; }
.fh-schedule-tool-panels > .fh-panel { min-width: 0; }
.fh-bulletin-compose { margin-top: 12px; padding-top: 9px; border-top: 1px solid #e4dbb5; }
.fh-bulletin-compose summary { color: #36543e; font-size: 13px; font-weight: 700; cursor: pointer; }
.fh-bulletin-compose form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 10px; }
.fh-bulletin-compose form > :nth-child(3) { grid-column: 1 / -1; }
.fh-bulletin-compose form > :nth-child(4) { grid-column: 1 / -1; }
.fh-bulletin-compose form button { grid-column: 1 / -1; justify-self: start; }
.fh-pattern-phase { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(72px, .7fr)) 34px; align-items: end; gap: 7px; padding: 9px 0; border-bottom: 1px solid #e4dfc9; }
.fh-pattern-phase > strong { grid-column: 1 / 2; align-self: center; color: #384d3a; font-size: 12px; }
.fh-pattern-phase .fh-field:first-of-type { grid-column: 1 / -2; }
.fh-pattern-phase .fh-field { margin: 0; }
.fh-pattern-phase input, .fh-pattern-phase select { width: 100%; min-width: 0; }
.fh-pattern-phase .fh-icon-button { grid-column: 4; grid-row: 1 / span 2; }
.fh-pattern-details small { display: block; margin-top: 8px; }
.fh-pattern-details [data-action="add-phase"] { margin-top: 10px; }
.fh-cycle-mark { min-width: 52px; }
.fh-danger-button { width: 100%; min-height: 42px; margin-top: 12px; border: 1px solid #b4695d; border-radius: 4px; background: #fff0eb; color: #803d34; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.fh-danger-button:hover { background: #f9ded5; }
.fh-event-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fh-important-toggle { display: flex; align-items: center; gap: 8px; }
.fh-important-toggle input { width: 18px; height: 18px; }
.fh-entry-event > span { min-width: 0; }
.fh-entry-event button { width: 24px; min-width: 24px; padding: 0; border: 0; background: transparent; color: #365b42; font-size: 16px; cursor: pointer; }
.fh-entry-event button:hover { color: #9a4337; }
.fh-rebase-phase-field[hidden], .fh-pattern-details [hidden] { display: none !important; }
.fh-pattern-grid { grid-template-columns: minmax(0, 1fr); }
.fh-shopping-requests { margin-top: 15px; padding: 12px; border: 1px dashed #bcc19d; border-radius: 4px; background: #f1f0dc; }
.fh-shopping-requests h3 { margin: 0 0 7px; color: #465841; font: 700 20px/1.25 "FH Hand", cursive; }
.fh-shopping-requests ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fh-shopping-request { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 9px 0; border-top: 1px solid #dedfc9; }
.fh-shopping-request > span:first-child { display: grid; gap: 2px; min-width: 0; }
.fh-shopping-request strong { color: #344a36; font-size: 13px; }
.fh-shopping-request small { color: #68705d; font-size: 11px; overflow-wrap: anywhere; }
.fh-shopping-request-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.fh-shopping-request .fh-text-button { min-height: 34px; padding-inline: 8px; }
.fh-request-rejected { opacity: .75; }
.fh-shopping-form > small { grid-column: 1 / -1; color: #68705d; font-size: 11px; }
.fh-message.is-pinned { border-left: 5px solid #b48b35; background: #fff8da; }
.fh-message-flags, .fh-message-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.fh-message-flags { flex: 0 0 auto; }
.fh-message-flag { padding: 2px 6px; border: 1px solid #d4bb70; border-radius: 3px; color: #755b1e; font-size: 10px; font-weight: 700; }
.fh-status-read { color: #477050; }
.fh-message-actions .fh-text-button { min-height: 32px; padding-inline: 7px; font-size: 11px; }
.fh-message-actions .fh-icon-button { width: 32px; min-height: 32px; flex: 0 0 32px; color: #925044; }
.fh-message-bottom { align-items: flex-start; }
.fh-message-bottom time { flex: 0 0 auto; padding-top: 8px; }
.fh-pinned-messages { display: grid; gap: 7px; margin-top: 8px; }
.fh-alert-pinned { border-color: #d4bb70; border-left-color: #b48b35; background: #fffdf0; }
.fh-daily-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: 15px 0; padding: 17px 20px; border: 1px solid #c6cfac; border-left: 5px solid #52724f; border-radius: 5px; background: #f5f6e9; box-shadow: 0 3px 10px #23291812; }
.fh-daily-feature .fh-kicker { margin: 0 0 5px; color: #69704d; font-size: 10px; font-weight: 700; }
.fh-daily-feature-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fh-daily-feature h2 { margin: 0 0 6px; color: #344a36; font: 700 21px/1.25 "FH Hand", cursive; }
.fh-daily-feature blockquote { margin: 0; color: #364638; font: italic 16px/1.5 Georgia, serif; }
.fh-daily-passage { margin: 4px 0 0; color: #68705d; font-size: 12px; }
.fh-daily-feature > a { display: grid; gap: 4px; min-width: 145px; color: #3f6046; font-size: 12px; font-weight: 700; text-decoration: none; }
.fh-daily-feature > a:hover { color: #8a503b; }
.fh-daily-feature > a small { color: #6d735e; font-size: 10px; font-weight: 400; }
.fh-daily-unavailable { color: #58604e; }
.fh-daily-unavailable > div > p:last-child { margin: 0; font-size: 13px; }

.fh-shopping-panel .fh-panel-heading { align-items: center; padding-bottom: 13px; border-bottom: 1px solid #e3e2d4; }
.fh-shopping-panel .fh-panel-heading h2 { margin: 0; color: #354d40; font-size: 27px; line-height: 1.15; }
.fh-shopping-panel .fh-kicker { margin-bottom: 4px; color: #778067; }
.fh-shopping-form { border-color: #e0e1d4; background: #f4f5ec; box-shadow: inset 0 1px 0 #fff9; }
.fh-shopping-form .fh-field { color: #525b4b; font-size: 11px; }
.fh-shopping-form .fh-field input { border-color: #d7dbcf; background: #fffefa; }
.fh-shopping-form .fh-field input:focus { border-color: #67856c; box-shadow: 0 0 0 3px #67856c20; outline: none; }
.fh-shopping-form .fh-primary-button { min-height: 42px; border-radius: 5px; background: #45654f; box-shadow: 0 2px 0 #314b39; }
.fh-shopping-form .fh-primary-button:hover { background: #38583f; }
.fh-shopping-item:hover { background: #fffdf5; }
.fh-shopping-quantity { background: #edf0e5; color: #53634a; }
.fh-shopping-empty-mark { background: #eaf1e5; color: #45654f; }
.fh-shopping-requests { border: 1px solid #e4ddca; border-left: 3px solid #c28a45; border-radius: 5px; background: #fffdf6; }
.fh-shopping-requests h3 { color: #526044; font: 700 18px/1.25 "FH Sans", sans-serif; }
.fh-shopping-requests .fh-shopping-request:first-child { border-top-color: #e8e1d2; }
.fh-shopping-share { padding-top: 12px; border-top: 1px solid #e3e2d4; }
.fh-shopping-share .fh-secondary-button[data-method="whatsapp"] { border-color: #bfd3bc; background: #eef5eb; color: #3e6546; }
.fh-shopping-share .fh-secondary-button[data-method="email"] { border-color: #c7d2d9; background: #f0f4f5; color: #4b626c; }
.fh-shopping-panel .fh-clear-shopping { border-color: #ddc6bc; background: #fcf4ef; color: #855346; }
.fh-shopping-panel .fh-clear-shopping:hover:not(:disabled) { background: #f7e8e0; }

@media (max-width: 700px) {
    .fh-shopping-panel { padding: 17px 15px; }
    .fh-shopping-panel .fh-panel-heading { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
    .fh-shopping-panel .fh-panel-heading h2 { font-size: 24px; }
    .fh-shopping-heading-actions { width: 100%; justify-content: flex-end; gap: 7px; }
    .fh-shopping-form { padding: 11px; }
    .fh-shopping-form .fh-shopping-submit { min-height: 42px; }
    .fh-shopping-item { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding-inline: 4px; }
    .fh-shopping-item > .fh-shopping-check { gap: 9px; }
    .fh-shopping-item-actions { gap: 0; }
    .fh-shopping-item-actions .fh-icon-button { width: 34px; min-height: 38px; flex-basis: 34px; }
    .fh-shopping-share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fh-shopping-share > span { grid-column: 1 / -1; margin: 0 0 2px; }
}

@media (max-width: 380px) {
    .fh-shopping-panel { padding-inline: 12px; }
    .fh-shopping-heading-actions { gap: 5px; }
    .fh-shopping-count { gap: 6px; padding-inline: 9px; }
    .fh-clear-shopping { padding-inline: 8px; }
    .fh-shopping-form { padding: 9px; }
    .fh-shopping-form .fh-field input { padding-inline: 8px; font-size: 12px; }
    .fh-shopping-item-actions .fh-icon-button { width: 32px; flex-basis: 32px; }
}

@media (max-width: 700px) {
    .fh-header-tools { align-items: center; justify-content: flex-start; gap: 7px; }
    .fh-header-date { flex: 1 1 125px; }
    .fh-push-toggle { flex: 1 1 120px; max-width: none; }
    .fh-email-toggle { flex: 1 1 120px; max-width: none; }
    .fh-logout { flex: 0 0 auto; }
    .fh-calendar-toolbar-actions { justify-content: flex-start; }
    .fh-family-alerts { margin: 12px 0 14px; padding: 17px 14px; }
    .fh-family-alerts .fh-panel-heading h2 { font-size: 22px; }
    .fh-daily-feature { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 15px; }
    .fh-daily-feature > a { min-width: 0; }
    .fh-bulletin-compose form { grid-template-columns: minmax(0, 1fr); }
    .fh-bulletin-compose form > * { grid-column: 1 !important; }
    .fh-message-actions { justify-content: flex-start; }
    .fh-pattern-phase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; }
    .fh-pattern-phase > strong { grid-column: 1 / -1; }
    .fh-pattern-phase .fh-field:first-of-type { grid-column: 1 / -1; }
    .fh-pattern-phase .fh-icon-button { grid-column: 3; grid-row: 2 / span 2; }
    .fh-event-form-actions > button { flex: 1 1 100%; }
}

@media (max-width: 380px) {
    .fh-header-date { flex-basis: 100%; }
    .fh-push-toggle { flex-basis: auto; }
    .fh-email-toggle { flex-basis: auto; }
    .fh-schedule-tool-panels { grid-template-columns: minmax(0, 1fr); }
    .fh-bulletin-list { min-width: 0; grid-template-columns: minmax(0, 1fr); }
    .fh-family-alert { width: 100%; min-width: 0; }
    .fh-bulletin-task { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
    .fh-bulletin-assignee { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
    .fh-bulletin-assignee select { width: 100%; max-width: 100%; min-width: 0; }
}

.fh-month-overview { display: none; }

@media (max-width: 700px) {
    .fh-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid #dfdfd1; border-bottom: 0; }
    .fh-weekdays span { padding: 6px 1px; font-size: 9px; }
    .fh-view-month.fh-period-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border: 1px solid #dfdfd1; border-radius: 0 0 5px 5px; }
    .fh-view-month .fh-day,
    .fh-view-month .fh-day:nth-child(7n) { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 68px; padding: 3px 2px; border: 0; border-right: 1px solid #e5e4d6; border-bottom: 1px solid #e5e4d6; border-radius: 0; }
    .fh-view-month .fh-day:nth-child(7n) { border-right: 0; }
    .fh-view-month .fh-day-empty { display: block; }
    .fh-view-month .fh-day-number { align-self: flex-start; width: 22px; height: 20px; min-height: 20px; margin: 0; border-radius: 4px; font-size: 11px; }
    .fh-view-month .fh-day-shifts { display: none; }
    .fh-month-overview { display: grid; align-content: start; gap: 2px; min-width: 0; }
    .fh-month-shifts { display: grid; gap: 2px; min-width: 0; }
    .fh-month-shift-mark { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 15px; padding: 1px 0; border-left: 2px solid var(--fh-person-color, #48674f); border-radius: 2px; background: var(--fh-shift-paper, #eeefe3); color: var(--fh-shift-ink, #354833); font-size: 8px; line-height: 1; }
    .fh-month-shift-mark > span { overflow: hidden; color: inherit; font-size: 7px; font-weight: 800; text-overflow: clip; }
    .fh-month-shift-mark > strong { font-size: 8px; line-height: 1; }
    .fh-month-events { display: flex; align-items: center; gap: 2px; min-height: 10px; overflow: hidden; }
    .fh-month-event-mark { display: inline-grid; flex: 0 0 10px; width: 10px; height: 10px; place-items: center; border-radius: 50%; background: var(--fh-person-color, #48674f); color: #fff; font-size: 6px; font-weight: 700; line-height: 1; }
    .fh-month-event-more { color: #4d5744; font-size: 8px; font-weight: 700; line-height: 1; }
}

@media (max-width: 380px) {
    .fh-view-month .fh-day,
    .fh-view-month .fh-day:nth-child(7n) { min-height: 64px; padding-inline: 1px; }
    .fh-month-shift-mark { gap: 1px; min-height: 14px; font-size: 7px; }
    .fh-month-shift-mark > span { font-size: 6px; }
    .fh-month-shift-mark > strong { font-size: 7px; }
}

.fh-shopping-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.fh-shopping-drag-ghost { position: fixed; z-index: 99999; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 9px 8px; border: 1px solid #87987a; border-radius: 6px; background: #fffef8; box-shadow: 0 12px 30px #20342138; opacity: .98; pointer-events: none; }
.fh-shopping-drag-ghost .fh-shopping-drag-handle { cursor: grabbing; }
.fh-shopping-placeholder { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; margin: 4px 0; border: 1px dashed #71866a; border-radius: 5px; background: #edf3e9; color: #4f664a; font-size: 11px; font-weight: 650; }
.fh-shopping-placeholder > span { padding: 3px 9px; border-radius: 10px; background: #fffef8; }
.fh-shopping-item-actions .fh-shopping-drag-handle { width: 44px; min-height: 44px; flex: 0 0 44px; }

@media (max-width: 700px) {
    .fh-shopping-drag-handle { width: 44px; min-height: 44px; flex-basis: 44px; }
    .fh-shopping-drag-ghost { gap: 7px; padding-inline: 5px; }
}