/* store.html only. Loaded after site.css. A request list that composes an e-mail:
   no payment, no backend, no personal data. Production cells, drones and boards as line drawings.
   Uses the site tokens and works in both themes. Cyan only through --df-ui-accent / --df-cyan. */

.nw { white-space: nowrap; }

/* ── Page head ─────────────────────────────────────────────────────── */
.store-page .page-head { padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 112px)); padding-bottom: clamp(40px, 5vw, 64px); }
.cfg-head__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; align-items: end; }
.cfg-head h1 { grid-column: 1 / span 8; max-width: none; font-size: clamp(2.75rem, 5.8vw, 5.25rem); line-height: .94; letter-spacing: -0.04em; }
.cfg-head h1 span { color: var(--df-ui-text-dim); }
.cfg-head h1:focus { outline: none; }
.cfg-head__side { grid-column: 9 / span 4; }
.cfg-head__side .lead { margin-top: 0; font-size: clamp(1rem, 1.2vw, 1.125rem); }
.cfg-head__meta { margin-top: 16px; font: 400 .75rem/1.5 var(--df-font-mono); letter-spacing: .02em; color: var(--df-ui-text-dim); }
.cfg-index { grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--df-ui-line-strong); }
.cfg-index a { display: block; min-height: 44px; padding: 14px 16px 4px 0; color: var(--df-ui-text); text-decoration: none; }
.cfg-index b { display: block; font: 600 .9375rem/1.3 var(--df-font-body); }
.cfg-index span { display: block; margin-top: 6px; font: 400 .8125rem/1.45 var(--df-font-body); color: var(--df-ui-text-dim); }
@media (hover: hover) and (pointer: fine) { .cfg-index a:hover b { text-decoration: underline; text-underline-offset: .3em; } }
@media (max-width: 1024px) {
  .cfg-head h1, .cfg-head__side, .cfg-index { grid-column: 1 / -1; }
  .cfg-head__side { max-width: 40rem; }
}
@media (max-width: 640px) {
  .cfg-head__in { row-gap: 32px; }
  .cfg-index { grid-template-columns: 1fr; }
  .cfg-index a { display: flex; align-items: center; padding: 0; border-bottom: 1px solid var(--df-ui-line); }
  .cfg-index span { display: none; }
}

/* ── Configurator layout ───────────────────────────────────────────── */
.cfg { padding-bottom: var(--s7); }
.cfg__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.cfg__build { grid-column: 1 / span 8; min-width: 0; }
@media (max-width: 1024px) { .cfg__build { grid-column: 1 / -1; } }

.grp { scroll-margin-top: calc(var(--nav-h) + 24px); }
.grp + .grp { margin-top: var(--s7); }
.grp__h { max-width: 34ch; margin-bottom: 32px; font: 700 clamp(1.5rem, 2.2vw, 2.125rem)/1.12 var(--df-font-display); letter-spacing: -0.02em; }
.grp__h span { color: var(--df-ui-text-dim); }

/* ── Plate (drawing field) ─────────────────────────────────────────── */
.draw { position: relative; aspect-ratio: 4 / 3; background: var(--df-ui-bg-2); color: var(--df-ui-text-faint); container: draw / inline-size; }
.draw svg { position: absolute; inset: 0; width: 100%; height: 100%; --sw: 1.75; stroke-width: var(--sw); }
@container draw (min-width: 260px) { .draw svg { --sw: 1.5; } }
@container draw (min-width: 330px) { .draw svg { --sw: 1.25; } }
@container draw (min-width: 400px) { .draw svg { --sw: 1.05; } }
.draw--board svg { --sw: 3; }
@container draw (min-width: 150px) { .draw--board svg { --sw: 2.2; } }
.draw-marks { opacity: .6; }
.draw-trace { stroke: var(--df-ui-accent); stroke-width: calc(var(--sw) * 1.35); stroke-dasharray: 1; stroke-dashoffset: 1; }
.kit-frame { stroke-dasharray: 3 4; }
.kit-guides { stroke-dasharray: 2 4; opacity: .55; }
.draw-leaders { stroke-width: calc(var(--sw) * .7); }
.draw-leaders circle { fill: currentColor; stroke: none; }
.prop__spin { transform-box: view-box; transform-origin: 0 0; }
.callout { position: absolute; font: 500 .6875rem/1.2 var(--df-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--df-ui-text-dim); white-space: nowrap; pointer-events: none; }
@container draw (max-width: 359px) { .callout, .draw-leaders { display: none; } }

/* Trace held while hovered, focused or picked; no JS shows it always. */
[data-item].is-picked .draw-trace, [data-item]:focus-within .draw-trace { stroke-dashoffset: 0; }
@media (hover: hover) and (pointer: fine) { [data-item]:hover .draw-trace { stroke-dashoffset: 0; } }
html:not(.js) .draw-trace { stroke-dashoffset: 0; }

.count {
  position: absolute; top: 10px; right: 10px; padding: 5px 8px;
  background: var(--df-cyan); color: var(--df-navy);
  font: 500 .75rem/1 var(--df-font-mono); font-variant-numeric: tabular-nums;
}
.count:empty { display: none; }
.draw--board .count { top: 6px; right: 6px; padding: 3px 6px; font-size: .6875rem; }

/* ── Motion (only without reduced motion, only with JS) ────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .ln { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) calc(var(--i, 0) * 70ms); }
  .js .ln-fade { transition: opacity .6s var(--ease) calc(var(--i, 0) * 70ms + .5s); }
  .js .callout { transition: opacity .4s var(--ease) 1s; }
  .js .draw:not(.is-drawn) .ln { stroke-dashoffset: 1; }
  .js .draw:not(.is-drawn) .ln-fade, .js .draw:not(.is-drawn) .callout { opacity: 0; }
  .js .draw-trace { transition: stroke-dashoffset .45s cubic-bezier(.4, 0, 1, 1); }
  .js [data-item].is-picked .draw-trace, .js [data-item]:focus-within .draw-trace { transition: stroke-dashoffset .9s var(--ease); }
  @media (hover: hover) and (pointer: fine) { .js [data-item]:hover .draw-trace { transition: stroke-dashoffset .9s var(--ease); } }
  .prop__spin { --spin: prop-cw; }
  .prop__spin--ccw { --spin: prop-ccw; }
  .js .dcard.is-spinning .draw.is-visible .prop__spin,
  .js .dcard:focus-within .draw.is-visible .prop__spin { animation: var(--spin) 500ms linear infinite; }
  @media (hover: hover) and (pointer: fine) { .js .dcard:hover .draw.is-visible .prop__spin { animation: var(--spin) 500ms linear infinite; } }
  .req__lines li.is-flash { animation: req-flash 1s var(--ease); }
}
@keyframes prop-cw { to { transform: rotate(360deg); } }
@keyframes prop-ccw { to { transform: rotate(-360deg); } }
@keyframes req-flash { from { background: color-mix(in srgb, var(--df-ui-accent) 18%, transparent); } to { background: transparent; } }
@media (forced-colors: active) { .draw-trace { stroke: Highlight; } }

/* ── Cell rows ─────────────────────────────────────────────────────── */
.cell { container: cell / inline-size; padding-block: 24px; border-top: 1px solid var(--df-ui-line); }
.cell:last-child { border-bottom: 1px solid var(--df-ui-line); }
.cell__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
@container cell (min-width: 560px) { .cell__grid { grid-template-columns: 5fr 7fr; column-gap: 24px; } }
@container cell (min-width: 760px) { .cell__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; } }
.cell__body { display: flex; flex-direction: column; min-width: 0; }
.cell__name { font: 700 clamp(1.75rem, 2.4vw, 2.375rem)/1 var(--df-font-display); letter-spacing: -0.03em; }
.cell__desc { margin-top: 10px; max-width: 34ch; font-size: .9375rem; line-height: 1.5; color: var(--df-ui-text-dim); }
.cell__rate { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 24px; }
.rate b { display: block; font: 700 clamp(2.5rem, 3.6vw, 3.5rem)/.9 var(--df-font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.rate > span { display: block; margin-top: 8px; max-width: 24ch; font: 400 .75rem/1.45 var(--df-font-mono); color: var(--df-ui-text-dim); }
.rate em { display: block; font-style: normal; color: var(--df-ui-text-faint); }
.cell__spec { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--df-ui-line); }
.cell__spec dt { font: 500 .6875rem/1.4 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--df-ui-text-dim); }
.cell__spec dd { margin-top: 4px; font: 600 .9375rem/1.35 var(--df-font-body); }

/* ── Drone tiles and board cards ───────────────────────────────────── */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
@media (max-width: 640px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.dcard { display: flex; flex-direction: column; min-width: 0; }
.dcard__body { display: flex; flex-direction: column; flex: 1; padding-top: 20px; }
.dcard__name { font: 700 clamp(1.625rem, 2.2vw, 2.125rem)/1 var(--df-font-display); letter-spacing: -0.03em; }
.dcard__kind { margin-top: 10px; font: 500 .6875rem/1.4 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--df-ui-text-dim); }
.dcard__desc { margin-top: 16px; max-width: 38ch; font-size: .9375rem; line-height: 1.55; color: var(--df-ui-text-dim); text-wrap: pretty; }
.dcard__note { margin-top: 12px; font: 400 .75rem/1.5 var(--df-font-mono); color: var(--df-ui-text); }
.dcard__foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 24px; }

.board { container: board / inline-size; padding-block: 16px; border-top: 1px solid var(--df-ui-line); border-bottom: 1px solid var(--df-ui-line); min-width: 0; }
.board__grid { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px; align-items: stretch; }
.board__grid > .draw, .cell__grid > .draw { align-self: start; width: 100%; }
@container board (min-width: 360px) { .board__grid { grid-template-columns: 168px minmax(0, 1fr); } }
@media (max-width: 640px) { .board__grid { grid-template-columns: 112px minmax(0, 1fr); } }
.board__body { display: flex; flex-direction: column; min-width: 0; }
.board__name { font: 700 1.375rem/1.1 var(--df-font-display); letter-spacing: -0.02em; }
.board__desc { margin-top: 6px; font-size: .875rem; line-height: 1.45; color: var(--df-ui-text-dim); }
.board__foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 12px; }

/* ── Item control: Add square, then stepper ────────────────────────── */
.pick { display: flex; justify-content: flex-end; min-width: 140px; }
html:not(.js) .pick { display: none; }
.pick__add { display: inline-flex; align-items: center; gap: 12px; padding: 0; background: none; border: 0; color: var(--df-ui-text); cursor: pointer; }
.pick__add[hidden], .qty[hidden] { display: none; }
.pick__plus { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--df-ui-line-strong); font: 400 1.25rem/1 var(--df-font-body); transition: border-color .2s, color .2s; }
.pick__txt { font: 500 .75rem/1 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--df-ui-text-dim); transition: color .2s; }
.pick__add:focus-visible .pick__plus { border-color: var(--df-ui-accent); color: var(--df-ui-accent); }
@media (hover: hover) and (pointer: fine) {
  .pick__add:hover .pick__plus { border-color: var(--df-ui-accent); color: var(--df-ui-accent); }
  .pick__add:hover .pick__txt { color: var(--df-ui-text); }
}
.qty { display: inline-grid; grid-template-columns: 44px 52px 44px; height: 44px; border: 1px solid var(--df-ui-accent); }
.qty button { background: none; border: 0; color: var(--df-ui-text); font: 400 1.25rem/1 var(--df-font-body); cursor: pointer; }
.qty button:hover:not(:disabled) { background: color-mix(in srgb, var(--df-ui-accent) 12%, transparent); }
.qty button:disabled { color: var(--df-ui-text-faint); cursor: default; }
.qty input { width: 100%; min-width: 0; padding: 0; text-align: center; background: none; border: 0; border-radius: 0; color: var(--df-ui-text); font: 500 1rem/1 var(--df-font-mono); font-variant-numeric: tabular-nums; }
.qty button:focus-visible, .qty input:focus-visible { outline-offset: -2px; }

/* ── Request panel (desktop) ───────────────────────────────────────── */
.req {
  grid-column: 9 / span 4; position: sticky; top: calc(var(--nav-h) + 16px);
  max-height: calc(100svh - var(--nav-h) - 32px);
  display: flex; flex-direction: column; padding: 24px;
  background: var(--df-ui-bg-1); border: 1px solid var(--df-ui-line-strong);
  container: req / inline-size;
}
.req__head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--df-ui-line-strong); }
.req__head h2 { font: 700 1.5rem/1.2 var(--df-font-display); letter-spacing: -0.02em; white-space: nowrap; }
.req__head h2:focus { outline: none; }
.req__ref { font: 500 .75rem/1 var(--df-font-mono); letter-spacing: .06em; color: var(--df-ui-text-dim); white-space: nowrap; }
.req__close { display: none; }

.ro { flex: none; margin-top: 18px; }
.ro [hidden] { display: none; }
.ro__fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ro__fig b { font: 700 clamp(2.5rem, 3.4vw, 3.25rem)/1 var(--df-font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ro--long .ro__fig b { font-size: 2rem; }
.ro__fig span { font: 500 .8125rem/1.3 var(--df-font-mono); color: var(--df-ui-text-dim); }
.ro[data-mode="time"] .ro__fig span { flex-basis: 100%; margin-top: 2px; }
.ro__bar { display: flex; gap: 2px; height: 6px; margin-top: 12px; }
.ro__bar:empty { display: none; }
.ro__bar i { flex: var(--w) 0 0; min-width: 2px; background: var(--df-ui-accent); position: relative; }
.ro__bar i.plus { margin-right: 10px; }
.ro__bar i.plus::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% + 2px); width: 8px; background: repeating-linear-gradient(135deg, var(--df-ui-accent) 0 1px, transparent 1px 3px); }
.ro__cap { margin-top: 8px; font: 400 .75rem/1.45 var(--df-font-mono); color: var(--df-ui-text-dim); }
.ro__hint { font: 600 .875rem/1.45 var(--df-font-body); color: var(--df-ui-text); }
.ro__mail { margin-top: 12px; font: 400 .75rem/1.5 var(--df-font-mono); }
.ro__mail > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); padding: 2px 0; }
.ro__mail dt { color: var(--df-ui-text-dim); }
.ro__mail dd { color: var(--df-ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.req__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 14px; }
.req__scroll.is-scrollable { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.req__nojs { font-size: var(--fs-small); color: var(--df-ui-text-dim); }
.js .req__nojs { display: none; }
.req__lines { list-style: none; }
.req__lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; min-height: 34px; padding-left: 8px; margin-left: -8px; border-bottom: 1px dashed var(--df-ui-line-strong); font-size: .875rem; line-height: 1.3; }
.req__lines li:first-child { border-top: 1px dashed var(--df-ui-line-strong); }
.req__n { grid-column: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req__q { grid-column: 2; font: 500 .875rem/1 var(--df-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.req__rm { grid-column: 3; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--df-ui-text-dim); cursor: pointer; }
.req__rm[hidden] { display: none; }
.req__rm:hover { color: var(--df-ui-text); }
.req__rm svg { width: 12px; height: 12px; }
.req__step { display: none; }
.req__lines li.is-zero .req__n, .req__lines li.is-zero .req__q { color: var(--df-ui-text-faint); }
.req__pre { margin: 12px 0 0; padding: 12px; background: var(--df-ui-bg-2); border: 1px solid var(--df-ui-line); font: 400 .6875rem/1.5 var(--df-font-mono); color: var(--df-ui-text); white-space: pre-wrap; word-break: break-word; }
.req__pre[hidden] { display: none; }

.req__tools { flex: none; display: flex; align-items: center; justify-content: space-between; height: 36px; margin-top: 6px; }
.req__tools button { min-height: 32px; padding: 0; background: none; border: 0; color: var(--df-ui-text-dim); font: 500 .6875rem/1 var(--df-font-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .3em; cursor: pointer; }
.req__tools button:hover { color: var(--df-ui-text); }
.req__tools.is-idle { visibility: hidden; }

.req__foot { flex: none; margin-top: 10px; }
.req__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.req__actions .btn { width: 100%; min-height: 48px; padding-inline: 12px; }
.req__actions .btn[aria-disabled="true"], .req__actions .btn:disabled { opacity: .4; cursor: not-allowed; }
.req__msg { min-height: 2.9em; margin-top: 10px; font: 400 .75rem/1.45 var(--df-font-mono); color: var(--df-ui-text-dim); }
@container req (max-width: 400px) { .req__actions .btn { font-size: .75rem; letter-spacing: .06em; padding-inline: 10px; } }
@container req (max-width: 340px) {
  .req__head h2 { font-size: 1.25rem; }
  .req__ref { font-size: .6875rem; letter-spacing: .02em; }
  .req__lines li { font-size: .8125rem; }
}
@media (min-width: 1025px) and (max-height: 760px) { .req { padding: 20px; } .ro__fig b { font-size: 2.75rem; } .ro--long .ro__fig b { font-size: 1.875rem; } }
html:not(.js) .ro, html:not(.js) .req__lines, html:not(.js) .req__tools, html:not(.js) [data-req-copy] { display: none; }

/* ── Tablet and mobile: bar + sheet ────────────────────────────────── */
.reqbar, .req-scrim { display: none; }
@media (max-width: 1024px) {
  html:not(.js) .req { grid-column: 1 / -1; position: static; max-height: none; margin-top: var(--s6); }
  .js .req {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
    max-height: min(88svh, 760px); padding: 28px 20px calc(20px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; transform: translateY(100%); visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .js .req::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; background: var(--df-ui-line-strong); }
  .js .req.is-open { transform: none; visibility: visible; transition: transform .42s var(--ease), visibility 0s; }
  .js .req__close { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -12px -8px -12px 0; padding: 0 8px; background: none; border: 0; color: var(--df-ui-text-dim); font: 500 .6875rem/1 var(--df-font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .js .req__head { align-items: center; }
  .js .req__ref { margin-left: auto; }
  .js .req__lines li { grid-template-columns: minmax(0, 1fr) 44px 3.25rem 44px; min-height: 44px; gap: 0; }
  .js .req__step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--df-ui-text); font: 400 1.25rem/1 var(--df-font-body); cursor: pointer; }
  .js .req__step:disabled { color: var(--df-ui-text-faint); cursor: default; }
  .js .req__lines .req__n { grid-column: 1; }
  .js .req__lines [data-line-dec] { grid-column: 2; }
  .js .req__lines .req__q { grid-column: 3; text-align: center; }
  .js .req__lines [data-line-inc] { grid-column: 4; }
  .js .req__rm { display: none; }

  .js .reqbar:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: calc(64px + env(safe-area-inset-bottom)); padding: 0 var(--gutter) env(safe-area-inset-bottom);
    background: var(--df-ui-bg-1); border-top: 1px solid var(--df-ui-line-strong);
  }
  .reqbar__txt { min-width: 0; }
  .reqbar__fig { font: 700 1.0625rem/1.1 var(--df-font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reqbar__sub { margin-top: 3px; font: 400 .625rem/1.3 var(--df-font-mono); color: var(--df-ui-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reqbar .btn { flex: none; min-height: 44px; padding: 0 14px; }
  .js .req-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: rgb(5 10 18 / .6); }
  [data-theme="light"] .req-scrim:not([hidden]) { background: rgb(35 48 62 / .32); }
  .store-page .foot { padding-bottom: calc(var(--s7) + 64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 375px) { .reqbar .btn { font-size: .75rem; letter-spacing: .04em; padding: 0 10px; } }
@media (max-width: 359px) { .reqbar__fig { font-size: .9375rem; } }
@media (prefers-reduced-motion: reduce) { .js .req, .js .req.is-open { transition: none; } }

/* Compact store (Kunde 10.10.2026: „viel zu viel und unnötig groß“). */
.store-page .page-head { padding-top: calc(var(--nav-h) + clamp(40px, 5vw, 72px)); padding-bottom: var(--s4); }
.cfg-head h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.cfg-head__in { row-gap: var(--s3); }
.grp + .grp { margin-top: var(--s6); }
.grp__h { margin-bottom: var(--s3); font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
#cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#cells > .grp__h { grid-column: 1 / -1; }
#cells .cell { padding: 0; border: 0; display: flex; }
#cells .cell__grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 12px; width: 100%; }
#cells .cell__body { padding: 0 2px; }
#cells .cell__name { font-size: 1.25rem; }
#cells .cell__desc { margin-top: 4px; font-size: .8125rem; }
#cells .cell__rate { padding-top: 12px; gap: 8px; }
#cells .rate b { font-size: 1.75rem; }
#cells .rate > span { margin-top: 4px; font-size: .6875rem; }
#cells .cell__spec { margin-top: 12px; gap: 8px; padding-top: 8px; }
#cells .cell__spec dd { font-size: .8125rem; }
.pair { gap: var(--s4) 16px; }
.dcard .draw { aspect-ratio: 16 / 10; }
.dcard__name { font-size: 1.375rem; }
.dcard__body { padding-top: 12px; }
.dcard__desc { margin-top: 8px; font-size: .8125rem; }
.dcard__foot { padding-top: 12px; }
.store .pick__plus { width: 40px; height: 40px; }
@media (max-width: 760px) { #cells { grid-template-columns: minmax(0, 1fr); } #cells .cell__grid { grid-template-columns: 5fr 7fr !important; column-gap: 16px; } }
#cells .cell__body { display: grid; grid-template-rows: auto 3.2em auto auto; align-content: start; }
#cells .cell__desc { margin-top: 2px; }
#cells .cell__rate { margin-top: 0; align-items: center; }
#cells .rate > span { min-height: 2.9em; }
#cells .rate em { display: inline; }
@media (max-width: 760px) { #cells .cell__body { grid-template-rows: none; } #cells .rate > span { min-height: 0; } }
#cells .cell__grid { align-content: start; }
#cells .rate > span { min-height: 4.35em; }
#cells .rate em { display: block; }
/* cell cards: rate and + button always on one row (14.10.2026) */
#cells .cell__rate { flex-wrap: nowrap; }
#cells .rate { min-width: 0; }
#cells .pick { min-width: 0; flex: none; }
/* Touch & stepper fixes from the mobile/tablet audit (14.10.2026) */
#cells .cell__rate:has(.qty:not([hidden])) { flex-wrap: wrap; }
#cells .rate > span { hyphens: auto; -webkit-hyphens: auto; }
.store .pick__plus { width: 44px; height: 44px; }
.req__rm { width: 44px; height: 44px; }
.req__tools { height: 44px; }
.req__tools button { min-height: 44px; }
.js .req__step:disabled { color: var(--df-ui-text-faint); opacity: .35; }