/* Drook Studio: store screens (sales.js, orders.js, products.js, connections.js) and the shared
   bits in commerce-ui.js. Tokens come from app.css. Hover is light only, nothing moves. */

/* ---------- shared (commerce-ui.js) ---------- */
.sales-eyebrow, .orders-eyebrow, .products-eyebrow { display: flex; align-items: center; gap: 0.6316rem; flex-wrap: wrap; }
.shop-sample { text-transform: none; letter-spacing: .01em; }
.shop-seg { flex-wrap: wrap; }
/* the store and range pickers sit on their own row under the lede, on every store screen */
.shop-pickers { flex-basis: 100%; align-items: center; }
.shop-lookonly { display: flex; gap: 0.6316rem; align-items: flex-start; color: var(--ink2); margin: 0.8421rem 0 0; }
.shop-lookonly .icon { flex: none; margin-top: 0.2105rem; }
.shop-notes { display: grid; gap: 0.5263rem; margin-top: 1.0526rem; }
.shop-notes p { display: flex; gap: 0.6316rem; align-items: flex-start; margin: 0; color: var(--ink2); }
.shop-notes .icon { flex: none; margin-top: 0.2105rem; }
.shop-nostore { display: grid; gap: 0.8421rem; justify-items: start; padding: 2.1053rem; max-width: 40rem; }
.shop-nostore-title { font-size: var(--fs-1); letter-spacing: -0.03em; line-height: 1.1; margin: 0; }
.shop-nostore p { margin: 0; max-width: 56ch; }

/* ---------- sales ---------- */
.sales-head { align-items: flex-end; }
.sales-pickers { align-items: center; }
.sales-hero { padding: 2.1053rem 2.1053rem 1.5789rem; }
.sales-hero-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2632rem 2.5263rem; align-items: start; }
.sales-hero-num .eyebrow { margin: 0 0 0.7368rem; }
.sales-big { font-size: clamp(3.4rem, 2.2rem + 4vw, 5.6rem); font-weight: 700; letter-spacing: -0.05em; line-height: .92; font-variant-numeric: tabular-nums; }
.sales-hero-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3158rem 0.7368rem; margin: 0.8421rem 0 0; font-size: 1.08rem; }
.sales-facts { margin: 0; display: grid; gap: 0; }
/* the first fact's number lines up with "You took in" */
.sales-hero-top > .sales-facts .sales-fact:first-child { padding-top: 0; }
.sales-fact { padding: 0.7368rem 0; }
.sales-fact + .sales-fact { box-shadow: 0 -1px 0 var(--ring); }
.sales-fact dt { font-weight: 500; }
.sales-fact-num { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; margin-right: 0.2105rem; }
.sales-fact dd { margin: 0.1053rem 0 0; font-size: var(--fs-small); }
.sales-chart { margin: 1.7895rem -0.2105rem 0; min-height: 15.2632rem; }
.sales-say { color: var(--ink2); margin: 0.7368rem 0 0; max-width: 70ch; }
.sales-below { margin-top: 1.0526rem; }
.sales-split { align-items: start; }
.sales-h2 { font-size: var(--fs-3); letter-spacing: -0.01em; margin: 0 0 0.4211rem; }
.sales-best { padding: 1.5789rem; }
.sales-best-say { margin: 0 0 1.1579rem; }
.sales-side { display: flex; flex-direction: column; }
.sales-side > * + * { margin-top: 1.0526rem; }
.sales-payout { padding: 1.4737rem 1.5789rem; }
.sales-payout .eyebrow { margin: 0 0 0.5263rem; }
.sales-payout-num { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0 0 0.5263rem; }
.sales-payout p:last-child { margin: 0; }
.sales-people { padding: 1.4737rem 1.5789rem; }
.sales-people-list { list-style: none; margin: 0.2105rem 0 1.0526rem; padding: 0; }
.sales-people-list li { display: flex; align-items: baseline; gap: 0.6316rem; padding: 0.6316rem 0; }
.sales-people-list li + li { box-shadow: 0 -1px 0 var(--ring); }
.sales-people-num { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; min-width: 3ch; }
.sales-updated { display: flex; align-items: center; gap: 0.6316rem; flex-wrap: wrap; margin-top: 0.9474rem; font-size: var(--fs-small); }
.sales-links { margin-top: 0.4211rem; }
.sales-links-sub { margin: -0.3158rem 0 0.8421rem; max-width: 64ch; }
.sales-link-card { padding: 0.5263rem; }
.sales-link-empty { padding: 0.9474rem; }
.sales-link-rows > li + li { box-shadow: 0 -1px 0 var(--ring); }
.sales-link-rows .row-main, .conn-steady-rows .row-main { display: grid; gap: 0.1053rem; }
.conn-steady-rows .row-meta, .sales-link-rows .row-meta { overflow-wrap: anywhere; }
.sales-link-end { display: flex; align-items: center; gap: 0.8421rem; }
.sales-link-end strong { font-size: 1.15rem; }

/* ---------- orders ---------- */
.orders-day { margin-bottom: 1.4737rem; }
.orders-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6316rem; flex-wrap: wrap; margin: 0 0.2105rem 0.6316rem; }
.orders-day-head h2 { font-size: var(--fs-2); letter-spacing: -0.02em; margin: 0; }
.orders-day-head p { margin: 0; font-variant-numeric: tabular-nums; }
.orders-rows { padding: 0.4211rem; }
.orders-rows > li + li { box-shadow: 0 -1px 0 var(--ring); }
.orders-row { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.orders-row .row-main { display: grid; gap: 0.1053rem; }
.orders-row .row-title { display: flex; align-items: center; gap: 0.5263rem; font-size: 1.08rem; }
.orders-items { color: var(--ink2); overflow-wrap: anywhere; }
.orders-initial { font-weight: 700; font-size: 1.1rem; }
.orders-end { display: grid; justify-items: end; gap: 0.3158rem; }
.orders-amt { font-size: 1.2rem; letter-spacing: -0.01em; }
.orders-status { font-weight: 500; white-space: nowrap; }
/* Paid is the normal state: quiet words, no badge. Waiting and refunds are solid badges. */
.orders-status.is-quiet { color: var(--ink3); font-size: var(--fs-small); }
.orders-st-short { display: none; }
.orders-row.is-quiet .orders-amt { color: var(--ink2); text-decoration: line-through; text-decoration-color: var(--ring3); }
/* a new arrival breathes light twice, nothing moves */
.orders-row.is-new { box-shadow: inset 0 0 0 1px var(--ring2), 0 0 2.1053rem -0.6316rem var(--glow); }
.orders-row.is-new .orders-initial { background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.still) .orders-row.is-new { animation: orders-glow 2.4s var(--ease) 2; }
}
@keyframes orders-glow { 50% { box-shadow: inset 0 0 0 1px var(--ring3), 0 0 3.1579rem -0.3158rem var(--glow); } }
.orders-more { display: flex; justify-content: center; margin-top: 0.4211rem; }
.orders-detail-status { display: flex; align-items: center; gap: 0.6316rem; flex-wrap: wrap; margin: 0; }
.orders-lines { list-style: none; margin: 0; padding: 0; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--ring); }
.orders-lines li { display: flex; justify-content: space-between; gap: 0.8421rem; padding: 0.7368rem 0.9474rem; }
.orders-lines li + li { box-shadow: 0 -1px 0 var(--ring); }
.orders-totals { margin: 0; display: grid; gap: 0.3158rem; }
.orders-totals div { display: flex; justify-content: space-between; gap: 0.8421rem; }
.orders-totals div:first-child { font-weight: 700; font-size: 1.15rem; }
.orders-totals dd { margin: 0; }
.orders-detail-note { display: flex; gap: 0.5263rem; align-items: flex-start; }
.orders-detail-note .icon { flex: none; margin-top: 0.2105rem; }

/* ---------- products ---------- */
.products-tools { display: flex; align-items: center; justify-content: space-between; gap: 0.6316rem 1.0526rem; flex-wrap: wrap; margin: -0.4211rem 0 1.0526rem; }
.products-tools .shop-lookonly { flex-basis: 100%; margin: 0; }
.products-thresh { margin: 0; font-size: var(--fs-small); }
.products-count { display: inline-grid; place-items: center; min-width: 1.4737rem; height: 1.4737rem; padding: 0 0.4211rem; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: .85rem; font-weight: 700; }
.products-rows { padding: 0.4211rem; }
.products-rows > li + li { box-shadow: 0 -1px 0 var(--ring); }
.products-row { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; min-height: 5.0526rem; }
button.products-row { cursor: pointer; }
.products-photo { width: 3.7895rem; height: 3.7895rem; flex: none; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; background: var(--s2); box-shadow: inset 0 0 0 1px var(--ring); color: var(--ink3); }
.products-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.products-main { display: grid; gap: 0.2105rem; }
.products-main .row-title { font-size: 1.08rem; white-space: normal; }
.products-meter { max-width: 17.8947rem; margin-top: 0.3158rem; }
.products-meter .cx-meter-head { display: none; }
.products-meter .cx-meter-wrap { margin-top: 0.3158rem; }
.products-end { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: center; gap: 0.2105rem 0.9474rem; }
.products-price, .products-stock { grid-column: 1; }
.products-price { font-size: 1.2rem; }
.products-stock { color: var(--ink2); font-size: var(--fs-small); }
.products-stock.is-low, .products-stock.is-out { color: var(--ink); }
.products-go { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 2.3158rem; height: 2.3158rem; border-radius: 50%; color: var(--ink2); box-shadow: inset 0 0 0 1px var(--ring); transition: box-shadow var(--t) var(--ease); }
button.products-row:hover .products-go { box-shadow: inset 0 0 0 1px var(--ring3), 0 0 1.0526rem var(--glow); color: var(--ink); }
.products-row.is-quiet .products-photo img { opacity: .55; }
.products-rows.no-photos .products-row { min-height: 4.2105rem; }
.products-price.is-none { color: var(--ink2); font-size: 1rem; font-weight: 500; }
.products-row.is-out .products-photo { box-shadow: inset 0 0 0 1px var(--ring3); }
.products-now { font-weight: 500; }
.products-field-row { display: flex; gap: 0.5263rem; }
.products-field-row .input { flex: 1; min-width: 0; }
.products-sale { padding: 0.8421rem 0 0; box-shadow: 0 -1px 0 var(--ring); align-items: center; flex-wrap: wrap; }
.products-safe { display: flex; gap: 0.5263rem; align-items: flex-start; margin: 0; }
.products-safe .icon { flex: none; margin-top: 0.2105rem; }
.products-ba p { margin: 0 0 0.5263rem; font-size: 1.1rem; }
.products-ba s { color: var(--ink2); text-decoration-color: var(--ink3); }

/* ---------- connections ---------- */
.conn-banner { display: flex; align-items: center; gap: 0.9474rem; padding: 1.1579rem 1.3684rem; margin-bottom: 1.2632rem; }
.conn-banner p { margin: 0; font-weight: 500; font-size: 1.08rem; }
.conn-banner.is-ok { box-shadow: inset 0 0 0 1px var(--ring3), var(--e1), 0 0 3.1579rem -0.9474rem var(--glow); }
.conn-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.0526rem; align-items: stretch; }
.conn-panel { display: flex; flex-direction: column; padding: 1.7895rem; }
.conn-panel.is-on { background: radial-gradient(120% 80% at 90% -10%, rgba(255,255,255,.08), transparent 55%), var(--glass), var(--s1); }
.conn-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6316rem 1.0526rem; flex-wrap: wrap; }
.conn-name { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; margin: 0; }
.conn-detail { color: var(--ink2); margin: 0.7368rem 0 1.3684rem; min-height: 2.9em; }
.conn-lets-h { margin: 0 0 0.6316rem; }
.conn-lets { list-style: none; margin: 0 0 1.4737rem; padding: 0; display: grid; gap: 0.5263rem; }
.conn-lets li { display: flex; gap: 0.6316rem; align-items: flex-start; }
.conn-lets .icon { flex: none; margin-top: 0.2105rem; width: 0.9474rem; height: 0.9474rem; color: var(--ink2); }
.conn-actions { margin-top: auto; }
.conn-soon { margin: 0; }
.conn-shop { display: grid; gap: 0.5263rem; width: 100%; }
.conn-shop .label { margin-top: 0.2105rem; }
.conn-shop .hint { margin: -0.2105rem 0 0; }
.conn-shop .btn-primary { justify-self: start; margin-top: 0.3158rem; }
.conn-steady { margin-top: 0.4211rem; }
.conn-steady-rows { padding: 0.4211rem; }
.conn-steady-rows > li + li { box-shadow: 0 -1px 0 var(--ring); }
.conn-low { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.3158rem 1.2632rem; margin-top: 1.0526rem; padding: 1.2632rem 1.4737rem; }
.conn-low .label { grid-column: 1; margin: 0; }
.conn-low .hint { grid-column: 1; margin: 0; }
.conn-low-row { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.conn-low .form-error { grid-column: 1 / -1; }
.conn-low-row { display: flex; gap: 0.5263rem; }
.conn-low-in { max-width: 7.3684rem; }
.conn-safe { display: flex; gap: 0.5263rem; align-items: flex-start; margin-top: 1.2632rem; }
.conn-safe .icon { flex: none; margin-top: 0.2105rem; }

/* ---------- in between sizes ---------- */
@media (max-width: 1180px) {
  .sales-hero-top { grid-template-columns: 1fr; }
  .sales-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.0526rem; }
  .sales-fact + .sales-fact { box-shadow: none; }
  .sales-fact { padding: 0.6316rem 0 0; }
}
@media (max-width: 1000px) {
  .sales-split { grid-template-columns: 1fr; }
  .conn-panels { grid-template-columns: 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .sales-hero { padding: 1.3684rem 1.1579rem 1.1579rem; }
  .sales-facts { grid-template-columns: 1fr; }
  .sales-fact + .sales-fact { box-shadow: 0 -1px 0 var(--ring); }
  .sales-chart { margin-top: 1.2632rem; min-height: 12.6316rem; }
  .sales-pickers, .sales-pickers .seg { width: 100%; }
  .sales-pickers .seg-btn, .orders-head .seg-btn, .products-tools .seg-btn { flex: 1; justify-content: center; padding: 0 0.5263rem; }
  .orders-head .view-head-actions, .orders-head .seg, .products-tools .seg { width: 100%; }
  .sales-best, .sales-payout, .sales-people, .sales .sales-low { padding: 1.2632rem 1.1579rem; }
  .sales-link-rows .row { flex-wrap: wrap; align-items: flex-start; }
  .sales-link-rows .row-main { flex: 1 1 calc(100% - 3.6842rem); }
  .sales-link-end { flex: 1 1 100%; justify-content: space-between; padding-left: 3.3684rem; }
  .orders-rows, .products-rows { padding: 0.2105rem; }
  .orders-row, .products-row { padding: 0.7368rem 0.6316rem; gap: 0.6316rem; align-items: flex-start; }
  .orders-row .round { width: 2.3158rem; height: 2.3158rem; }
  .orders-row { flex-wrap: wrap; }
  .orders-row .row-main { flex: 1 1 calc(100% - 3.1579rem); }
  .orders-end { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.5263rem; padding-left: 2.9474rem; }
  .orders-status { white-space: nowrap; }
  .orders-status.has-short .orders-st-long { display: none; }
  .orders-status.has-short .orders-st-short { display: inline; }
  /* the day's total always sits under its name on a phone, so every day reads the same */
  .orders-day-head { flex-direction: column; align-items: flex-start; gap: 0.1053rem; }
  .conn-low { grid-template-columns: 1fr; padding: 1.1579rem; }
  .conn-low-row { grid-column: 1; grid-row: auto; }
  .products-row { flex-wrap: wrap; }
  .products-main { flex: 1 1 calc(100% - 3.7895rem); }
  .products-end { flex: 1 1 100%; grid-template-columns: 1fr auto; justify-items: start; padding-left: 3.5789rem; }
  .products-photo { width: 2.9474rem; height: 2.9474rem; }
  .products-rows.no-photos .products-end { padding-left: 0; }
  .conn-panel { padding: 1.3684rem 1.1579rem; }
  .conn-steady-rows .row { flex-wrap: wrap; }
  .conn-steady-rows .row-main { flex: 1 1 calc(100% - 3.6842rem); }
  .conn-steady-rows .row-end { flex: 1 1 100%; padding-left: 3.3684rem; text-align: left; }
  .conn-actions .btn { flex: 1 1 100%; }
  .conn-shop .btn-primary { justify-self: stretch; }
  .shop-nostore { padding: 1.4737rem 1.1579rem; }
}

/* sales: running low card */
.sales-low { padding: 1.4737rem 1.5789rem; }
.sales-low-list { list-style: none; margin: 0.4211rem 0 0.9474rem; padding: 0; }
.sales-low-list li { display: flex; justify-content: space-between; gap: 0.8421rem; padding: 0.5263rem 0; }
.sales-low-list li + li { box-shadow: 0 -1px 0 var(--ring); }
.orders-no { white-space: nowrap; }
.sales-link-end .btn { white-space: nowrap; }