/* Lifted from the <style> block of mocks/admin/inventory/products.html.
   Left behind on purpose: the :root token block, .ti, .img-ph and .content.
   The page's own 20px margins are NOT left behind: the shell's .main-scroll has no
   padding of its own, and the screens that look right carry the 20px inside their
   strips. Dropping it here is what put this page against the edge of the window.
   --shadow is mapped onto --elev-2, which is the token admin.css carries. */


.prd-view-toggle{display:flex;gap:4px;margin-inline-start:auto;}
.prd-view-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:6px;background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);}
.prd-view-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}

.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
/* A column, not a block. The bodies are no longer all the same height - a card
   with a discount badge and one without differ - and on a stretched grid item a
   plain block leaves the empty strip UNDER the buttons, inside the border. */
.product-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:.2s;position:relative;display:flex;flex-direction:column;}
.product-card:hover{box-shadow:var(--elev-2);border-color:var(--primary-l);transform:translateY(-2px);}
.product-card .card-img{height:150px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:48px;position:relative;flex-shrink:0;}
.product-card .card-img img{width:100%;height:100%;object-fit:cover;}

/* The badges stack in a corner rather than each carrying its own coordinates,
   so a second one cannot land on top of the first. */
.product-card .card-flags{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.product-card .card-badge{background:var(--success);color:#fff;font-size:10px;padding:2px 7px;border-radius:20px;}
.product-card .card-badge.inactive{background:var(--muted);}
.product-card .card-badge.cb-draft{background:var(--slate);}
.product-card .card-badge.cb-review{background:var(--warning);}

/* A discount is the exception, so it is read from across the grid rather than
   found by reading the card. It names the percentage only: which price it cuts
   is not settled on the product, so the card must not claim one. */
.product-card .card-off{background:var(--danger);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;}

/* The spacing carries the grouping: the brand and the name are one identity and
   sit together, and a real gap opens before the figures, which are a different
   kind of thing. 1.3 was tight for Arabic - a wrapped name clipped its descenders. */
.product-card .card-body{padding:12px 14px;flex:1;}
.product-card .card-brand{font-size:10px;color:var(--muted);margin-bottom:2px;line-height:1.4;}
.product-card .card-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.45;}
.product-card .card-sku{font-size:11px;color:var(--muted);line-height:1.4;}
.product-card .card-prices{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}

/* Stock left the SKU line. They were one grey sentence at one size and weight,
   and the SKU is a fixed handle you search by while this is the number that moves.
   It wears the same colours as the stock column in the list view. */
.product-card .card-stock{margin-top:8px;font-size:11px;color:var(--muted);line-height:1.4;}
.product-card .card-stock .prd-stock{font-size:12px;}

.price-tag{font-size:12px;font-weight:700;padding:2px 7px;border-radius:6px;}
.price-wholesale{background:var(--success-l);color:var(--success);}
.product-card .card-actions{display:flex;gap:4px;padding:8px 10px;border-top:1px solid var(--border);background:var(--bg);}


/* The low-stock switch sits in the filter row with everything else, so it needs to
   line up with the selects rather than sit on a line of its own. */
.prd-low-only{display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}

/* The card's own buttons, lifted from the mock along with .card-actions above them.
   The archive one is red because it retires the product - it never deletes it. */
.btn-edit-card{background:var(--primary-ll);color:var(--primary);}
.btn-del-card{background:var(--danger-l);color:var(--danger);}

/* ── Lifted from the mock and missed the first time ───────────────────────────
   The buttons on a card had no rule at all, so they fell back to the browser's
   own: a 2px outset border, no radius, 59px wide instead of filling the row.
   That is the difference Peter spotted between the two screenshots. */
.product-card .card-actions button{flex:1;padding:5px;border:none;border-radius:6px;font-size:12px;cursor:pointer;font-weight:600;}

/* The rest of the status pills. Only the active one was carried over, so a draft
   or a hidden product wore no colour. */
.card-badge.cb-draft{background:#F1F5F9;color:#475569}
.card-badge.cb-review{background:#FEF3C7;color:#92400E}
.card-badge.cb-hidden{background:#E2E8F0;color:#334155}


/* The brands and tags tabs, same omission. */
.prd-tab-actions{display:flex;justify-content:flex-end;margin-bottom:14px;}

/* ─── Brands ──────────────────────────────────────────────────────────
   A brand is a filter over the catalogue, not a page of its own - so the whole
   card is the way into its products, and the two management buttons that used
   to take the bottom third of every card are a pair of quiet icons in the
   corner. With twenty-three brands that is forty-six shouting buttons turned
   into forty-six that wait to be looked for.

   The meter is the same one the category tree uses, against the busiest brand,
   so the two screens answer "how much is here" the same way. */
.brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}

.brand-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:.2s;}
.brand-card:hover{box-shadow:var(--shadow);border-color:var(--primary-l);}
.brand-card.is-off{background:var(--bg);}
.brand-card.is-off .brand-logo,.brand-card.is-off .brand-name{opacity:.55;}

.brand-open{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:20px 16px 16px;background:none;border:0;border-radius:var(--radius-lg);cursor:pointer;font-family:inherit;}
.brand-logo{width:70px;height:70px;border-radius:50%;background:var(--bg);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:30px;overflow:hidden;margin-bottom:10px;}
.brand-logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.brand-name{font-weight:700;font-size:14px;color:var(--text);}
.brand-where{font-size:12px;color:var(--muted);margin-top:3px;min-height:17px;}

/* The count is the card's one figure, so it is set like one. */
.brand-tally{display:flex;align-items:baseline;gap:5px;margin-top:12px;}
.brand-tally b{font-size:20px;font-weight:800;color:var(--primary);line-height:1;font-variant-numeric:tabular-nums;}
.brand-tally span{font-size:11px;font-weight:600;color:var(--muted);}
.brand-share{width:56px;margin-top:8px;}
.brand-share>span{background:var(--primary);}

.brand-flag{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;color:var(--warning);background:var(--warning-l);padding:2px 7px;border-radius:10px;}

/* Present but quiet, and always in the tab order - hiding them until hover
   would put deleting a brand behind a mouse. */
.brand-tools{position:absolute;top:8px;left:8px;display:flex;gap:2px;opacity:.35;transition:opacity .15s;}
.brand-card:hover .brand-tools,.brand-tools:focus-within{opacity:1;}
.icon-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;transition:.15s;}
.icon-btn:hover{background:var(--slate-ll);color:var(--text);}
.icon-btn.is-danger:hover{background:var(--danger-l);color:var(--danger);}

.brand-card-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:180px;border:2px dashed var(--border);background:transparent;cursor:pointer;font-family:inherit;}
.brand-card-add:hover{border-color:var(--primary-l);background:var(--primary-ll);}
.brand-card-add-plus{font-size:28px;color:var(--muted);line-height:1;}
.brand-card-add-text{font-size:13px;color:var(--muted);}

.tags-grid{display:flex;flex-wrap:wrap;gap:8px;}
/* 13px and 30px tall came straight from the mock's page styles, and on this screen
   that made the tag - the least consequential thing here - the biggest chip on it:
   the filter chips are 11/22 and the price tags 12/18. It sits on the same scale
   now, a step above the filter chips because it is a bigger target: the whole chip
   opens the tag and it carries a delete. */
.tag-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--card);cursor:pointer;transition:.15s;}
.tag-chip:hover{border-color:var(--primary);color:var(--primary);}
.tag-chip .tag-del{color:var(--muted);font-size:12px;}
.tag-chip .tag-del:hover{color:var(--danger);}

/* The list view sits in the shared .table-area, which admin.css leaves unpadded
   because on other screens the table is edge to edge. Here it lines up with the
   cards above it. */

/* ── The list view, ported from .prd-table in the mock ───────────────────
   I built this from the shared .table-area pattern instead of porting it, so it
   came out as a plain grey-headed table with no thumbnail, no category, no
   actions and no colour on the stock. This is the mock's table, and the inline
   styles it uses are named here rather than written into the markup. */
.prd-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--elev-1);}
.prd-table th{background:var(--bg);color:var(--muted);padding:10px 14px;text-align:right;font-size:11px;font-weight:700;border-bottom:2px solid var(--border)}
.prd-table td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;}
.prd-table tr:last-child td{border-bottom:none;}
.prd-table tr:hover td{background:var(--primary-ll);}

.product-thumb{width:38px;height:38px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;flex-shrink:0;}
.product-thumb img{width:100%;height:100%;object-fit:cover;}

.prd-cell{display:flex;align-items:center;gap:10px;}
.prd-cell-name{font-weight:700;font-size:13px;}
.prd-cell-code{font-size:11px;color:var(--muted);}
.prd-group{font-size:12px;}
.prd-group-sub{font-size:11px;color:var(--muted);}
.prd-price{font-weight:700;}
.prd-price-wholesale{font-weight:700;color:var(--success);}
.prd-stock{font-weight:700;color:var(--success);}
.prd-stock.low{color:var(--warning);}
.prd-stock.out{color:var(--danger);}
.prd-row-actions{display:flex;gap:4px;}

/* The pager on this screen. admin.css leaves .pagination edge to edge, which is right
   where the table is edge to edge - but here the grid and the table are inset 20px, so
   the bar has to line up with them, and the mock puts 16px of air above it. Without
   that it sits welded to the bottom of the table. */


/* The mock's row between the filters and the list: how many are shown on one side,
   the sort on the other. I had folded the count into the pager and pushed the sort
   into the filter row - the mock has both this row and the pager. */
.prd-listbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

/* The mock wraps each tab in .tab-pane{padding-inline:20px}. Every band inside then
   lands at the same inset without carrying a margin of its own - which is why the
   filter row here is the shared .filters-row with no changes, and the grid keeps only
   its own extra 20px. */
.prd-pane{padding-inline:20px}

/* The sort box. The shared .filter-select sits on --bg because inside the white
   filter band that is the contrast you want; this one sits on the page background,
   so the mock gives it --card and one pixel less padding. */
.prd-sort{padding:6px 10px;border:1px solid var(--border);border-radius:8px;font-size:12px;font-family:inherit;direction:rtl;outline:none;background:var(--card);cursor:pointer}

/* The rest of the category tree, from the mock. The children are indented as a group
   and each carries the corner glyph; I had been indenting the row itself and drawing
   an arrow in the markup. */
/* Boxed, not just sized. The mock only ever draws the placeholder glyph here, but a
   real category carries an emoji, and an emoji's line box is 29px against the icon
   font's 24 - which made every row in the tree 5px taller than the mock's. */

/* The detail panel's header and its sub-category chips - inline styles in the mock,
   named here so nothing is written into the markup. */
.form-full{grid-column:1 / -1;}

/* The parent picker sits above the grid in the mock, with its own gap under it. */

/* The category's picture where the mock draws its placeholder: in the tree's fixed
   box, and beside the name in the detail heading. Both are boxed rather than left to
   the image's own size - a picture nobody has cropped is any shape at all. */

/* The manufacturers table, ported from the mock. Its head is the dark bar, unlike the
   small tables inside modals, which is why it carries a class at all. */
/* Said beside the one unit everything else is counted in. */
.unit-base-note{font-size:11px;color:var(--muted);margin-right:6px;}
.unit-symbol{text-transform:uppercase;}

/* A tag that has been switched off still shows, greyed, so it can be switched back. */
.tag-off{opacity:.55;}

/* ─── The category tree ───────────────────────────────────────────────
   This screen is a shelf plan, not a form. Its job is to show the shape of
   twenty thousand products - where the goods actually sit - and the tree is
   the subject, so it gets the room and the detail panel gets the leftovers.
   That is the opposite way round from where this started. */
.cat-layout{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start;}

.cat-tree{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;}
.cat-tree-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.cat-tree-title{font-weight:700;font-size:14px;color:var(--primary);}
.cat-tree-empty{font-size:13px;color:var(--muted);line-height:1.6;padding:20px 4px;}

/* A row is a picture, a name, a number, and how that number compares. The
   selected one is marked by an edge rather than a filled block: a solid navy
   bar across the row shouts louder than the thing it is pointing at, and an
   inset shadow marks it without moving anything. */
.cat-item{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s;}
.cat-item:hover{background:var(--primary-ll);}
.cat-item.selected{background:var(--primary-ll);}
.cat-item.selected .cat-name{color:var(--primary);font-weight:700;}
.cat-item.selected::before,.cat-child.selected::before{content:'';position:absolute;right:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--primary);}

.cat-thumb{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;}
.cat-thumb img{width:100%;height:100%;object-fit:cover;}

.cat-name{font-size:14px;font-weight:600;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cat-num{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:22px;text-align:left;}

/* The one thing a tree can say that a list cannot: which branches carry the
   catalogue. It sits inline beside its number and stays small - drawn full
   width under the row it stopped reading as a measure and started reading as
   a rule across the tree. Only drawn once something has been counted. */
.cat-share{width:34px;height:4px;flex-shrink:0;border-radius:2px;background:var(--border);overflow:hidden;}
.cat-share>span{display:block;height:100%;background:var(--primary-l);border-radius:2px;}
.cat-item.selected .cat-share>span{background:var(--primary);}

/* The children hang off one hairline instead of carrying a corner glyph each.
   One line drawn once reads as a branch; a glyph per row reads as clutter. */
.cat-children{position:relative;padding-right:26px;margin:2px 0 6px;}
.cat-children::before{content:'';position:absolute;top:0;bottom:8px;right:16px;width:1px;background:var(--border);}
.cat-child{position:relative;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;cursor:pointer;transition:background .15s;}
.cat-child .cat-name{font-size:13px;font-weight:500;color:var(--text2);}
.cat-child:hover{background:var(--primary-ll);}
.cat-child.selected{background:var(--primary-ll);}
.cat-child.selected .cat-name{color:var(--primary);font-weight:600;}

.cat-off{font-size:10px;font-weight:700;color:var(--warning);background:var(--warning-l);padding:2px 6px;border-radius:10px;flex-shrink:0;}

/* ─── What is in the branch ───────────────────────────────────────────
   Read-only inputs used to stand here. They looked like a form, invited
   typing and did nothing; the modal is where a category is edited. This side
   answers a question instead: where am I, how much is here, what is under it. */
.cat-detail{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;}

.cat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.cat-crumb{font-size:12px;color:var(--muted);margin-bottom:6px;}
.cat-title{display:flex;align-items:center;gap:12px;}
.cat-title h2{margin:0;font-size:22px;font-weight:800;color:var(--primary);}
.cat-head-thumb{width:48px;height:48px;flex-shrink:0;border-radius:10px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;}
.cat-head-thumb img{width:100%;height:100%;object-fit:cover;}
.cat-head-actions{display:flex;gap:8px;flex-shrink:0;}

/* Figures, not cards. Four numbers on one band, divided by hairlines - the
   band is what says "these belong together", so no box is needed round each. */
.cat-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:18px 0;}
.cat-fig{background:var(--card);padding:14px 16px;}
.cat-fig b{display:block;font-size:24px;font-weight:800;color:var(--text);line-height:1.2;font-variant-numeric:tabular-nums;}
.cat-fig b.is-off{color:var(--warning);}
.cat-fig span{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:4px;}

.cat-desc{font-size:13px;line-height:1.7;color:var(--text2);margin:0 0 20px;max-width:70ch;}
.cat-desc.is-empty{color:var(--muted);}

.cat-subs-head{margin-bottom:10px;}
.cat-subs-head h3{margin:0;font-size:13px;font-weight:700;color:var(--text2);}

.cat-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.cat-sub{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:11px 13px;cursor:pointer;font-family:inherit;text-align:inherit;transition:.15s;}
.cat-sub:hover{border-color:var(--primary-l);background:var(--primary-ll);}
.cat-sub-name{font-size:13px;font-weight:600;color:var(--text);}
.cat-sub-count{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.cat-sub-add{justify-content:center;border-style:dashed;background:transparent;color:var(--muted);font-size:13px;font-weight:600;}
.cat-sub-add:hover{color:var(--primary);}

.cat-detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:70px 0;color:var(--muted);}
.cat-detail-empty i{font-size:30px;color:var(--border);}
.cat-detail-empty p{margin:0;font-size:13px;}

.cat-modal-parent{margin-bottom:12px;}

/* A count and its meter in one cell, so the number and the comparison stay
   together instead of the eye crossing the table twice. */
.ref-tally{display:flex;align-items:center;gap:8px;}
.ref-tally b{font-size:13px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;min-width:22px;}

/* ─── Narrowing a reference tab ───────────────────────────────────────
   These lists are small and arrive whole, so this filters in the browser. A
   round trip to a database a quarter of a second away, to narrow twelve rows,
   costs more than reading the twelve. */
/* One surface per tab. The filters and the cards were both sitting straight on
   the page with nothing holding either of them, so neither looked like it
   belonged to the other. The panel is the module: a bar of controls along the
   top, and below it the ground those controls act on.

   The ground is white, the same as the panel. Tinting it read as a hole punched
   through to the page rather than a well inside the panel, because the tint was
   the page's own colour - there is no third background in the system between
   #F0F3F9 and white, and inventing one to solve this is a lot of paint for a
   small problem. The cards keep their own edge instead, which is how the
   category tree already works: a white panel, and the objects on it carry the
   line that separates them. */
.ref-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.ref-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--border);}
.ref-toolbar .filter-search{min-width:240px;}
.ref-filters-end{margin-right:auto;display:flex;gap:8px;align-items:center;}
.ref-canvas{padding:16px 20px;}

/* A table is already a surface of its own. Inside the panel it drops its edge
   and its shadow rather than stacking a second one on the first. */
.ref-panel .prd-table{border-radius:0;box-shadow:none;}

/* The products tab is the same module: the filter row is its toolbar, the count
   and the sort are a second line of it, the grid sits on the tinted ground, and
   the pager is the foot rather than a bar floating below the panel. The mock has
   all four of these standing loose on the page, which is the thing being fixed. */
/* Inside a panel the bar is the panel's own top: its outer margins would push it
   off the edges it is supposed to sit on. */
.ref-panel>.filters-row{border-radius:0;border-bottom:1px solid var(--border);margin:0;}
.ref-panel>.prd-listbar{padding:10px 20px;margin:0;}
.ref-panel .prd-table th:first-child{border-top-right-radius:0;}

/* A row kept only to say where a match sits. It is not an answer, so it does
   not read like one. */
.cat-item.is-context{opacity:.5;}
.cat-item.is-context .cat-name{font-weight:500;}

.ref-none{text-align:center;color:var(--muted);padding:36px 0;font-size:13px;}

/* Search and chips inside the tree panel, which is narrower than a tab body. */
.cat-search{margin-bottom:8px;}
.cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.cat-chips .ops-chip{padding:4px 9px;font-size:11px;}

/* The line that says what a unit or a tag actually is. It used to sit outside the
   panel with nothing between them, so it read as a stray sentence stuck to an edge
   rather than a note about what is above it. It is the panel's foot now, behind the
   same hairline the toolbar sits in front of. */
.ref-note{padding:10px 20px;border-top:1px solid var(--border);font-size:12px;line-height:1.6;color:var(--muted);background:var(--card)}
.ref-note strong{color:var(--text2)}

/* The hash the shopper meets these by on the storefront, and the number of products
   actually wearing the label. A wall of chips says a tag exists; it does not say
   whether anything is filed under it, and an unused tag is a filter that returns
   nothing. */
/* One flex item, so the chip's 6px gap does not open between the hash and
   the word it belongs to. */
.tag-name{display:inline}
.tag-hash{color:var(--muted);font-weight:700}
.tag-chip:hover .tag-hash{color:var(--primary)}
.tag-count{background:var(--bg);border-radius:10px;padding:0 6px;font-size:10px;color:var(--text2);font-weight:700}

/* Which labels are doing the work, drawn against the busiest one. Same measure the
   categories tree and the reference tables use, at a size worth reading across. */
.tag-stats{margin-top:14px}
.tag-stats-head{background:var(--dark);color:#fff;padding:10px 20px;font-size:13px;font-weight:700}
.tag-stat{display:flex;align-items:center;gap:12px;padding:5px 0}
.tag-stat-name{min-width:130px;font-size:13px;font-weight:600;color:var(--text2)}
.tag-bar{flex:1;height:10px;border-radius:6px;background:var(--bg);overflow:hidden}
.tag-bar>span{display:block;height:100%;border-radius:6px;background:var(--primary)}
.tag-stat-count{font-size:12px;color:var(--muted);white-space:nowrap}

/* The tag's own colour, tinted rather than laid on flat: a wall of saturated chips is
   harder to read than a wall of plain ones, and the point is to tell them apart. The
   value comes from the API, which refuses anything that is not a hex colour. */
.tag-chip.tag-tinted{background:color-mix(in srgb, var(--tag) 9%, #fff);border-color:color-mix(in srgb, var(--tag) 40%, #fff);color:color-mix(in srgb, var(--tag) 85%, #000)}
.tag-chip.tag-tinted .tag-hash{color:var(--tag)}
.tag-chip.tag-tinted:hover{border-color:var(--tag);color:color-mix(in srgb, var(--tag) 85%, #000)}
.tag-chip.tag-tinted .tag-count{background:color-mix(in srgb, var(--tag) 16%, #fff)}

/* And the bar it earns in the usage panel, so the colour reads the same in both places. */
.tag-bar>span{background:var(--tag, var(--primary))}

/* ─── Attributes ──────────────────────────────────────────────────────
   A list on one side and one property open on the other - the same shape the
   categories tree uses, and for the same reason: a value like "dry" means
   nothing until you can see which property it belongs to. */
.attr-layout{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start;}
.attr-list-panel{overflow:hidden;}
.attr-panel-title{font-size:14px;font-weight:700;color:var(--primary);}
.attr-list{padding:6px;max-height:520px;overflow-y:auto;}
.attr-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 12px;border:none;background:none;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--text2);text-align:start;transition:.15s;}
.attr-item:hover{background:var(--bg);}
.attr-item.selected{background:var(--primary);color:#fff;font-weight:700;}
.attr-item.is-off .attr-name{opacity:.55;}
.attr-name{display:flex;align-items:center;gap:8px;min-width:0;}
.attr-count{background:var(--bg);color:var(--text2);border-radius:10px;padding:1px 8px;font-size:11px;font-weight:700;flex-shrink:0;}
.attr-item.selected .attr-count{background:rgba(255,255,255,.22);color:#fff;}

/* The open one. min-width:0 so a long value wraps inside it instead of pushing
   the grid column wider than the panel it sits in. */
.attr-values-panel{min-width:0;}
.attr-head{align-items:flex-start;}
.attr-open-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--primary);}
.attr-open-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.55;}

.attr-values-label{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:8px;}
.attr-values{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.attr-value-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:600;color:var(--text2);}
.attr-value-count{background:var(--bg);border-radius:10px;padding:0 6px;font-size:10px;font-weight:700;}
.chip-del{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;border-radius:50%;background:none;color:var(--muted);cursor:pointer;font-size:12px;padding:0;font-family:inherit;}
.chip-del:hover{color:var(--danger);background:var(--danger-l);}

.attr-add-row{display:flex;gap:8px;margin-top:14px;}
.attr-add-row .form-input{flex:1;}

/* And the same values on the product form, as switches rather than a list: the
   question there is "which of these is it", one property at a time. */
.attr-pick{padding:10px 0;border-bottom:1px solid var(--border);}
.attr-pick:last-child{border-bottom:none;padding-bottom:0;}
.attr-pick:first-child{padding-top:0;}
.attr-pick-name{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:7px;}
.attr-pick-values{display:flex;flex-wrap:wrap;gap:6px;}