/* ==========================================================================
   deals.hmpsandbox.com, single stylesheet
   1. Tokens   2. Base & typography   3. Masthead   4. Shared components
   5. Flyer cards   6. Item cards   7. Footer   8. Narrow screens   9. Motion
   10. Grocery cart   11. Deals feed the cart   12. Color categories
   13. Shopping mode and the pantry hand-off   14. The color editor

   Design intent: a supermarket price board. Bright paper, near-black ink,
   one market-red accent, and every NUMBER (prices, counts, dates) set in a
   monospace tally voice so deals line up like shelf tags. Images are
   hotlinked store cutouts on white cards; the design treats them as product
   photos on a tiled wall, not as decoration.

   Theming: the four knobs below (--paper, --card, --ink, --accent) can be
   overridden from the deal_settings table (theme_paper, theme_card,
   theme_ink, theme_accent); the layout template injects them as a :root
   style block. Everything else is derived with color-mix.

   HOUSE RULES (for future agents): never use em dashes, in copy or in
   comments. No frameworks, no build step, no CDN assets.
   ========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */

:root {
    /* The four DB-themeable knobs (deal_settings can override these). */
    --paper:  #f4f2ec;   /* bright warm paper */
    --card:   #ffffff;   /* the white shelf tag */
    --ink:    #23211d;   /* near-black text */
    --accent: #b3261e;   /* market red: price tags, rules, links */

    /* Derived tones. */
    --paper-2:     color-mix(in srgb, var(--ink) 4%, var(--paper));
    --ink-2:       color-mix(in srgb, var(--ink) 80%, var(--paper));
    --ink-3:       color-mix(in srgb, var(--ink) 62%, var(--paper));
    --rule:        color-mix(in srgb, var(--ink) 16%, var(--paper));
    --rule-strong: color-mix(in srgb, var(--ink) 40%, var(--paper));
    --accent-wash: color-mix(in srgb, var(--accent) 8%, var(--card));

    /* Two voices: printed matter is grotesk, anything tallied is monospace. */
    --font-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
                 Arial, sans-serif;
    --font-tally: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Mono',
                  'Segoe UI Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --maxw: 1280px;
    --radius: 6px;
}

/* --- 2. Base & typography ------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    line-height: 1.08;
    margin: 0 0 var(--space-3);
    font-weight: 700;
    letter-spacing: -0.02em;
}

p { margin: 0 0 var(--space-4); }

a { color: inherit; }

img { max-width: 100%; display: block; }

/* Every tallied value: prices, counts, dates, category jump chips. */
.eyebrow, .item-price, .flyer-dates, .head-dates, .jump-count,
.board-total dt, .board-total dd, .freshness {
    font-family: var(--font-tally);
    letter-spacing: 0.02em;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -3rem;
    background: var(--ink);
    color: var(--paper);
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius) var(--radius);
    z-index: 10;
    transition: top 120ms ease;
}
.skip-link:focus { top: 0; }

/* --- 3. Masthead ----------------------------------------------------------- */

.masthead {
    border-bottom: 3px solid var(--ink);
    background: var(--card);
}

.masthead-bar {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.wordmark { text-decoration: none; }

.wordmark-name {
    display: block;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}

.wordmark-sub {
    display: block;
    color: var(--ink-3);
    font-size: 0.8rem;
}

.masthead-search {
    display: flex;
    gap: 0;
    flex: 0 1 24rem;
    min-width: 14rem;
}

.masthead-search input[type="search"] {
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--ink);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--paper);
    color: var(--ink);
}
.masthead-search input[type="search"]:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.masthead-search button {
    font: inherit;
    font-weight: 700;
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--ink);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
}
.masthead-search button:hover { background: var(--accent); border-color: var(--accent); }

/* --- 4. Shared components -------------------------------------------------- */

.site-main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-7);
}

.page-intro { margin-bottom: var(--space-5); }

.eyebrow {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin: 0 0 var(--space-2);
    font-weight: 600;
}

.page-intro h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }

.head-sub { color: var(--ink-3); font-weight: 500; }

.lede { color: var(--ink-2); max-width: 46rem; }

.freshness { font-size: 0.85rem; color: var(--ink-3); }

.hint-note { font-size: 0.82rem; color: var(--ink-3); margin-top: calc(-1 * var(--space-2)); }

.crumb { color: var(--accent); text-decoration: none; }
.crumb:hover { text-decoration: underline; }

.text-link { color: var(--accent); }

.category-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
}

.category-jump a {
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--card);
}
.category-jump a:hover { border-color: var(--accent); color: var(--accent); }

.jump-count { color: var(--ink-3); font-size: 0.75rem; }

.category-block { margin-bottom: var(--space-7); }

.category-head {
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 3px solid var(--ink);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}
.category-head a { text-decoration: none; }
.category-head a:hover { color: var(--accent); }

.head-dates { font-size: 0.8rem; color: var(--ink-3); font-weight: 400; }

/* --- 5. Flyer cards --------------------------------------------------------- */

.flyer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-4);
}

.flyer-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 120ms ease, transform 120ms ease;
}
.flyer-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.flyer-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-2);
}

.flyer-meta { padding: var(--space-3); display: grid; gap: 2px; }

.flyer-merchant { font-weight: 700; }

.flyer-name { color: var(--ink-2); font-size: 0.9rem; }

.flyer-dates { color: var(--ink-3); font-size: 0.75rem; }

/* --- 6. Item cards ---------------------------------------------------------- */

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: var(--space-3);
}

.item-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 120ms ease, transform 120ms ease;
}

/* The whole card is one link into Flipp's viewer, opened at this item. */
.item-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.item-card:has(.item-link:hover) { border-color: var(--accent); transform: translateY(-2px); }

.item-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
}

.item-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    padding: var(--space-2);
    background: #fff;   /* cutouts are shot on white; keep it white in any theme */
}
/* Hotlinked images that 404 get .is-broken from main.js; the card falls
   back to text (and a flyer card to its meta block). */
img.is-broken { display: none; }

.item-body {
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: 1px solid var(--rule);
    display: grid;
    gap: 2px;
    margin-top: auto;
}

.item-price {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
}

.item-name { margin: 0; font-size: 0.9rem; line-height: 1.3; }

.item-brand, .item-merchant { margin: 0; color: var(--ink-3); font-size: 0.78rem; }

/* Says where the click goes. Subtle until you hover, so a wall of cards
   stays readable, but always present for touch and for screen readers. */
.item-cta {
    margin-top: var(--space-1);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-3);
}
.item-cta::after { content: " \2192"; }
.item-link:hover .item-cta, .item-link:focus-visible .item-cta { color: var(--accent); }

/* --- 7. Footer --------------------------------------------------------------- */

.site-footer {
    border-top: 3px solid var(--ink);
    background: var(--card);
    padding: var(--space-5);
}

.board-total {
    max-width: var(--maxw);
    margin: 0 auto var(--space-3);
    display: flex;
    gap: var(--space-6);
}

.board-total div { display: flex; gap: var(--space-2); align-items: baseline; }

.board-total dt {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}

.board-total dd { margin: 0; font-weight: 700; }

.footer-note {
    max-width: var(--maxw);
    margin: 0 auto;
    color: var(--ink-3);
    font-size: 0.8rem;
}

/* --- 8. Narrow screens ------------------------------------------------------- */

@media (max-width: 640px) {
    .site-main { padding: var(--space-5) var(--space-4) var(--space-6); }

    .masthead-bar { padding: var(--space-3) var(--space-4); }

    .masthead-search { flex-basis: 100%; }

    .flyer-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }

    .item-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }

    .category-head { flex-direction: column; gap: 0; }
}

/* --- 9. Motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --- 10. Grocery cart --------------------------------------------------------- */

/* Sections that main.js shows and hides carry the hidden attribute; make it
   win over their own display rules. */
.cart-badge[hidden], .cart-suggest[hidden], .cart-empty[hidden], .cart-foot[hidden] {
    display: none !important;
}

/* The masthead cart: an icon that is also the list's badge. */
.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
}
.cart-link:hover { border-color: var(--accent); color: var(--accent); }

.cart-badge {
    position: absolute;
    top: -0.55rem;
    right: -0.55rem;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-tally);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3rem;
    text-align: center;
}

/* Feedback boxes: the added confirmation, errors, and the undo notice. */
.notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}
.notice p { margin: 0; }
.notice-error { border-color: var(--accent); color: var(--accent); }

.cart-undo-form button {
    font: inherit;
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
}
.cart-undo-form button:hover { background: var(--accent); border-color: var(--accent); }

/* The add box: name, quantity, note, one Add button. */
.cart-add-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.cart-add-form input[type="text"],
.cart-add-form input[type="number"] {
    font: inherit;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
}
.cart-add-form input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

#cart-name { flex: 1 1 14rem; min-width: 10rem; }
#cart-quantity { width: 4.6rem; font-family: var(--font-tally); }
#cart-note { flex: 1 1 10rem; min-width: 8rem; }

.cart-add-form button {
    font: inherit;
    font-weight: 700;
    padding: var(--space-2) var(--space-5);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
}
.cart-add-form button:hover { background: var(--accent); border-color: var(--accent); }

/* Quick adds drawn from the item memory. */
.cart-suggest { margin-bottom: var(--space-6); }

.cart-suggest-group { margin-bottom: var(--space-3); }

.cart-suggest-head {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    margin: 0 0 var(--space-2);
}

.cart-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.cart-chip-form { display: inline; }

.cart-chip {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
}
.cart-chip:hover { border-color: var(--accent); color: var(--accent); }

/* The list itself. */
.cart-list-head {
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 3px solid var(--ink);
    padding-bottom: var(--space-2);
    margin-bottom: 0;
}

.cart-list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--rule);
}

.cart-item.is-dragging {
    background: var(--accent-wash);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
}

@keyframes cart-pop {
    0%   { transform: scale(0.97); opacity: 0.4; }
    60%  { transform: scale(1.01); }
    100% { transform: none; opacity: 1; }
}
.cart-item.is-new { animation: cart-pop 240ms ease-out; }

.cart-handle {
    border: 0;
    background: none;
    color: var(--ink-3);
    padding: var(--space-2);
    border-radius: var(--radius);
    cursor: grab;
    touch-action: none;
}
.cart-handle:hover { color: var(--ink); background: var(--paper-2); }

.cart-item-body { flex: 1; min-width: 0; }

.cart-item-name {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cart-item-note {
    display: block;
    font-size: 0.82rem;
    color: var(--ink-3);
}

.cart-qty {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.cart-qty button {
    font: inherit;
    font-weight: 700;
    width: 1.7rem;
    height: 1.7rem;
    line-height: 1;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
}
.cart-qty button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cart-qty button:disabled { opacity: 0.35; cursor: default; }

.cart-qty-n {
    min-width: 1.6rem;
    text-align: center;
    font-family: var(--font-tally);
    font-weight: 700;
}
.cart-qty-n.is-one { color: var(--ink-3); font-weight: 400; }

.cart-remove button {
    font: inherit;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
}
.cart-remove button:hover { color: var(--accent); background: var(--accent-wash); }

.cart-empty { color: var(--ink-3); padding: var(--space-5) 0; }

.cart-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.cart-foot .hint-note { margin: 0; }

.cart-clear {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
}
.cart-clear:hover { border-color: var(--accent); color: var(--accent); }

/* The undo toast main.js floats over the page. */
.cart-toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: min(92vw, 30rem);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    z-index: 20;
}

.cart-toast button {
    font: inherit;
    font-weight: 700;
    border: 0;
    background: none;
    color: var(--paper);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

@media (max-width: 640px) {
    /* Keep the wordmark and the cart on the top row; search drops below. */
    .masthead-search { order: 3; }

    /* The note field gets its own row in the add box. */
    .cart-add-form #cart-note { flex-basis: 100%; }
}

/* --- 11. Deals feed the cart ------------------------------------------------- */

/* The "+ Add" button floating on every deal card. The card is one big link
   into Flipp's viewer; this sits on top of it so a tap adds to the list
   without leaving the page. */
.item-card { position: relative; }

.deal-add-form {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 2;
}

.deal-add {
    font-family: var(--font-tally);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: var(--space-1) var(--space-2);
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.deal-add:hover { border-color: var(--accent); color: var(--accent); }

.deal-add.is-added {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.deal-add:disabled { opacity: 0.6; cursor: default; }

@keyframes deal-add-pop {
    50% { transform: scale(1.15); }
}
.deal-add.is-popping { animation: deal-add-pop 200ms ease-out; }

/* The deal badge on a cart line: sale price and merchant, linking back to
   the deal. Dims to "deal ended" once the flyer window has passed. */
.cart-deal {
    display: inline-block;
    justify-self: start;
    width: fit-content;
    font-family: var(--font-tally);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 var(--space-2);
    margin-top: 2px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    text-decoration: none;
}
a.cart-deal:hover { background: var(--accent-wash); }

.cart-deal.is-ended {
    border-color: var(--rule-strong);
    color: var(--ink-3);
    font-weight: 400;
}

/* --- 12. Color categories ----------------------------------------------------- */

/* The dot IS the category: gray until assigned, tap to change. --cat is set
   inline per dot from the category's stored color. */
.cart-dot {
    --cat: #9e9e9e;   /* Uncategorized gray */
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cat);
    border: 2px solid color-mix(in srgb, var(--cat) 72%, var(--ink));
}

summary.cart-dot { cursor: pointer; list-style: none; }
summary.cart-dot::-webkit-details-marker { display: none; }
summary.cart-dot:hover { transform: scale(1.12); }

.cart-color { position: relative; }

.cart-palette {
    position: absolute;
    top: 1.7rem;
    left: -0.5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.cart-color-form { display: inline-flex; }

button.cart-dot { padding: 0; cursor: pointer; }
button.cart-dot:hover { transform: scale(1.15); }

.cart-dot.is-none {
    background: transparent;
    border: 2px dashed var(--rule-strong);
}

.cart-dot-chip {
    width: 0.7rem;
    height: 0.7rem;
    border-width: 1px;
    margin: 0 0.35rem 0 0.15rem;
    vertical-align: -1px;
}

/* The "My order" / "By color" toggle in the list header. */
.cart-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.cart-sort {
    display: inline-flex;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
}

.cart-sort-opt {
    padding: var(--space-1) var(--space-3);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: none;
    color: var(--ink-3);
    background: var(--card);
}
.cart-sort-opt.is-on { background: var(--ink); color: var(--paper); }
.cart-sort-opt:hover:not(.is-on) { color: var(--accent); }

/* "By color": lines grouped under colored headers. Dragging a header
   reorders the categories, your walk of the store. */
.cart-group { list-style: none; }

.cart-group-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: var(--space-5) 0 0;
    padding: var(--space-2) var(--space-2) var(--space-1);
    border-bottom: 2px solid var(--cat, var(--rule-strong));
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.cart-group[data-category-id="0"] .cart-group-head { cursor: default; }

.cart-group-head .cart-dot { width: 0.8rem; height: 0.8rem; }

.cart-group-count {
    color: var(--ink-3);
    font-family: var(--font-tally);
    font-size: 0.75rem;
}

.cart-group-items { list-style: none; margin: 0; padding: 0; }

.cart-group.is-dragging {
    background: var(--accent-wash);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
}

/* Manual handles only make sense in "My order". */
.cart-list[data-mode="color"] .cart-handle { display: none; }

/* The pantry link sits beside the cart in the masthead: same button shape,
   quieter, because the cart is the one you reach for mid-aisle. */
.pantry-link { background: var(--card); }

/* --- 13. Shopping mode and the pantry hand-off -------------------------------- */

.cart-finish[hidden], .cart-have-hint[hidden] { display: none !important; }

/* The got-it tick. Quiet until ticked, then it is the most definite thing
   on the row. */
.cart-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    flex-shrink: 0;
    border: 2px solid var(--rule-strong);
    border-radius: 5px;
    background: var(--card);
    color: transparent;
    cursor: pointer;
}
.cart-tick:hover { border-color: var(--accent); color: var(--rule-strong); }
.cart-tick.is-on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* A line that has been picked up: struck through and stepped back, but
   still perfectly readable, because you may want to un-tick it. */
.cart-item.is-checked .cart-item-name {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    color: var(--ink-3);
}
.cart-item.is-checked .cart-item-note,
.cart-item.is-checked .cart-deal { opacity: 0.55; }
.cart-item.is-checked .cart-handle { opacity: 0.4; }

/* The finish bar: one deliberate button, one quiet way out. */
.cart-finish {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
}

.cart-finish-count {
    margin: 0 auto 0 0;
    font-family: var(--font-tally);
    font-size: 0.85rem;
    color: var(--ink-3);
}

.cart-topantry {
    font: inherit;
    font-weight: 700;
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
.cart-topantry:hover { background: var(--card); color: var(--accent); }

.cart-clearchecked {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
}
.cart-clearchecked:hover { border-color: var(--accent); color: var(--accent); }

/* The duplicate hint under the add box, and its no-JS twin in the notice. */
.cart-have-hint {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: calc(-1 * var(--space-3)) 0 0;
    font-size: 0.85rem;
    color: var(--ink-3);
}

.cart-have-dismiss {
    font: inherit;
    border: 0;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
    padding: 0 var(--space-1);
}
.cart-have-dismiss:hover { color: var(--accent); }

.cart-have-note { color: var(--ink-3); }

/* "in pantry" on a deal card: a whisper, not an alert. */
.item-pantry {
    justify-self: start;
    width: fit-content;
    margin-top: 2px;
    font-family: var(--font-tally);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    padding: 0 var(--space-2);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    color: var(--ink-3);
}

/* --- 14. The color editor ------------------------------------------------------ */

/* Customization lives on the page, never in the admin panel (design
   document Principle 4). Tucked under the list as a closed panel: reach for
   it from any item's palette, or open it here. */
.cat-editor {
    margin: var(--space-5) 0 var(--space-4);
    border: 2px dashed var(--rule-strong);
    border-radius: var(--radius);
    background: var(--paper-2);
}
.cat-editor[open] { border-style: solid; background: var(--card); }

.cat-editor-summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    list-style: none;
}
.cat-editor-summary::-webkit-details-marker { display: none; }
.cat-editor-summary::before {
    content: '\25B8';           /* a small triangle, turned when open */
    color: var(--ink-3);
    transition: transform 0.12s ease;
}
.cat-editor[open] .cat-editor-summary::before { transform: rotate(90deg); }

.cat-editor-title {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cat-editor-sub { font-size: 0.82rem; color: var(--ink-3); }
.cat-editor-summary:hover .cat-editor-title { color: var(--accent); }

.cat-editor-body {
    padding: 0 var(--space-3) var(--space-3);
    border-top: 1px solid var(--rule);
}
.cat-editor-body .hint-note { margin: var(--space-3) 0; }

.cat-rows { list-style: none; margin: 0; padding: 0; }

.cat-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--rule);
}

.cat-save-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
}

/* The native color input, cut down to a swatch the size of a category dot. */
.cat-swatch {
    inline-size: 2rem;
    block-size: 2rem;
    flex-shrink: 0;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: none;
    cursor: pointer;
}
.cat-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.cat-swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
.cat-swatch::-moz-color-swatch { border: none; border-radius: 50%; }

.cat-name {
    flex: 1 1 auto;
    min-width: 6rem;
    padding: var(--space-1) var(--space-2);
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--card);
    border: 2px solid var(--rule-strong);
    border-radius: var(--radius);
}
.cat-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* How many things wear this color, list plus pantry. */
.cat-wear {
    font-family: var(--font-tally);
    font-size: 0.75rem;
    color: var(--ink-3);
    min-width: 1.5rem;
    text-align: right;
}

.cat-save, .cat-add, .cat-reset, .cat-nudge, .cat-delete {
    font: inherit;
    cursor: pointer;
    background: var(--card);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
}

.cat-save, .cat-add {
    padding: var(--space-1) var(--space-3);
    font-size: 0.82rem;
    font-weight: 700;
}
.cat-save:hover, .cat-add:hover { background: var(--ink); color: var(--paper); }

.cat-nudge, .cat-delete {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    padding: 0;
    font-size: 0.7rem;
    border-color: var(--rule-strong);
    color: var(--ink-3);
}
.cat-nudge:hover:not(:disabled), .cat-delete:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.cat-nudge:disabled { opacity: 0.3; cursor: default; }

.cat-add-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.cat-editor-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
}
.cat-editor-foot .hint-note { margin: 0; }

.cat-reset {
    padding: var(--space-1) var(--space-3);
    font-size: 0.78rem;
    border-color: var(--rule-strong);
    color: var(--ink-3);
}
.cat-reset:hover { border-color: var(--accent); color: var(--accent); }

/* The way in, from any item's palette. */
.cart-palette-edit {
    font-size: 0.72rem;
    white-space: nowrap;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px dotted var(--rule-strong);
}
.cart-palette-edit:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 32rem) {
    .cat-row { flex-wrap: wrap; }
    .cat-save-form { flex: 1 1 100%; }

    /* The palette grew a text link; let it wrap rather than run off a phone. */
    .cart-palette { flex-wrap: wrap; max-width: 74vw; border-radius: var(--radius); }
}