/* ============================================================================
   storefront.html — page-scoped styles.

   New styling for this page lands here, never in the page's <style> block.
   The two inline blocks already in storefront.html are pending extraction
   (see changes/0045_2026-08-06_storefront-next-to-do.md, Task 1).
   ============================================================================ */

/* --- Storefront Products › the On checkbox on a child row -------------------
   Child blocks and bundles are indented in the Product column — 22px on the
   media block, with the tree stem drawn at 14px — but their On checkbox stayed
   at the parent's left edge, so BLK-142's control sat directly under Cristallo's
   and the tree read in the second column only.

   Indented by moving the cell's padding rather than widening the column. The On
   column is pinned at exactly one 26px checkbox plus 12px either side, so there
   is no slack inside it: 24/0 shifts the box 12px right within the width it
   already has, Product gives up nothing, and the gap on the right is covered by
   Product's own left padding. Half a checkbox — enough to read as a level down
   without competing with the 22px step in the column beside it. */
#sfItemsTable tr.sf-childrow td.sf-oncell { padding-left: 24px; padding-right: 0; }

/* A child's checkbox is 30% off the parent's — 26 → 18px, its tick 16 → 11px, and
   the corner scaled with the box so a smaller square does not read as a rounder
   one. Size is the second thing saying "level down", after the indent, and it says
   it on the control itself rather than on the space around it: a material and one
   of its blocks are no longer the same weight of decision at a glance. The 2px
   stroke is deliberately NOT scaled — it is what makes an empty box visible, and
   at 1.4px the unchecked children would go faint.

   The column is untouched: a child cell now measures 24 + 18 = 42px against the
   50px pin, so the box centres in the slack and sits 16px right of the parent's. */
#sfItemsTable tr.sf-childrow .sf-check,
#sfItemsTable tr.sf-childrow .sf-check .box { width: 18px; height: 18px; }
#sfItemsTable tr.sf-childrow .sf-check .box { border-radius: 4px; }
#sfItemsTable tr.sf-childrow .sf-check .box svg { width: 11px; height: 11px; }

/* --- Storefront Products › Show Price / Show Qty ----------------------------
   A per-item override of the two switches in Settings › Storefront Display —
   Show Pricing and Show Quantities. Two states, not three: only the override
   that DISAGREES with the default carries information. While the storefront
   shows every price, a row marked "Show" says exactly what Default says, so the
   chip toggles Default ⇄ the opposite of the switch and the redundant word is
   never reachable. Flip the switch and the available override flips with it.

   One column per chip. They were a single "Buyer Sees" column holding both, on
   the reading that the pair is one decision about what a row exposes — but they
   are two independent fields resolving against two separate switches, and a
   header that names neither made the reader decode the `$` and `#` icons to tell
   which chip was which. Each column now says what its chip does. */
#sfItemsTable th.col-vis-price, #sfItemsTable td.col-vis-price,
#sfItemsTable th.col-vis-qty,   #sfItemsTable td.col-vis-qty { text-align: center; }
/* Both pinned to one width so the two chips sit in an even pair, like Price and
   Featured either side of them — neither column ever grows. 104px is the wider
   header, "SHOW PRICE" at the thead's 11px uppercase, plus the table's 12px cell
   padding either side; it also clears the 72px chip with room to spare. The
   header does not wrap: at this width "SHOW PRICE" would break to two lines and
   take the whole header row down with it. */
#sfItemsTable thead th.col-vis-price,
#sfItemsTable thead th.col-vis-qty { width: 104px; min-width: 104px; max-width: 104px; white-space: nowrap; }

/* One width for every state — 72px, which is what "Default" needs at its own
   smaller type. Show and Hide are ~61px on their own content, and letting them
   size themselves slid the pair 11px sideways each time a chip was cycled: the
   column is right-aligned, so a narrower chip drags its neighbour with it. The
   box a control occupies must not depend on which state it is in. */
.sf-vischip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 72px; padding: 4px 8px;
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 18px;
  border: 1px solid var(--color-border-strong); border-radius: 5px;
  background: var(--color-surface); color: var(--color-text);
  cursor: pointer; white-space: nowrap;
  transition: color 140ms, background 140ms, border-color 140ms;
}
.sf-vischip svg { width: 13px; height: 13px; flex: none; }
.sf-vischip:hover { border-color: var(--color-primary); }
.sf-vischip:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-50); }

/* Inherited is the absence of an override, so it recedes: dashed and unfilled,
   subtle ink, and normal weight against the overrides' 600. Nothing has been
   decided on this row, and 38 of 44 chips are in this state — they have to read
   as quiet background so the handful of rows set by hand are what the eye finds
   scanning down the column. This is now the ONLY thing distinguishing the two,
   since an inherited chip prints the same Show/Hide word an override does.

   Held at the base 12px rather than dropping to the 10px floor. That drop was
   sized for the word "Default", which named the mechanism and was read down a
   column rather than read: the least important thing on screen, which is what
   the floor is reserved for. The word is now the answer itself, and an answer
   two points smaller than the answer on the row above it does not compare.

   The retreat is in the ink alone — dashed border, subtle colour, normal weight,
   tighter side padding and gap. `line-height` stays the base rule's fixed 18px
   and `min-width` its 72px, so the box is the same 72×28 in every state and
   neither the row nor the chip beside it moves as a chip toggles. */
.sf-vischip[data-vis="auto"] {
  border-style: dashed; color: var(--color-text-subtle);
  font-weight: 400;
  padding-left: 6px; padding-right: 6px; gap: 4px;
}
/* Keyed on the RESOLVED state, not the stored one, so a chip is the colour of the
   answer it prints. An inherited "Show" is as green as one set by hand — it was
   white before, which left the column showing two visibly different things under
   one word, and made a scan for hidden rows find only the ones hidden on purpose.
   Whether the row owns the decision is carried by the dashed border, subtle ink
   and lighter weight above; it is no longer carried by the colour. */
.sf-vischip[data-vis-resolved="show"] { border-color: var(--color-success); background: var(--color-success-50); }
.sf-vischip[data-vis-resolved="hide"] { border-color: var(--color-danger);  background: var(--color-danger-50); }
/* The state colour rides the icon, not the label — 12px bold text on a 50-tint
   would not clear contrast, and the icon carries the meaning either way. */
.sf-vischip[data-vis-resolved="show"] svg { color: var(--color-success); }
.sf-vischip[data-vis-resolved="hide"] svg { color: var(--color-danger); }

@media (max-width: 768px) { .sf-vischip { min-height: 44px; } }

/* --- Storefront Products › toolbar: what Auto resolves to -------------------
   The Auto chips defer to Show Pricing and Show Quantities, and both switches
   live on the Settings tab — so a column full of "Auto" never says what a buyer
   is actually seeing. This tag answers that beside the table it governs, in the
   same green/red as the chips below it, so the two read as one scale.

   Not a control: no border, no hover, no pointer. The switch on Settings stays
   the only place the default moves. */
.sf-visdefs { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sf-visdefs__lead { font-size: 12px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }

.sf-visdef {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  font-size: 12px; font-weight: 600; line-height: 18px;
  border-radius: 5px;
  color: var(--color-text); white-space: nowrap;
}
.sf-visdef svg { width: 13px; height: 13px; flex: none; }
/* Like .sf-vischip, the state colour rides the icon rather than the label —
   12px bold on a 50-tint would not clear contrast. */
.sf-visdef[data-on="true"]      { background: var(--color-success-50); }
.sf-visdef[data-on="true"] svg  { color: var(--color-success); }
.sf-visdef[data-on="false"]     { background: var(--color-danger-50); }
.sf-visdef[data-on="false"] svg { color: var(--color-danger); }

/* Browse & Filtering used to be the third card in a two-column grid and spanned both
   columns to fill the dead half-row, laying its two settings out side by side. It is
   a 520px dialog now: there is no grid to span and no second column to reach, so the
   rules that did it are gone and the two rows stack, which is what that width wants. */

/* --- Storefront Products › Price cell ---------------------------------------
   The price this product actually shows at, over an empty box that overrides it.
   The old placeholder said "Default" without ever saying what the default was;
   the number above is that answer.

   Moved here verbatim from the page's inline <style> in order to change it —
   styles belong in CSS files, and this page's blocks are pending extraction
   anyway (0045, Task 1). Only the vertical centring below is new. */
.sf-pricecell {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  /* 21px base line + 5px gap + 30px field. Reserved in every state, so the row
     is the same height whether the field is showing or not — including rows that
     already carry an override, which used to be 3px shorter than the rest. */
  min-height: 56px;
  transition: padding-bottom 120ms;
}
.sf-pricecell__base { font-size: 14px; font-weight: 500; color: var(--color-text); white-space: nowrap; }
/* Show Price set to Hide — the column stops quoting a figure and says what the buyer
   gets instead. A word, not a price, so it drops to 12px and subtle ink and stops
   being read as a number down the column. Never struck: a row can carry a custom
   price AND be hidden at once (Taj Mahal ships that way), and the strikethrough
   below would then read as the override having replaced the word. The id lifts this
   over that rule's `:has()` specificity. */
#sfItemsTable .sf-pricecell__base.is-hidden {
  font-size: 12px; font-weight: 500; color: var(--color-text-subtle); text-decoration: none;
}
/* An override supersedes the tier price, so the tier price is struck and drops two points.
   14 → 12px, not 13 → 11px: 12px is the project's font floor. */
.sf-pricecell:has(input:not(:placeholder-shown)) .sf-pricecell__base { font-size: 12px; text-decoration: line-through; color: var(--color-text-subtle); }

/* A hidden price has nothing to override, so hovering the row must not offer the
   box. `display: none`, not `opacity: 0` — the field also stops being focusable,
   which closes the :focus-within path that would otherwise reveal it to the
   keyboard while the mouse could not reach it.

   The reserved 35px goes with it, unconditionally rather than on hover: a row can
   be hidden AND already carry an override (Taj Mahal), and that rule holds the
   padding open at rest, which would leave "Hidden" floating 18px above the centre
   line of an empty cell. Set Show Price back to Default and both return. */
#sfItemsTable tbody tr .sf-pricecell:has(.sf-pricecell__base.is-hidden) { padding-bottom: 0; }
#sfItemsTable tbody tr .sf-pricecell:has(.sf-pricecell__base.is-hidden) .sf-cprice { display: none; }

/* The override box is out of the way until you reach for it. opacity, not
   visibility or display: the box stays focusable, so :focus-within can still
   reveal it for the keyboard.

   It is also out of flow, pinned to the bottom of that reserved height. In flow
   it held its row open on every product, which pushed the price 18px above the
   cell's centre line — on the 38 rows that have no override and never show the
   box, that read as a price sitting crooked in its cell for no visible reason.
   Out of flow the price sits on the centre line at rest and moves up only when
   the field actually appears, and the reserved height means the row does not
   move when it does. */
.sf-cprice {
  position: absolute; right: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 5px; flex-direction: row-reverse;
  opacity: 0; transition: opacity 120ms;
}
#sfItemsTable tbody tr:hover .sf-cprice,
.sf-pricecell:focus-within .sf-cprice,
.sf-pricecell:has(input:not(:placeholder-shown)) .sf-cprice { opacity: 1; }
/* Revealing the field re-centres the price in what is left above it — 30px of
   field plus the 5px gap. Same 120ms as the fade, so the price rising and the
   field arriving read as one movement rather than two. */
#sfItemsTable tbody tr:hover .sf-pricecell,
.sf-pricecell:focus-within,
.sf-pricecell:has(input:not(:placeholder-shown)) { padding-bottom: 35px; }
/* Right-aligned so the override lines up under the price it replaces. */
.sf-cprice input { width: 95px; padding: 5px 8px; font-size: 12px; text-align: right; }
/* Save is a bare icon — no button chrome, no resting or hover border. It appears only
   while there is an unsaved edit: typing sets .is-dirty, saving clears it. A saved
   override is a settled value, so nothing hovers over it asking to be saved again. */
.sf-cprice__save { visibility: hidden; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--color-text-subtle); cursor: pointer; transition: color 120ms; }
.sf-cprice__save:hover { color: var(--color-primary-700); }
/* The one ring kept: a keyboard user has to see where focus is. */
.sf-cprice__save:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 5px; }
.sf-cprice.is-dirty .sf-cprice__save { visibility: visible; }
.sf-cprice__save svg { width: 15px; height: 15px; }

/* Custom domain field — right-aligned so the address ends on the same edge as the
   subdomain field beside it, where the .vava-store.com addon puts it. */
.sf-domainrow input[data-domain-panel="custom"] { text-align: right; }