/* Shopping List 2.0 — values from CDE shopping-list-2/Nakupni seznam 2.0 (inline styles).
   D-15: CDE greys/greens below 4.5:1 for small text use the nearest darker CDE shade
   (#5f736b, #4d635b, #087b53).
   Layout switches by CSS at 720 px instead of the prototype's JS switch; touch
   targets grow to 44 px under 720 px and on coarse pointers (D-19). */
.sl2-page { --sl2-tap: 34px; display: flex; flex-direction: column; gap: 22px; padding-top: 40px; padding-bottom: 90px; color: #183a32; }
.sl2-page button, .sl2-page input, .sl2-drawer button { font-family: inherit; }
.sl2-page [hidden], .sl2-drawer [hidden] { display: none !important; }
.sl2-eyebrow, .sl2-group__eyebrow, .sl2-form__more-title, .sl2-picker__title { margin: 0 0 3px; color: #087b53; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

/* header */
.sl2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 28px; }
.sl2-head h1 { margin: 0; color: #183a32; font-size: 44px; letter-spacing: -.035em; line-height: 1.1; }
.sl2-lead { max-width: 590px; margin: 9px 0 0; color: #63766f; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.sl2-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sl2-action { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: 1px solid #d4e1dc; border-radius: 9px; background: #fff; color: #356056; font: 700 12.5px/1.2 inherit; cursor: pointer; }
.sl2-action--clear { border-color: transparent; background: transparent; color: #8f5d58; }
.sl2-action:disabled { opacity: .45; cursor: default; }
.sl2-storage { margin: 0; padding: 10px 12px; border: 1px solid #f1d9b5; border-radius: 10px; background: #fff8ec; color: #7a4d12; font-size: 13.5px; line-height: 1.45; }

/* layout */
.sl2-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.sl2-page--empty .sl2-layout { grid-template-columns: minmax(0, 1fr); }
.sl2-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* guide (intro only; detailed guide is W8) */
.sl2-guide { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border: 1px solid #dae6e1; border-radius: 15px; background: #fff; }
.sl2-guide__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sl2-guide__copy { flex: 1 1 300px; min-width: 0; }
.sl2-guide h2 { margin: 0; color: #183a32; font-size: 18px; letter-spacing: -.01em; }
.sl2-guide__copy p { margin: 6px 0 0; color: #63766f; font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.sl2-guide__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.sl2-guide__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sl2-guide__steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 10px; padding: 12px; border: 1px solid #e9f0ed; border-radius: 12px; background: #f8fcfa; }
.sl2-guide__steps li > span { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #dff5e9; color: #078359; font-size: 14px; font-weight: 800; }
.sl2-guide__steps h3 { margin: 0; align-self: center; color: #1d3b33; font-size: 14px; line-height: 1.3; }
.sl2-guide__steps p { margin: 0; color: #61756d; font-size: 12.5px; line-height: 1.45; }
.sl2-guide-hidden { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border: 1px dashed #cfe0d9; border-radius: 12px; background: #fbfdfc; color: #5f736b; font-size: 13px; }
.sl2-guide-hidden button { min-height: 40px; padding: 6px 10px; border: 0; background: transparent; color: #087b53; font: 750 13px/1.2 inherit; cursor: pointer; }

/* buttons */
.sl2-btn-primary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 0; border-radius: 9px; background: #087b53; color: #fff; font: 750 13px/1.2 inherit; text-decoration: none; cursor: pointer; }
.sl2-btn-primary:hover { background: #075f41; color: #fff; }
.sl2-btn-primary--lg { min-height: 48px; padding: 0 20px; border-radius: 10px; font-size: 14px; box-shadow: 0 7px 15px rgba(5,122,79,.17); }
.sl2-btn-secondary { min-height: 40px; padding: 8px 14px; border: 1px solid #d4e1dc; border-radius: 9px; background: #fff; color: #356056; font: 700 12.5px/1.2 inherit; cursor: pointer; }
.sl2-btn-soft { min-height: 46px; padding: 8px 14px; border: 1px solid #cce0d8; border-radius: 9px; background: #f4faf7; color: #087a53; font: 750 13px/1.2 inherit; cursor: pointer; }
.sl2-btn-danger { min-height: 44px; padding: 8px 14px; border: 1px solid #a94a43; border-radius: 9px; background: #b14b43; color: #fff; font: 750 13px/1.2 inherit; cursor: pointer; }
.sl2-danger-link { margin-right: auto; min-height: 44px; padding: 8px 4px; border: 0; background: transparent; color: #a33e38; font: 750 13px/1.2 inherit; cursor: pointer; }
.sl2-link-btn { min-height: 40px; padding: 6px 10px; border: 0; background: transparent; color: #087b53; font: 750 14px/1.2 inherit; cursor: pointer; }
.sl2-close { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid #dae5e0; border-radius: 10px; background: #fff; color: #406058; font-size: 22px; cursor: pointer; }
.sl2-page :focus-visible, .sl2-drawer :focus-visible, .sl2-dialog :focus-visible { outline: 3px solid rgba(11,149,101,.38); outline-offset: 2px; }

/* composer (variant B) */
.sl2-composer__panel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid #dae6e1; border-radius: 15px; background: #fff; box-shadow: 0 5px 16px rgba(19,50,41,.05); }
.sl2-composer__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sl2-composer__top label { color: #1d3b33; font-size: 13px; font-weight: 750; }
.sl2-composer__done { display: none; }
.sl2-composer__row { display: flex; gap: 8px; }
.sl2-composer__row input { flex: 1; min-width: 0; min-height: 48px; box-sizing: border-box; padding: 0 14px; border: 1.5px solid #cfe0d9; border-radius: 10px; background: #fff; color: #183a32; font: inherit; font-size: 16px; }
.sl2-composer__row .sl2-btn-primary { min-height: 48px; padding: 0 18px; border-radius: 10px; font-size: 14px; }
.sl2-composer__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sl2-chip { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid #d4e1dc; border-radius: 999px; background: #f8fcfa; color: #356056; font: 700 12.5px/1.2 inherit; cursor: pointer; max-width: 100%; }
.sl2-chip b { overflow: hidden; color: #183a32; text-overflow: ellipsis; white-space: nowrap; }
.sl2-chip--plain { background: #fff; }
.sl2-composer__hint { color: #5f736b; font-size: 12px; }
.sl2-composer__last { margin: 0; color: #0a6e4b; font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }

/* empty */
.sl2-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(32px,6vw,64px) 22px; border: 1px solid #d8e8e0; border-radius: 19px; background: linear-gradient(135deg,#f5fcf8,#fff); text-align: center; }
.sl2-empty__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: #dff5e9; color: #078359; font-size: 28px; font-weight: 700; }
.sl2-empty h2 { margin: 0; color: #1b3d34; font-size: clamp(21px,3vw,28px); letter-spacing: -.02em; }
.sl2-empty h2:focus { outline: none; }
.sl2-empty > p { max-width: 540px; margin: 0; color: #61756d; font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.sl2-empty__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; color: #49685e; font-size: 12px; font-weight: 700; }
.sl2-empty__chips span { padding: 7px 10px; border-radius: 999px; background: #fff; box-shadow: 0 2px 7px rgba(16,63,47,.07); }
.sl2-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; margin-top: 6px; }
.sl2-empty__actions a { min-height: 44px; display: inline-flex; align-items: center; color: #087b53; font-size: 14px; font-weight: 750; }

/* groups */
.sl2-groups { display: flex; flex-direction: column; gap: 16px; }
.sl2-groups:empty { display: none; }
.sl2-group { overflow: hidden; border: 1px solid #dae6e1; border-radius: 15px; background: #fff; box-shadow: 0 5px 16px rgba(19,50,41,.035); }
.sl2-group__head { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; background: #f8fcfa; }
.sl2-group__eyebrow { margin-bottom: 2px; font-size: 10.5px; letter-spacing: .07em; }
.sl2-group__eyebrow--custom { color: #5f736b; }
.sl2-group h2 { margin: 0; color: #26443c; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.sl2-group__copy small { display: block; margin-top: 2px; color: #5f736b; font-size: 12px; line-height: 1.35; }
.sl2-group__total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.sl2-group__total strong { color: #1c4235; font-size: 14px; font-variant-numeric: tabular-nums; }
.sl2-group__total small { color: #5f736b; font-size: 11.5px; }
.sl2-group__items { margin: 0; padding: 0; list-style: none; }

/* store mark */
.sl2-mark { width: 38px; height: 38px; flex: none; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; border: 1px solid transparent; border-radius: 10px; background: #e1f4ea; color: #0d875d; font-size: 14px; font-weight: 800; }
.sl2-mark--logo { border-color: #e4ece8; background: #fff; }
.sl2-mark--logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sl2-mark--custom { border: 1.5px dashed #a9c2b8; background: #fff; color: #5f736b; }
.sl2-mark--none { background: #eef2f1; color: #5f736b; }
.sl2-mark--small { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; }

/* item row */
.sl2-item { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; column-gap: 8px; row-gap: 4px; padding: 6px 14px 10px 4px; border-top: 1px solid #edf2f0; background: #fff; }
.sl2-item.is-checked { background: #fbfcfc; }
.sl2-check { width: 44px; height: 44px; display: grid; place-items: center; position: relative; cursor: pointer; }
.sl2-item > .sl2-check { grid-row: span 2; }
.sl2-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sl2-check span { width: 24px; height: 24px; box-sizing: border-box; display: grid; place-items: center; border: 2px solid #9fbfb2; border-radius: 7px; background: #fff; color: #fff; font-size: 14px; font-weight: 800; pointer-events: none; }
.sl2-check input:checked + span { border-color: #0b9565; background: #0b9565; }
.sl2-check input:checked + span::after { content: '✓'; }
.sl2-check input:focus-visible + span { outline: 3px solid rgba(11,149,101,.38); outline-offset: 2px; }
.sl2-item__copy { min-width: 0; padding-top: 11px; }
.sl2-item h3 { margin: 0; color: #1d3b33; font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sl2-item.is-checked h3 { color: #5f736b; text-decoration: line-through; }
.sl2-item__kind { color: #5f736b; font-size: 12.5px; font-weight: 500; }
.sl2-item__meta, .sl2-item__note { margin: 3px 0 0; color: #5f736b; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.sl2-item__note { color: #5f736b; font-style: italic; }
.sl2-item__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sl2-chip-validity, .sl2-chip-loyalty { padding: 3px 7px; border-radius: 999px; background: #e8f6ef; color: #0a7b53; font-size: 10.5px; font-weight: 750; }
.sl2-chip-validity--expired { background: #fff1df; color: #9b5a18; }
.sl2-chip-validity--future { background: #eef4fb; color: #2f5d8a; }
.sl2-chip-loyalty { background: #f1f0fb; color: #5a4fa3; }
.sl2-item__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 11px; text-align: right; white-space: nowrap; }
.sl2-item__price strong { color: #0b7e56; font-size: 15.5px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sl2-item__price small { color: #5f736b; font-size: 11.5px; }
.sl2-item__price s { color: #5f736b; font-size: 11px; }
.sl2-item__price b { padding: 2px 5px; border-radius: 999px; background: #fff0f0; color: #c53b41; font-size: 10px; }
.sl2-item__noprice { color: #5f736b; font-size: 12.5px; }
.sl2-item__actions { grid-column: 2 / span 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 2px; }
.sl2-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid #cde2d7; border-radius: 9px; background: #f4faf7; }
.sl2-stepper button { width: var(--sl2-tap); height: var(--sl2-tap); display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #087e55; font-size: 17px; font-weight: 700; cursor: pointer; }
.sl2-stepper button:hover { background: #e3f3eb; }
.sl2-stepper span { min-width: 52px; padding: 0 4px; color: #245247; font-size: 12.5px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl2-item__edit { min-height: var(--sl2-tap); padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #087b53; font: 750 12.5px/1.2 inherit; cursor: pointer; }
.sl2-item__fill { min-height: var(--sl2-tap); padding: 0 4px; border: 0; background: transparent; color: #5f736b; font: 650 12px/1.2 inherit; text-decoration: underline; cursor: pointer; }
.sl2-item__leaflet { min-height: var(--sl2-tap); display: inline-flex; align-items: center; color: #087b53; font-size: 12.5px; font-weight: 750; }
.sl2-item__remove { margin-left: auto; width: var(--sl2-tap); height: var(--sl2-tap); display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #5f736b; font-size: 20px; cursor: pointer; }
.sl2-item__remove:hover { background: #f6eceb; color: #a33e38; }

/* aside */
.sl2-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 12px; }
.sl2-total { padding: 18px 20px; border-radius: 15px; background: #113f34; color: #d8f4e7; box-shadow: 0 10px 24px rgba(14,65,47,.16); }
.sl2-total > p:first-child { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; }
.sl2-total > strong { display: block; margin-top: 6px; color: #fff; font-size: 28px; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.sl2-total__note { margin: 8px 0 0; color: #b9e0cc; font-size: 12.5px; line-height: 1.45; }
.sl2-total__bar { margin-top: 16px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.sl2-total__bar div { width: 0; height: 100%; border-radius: 99px; background: #4fd29b; }
.sl2-total__done { margin: 7px 0 0; color: #d8f4e7; font-size: 12.5px; font-weight: 650; }
.sl2-aside__info { margin: 0; padding: 0 4px; color: #63766f; font-size: 12.5px; line-height: 1.5; }
.sl2-aside__local { margin: 0; padding: 10px 12px; border-radius: 10px; background: #edf8f3; color: #2d5d4f; font-size: 12.5px; line-height: 1.45; }

/* mobile bottom bar (shown under 720 px only) */
.sl2-bar { display: none; }

/* dialogs */
.sl2-dialog { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; overflow: auto; border: 0; border-radius: 16px; background: #fff; color: #24443a; box-shadow: 0 24px 70px rgba(16,48,39,.28); }
.sl2-dialog::backdrop { background: rgba(15,38,32,.46); }
.sl2-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid #edf2f0; background: #fff; }
.sl2-dialog__head h2 { margin: 0; color: #183a32; font-size: 20px; letter-spacing: -.015em; }
.sl2-dialog__head--stack { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 18px 12px; }
.sl2-dialog__title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sl2-dialog__title-row h2 { font-size: 19px; }
.sl2-dialog__body { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 16px 20px 18px; }
.sl2-dialog__foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #edf2f0; background: #fff; }
.sl2-dialog__foot > span { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: 100%; }
.sl2-form__added { margin: 0; padding: 9px 11px; border-radius: 9px; background: #edf8f3; color: #0a6e4b; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.sl2-field { display: flex; flex-direction: column; gap: 6px; }
.sl2-field > label, .sl2-field__label { color: #24443a; font-size: 13px; font-weight: 750; }
.sl2-req { color: #b14b43; }
.sl2-field > input, .sl2-input { min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1.5px solid #cfe0d9; border-radius: 10px; background: #fff; color: #183a32; font: inherit; font-size: 16px; }
#sl2-name { min-height: 48px; padding: 0 13px; }
.sl2-input--unit { max-width: 260px; }
.sl2-field input.is-invalid, .sl2-input.is-invalid, .sl2-qty.is-invalid, .sl2-price.is-invalid { border-color: #b14b43; }
.sl2-error { color: #b14b43; font-size: 12.5px; font-weight: 650; }
.sl2-help { color: #5f736b; font-size: 12.5px; line-height: 1.4; }
.sl2-help--muted { color: #5f736b; }
.sl2-form__more { display: flex; flex-direction: column; gap: 16px; padding: 14px; border: 1px solid #e4ede9; border-radius: 12px; background: #f6faf8; }
.sl2-form__more-title { margin: 0; color: #4d635b; }
.sl2-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sl2-qty { display: inline-flex; align-items: center; overflow: hidden; border: 1.5px solid #cfe0d9; border-radius: 10px; background: #fff; }
.sl2-qty button { width: 44px; height: 44px; border: 0; background: transparent; color: #087e55; font-size: 20px; font-weight: 700; cursor: pointer; }
.sl2-qty input { width: 62px; height: 44px; padding: 0; border: 0; background: transparent; color: #183a32; font: inherit; font-size: 16px; font-weight: 700; text-align: center; }
.sl2-units { display: flex; flex-wrap: wrap; gap: 6px; }
.sl2-unit { position: relative; display: inline-flex; }
.sl2-unit input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sl2-unit span { min-width: 44px; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border: 1.5px solid #d4e1dc; border-radius: 9px; background: #fff; color: #356056; font: 700 13px/1.2 inherit; pointer-events: none; }
.sl2-unit input:checked + span { border-color: #087b53; background: #087b53; color: #fff; }
.sl2-unit input:focus-visible + span { outline: 3px solid rgba(11,149,101,.38); outline-offset: 2px; }
.sl2-store-btn { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border: 1.5px solid #cfe0d9; border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.sl2-store-btn .sl2-mark { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
.sl2-store-btn__copy { flex: 1; min-width: 0; }
.sl2-store-btn__copy > span { display: block; color: #183a32; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.sl2-store-btn__copy small { display: block; color: #5f736b; font-size: 12px; }
.sl2-store-btn__change { color: #087b53; font-size: 13px; font-weight: 750; }
.sl2-price { max-width: 280px; display: flex; align-items: center; border: 1.5px solid #cfe0d9; border-radius: 10px; background: #fff; }
.sl2-price input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 0; background: transparent; color: #183a32; font: inherit; font-size: 16px; }
.sl2-price span { padding: 0 12px; color: #5f736b; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sl2-calc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 10px 12px; border: 1px dashed #b7d8c9; border-radius: 9px; background: #fff; font-size: 13px; }
.sl2-calc span { color: #4d635b; }
.sl2-calc strong { color: #0b7e56; font-variant-numeric: tabular-nums; }

/* picker */
.sl2-dialog--picker { width: min(460px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 48px)); overflow: hidden; }
.sl2-dialog--picker[open] { display: flex; flex-direction: column; }
.sl2-dialog--picker input[type="search"] { min-height: 46px; box-sizing: border-box; padding: 0 13px; border: 1.5px solid #cfe0d9; border-radius: 10px; background: #fff; color: #183a32; font: inherit; font-size: 16px; }
.sl2-picker__list { flex: 1; overflow: auto; padding: 8px 10px 16px; }
.sl2-picker__title { margin: 12px 8px 4px; color: #4d635b; }
.sl2-picker__option, .sl2-picker__create { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 11px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.sl2-picker__option:hover { background: #f4faf7; }
.sl2-picker__option.is-selected { background: #edf8f3; }
.sl2-picker__option .sl2-mark { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
.sl2-picker__name { flex: 1; min-width: 0; }
.sl2-picker__name b { display: block; color: #183a32; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.sl2-picker__name small { display: block; color: #5f736b; font-size: 12px; }
.sl2-picker__tick { color: #0b9565; font-size: 16px; font-weight: 800; }
.sl2-picker__create { min-height: 58px; margin: 4px 0 10px; padding: 8px 10px; border: 1.5px dashed #9fcab8; border-radius: 11px; background: #f4faf7; }
.sl2-picker__create > span:first-child { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1.5px dashed #9fcab8; border-radius: 9px; background: #fff; color: #087b53; font-size: 18px; font-weight: 700; }
.sl2-picker__create b { display: block; color: #183a32; font-size: 14.5px; font-weight: 750; overflow-wrap: anywhere; }
.sl2-picker__create small { display: block; margin-top: 2px; color: #5f736b; font-size: 12px; line-height: 1.4; }
.sl2-picker__empty { margin: 8px; color: #63766f; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

/* confirm + share */
.sl2-dialog--confirm { width: min(460px, calc(100% - 32px)); padding: 22px; }
.sl2-dialog--confirm h2 { margin: 0; color: #183a32; font-size: 20px; }
.sl2-dialog--confirm p { margin: 10px 0 0; color: #5f736b; font-size: 14px; line-height: 1.5; }
.sl2-confirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.sl2-share__lead { margin: 0; color: #355a4f; font-size: 14.5px; line-height: 1.5; }
.sl2-share__muted { margin: 0; color: #5f736b; font-size: 13px; line-height: 1.5; }
.sl2-share__ok { margin: 0; padding: 10px 12px; border-radius: 9px; background: #edf8f3; color: #0a6e4b; font-size: 14px; font-weight: 700; }
.sl2-share__row { display: flex; flex-wrap: wrap; gap: 8px; }
.sl2-share__row input { flex: 1 1 240px; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 9px 11px; border: 1px solid #cfe0d9; border-radius: 9px; background: #f9fcfb; color: #26453c; font: 13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.sl2-share__expiry { margin: 0; color: #2d5d4f; font-size: 14px; font-weight: 700; }

/* toast */
.sl2-toast { position: fixed; left: 50%; bottom: 24px; z-index: 130; transform: translateX(-50%); max-width: calc(100vw - 32px); box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; border-radius: 12px; background: #173932; color: #fff; font-size: 13.5px; box-shadow: 0 12px 30px rgba(10,40,30,.3); }
.sl2-toast span { overflow-wrap: anywhere; }
.sl2-toast button { min-height: 36px; padding: 0 8px; border: 0; background: transparent; color: #7fe0b4; font: 800 13.5px/1.2 inherit; cursor: pointer; }

/* drawer (CDE ř. 468–502) */
.sl2-drawer .shopping-list-drawer__header > div p { color: #087b53; }
.sl2-drawer .shopping-list-drawer__all { background: #087b53; }
.sl2-drawer { inset: 0 0 0 auto; margin: 0; max-width: 100vw; max-height: 100dvh; background: #fbfdfc; }
.sl2-dgroup { flex: none; } /* CDE prototype lets cards shrink and clip rows; keep them whole */
.sl2-drawer .shopping-list-drawer__header strong { display: block; }
.sl2-drawer__body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 20px; }
.sl2-dgroup { overflow: hidden; border: 1px solid #dae6e1; border-radius: 13px; background: #fff; }
.sl2-dgroup header { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: #f8fcfa; }
.sl2-dgroup header strong { min-width: 0; color: #26443c; font-size: 13.5px; overflow-wrap: anywhere; }
.sl2-dgroup header > span:last-child { margin-left: auto; color: #1c4235; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.sl2-ditem { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 4px; padding: 2px 12px 2px 0; border-top: 1px solid #edf2f0; }
.sl2-ditem .sl2-check span { width: 20px; height: 20px; border-radius: 6px; font-size: 12px; }
.sl2-ditem__copy { min-width: 0; }
.sl2-ditem__copy span { display: block; color: #1d3b33; font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.sl2-ditem.is-checked .sl2-ditem__copy span { color: #5f736b; text-decoration: line-through; }
.sl2-ditem__copy small { display: block; color: #5f736b; font-size: 12px; overflow-wrap: anywhere; }
.sl2-ditem__price { color: #0b7e56; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sl2-ditem__price.is-missing { color: #5f736b; }
.sl2-drawer__expired { margin: -6px 0 10px; color: #667a73; font-size: 12px; }
.sl2-drawer__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 16px; border: 1px dashed #cfe0d9; border-radius: 13px; background: #fff; color: #4d635b; font-size: 14px; line-height: 1.5; }
.sl2-drawer__empty p { margin: 0; }
.sl2-drawer .shopping-list-drawer__all { color: #fff; }

/* tablet header (C01: no overflow between 720 and 900 px) */
@media (max-width: 900px) and (min-width: 720px) {
  .sl2-head { flex-wrap: wrap; }
  .sl2-actions { justify-content: flex-start; }
}

/* mobile layout (CDE `mobile`, innerWidth < 720) */
@media (max-width: 719px) {
  .sl2-page { --sl2-tap: 44px; padding-top: 20px; padding-bottom: 112px; }
  .sl2-head { flex-direction: column; align-items: stretch; }
  .sl2-head h1 { font-size: 32px; }
  .sl2-actions { width: 100%; flex-wrap: nowrap; }
  .sl2-action { flex: 1 1 0; min-height: 44px; }
  .sl2-layout { grid-template-columns: minmax(0, 1fr); }
  .sl2-main > .sl2-guide, .sl2-main > .sl2-guide-hidden { order: 9; }
  .sl2-main > .sl2-composer { order: 1; }
  .sl2-main > .sl2-empty, .sl2-main > .sl2-groups { order: 2; }
  .sl2-guide { padding: 16px; }
  .sl2-guide__steps p { display: none; }
  .sl2-aside { position: static; }
  .sl2-composer { display: none; }
  .sl2-composer.is-open { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end; background: rgba(15,38,32,.32); }
  .sl2-composer.is-open .sl2-composer__panel { width: 100%; box-sizing: border-box; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; }
  .sl2-composer__done { display: inline-flex; align-items: center; min-height: 44px; }
  .sl2-composer__hint { display: none; }
  .sl2-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #dae6e1; background: #fff; box-shadow: 0 -10px 30px rgba(19,50,41,.08); }
  .sl2-page--composer-open .sl2-bar { display: none; }
  .sl2-bar__total { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .sl2-bar__total small { overflow: hidden; color: #667a73; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
  .sl2-bar__total strong { color: #173932; font-size: 19px; font-variant-numeric: tabular-nums; }
  .sl2-bar__add { flex: 1 1 auto; min-height: 50px; padding: 0 18px; border-radius: 12px; font-size: 15px; box-shadow: 0 7px 15px rgba(5,122,79,.2); }
  .sl2-page--has-items .sl2-bar__add { flex: 0 0 auto; }
  .sl2-toast { bottom: 92px; }
  .sl2-dialog { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .sl2-dialog--picker { width: 100%; height: 86dvh; }
  .sl2-dialog--confirm { width: calc(100% - 32px); margin: auto; border-radius: 16px; }
  .sl2-dialog__foot > span > button { flex: 1 1 auto; }
  .sl2-dialog__foot > button { flex: 1 1 auto; }
  .sl2-close { width: 44px; height: 44px; }
  .sl2-unit span { min-height: 44px; }
  .sl2-guide-hidden button, .sl2-guide__buttons button { min-height: 44px; }
  .sl2-chip { min-height: 44px; }
  .sl2-drawer .shopping-list-drawer__header button { width: 44px; height: 44px; }
  .sl2-drawer { inset: auto 0 0 0; width: 100%; height: auto; max-height: 82dvh; border: 0; border-radius: 18px 18px 0 0; }
}
@media (pointer: coarse) { .sl2-page, .sl2-drawer { --sl2-tap: 44px; } .sl2-drawer .shopping-list-drawer__header button { width: 44px; height: 44px; } .sl2-chip, .sl2-unit span, .sl2-guide-hidden button, .sl2-action, .sl2-guide__buttons button, .sl2-btn-secondary, .sl2-btn-soft, .sl2-shared-head__actions a { min-height: 44px; } .sl2-close { width: 44px; height: 44px; } }
@media (max-width: 380px) { .sl2-action { padding: 8px 6px; font-size: 12px; } .sl2-item { padding-right: 10px; } }

/* recipient header (CDE ř. 28–39, D-16) */
.sl2-shared-head { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border: 1px solid #cfe6db; border-radius: 15px; background: #f2faf6; }
.sl2-shared-head .sl2-eyebrow { margin: 0; }
.sl2-shared-head h1 { margin: 0; color: #183a32; font-size: 44px; letter-spacing: -.035em; line-height: 1.1; }
.sl2-shared-head__meta { margin: 0; color: #355a4f; font-size: 15px; line-height: 1.5; }
.sl2-shared-head__note { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border: 1px solid #d8eae1; border-radius: 10px; background: #fff; color: #355a4f; font-size: 13px; line-height: 1.45; }
.sl2-shared-head__note > span { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: #087b53; color: #fff; font-size: 12px; font-weight: 800; }
.sl2-shared-head__note p { margin: 0; }
.sl2-shared-head__note p + p { margin-top: 4px; }
.sl2-shared-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sl2-shared-head__actions .sl2-action { min-height: 42px; font-size: 13px; }
.sl2-shared-head__actions a { min-height: 42px; display: inline-flex; align-items: center; }
.sl2-shared-empty { margin: 0; padding: 24px; border: 1px dashed #cfe0d9; border-radius: 15px; background: #fff; color: #4d635b; text-align: center; }
.sl2-item__qtytext { color: #4d635b; font-size: 12.5px; font-weight: 650; }

/* share dialog (CDE ř. 403–453) + D-21/D-22 review */
.sl2-dialog__head--plain { position: static; border-bottom: 0; padding: 18px 20px 12px; }
.sl2-dialog__head--plain h2 { font-size: 21px; }
.sl2-dialog__body--share { gap: 14px; padding-top: 0; }
.sl2-share__box { padding: 14px; border-radius: 12px; background: #f6faf8; }
.sl2-share__box-title { margin: 0; color: #4d635b; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.sl2-share__box ul { margin: 8px 0 0; padding-left: 18px; color: #355a4f; font-size: 13.5px; line-height: 1.65; }
.sl2-share__points { display: grid; gap: 12px; }
.sl2-share__points > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.sl2-share__points > div > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #edf8f3; color: #087b53; font-weight: 800; }
.sl2-share__points b { color: #183a32; font-size: 14px; }
.sl2-share__points p { margin: 2px 0 0; color: #5f736b; font-size: 13px; line-height: 1.45; }
.sl2-share__checking { margin: 0; color: #4d635b; font-size: 13px; }
.sl2-share__error { margin: 0; }
.sl2-review { padding: 12px 14px; border: 1px solid #f1d9b5; border-radius: 10px; background: #fff8ec; color: #5b3b0f; font-size: 13.5px; line-height: 1.5; }
.sl2-review__title { margin: 0 0 4px; font-weight: 750; }
.sl2-review ul { margin: 0 0 8px; padding-left: 18px; }
.sl2-review ul:last-child, .sl2-review p:last-child { margin-bottom: 0; }
.sl2-review p { margin: 0 0 8px; overflow-wrap: anywhere; }
.sl2-review li { overflow-wrap: anywhere; }
.sl2-btn-soft { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.sl2-btn-soft { font-size: 13px; font-weight: 750; line-height: 1.2; } /* links do not get the UA button font the CDE shorthand relies on */
.sl2-btn-soft--sm { min-height: 40px; font-size: 12.5px; }
.sl2-share__row input { font-size: 13px; }

/* detailed guide (CDE ř. 81–95) */
.sl2-guide__detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px 28px; padding-top: 16px; border-top: 1px solid #e9f0ed; }
.sl2-guide__cat h3 { margin: 0 0 2px; color: #087b53; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.sl2-guide__topic { border-bottom: 1px solid #edf2f0; }
.sl2-guide__topic button { width: 100%; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border: 0; background: transparent; color: #1d3b33; font: 650 14px/1.35 inherit; text-align: left; cursor: pointer; }
.sl2-guide__topic button span:last-child { color: #087b53; font-size: 18px; line-height: 1; }
.sl2-guide__topic p { margin: 0 0 12px; color: #4d635b; font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }

/* print preview (CDE ř. 231–272) */
.sl2-page--printing > :not(.sl2-print):not(dialog):not(script):not(.sl2-toast) { display: none !important; }
.sl2-print { display: flex; flex-direction: column; gap: 18px; }
.sl2-print__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.sl2-print__bar h2 { margin: 0; color: #183a32; font-size: 26px; letter-spacing: -.02em; }
.sl2-print__bar h2:focus { outline: none; }
.sl2-print__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sl2-print__skip { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: #356056; font-size: 13px; font-weight: 650; cursor: pointer; }
.sl2-print__skip input { width: 18px; height: 18px; accent-color: #087b53; }
.sl2-sheet { width: 100%; max-width: 794px; box-sizing: border-box; margin: 0 auto; padding: 40px 48px; background: #fff; color: #111; box-shadow: 0 10px 40px rgba(0,0,0,.12); font-size: 13px; line-height: 1.35; }
.sl2-sheet__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid #111; }
.sl2-sheet__head h2 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.sl2-sheet__head p { margin: 4px 0 0; color: #444; font-size: 12px; }
.sl2-sheet__brand { margin: 0; color: #444; font-size: 11px; text-align: right; }
.sl2-sheet__group { margin-top: 18px; }
.sl2-sheet__group h3 { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding-bottom: 4px; border-bottom: 1px solid #888; font-size: 14px; break-after: avoid; }
.sl2-sheet__group h3 small { color: #555; font-size: 11px; font-weight: 500; }
.sl2-sheet__group h3 span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl2-sheet__row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 90px 100px; gap: 10px; align-items: start; padding: 6px 0; border-bottom: 1px solid #e2e2e2; break-inside: avoid; }
.sl2-sheet__box { width: 14px; height: 14px; box-sizing: border-box; margin-top: 1px; display: grid; place-items: center; border: 1.5px solid #222; border-radius: 3px; font-size: 11px; line-height: 1; }
.sl2-sheet__name { min-width: 0; overflow-wrap: anywhere; }
.sl2-sheet__row.is-checked .sl2-sheet__name b { text-decoration: line-through; }
.sl2-sheet__name div { margin-top: 2px; color: #555; font-size: 11px; }
.sl2-sheet__qty, .sl2-sheet__price { text-align: right; font-variant-numeric: tabular-nums; }
.sl2-sheet__empty { margin: 18px 0 0; color: #444; }
.sl2-sheet__foot { margin-top: 20px; padding-top: 10px; border-top: 2px solid #111; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.sl2-sheet__foot > span { font-size: 12.5px; }
.sl2-sheet__foot small { color: #555; }
.sl2-sheet__foot > b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sl2-sheet__foot p { flex-basis: 100%; margin: 6px 0 0; color: #555; font-size: 10.5px; }
@media (max-width: 719px) {
  .sl2-shared-head { padding: 16px; }
  .sl2-shared-head h1 { font-size: 32px; }
  .sl2-shared-head__actions .sl2-action, .sl2-shared-head__actions a { min-height: 44px; }
  .sl2-sheet { padding: 20px 16px; }
  .sl2-sheet__row { grid-template-columns: 18px minmax(0, 1fr) 56px 76px; }
  .sl2-print__controls button { flex: 1 1 auto; min-height: 44px; }
  .sl2-btn-soft--sm, .sl2-btn-secondary, .sl2-btn-soft { min-height: 44px; }
}

@media (pointer: coarse) { .sl2-shared-head__actions .sl2-action, .sl2-shared-head__actions a, .sl2-print__controls button { min-height: 44px; } }

/* A4: only the sheet is printed, for the button and for Ctrl+P alike. */
@media print {
  @page { size: A4; margin: 12mm; }
  body.sl2-print-mode * { visibility: hidden !important; }
  body.sl2-print-mode [data-print-sheet], body.sl2-print-mode [data-print-sheet] * { visibility: visible !important; }
  body.sl2-print-mode .sl2-print, body.sl2-print-mode .sl2-print[hidden] { display: block !important; }
  body.sl2-print-mode .sl2-print__bar { display: none !important; }
  body.sl2-print-mode .site-header, body.sl2-print-mode .site-footer, body.sl2-print-mode .skip-link, body.sl2-print-mode .shopping-list-fab, body.sl2-print-mode .shopping-list-drawer { display: none !important; }
  body.sl2-print-mode .site-main, body.sl2-print-mode .sl2-page { padding: 0 !important; margin: 0 !important; }
  body.sl2-print-mode [data-print-sheet] { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; font-size: 10.5pt; }
  body.sl2-print-mode .sl2-sheet__row { grid-template-columns: 5mm minmax(0, 1fr) 26mm 26mm; }
}