/* ==================================================================
   3D Gitterrost-Konfigurator — v5
   Defaults match the brand palette; theme block settings override via
   inline CSS variables on .grating-configurator-app.
   ================================================================== */

.grating-configurator-app {
  --gr-red: #b51823;
  --gr-red-dark: #a01e0e;
  --gr-red-soft: #fdf1f2;
  --gr-text: #242424;
  --gr-text-2: #494949;
  --gr-border: #e7e7e7;
  --gr-border-2: #cccccc;
  --gr-bg: #fafafa;
  --gr-green: #4e6e44;
  --gr-sidebar-bg: #ffffff;
  --gr-btn-text: #ffffff;
  --gr-surface: #ffffff;

  --gr-gap: 1.5rem;
  --gr-sidebar-width: 400px;
  --gr-sidebar-pad: 20px;
  --gr-radius: 10px;
  --gr-radius-sm: 6px;
  --gr-viewer-height: 640px;

  --gr-title-size: 22px;
  --gr-subtitle-size: 13px;
  --gr-body-size: 13px;
  --gr-label-size: 12px;
  --gr-price-size: 26px;
  --gr-btn-size: 15px;
  --gr-btn-pad-y: 14px;
  --gr-btn-pad-x: 16px;

  display: grid;
  grid-template-columns: 1fr var(--gr-sidebar-width);
  gap: var(--gr-gap);
  align-items: start;
  color: var(--gr-text);
  font-size: var(--gr-body-size);
  outline: none;
}

/* ---- Viewer ---- */
/* `relative` at every width, not only where it is sticky. The toolbar and the
   3D/plan switch are absolutely positioned against this box; a static viewer
   is not a containing block, so they would resolve against whatever the theme
   happens to have positioned further up and land on top of each other
   somewhere else entirely. The sticky lift is the part that is desktop-only —
   on a phone the viewer is a full-width block above the options, and pinning
   it would keep the controls in view while the shopper scrolls past what they
   control. */
.grating-configurator__viewer {
  position: relative;
  min-height: var(--gr-viewer-height);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius);
  overflow: hidden;
  background: var(--gr-bg);
}

/* Un-nested on purpose: a nested @media is CSS Nesting, which a shopper on an
   older mobile Safari simply drops — taking the sticky viewer with it on the
   desktop widths that want it. */
@media (min-width: 800px) {
  .grating-configurator__viewer {
    position: sticky;
    top: 9rem;
  }
}

.grating-configurator__canvas {
  position: relative;
  width: 100%;
  height: var(--gr-viewer-height);
}

.grating-configurator__canvas canvas {
  display: block;
}

/* ---- Floating toolbar ---- */
/* Fit view, Dimensions and Edit all act on the 3D scene, so the plan view hides
   the whole bar. Spelled out because the rule below sets `display`, which beats
   the browser's own `[hidden] { display: none }`. */
.grating-toolbar[hidden] {
  display: none;
}

.grating-toolbar {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 5;
  flex-wrap: wrap;
  /* The three labels are merchant-editable, so the bar has no width anyone can
     count on. Bound it to the viewer and let it wrap rather than run off the
     side of the canvas. */
  max-width: calc(100% - 24px);
}


.grating-toolbar__btn {
  border: 1px solid var(--gr-border-2);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  color: var(--gr-text);
  font-size: var(--gr-label-size);
  font-weight: 600;
  padding: 7px 11px;
  border-radius: var(--gr-radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.grating-toolbar__btn:hover {
  border-color: var(--gr-red);
}

.grating-toolbar__btn[aria-pressed="true"] {
  background: var(--gr-red);
  border-color: var(--gr-red);
  color: var(--gr-btn-text);
}

/* ---- Dimension labels (CSS2D) ---- */
.grating-dim-label {
  font: 600 var(--gr-label-size)/1 ui-sans-serif, system-ui, sans-serif;
  color: var(--gr-text);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--gr-border-2);
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ---- Loading / error overlay ---- */
.grating-status[hidden] {
  display: none !important;
}

.grating-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: color-mix(in srgb, var(--gr-bg) 88%, transparent);
  color: var(--gr-text-2);
  font-size: var(--gr-body-size);
  z-index: 10;
}

.grating-status.is-error {
  background: rgba(254, 242, 242, 0.97);
  color: #991b1b;
  padding: 24px;
  text-align: center;
}

.grating-status.is-error code {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: var(--gr-radius-sm);
  padding: 6px 8px;
  max-width: 90%;
  word-break: break-word;
}

.grating-status__spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--gr-border-2);
  border-top-color: var(--gr-red);
  border-radius: 50%;
  animation: grating-spin 0.8s linear infinite;
}

.grating-status.is-error .grating-status__spinner {
  display: none;
}

@keyframes grating-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Sidebar ---- */
.grating-configurator__sidebar {
  padding: var(--gr-sidebar-pad);
  background: var(--gr-sidebar-bg);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius);
  /* max-height: 900px; */
  overflow-y: auto;
}

.grating-configurator__title {
  margin: 0 0 6px;
  font-size: var(--gr-title-size);
  color: var(--gr-text);
}

.grating-configurator__subtitle {
  margin: 0 0 16px;
  font-size: var(--gr-subtitle-size);
  color: var(--gr-text-2);
}

/* ---- Groups ---- */
.gr-group {
  border: none;
  border-top: 1px solid var(--gr-border);
  padding: 10px 0 6px;
  margin-top: 1.5rem;
}

.gr-group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.gr-group legend {
  font-size: var(--gr-label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gr-red);
  padding: 0;
  /* margin-bottom: 10px; */
}

/* A heading that carries a group-wide control (the cut-outs' reset). */
.gr-group__legend--action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.gr-cut-reset {
  font: 600 var(--gr-label-size)/1.2 inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gr-text-2);
  background: none;
  border: 1px solid var(--gr-border-2);
  border-radius: var(--gr-radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.gr-cut-reset:hover:not(:disabled) {
  border-color: var(--gr-red);
  color: var(--gr-red);
}

.gr-cut-reset:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---- Merchant note under an option heading ---- */
/* Set from sanitized merchant HTML (see descriptionEl); the selectors below are
   the whole vocabulary that markup is allowed to use. */
.gr-desc {
  margin: 0 0 10px;
  font-size: calc(var(--gr-label-size, 12px) + 0.5px);
  line-height: 1.5;
  color: var(--gr-text-2, #494949);
}

.gr-desc p {
  margin: 0 0 0.45em;
}

.gr-desc p:last-child {
  margin-bottom: 0;
}

.gr-desc ul,
.gr-desc ol {
  margin: 0 0 0.45em;
  padding-left: 1.25em;
}

.gr-desc li {
  margin-bottom: 0.15em;
}

.gr-desc a {
  color: inherit;
  text-decoration: underline;
}

.gr-desc a:hover {
  color: var(--gr-red);
}

.grc-edit__desc {
  margin-bottom: 7px;
  font-size: calc(var(--gr-label-size, 12px) - 0.5px);
}

/* ---- Option pills ---- */
.gr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gr-pill {
  font: 600 var(--gr-body-size)/1.25 inherit;
  color: var(--gr-text);
  background: var(--gr-surface);
  border: 1px solid var(--gr-border-2);
  border-radius: var(--gr-radius-sm);
  padding: 8px 11px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.gr-pill:hover {
  border-color: var(--gr-red);
}

.gr-pill.is-active {
  border-color: var(--gr-red);
  background: var(--gr-red);
  color: var(--gr-btn-text);
}

/* A value the €/m² grid doesn't price with the current pick (onlyPricedCombos). */
.gr-pill--disabled,
.gr-pill--disabled:hover {
  opacity: 0.4;
  border-color: var(--gr-border-2);
  text-decoration: line-through;
  cursor: not-allowed;
}

.gr-ral[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.gr-pills--sm .gr-pill {
  padding: 6px 9px;
  font-size: var(--gr-label-size);
}

.gr-pill--thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  width: 108px;
}

.gr-pill__img {
  width: 100%;
  height: 76px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  display: block;
}

.gr-pill--thumb.is-active .gr-pill__img {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* A powder-coat finish: a sample of the coat, in the colour picked for it
   (--gr-coat, set by the app; anthracite until a colour is chosen). */
.gr-pill--finish {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gr-finish-chip {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--gr-coat, #3b4044);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.gr-pill.is-active .gr-finish-chip {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px #fff;
}

/* Matt: flat, the light spread wide and soft. */
.gr-finish-chip--matt {
  background-image: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.1), transparent 70%);
}

/* Glänzend: a sharp highlight and a darker rim, like a lacquered surface. */
.gr-finish-chip--glaenzend {
  background-image:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 9%, rgba(255, 255, 255, 0.35) 10% 24%, transparent 42%),
    linear-gradient(160deg, transparent 55%, rgba(0, 0, 0, 0.3));
}

/* Feinstruktur: a fine grain that breaks up the light. */
.gr-finish-chip--feinstruktur {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 -0.35'/%3E%3C/filter%3E%3Crect width='44' height='44' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -0.45'/%3E%3C/filter%3E%3Crect width='44' height='44' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.14), transparent 70%);
  background-size: 22px 22px, 22px 22px, auto;
}

/* ---- Selects ---- */
.gr-select {
  width: 100%;
  padding: 9px 10px;
  font-size: var(--gr-body-size);
  color: var(--gr-text);
  border: 1px solid var(--gr-border-2);
  border-radius: var(--gr-radius-sm);
  background: var(--gr-surface);
  margin-bottom: 6px;
}

.gr-select:focus {
  outline: none;
  border-color: var(--gr-red);
}

/* ---- Dimensions ---- */
.gr-dims {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.gr-dim {
  display: block;
  font-size: var(--gr-label-size);
  font-weight: 600;
  color: var(--gr-text-2);
}

/* The size form carries every field it might need and shows the ones the
   selected grating type asks for — two sides, or the single Durchmesser of a
   Rundrost. `hidden` alone cannot do that here: it is only `display: none` from
   the browser's own stylesheet, and the rule above sets `display` on the same
   element, which beats it. Without this the diameter box sits next to Length
   and Width on every type, and typing in it silently resizes them. */
.gr-dim[hidden] {
  display: none !important;
}

/* A Rundrost asks one question where the others ask two, so the single
   Durchmesser takes the width both of them had. */
.gr-dim--diameter {
  grid-column: span 2;
}

.gr-dim input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  font-size: var(--gr-body-size);
  border: 1px solid var(--gr-border-2);
  border-radius: var(--gr-radius-sm);
}

.gr-dim input:focus {
  outline: none;
  border-color: var(--gr-red);
}

/* ---- RAL palette ---- */
.gr-ral-wrap[hidden] {
  display: none !important;
}

.gr-ral-wrap {
  margin: 4px 0 10px;
  padding: 10px;
  background: var(--gr-bg);
  border: 1px solid var(--gr-border);
  border-radius: calc(var(--gr-radius) - 2px);
}

.gr-ral-name {
  font-size: var(--gr-label-size);
  color: var(--gr-text-2);
  margin-bottom: 8px;
}

.gr-ral-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
  gap: 5px;
  margin-bottom: 10px;
}

.gr-ral {
  aspect-ratio: 1;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}

.gr-ral:hover {
  transform: scale(1.12);
}

.gr-ral.is-active {
  outline: 2px solid var(--gr-red);
  outline-offset: 1px;
}

/* ---- RAL search (the shopper picks a coating colour) ---- */
.gr-ralpick {
  position: relative;
}

/* The drawer lays options out as a wrapping row of chips; the picker is one
   control, not a chip, so it takes the whole row. */
.grc-edit__chips > .gr-ralpick {
  flex: 1 1 100%;
}

.gr-ralpick__btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  background: var(--gr-surface, #fff);
  border: 1px solid var(--gr-border-2, #ccc);
  border-radius: calc(var(--gr-radius, 10px) - 2px);
  font: inherit;
  font-size: var(--gr-label-size, 12px);
  color: var(--gr-text, #242424);
  text-align: left;
  cursor: pointer;
}

.gr-group.is-invalid .gr-ralpick__btn {
  border-color: var(--gr-red, #b51823);
  box-shadow: 0 0 0 1px var(--gr-red, #b51823);
}

.gr-ralpick__btn:hover {
  border-color: var(--gr-red, #b51823);
}

.gr-ralpick__btn::after {
  content: "";
  margin-left: auto;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
  opacity: 0.55;
}

.gr-ralpick__btn[aria-expanded="true"]::after {
  transform: translateY(-2px) rotate(180deg);
}

.gr-ralpick__chip {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* Nothing picked yet: a struck-through square reads as "empty", where a plain
   grey one reads as "grey is your colour". */
.gr-ralpick__chip--none {
  background:
    linear-gradient(45deg, transparent 45%, var(--gr-border-2, #ccc) 45%,
      var(--gr-border-2, #ccc) 55%, transparent 55%),
    var(--gr-bg, #fafafa);
}

.gr-ralpick__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Absolute, so opening the palette does not shove the options below it down
   the page — the shopper is comparing colours, not re-finding their place. */
.gr-ralpick__panel {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  padding: 8px;
  background: var(--gr-surface, #fff);
  border: 1px solid var(--gr-border-2, #ccc);
  border-radius: calc(var(--gr-radius, 10px) - 2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.gr-ralpick__panel[hidden] {
  display: none;
}

.gr-ralpick__search {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--gr-border, #e7e7e7);
  border-radius: calc(var(--gr-radius, 10px) - 3px);
  font: inherit;
  font-size: var(--gr-label-size, 12px);
  color: var(--gr-text, #242424);
  background: var(--gr-bg, #fafafa);
}

.gr-ralpick__search:focus {
  outline: none;
  border-color: var(--gr-red, #b51823);
}

.gr-ralpick__list {
  max-height: 236px;
  overflow-y: auto;
  margin-top: 6px;
}

.gr-ralpick__row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 6px;
  background: none;
  border: none;
  border-radius: 4px;
  font: inherit;
  color: var(--gr-text, #242424);
  text-align: left;
  cursor: pointer;
}

.gr-ralpick__row:hover,
.gr-ralpick__row.is-on {
  background: var(--gr-bg, #fafafa);
}

.gr-ralpick__row.is-on {
  outline: 1px solid var(--gr-red, #b51823);
}

.gr-ralpick__dot {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.gr-ralpick__name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.gr-ralpick__name strong {
  font-size: var(--gr-label-size, 12px);
  font-variant-numeric: tabular-nums;
}

.gr-ralpick__name span {
  font-size: calc(var(--gr-label-size, 12px) - 1px);
  color: var(--gr-text-2, #494949);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gr-ralpick__clear {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 7px 8px;
  background: none;
  border: none;
  border-top: 1px solid var(--gr-border, #e7e7e7);
  border-radius: 0 0 calc(var(--gr-radius, 10px) - 3px) calc(var(--gr-radius, 10px) - 3px);
  font: inherit;
  font-size: var(--gr-label-size, 12px);
  color: var(--gr-text-2, #494949);
  text-align: left;
  cursor: pointer;
}

.gr-ralpick__clear:hover {
  color: var(--gr-red, #b51823);
  background: var(--gr-bg, #fafafa);
}

.gr-ralpick__clear[hidden] {
  display: none;
}

.gr-ralpick__note {
  margin: 8px 4px;
  font-size: var(--gr-label-size, 12px);
  color: var(--gr-text-2, #494949);
}

/* ---- Cut-out buttons ---- */
.gr-cut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.gr-cut-btn {
  font: 600 var(--gr-label-size)/1.2 inherit;
  color: var(--gr-text);
  background: var(--gr-surface);
  border: 1px solid var(--gr-border-2);
  border-radius: var(--gr-radius-sm);
  padding: 8px 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.gr-cut-btn:hover {
  border-color: var(--gr-red);
  color: var(--gr-red);
}

.gr-hint {
  font-size: var(--gr-label-size);
  color: var(--gr-text-2);
  margin: 0 0 8px;
}

/* ---- Cut-out list (one card per placed cut-out) ---- */
.gr-cut-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.gr-cut-empty {
  margin: 0;
  font-size: var(--gr-label-size);
  color: var(--gr-text-2);
}

.gr-cut-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 10px;
  background: var(--gr-surface);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-sm);
  cursor: pointer;
}

.gr-cut-card.is-selected {
  border-color: var(--gr-red);
  background: var(--gr-red-soft);
}

/* A cut-out running into another one is worth seeing before the order goes in,
   but it is not an error — two notches that meet are a legitimate shape. */
.gr-cut-card.is-clash {
  border-color: #b06a10;
}

.gr-cut-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gr-cut-card__name {
  font-size: var(--gr-label-size);
  font-weight: 600;
  color: var(--gr-text);
}

.gr-cut-card__name b {
  display: inline-block;
  min-width: 15px;
  margin-right: 4px;
  color: var(--gr-text-2);
  font-variant-numeric: tabular-nums;
}

.gr-cut-card__del {
  border: 0;
  background: none;
  color: var(--gr-text-2);
  font-size: 14px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: var(--gr-radius-sm);
  cursor: pointer;
}

.gr-cut-card__del:hover {
  color: var(--gr-red);
  background: var(--gr-red-soft);
}

.gr-cut-card__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.gr-cut-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: calc(var(--gr-label-size) - 1px);
  color: var(--gr-text-2);
}

.gr-cut-field input {
  width: 100%;
  padding: 6px 7px;
  font: 600 var(--gr-label-size)/1 inherit;
  font-variant-numeric: tabular-nums;
  color: var(--gr-text);
  background: var(--gr-surface);
  border: 1px solid var(--gr-border-2);
  border-radius: var(--gr-radius-sm);
}

.gr-cut-field input:focus {
  outline: 2px solid var(--gr-red);
  outline-offset: -1px;
  border-color: var(--gr-red);
}

.gr-cut-warn {
  margin: 2px 0 0;
  font-size: calc(var(--gr-label-size) - 1px);
  line-height: 1.45;
  color: #8a5310;
}

.gr-cut-warn[hidden] {
  display: none;
}

/* ==================================================================
   Plan view — the panel from above, to scale (grating-plan.js)

   Everything the SVG draws is styled here rather than by attribute, so the
   merchant's theme-editor colours reach the drawing like they reach the rest
   of the block.
   ================================================================== */
.gr-plan {
  position: relative;
  width: 100%;
  height: var(--gr-viewer-height);
  background: var(--gr-bg);
  touch-action: none;
  outline: none;
}

.gr-plan[hidden] {
  display: none;
}

/* ---- No WebGL: the plan view IS the viewer ----
   The browser refused a 3D context, so there is no canvas to sit beside and no
   tab bar to leave room for. The column becomes a notice with the drawing under
   it, and the drawing takes whatever height is left instead of the fixed
   viewer height it would otherwise stack on top of. */
.gr-no-3d .grating-configurator__viewer {
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.gr-no-3d .gr-plan {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.gr-no3d {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--gr-border-2);
  border-radius: var(--gr-radius-sm);
  background: var(--gr-surface);
  color: var(--gr-text-2);
  font-size: var(--gr-label-size);
  line-height: 1.5;
}

.gr-no3d__icon {
  flex: none;
}

.gr-plan:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gr-red);
}

.gr-plan__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.gr-plan__panel {
  fill: var(--gr-surface);
  stroke: var(--gr-border-2);
  stroke-width: 1.25;
}

/* The real bars, from grating-layout.js — the same ones the 3D panel is built
   from. Two weights so the Tragstäbe and the Füllstäbe read apart. */
.gr-plan__bar {
  fill: var(--gr-text);
}

.gr-plan__bar--bearing {
  fill-opacity: 0.32;
}

.gr-plan__bar--cross {
  fill-opacity: 0.17;
}

/* Randeinfassung — solid steel all the way round, so it reads heavier. */
.gr-plan__frame {
  fill: var(--gr-text);
  fill-opacity: 0.45;
}

/* See-through, so the bars stay readable underneath it: what the shopper is
   judging is which Tragstäbe and Füllstäbe the cut-out crosses. The outline
   stays solid, so the edge itself is still exact. */
.gr-plan__hole {
  fill: var(--gr-red);
  fill-opacity: 0.16;
  stroke: var(--gr-red);
  stroke-width: 1.2;
  cursor: move;
}

.gr-plan__hole.is-selected {
  fill-opacity: 0.3;
  stroke-width: 2;
}

.gr-plan__hole.is-clash {
  fill: #b06a10;
  stroke: #b06a10;
}

.gr-plan__cross line {
  stroke: var(--gr-red);
  stroke-width: 1;
  opacity: 0.5;
  pointer-events: none;
}

.gr-plan__handle {
  fill: var(--gr-surface);
  stroke: var(--gr-red);
  stroke-width: 1.6;
}

.gr-plan__rule line {
  stroke: var(--gr-text-2);
  stroke-width: 1;
  opacity: 0.65;
  pointer-events: none;
}

.gr-plan__dim {
  fill: var(--gr-text-2);
  font-size: var(--gr-label-size);
  font-family: inherit;
  pointer-events: none;
}

.gr-plan__readout,
.gr-plan__hint {
  position: absolute;
  margin: 0;
  font-size: calc(var(--gr-label-size) - 1px);
  pointer-events: none;
}

.gr-plan__readout {
  left: 10px;
  bottom: 10px;
  padding: 5px 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gr-text);
  background: var(--gr-surface);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius-sm);
}

/* Bottom RIGHT: the length rule now runs across the top of the panel and the
   3D / plan switch owns the top-right corner, so the only corner left free of
   the drawing is the one opposite the read-out. */
.gr-plan__hint {
  right: 10px;
  bottom: 10px;
  max-width: 55%;
  line-height: 1.4;
  text-align: right;
  color: var(--gr-text-2);
}

/* ---- 3D / plan switch ---- */
.gr-viewswitch {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: 1px solid var(--gr-border-2);
  border-radius: var(--gr-radius-sm);
}

.gr-viewswitch__btn {
  border: 0;
  background: none;
  color: var(--gr-text-2);
  font-size: var(--gr-label-size);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: calc(var(--gr-radius-sm) - 1px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.gr-viewswitch__btn:hover {
  color: var(--gr-red);
}

.gr-viewswitch__btn[aria-pressed="true"] {
  background: var(--gr-red);
  color: var(--gr-btn-text);
}

/* ---- Summary ---- */
.gr-summary {
  margin-top: 14px;
  padding: 12px;
  background: var(--gr-bg);
  border: 1px solid var(--gr-border);
  border-radius: calc(var(--gr-radius) - 2px);
  font-size: var(--gr-label-size);
}

.gr-summary-title {
  font-size: var(--gr-body-size);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--gr-text);
}

.gr-summary > div > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--gr-border);
}

.gr-summary span {
  color: var(--gr-text-2);
}

/* Two columns once the summary box itself is wide enough.
 *
 * Keyed to the box rather than the viewport on purpose: the sidebar is a
 * merchant setting (280–520px) and goes full width below 900px, so screen width
 * says nothing useful about how much room this list actually has. At the 400px
 * default the box clears the threshold and pairs up; a narrow sidebar stays in
 * one column instead of squeezing two.
 *
 * Browsers without container queries simply keep the single-column list. */
.gr-summary {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .gr-summary > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }

  /* Label above value — "Bearing bar (height/thickness)" and its value can't sit
   * side by side in half the width without wrapping into a mess. */
  .gr-summary > div > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 5px 0;
  }
}

/* ---- Price breakdown ----
 *
 * The price, line by line, in the order the formula applies them. A component
 * of the price rather than a fact about the configuration, so it sits between
 * the summary box and the estimate — and the merchant can swap that order.
 */
.gr-surcharge {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: var(--gr-label-size);
  background: var(--gr-red-soft);
  border: 1px solid color-mix(in srgb, var(--gr-red) 35%, white);
  border-radius: calc(var(--gr-radius) - 2px);
}

.gr-surcharge[hidden] {
  display: none;
}

.gr-bd-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--gr-text);
}

.gr-bd-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}

.gr-bd-row span {
  color: var(--gr-text-2);
}

.gr-bd-row strong {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Subtotal and total close a group, so they carry the rule above them. */
.gr-bd-sub,
.gr-bd-total {
  border-top: 1px solid color-mix(in srgb, var(--gr-red) 25%, transparent);
  margin-top: 3px;
  padding-top: 5px;
}

.gr-bd-total span,
.gr-bd-total strong {
  color: var(--gr-red);
  font-weight: 700;
}

/* The weight sits under the total as a fact, not a charge — no rule, quieter. */
.gr-bd-weight {
  margin-top: 2px;
}

/* Why a number isn't what the rule alone would suggest — the minimum order
   price, most often. Full width, wrapping, quieter than the figures. */
.gr-bd-note {
  margin: 6px 0 0;
  font-size: 0.92em;
  line-height: 1.45;
  opacity: 0.8;
}

/* ---- Price + cart ---- */
.gr-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 16px 0 10px;
}

.gr-price-label {
  font-size: var(--gr-body-size);
  font-weight: 600;
  color: var(--gr-text-2);
}

.gr-price {
  font-size: var(--gr-price-size);
  font-weight: 800;
  color: var(--gr-red);
}

.gr-btn-cart {
  width: 100%;
  font: 700 var(--gr-btn-size)/1 inherit;
  color: var(--gr-btn-text);
  background: var(--gr-red);
  border: none;
  border-radius: var(--gr-radius-sm);
  padding: var(--gr-btn-pad-y) var(--gr-btn-pad-x);
  cursor: pointer;
  transition: background 0.15s;
}

.gr-btn-cart:hover {
  background: var(--gr-red-dark);
}

.gr-btn-cart:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Sold out / not available for this combination: greyed rather than faded red,
   so it reads as a state of the product, not a button that is still loading. */
.gr-btn-cart.is-unavailable,
.gr-btn-cart.is-unavailable:hover {
  background: #8a8a8a;
  opacity: 1;
  cursor: not-allowed;
}

/* ---- Quantity + buy button, on one row ---- */
.gr-buy-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

/* The button is moved into this row by grating-app.js and has to give up the
   full width it carries as a standalone element. */
.gr-buy-row .gr-btn-cart {
  flex: 1;
  min-width: 0;
  width: auto;
}

.gr-qty-field {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gr-qty-field__label {
  font-size: var(--gr-label-size);
  font-weight: 600;
  color: var(--gr-text-2);
}

.gr-qty {
  display: flex;
  align-items: stretch;
  background: var(--gr-surface);
  border: 1px solid var(--gr-border-2);
  border-radius: var(--gr-radius-sm);
  overflow: hidden;
}

.gr-qty__btn {
  width: 34px;
  flex: none;
  font: 600 16px/1 inherit;
  color: var(--gr-text-2);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.gr-qty__btn:hover:not(:disabled) {
  background: var(--gr-bg);
  color: var(--gr-text);
}

.gr-qty__btn:disabled { opacity: 0.35; cursor: default; }

.gr-qty__input {
  width: 46px;
  flex: none;
  padding: var(--gr-btn-pad-y) 0;
  font: 700 var(--gr-body-size)/1 inherit;
  text-align: center;
  color: var(--gr-text);
  background: none;
  border: none;
  border-left: 1px solid var(--gr-border);
  border-right: 1px solid var(--gr-border);
  -moz-appearance: textfield;
  appearance: textfield;
}

/* The spinners would sit next to our own ± buttons and do the same job. */
.gr-qty__input::-webkit-outer-spin-button,
.gr-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gr-qty__input:focus { outline: none; }
.gr-qty:focus-within { border-color: var(--gr-red); }

.gr-note {
  font-size: var(--gr-label-size);
  color: var(--gr-text-2);
  margin: 8px 0 0;
}

/* ---- Start again ---- */
/* Quiet on purpose: it sits under the buy button and throws work away, so it
   must never compete with the button above it for a hurried click. */
.gr-btn-reset {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--gr-text-2, #494949);
  font: inherit;
  font-size: var(--gr-label-size, 12px);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.gr-btn-reset:hover { color: var(--gr-red, #b51823); }

.gr-btn-reset:focus-visible {
  outline: 2px solid var(--gr-red, #b51823);
  outline-offset: 2px;
  border-radius: var(--gr-radius-sm, 6px);
}

/* ---- Changing an order, not building a new panel ---- */
/* Sits above everything in the sidebar, because "this is an edit" has to be
   read before anything is changed — not discovered from the button's label. */
.gr-edit-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--gr-red);
  border-radius: var(--gr-radius-sm);
  background: var(--gr-red-soft);
  color: var(--gr-text);
  font-size: var(--gr-label-size);
  line-height: 1.4;
}

.gr-edit-notice__cancel {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gr-red);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.gr-edit-notice__cancel:hover { color: var(--gr-red-dark); }

/* Saved: the same box, no longer a warning — the work is done, not pending. */
.gr-edit-notice.is-saved {
  border-color: var(--gr-green);
  background: var(--gr-surface);
}

.gr-edit-notice.is-saved .gr-edit-notice__cancel { color: var(--gr-green); }

/* ---- Editing cursor ---- */
.grating-configurator-app.is-editing .grating-configurator__canvas {
  cursor: crosshair;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .grating-configurator-app {
    grid-template-columns: 1fr;
  }
  .grating-configurator__canvas,
  .gr-plan,
  .grating-configurator__viewer {
    height: min(440px, var(--gr-viewer-height));
    min-height: min(440px, var(--gr-viewer-height));
  }
  .grating-configurator__sidebar {
    max-height: none;
  }

  /* Two floating bars pinned to the same top row: the toolbar at the left, the
     3D/plan switch at the right. Beside a 700px canvas they never meet; across
     a phone the three toolbar buttons alone want more than the full width, so
     the bar wraps INTO the switch and the two sit on top of each other.
     Splitting them by edge rather than by width — the labels are merchant
     settings, so there is no width to design against. The switch keeps the top
     (two short tabs, always one row) and the toolbar takes the foot of the
     viewer, bounded left and right so it wraps inside it. */
  .grating-toolbar {
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* ==================================================================
   Order-request form (checkout mode "quote")
   The modal is portalled to <body>, so it repeats the palette fallbacks
   and receives the block's --gr-* variables via a copied inline style.
   ================================================================== */
.gr-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(18, 18, 18, 0.55);
  color: var(--gr-text, #242424);
  font-size: var(--gr-body-size, 13px);
  -webkit-tap-highlight-color: transparent;
  animation: gr-fade 0.15s ease-out;
}

@keyframes gr-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gr-modal {
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: var(--gr-sidebar-bg, #fff);
  border-radius: var(--gr-radius, 10px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.gr-modal__body {
  padding: clamp(18px, 4vw, 28px);
}

.gr-modal__head {
  margin-bottom: 16px;
}

.gr-modal__title {
  margin: 0;
  font-size: var(--gr-title-size, 22px);
  font-weight: 800;
  color: var(--gr-text, #242424);
}

.gr-modal__intro {
  margin: 6px 0 0;
  font-size: var(--gr-subtitle-size, 13px);
  color: var(--gr-text-2, #494949);
}

.gr-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gr-field--full { grid-column: span 2; }
.gr-field--half { grid-column: span 1; }

.gr-field__label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--gr-label-size, 12px);
  font-weight: 600;
  color: var(--gr-text-2, #494949);
}

.gr-field__input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  font: inherit;
  font-size: var(--gr-body-size, 13px);
  color: var(--gr-text, #242424);
  background: var(--gr-surface, #fff);
  border: 1px solid var(--gr-border-2, #ccc);
  border-radius: var(--gr-radius-sm, 6px);
}

.gr-field__input:focus {
  outline: none;
  border-color: var(--gr-red, #b51823);
}

.gr-field__checkrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.gr-field__checkrow .gr-field__label {
  margin: 0;
  font-weight: 500;
}

.gr-field__check {
  margin: 2px 0 0;
  flex: none;
}

.gr-field__help,
.gr-field__error {
  margin: 4px 0 0;
  font-size: var(--gr-label-size, 12px);
}

.gr-field__help { color: var(--gr-text-2, #494949); }
.gr-field__error { color: var(--gr-red, #b51823); font-weight: 600; }

.gr-field.is-invalid .gr-field__input { border-color: var(--gr-red, #b51823); }

.gr-form__error {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--gr-red, #b51823);
  background: var(--gr-red-soft, #fdf1f2);
  border-radius: var(--gr-radius-sm, 6px);
}

.gr-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.gr-form__actions--center { justify-content: center; }

.gr-form__actions .gr-btn-cart {
  width: auto;
  min-width: 180px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.gr-btn-secondary {
  font: 600 var(--gr-btn-size, 15px)/1 inherit;
  color: var(--gr-text-2, #494949);
  background: transparent;
  border: 1px solid var(--gr-border-2, #ccc);
  border-radius: var(--gr-radius-sm, 6px);
  padding: var(--gr-btn-pad-y, 14px) var(--gr-btn-pad-x, 16px);
  cursor: pointer;
}

.gr-btn-secondary:hover { background: var(--gr-bg, #fafafa); }
.gr-btn-secondary:disabled { opacity: 0.55; cursor: default; }

/* ---- Thank-you panel ---- */
.gr-thanks { text-align: center; }

.gr-thanks__mark {
  width: 52px;
  height: 52px;
  margin: 4px auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  background: var(--gr-green, #4e6e44);
  border-radius: 50%;
}

.gr-thanks__title {
  margin: 0;
  font-size: var(--gr-title-size, 22px);
  font-weight: 800;
}

.gr-thanks__text {
  margin: 10px auto 0;
  max-width: 44ch;
  font-size: var(--gr-body-size, 13px);
  line-height: 1.55;
  color: var(--gr-text-2, #494949);
  white-space: pre-line;
}

@media (max-width: 560px) {
  .gr-form__grid { grid-template-columns: 1fr; }
  .gr-field--half { grid-column: span 1; }
  .gr-field--full { grid-column: span 1; }
  .gr-form__actions { flex-direction: column-reverse; align-items: stretch; }
  .gr-form__actions .gr-btn-cart { width: 100%; }
}

/* ==================================================================
   Draft order cart (blocks/draft-cart.liquid)
   Standalone section: it repeats the palette fallbacks because it can
   be placed on a page that has no configurator block on it.
   ================================================================== */
.grating-draft-cart {
  box-sizing: border-box;
  max-width: var(--gr-max-width, 900px);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px);
  color: var(--gr-text, #242424);
  font-size: var(--gr-body-size, 14px);
  background: var(--gr-bg, #fafafa);
  border-radius: var(--gr-radius, 10px);
}

.grating-draft-cart *,
.grating-draft-cart *::before,
.grating-draft-cart *::after { box-sizing: border-box; }

.grc-heading {
  margin: 0;
  font-size: var(--gr-title-size, 22px);
  font-weight: 800;
  color: var(--gr-text, #242424);
}

.grc-intro {
  margin: 6px 0 0;
  font-size: var(--gr-body-size, 14px);
  color: var(--gr-text-2, #494949);
}

.grc-empty,
.grc-loading {
  margin: 18px 0 0;
  padding: 18px;
  text-align: center;
  color: var(--gr-text-2, #494949);
  background: var(--gr-surface, #fff);
  border: 1px dashed var(--gr-border-2, #ccc);
  border-radius: var(--gr-radius-sm, 6px);
}

/* ------------------------------------------------------------------
   Editing one saved order (assets/grating-edit.js)

   Takes over the cart body. Denser than the configurator's sidebar on
   purpose: a 460px drawer has no canvas to sit beside, so the options
   are chips rather than pill rows, and the preview is pinned to the
   corner with the running total under it — the one number that must
   never scroll out of sight while the shopper works down the list.
   ------------------------------------------------------------------ */
.grc-edit {
  padding: 14px 16px 12px;
  background: var(--gr-surface, #fff);
  border: 1px solid var(--gr-border, #e7e7e7);
  border-radius: var(--gr-radius-sm, 6px);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04);
}

.grc-edit__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.grc-edit__title {
  margin: 0;
  font-size: calc(var(--gr-body-size, 14px) + 1px);
  font-weight: 700;
  color: var(--gr-text, #242424);
}

.grc-edit__ref {
  font-size: var(--gr-label-size, 12px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gr-text-2, #494949);
}

.grc-edit__body::after { content: ""; display: block; clear: both; }

/* The preview floats beside the controls and stays put as they scroll.
   `float` rather than a grid column so the option chips fill the width
   again once it has been passed. */
.grc-edit__aside {
  position: sticky;
  top: 8px;
  float: right;
  width: 132px;
  margin: 0 0 12px 14px;
  padding: 8px;
  background: var(--gr-surface, #fff);
  border: 1px solid var(--gr-border, #e7e7e7);
  border-radius: var(--gr-radius-sm, 6px);
  box-shadow: 0 10px 24px -12px rgba(18, 18, 18, 0.5);
  z-index: 2;
}

.grc-edit__thumb { display: flex; align-items: center; justify-content: center; }
.grc-edit__thumb svg { display: block; width: 100%; height: auto; }

.grc-edit__price {
  margin: 8px 0 0;
  font-size: calc(var(--gr-body-size, 14px) + 3px);
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--gr-text, #242424);
  font-variant-numeric: tabular-nums;
}

.grc-edit__size,
.grc-edit__note {
  margin: 2px 0 0;
  font-size: calc(var(--gr-label-size, 12px) - 1px);
  line-height: 1.35;
  text-align: center;
  color: var(--gr-text-2, #494949);
}

.grc-edit__note { margin-top: 6px; }

/* ---- sizes and quantity ---- */
.grc-edit__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.grc-edit__field { flex: 1 1 84px; min-width: 0; }

/* Same reason as .gr-dim[hidden]: the saved-order editor builds the diameter
   field too and hides it unless the order's grating type is round. */
.grc-edit__field[hidden] { display: none !important; }

.grc-edit__caption,
.grc-edit__grouplabel {
  display: block;
  margin-bottom: 5px;
  font-size: calc(var(--gr-label-size, 12px) - 1.5px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gr-text-2, #494949);
}

.grc-edit__field input {
  width: 100%;
  padding: 7px 9px;
  font: 650 var(--gr-body-size, 14px)/1.2 inherit;
  color: var(--gr-text, #242424);
  background: var(--gr-surface, #fff);
  border: 1px solid var(--gr-border-2, #ccc);
  border-radius: var(--gr-radius-sm, 6px);
}

.grc-edit__field input:focus-visible {
  outline: 2px solid var(--gr-red, #b51823);
  outline-offset: 1px;
}

/* ---- options as chips ---- */
.grc-edit__group { margin-bottom: 12px; }
.grc-edit__group[hidden] { display: none; }

.grc-edit__chips { display: flex; flex-wrap: wrap; gap: 5px; }

.grc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font: 500 var(--gr-label-size, 12px)/1.35 inherit;
  color: var(--gr-text, #242424);
  background: var(--gr-surface, #fff);
  border: 1px solid var(--gr-border-2, #ccc);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.grc-chip:hover { border-color: var(--gr-red, #b51823); }
.grc-chip.is-disabled,
.grc-chip.is-disabled:hover { opacity: 0.4; border-color: inherit; text-decoration: line-through; cursor: not-allowed; }

.grc-chip.is-on {
  color: var(--gr-btn-text, #fff);
  background: var(--gr-red, #b51823);
  border-color: var(--gr-red, #b51823);
  font-weight: 650;
}

.grc-chip:focus-visible {
  outline: 2px solid var(--gr-red, #b51823);
  outline-offset: 2px;
}

.grc-chip__dot {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(18, 18, 18, 0.25);
}

/* ---- the total, and the two ways out ---- */
.grc-edit__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  clear: both;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--gr-border, #e7e7e7);
}

.grc-edit__total {
  font-size: calc(var(--gr-body-size, 14px) + 4px);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--gr-text, #242424);
  font-variant-numeric: tabular-nums;
}

.grc-edit__actions { display: flex; align-items: center; gap: 14px; }
.grc-edit__save { min-width: 132px; }

.grc-edit .grc-error { margin: 12px 0 0; }

/* A narrow drawer, or a phone: the preview goes above the controls
   rather than squeezing them into a column of two words. */
@media (max-width: 420px) {
  .grc-edit__aside {
    position: static;
    float: none;
    width: auto;
    margin: 0 0 14px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }
  .grc-edit__price,
  .grc-edit__size,
  .grc-edit__note { text-align: left; margin-top: 0; }
  .grc-edit__price { grid-column: 2; align-self: end; }
  .grc-edit__size { grid-column: 2; }
  .grc-edit__note { grid-column: 2; }
  .grc-edit__thumb { grid-row: 1 / span 3; }
}

/* Shown to a signed-out shopper: above their browser-held orders when they
   have some, and instead of the empty notice when they don't. */
.grc-signin {
  margin: 18px 0 0;
  padding: 16px;
  text-align: center;
  background: var(--gr-surface, #fff);
  border: 1px solid var(--gr-border, #e7e7e7);
  border-radius: var(--gr-radius-sm, 6px);
  margin-bottom: 18px;
}

.grc-signin__title {
  margin: 0;
  font-size: calc(var(--gr-body-size, 14px) + 1px);
  font-weight: 700;
  color: var(--gr-text, #242424);
}

.grc-signin__text {
  margin: 6px 0 0;
  font-size: var(--gr-label-size, 12px);
  line-height: 1.5;
  color: var(--gr-text-2, #494949);
}

.grc-signin__btn {
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
}

.grc-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.grc-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 16px 12px;
  background: var(--gr-surface, #fff);
  border: 1px solid var(--gr-border, #e7e7e7);
  border-radius: var(--gr-radius-sm, 6px);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.grc-item:hover {
  border-color: var(--gr-border-2, #ccc);
  box-shadow: 0 6px 18px -10px rgba(18, 18, 18, 0.35);
}

/* Selected is the state the money buttons act on, so it is drawn, not implied
   by the checkbox alone: an accent hairline ring around the whole card. */
.grc-item.is-selected {
  border-color: var(--gr-red, #b51823);
  box-shadow: 0 0 0 1px var(--gr-red, #b51823), 0 6px 18px -12px rgba(18, 18, 18, 0.3);
}

.grc-item__pick {
  display: flex;
  align-items: center;
  padding-top: 2px;
  cursor: pointer;
}

.grc-item__pick input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--gr-red, #b51823);
  cursor: pointer;
}

.grc-item__main { min-width: 0; }

.grc-line + .grc-line {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--gr-border, #e7e7e7);
}

/* ---- The panel, drawn beside what it says ---- */
/* Side by side where there is room, stacked where there isn't — the drawer is
   460px wide by default and the inline section can be twice that. */
.grc-line__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.grc-line__text { min-width: 0; flex: 1 1 auto; }

.grc-line__thumb {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gr-border, #e7e7e7);
  border-radius: var(--gr-radius-sm, 6px);
  background: var(--gr-bg, #fafafa);
  overflow: hidden;
}

.grc-line__thumb svg { display: block; max-width: 100%; height: auto; }

@media (max-width: 380px) {
  /* A drawing that would squeeze the millimetres onto two lines each helps
     nobody — below this it goes above the text rather than beside it. */
  .grc-line__row { flex-wrap: wrap; }
  .grc-line__text { flex-basis: 100%; }
}

.grc-item__title {
  margin: 0;
  font-size: calc(var(--gr-body-size, 14px) + 1px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--gr-text, #242424);
}

.grc-item__qty {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 7px;
  font-size: calc(var(--gr-label-size, 12px) - 1px);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 2px;
  color: var(--gr-text-2, #494949);
  background: var(--gr-bg, #fafafa);
  border: 1px solid var(--gr-border, #e7e7e7);
  border-radius: 999px;
}

.grc-item__variant {
  margin: 2px 0 0;
  font-size: var(--gr-body-size, 14px);
  line-height: 1.4;
  color: var(--gr-text-2, #494949);
}

/* The configured answers, as a small table. They were one run-on sentence
   before; at eight options that is a wall no shopper reads. */
.grc-specs {
  margin: 10px 0 0;
  padding: 6px 10px;
  font-size: var(--gr-label-size, 12px);
  line-height: 1.45;
  background: var(--gr-bg, #fafafa);
  border-radius: var(--gr-radius-sm, 6px);
}

.grc-specs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0;
}

.grc-specs__row + .grc-specs__row { border-top: 1px solid rgba(18, 18, 18, 0.06); }

.grc-specs__key {
  min-width: 0;
  color: var(--gr-text-2, #494949);
}

.grc-specs__val {
  min-width: 0;
  margin: 0;
  font-weight: 650;
  text-align: right;
  color: var(--gr-text, #242424);
}

.grc-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 10px 0 0;
  font-size: var(--gr-label-size, 12px);
  color: var(--gr-text-2, #494949);
}

.grc-item__ref {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gr-text, #242424);
}

.grc-item__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.grc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 2px 9px;
  font-size: calc(var(--gr-label-size, 12px) - 1px);
  font-weight: 650;
  white-space: nowrap;
  border: 1px solid var(--gr-border, #e7e7e7);
  border-radius: 999px;
}

.grc-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gr-border-2, #ccc);
}

/* An invoice already sent is the one that can be paid right now. */
.grc-status--sent { color: var(--gr-text, #242424); }
.grc-status--sent::before { background: var(--gr-red, #b51823); }

.grc-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--gr-border, #e7e7e7);
}

.grc-item__total {
  font-size: calc(var(--gr-body-size, 14px) + 4px);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--gr-text, #242424);
}

.grc-item__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.grc-btn {
  display: inline-block;
  font: 700 var(--gr-btn-size, 15px)/1 inherit;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--gr-radius-sm, 6px);
  padding: calc(var(--gr-btn-pad-y, 12px) - 3px) var(--gr-btn-pad-x, 18px);
  cursor: pointer;
}

.grc-btn--pay {
  color: var(--gr-btn-text, #fff);
  background: var(--gr-red, #b51823);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.12);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.grc-btn--pay:hover {
  background: var(--gr-red-dark, #a01e0e);
  box-shadow: 0 6px 14px -8px rgba(18, 18, 18, 0.55);
}

.grc-btn--pay:active { transform: translateY(1px); }

.grc-btn-link {
  font: 600 var(--gr-label-size, 12px)/1 inherit;
  color: var(--gr-text-2, #494949);
  background: none;
  border: none;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s;
}

.grc-btn-link:hover { color: var(--gr-red, #b51823); }
.grc-btn-link:disabled { opacity: 0.55; cursor: default; }

.grc-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gr-border, #e7e7e7);
}

.grc-foot__sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-right: auto;
}

.grc-foot__label {
  font-size: var(--gr-body-size, 14px);
  font-weight: 600;
  color: var(--gr-text-2, #494949);
}

.grc-foot__total {
  font-size: calc(var(--gr-body-size, 14px) + 8px);
  font-weight: 800;
  color: var(--gr-red, #b51823);
}

.grc-foot__pay {
  width: auto;
  min-width: 220px;
}

.grc-error {
  flex: 1 0 100%;
  margin: 0;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--gr-red, #b51823);
  background: var(--gr-red-soft, #fdf1f2);
  border-radius: var(--gr-radius-sm, 6px);
}

@media (max-width: 600px) {
  .grc-item { padding: 12px 13px 11px; }
  .grc-specs__row { gap: 10px; }
  .grc-foot__pay { width: 100%; min-width: 0; }
}

/* ==================================================================
   Saved-orders drawer (mode "drawer")
   Portalled to <body> by grating-cart.js, so it repeats the palette
   fallbacks and receives the app embed's values as an inline style.
   ================================================================== */
.grc-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: flex;
  background: rgba(18, 18, 18, 0);
  color: var(--gr-text, #242424);
  font-size: var(--gr-body-size, 14px);
  transition: background 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.grc-drawer-overlay[hidden] { display: none; }
.grc-drawer-overlay.is-open { background: rgba(18, 18, 18, 0.5); }

.grc-drawer-overlay--right { justify-content: flex-end; }
.grc-drawer-overlay--left { justify-content: flex-start; }

.grc-drawer {
  display: flex;
  flex-direction: column;
  width: min(var(--gr-drawer-width, 460px), 100vw);
  max-width: 100%;
  height: 100%;
  background: var(--gr-surface, #fff);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.grc-drawer-overlay--right .grc-drawer { transform: translateX(100%); }
.grc-drawer-overlay--left .grc-drawer { transform: translateX(-100%); }
.grc-drawer-overlay.is-open .grc-drawer { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .grc-drawer,
  .grc-drawer-overlay { transition: none; }
}

.grc-drawer__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(14px, 3vw, 20px);
  border-bottom: 1px solid var(--gr-border, #e7e7e7);
}

.grc-drawer__titles { flex: 1; min-width: 0; }

.grc-drawer__title {
  margin: 0;
  font-size: var(--gr-title-size, 20px);
  font-weight: 800;
  color: var(--gr-text, #242424);
}

.grc-drawer__intro {
  margin: 4px 0 0;
  font-size: var(--gr-label-size, 12px);
  line-height: 1.5;
  color: var(--gr-text-2, #494949);
}

.grc-drawer__close {
  flex: none;
  width: 32px;
  height: 32px;
  font: 400 24px/1 inherit;
  color: var(--gr-text-2, #494949);
  background: none;
  border: none;
  border-radius: var(--gr-radius-sm, 6px);
  cursor: pointer;
}

.grc-drawer__close:hover {
  color: var(--gr-text, #242424);
  background: var(--gr-bg, #fafafa);
}

.grc-drawer__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* The list itself is the same component as the inline section — only the
   chrome around it differs, so the section's own frame is dropped here. */
.grating-draft-cart--drawer {
  --gr-drawer-pad: clamp(12px, 3vw, 16px);
  max-width: none;
  margin: 0;
  padding: var(--gr-drawer-pad);
  background: transparent;
  border-radius: 0;
  /* Fills the scroller at a minimum and grows past it with the orders, so the
     column inside always has a whole drawer to spread over — even holding a
     single order. `height` would have capped it and left the bottom padding
     outside the box once the list ran long. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* The column is the body — except in the admin preview, which renders the list
   and the footer straight into the host with no body around them. Both are
   made columns so the rule below pins the footer either way. */
.grating-draft-cart--drawer > [data-role="cart-body"] {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* What holds the footer down. The leftover height goes into the list's bottom
   margin, so one saved order leaves the total and the pay button at the foot
   of the drawer instead of floating them halfway up it; once the orders fill
   the drawer the auto margin is nothing and the footer's own 14px gap takes
   over. Letting the list grow instead would stretch the order cards — it is a
   grid, and its auto rows would swallow the space. */
.grating-draft-cart--drawer .grc-list { margin-top: 0; margin-bottom: auto; }

/* A drawer is narrow: the running total and the pay button stack instead of
   sharing a row, and the footer floats over the list it is pinned above. */
.grating-draft-cart--drawer .grc-item { padding: 13px 14px 11px; }

/* The running total and the pay button are the drawer's own footer, not
   part of the list — so they span it edge to edge, pinned to the bottom,
   with the orders scrolling under them. The negative margin cancels the
   list's padding; the padding is then put back inside the bar, which is
   what makes the button full width without hanging off the edge. */
.grating-draft-cart--drawer .grc-foot {
  position: sticky;
  bottom: 0;
  margin: 14px calc(-1 * var(--gr-drawer-pad)) calc(-1 * var(--gr-drawer-pad));
  padding: 14px var(--gr-drawer-pad) var(--gr-drawer-pad);
  background: var(--gr-surface, #fff);
  border-top: 1px solid var(--gr-border, #e7e7e7);
  box-shadow: 0 -10px 18px -14px rgba(18, 18, 18, 0.55);
}

.grating-draft-cart--drawer .grc-foot__sum {
  margin-right: 0;
  flex: 1 0 100%;
  justify-content: space-between;
}

.grating-draft-cart--drawer .grc-foot__pay { width: 100%; min-width: 0; }

/* ==================================================================
   Saved-orders button (blocks/cart-button.liquid)
   Also the reference styling for a merchant's own trigger element.
   ================================================================== */
.grating-cart-button-wrap { display: flex; }
.grating-cart-button-wrap--left { justify-content: flex-start; }
.grating-cart-button-wrap--center { justify-content: center; }
.grating-cart-button-wrap--right { justify-content: flex-end; }

.grating-cart-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 var(--gr-btn-size, 15px)/1 inherit;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--gr-radius-sm, 6px);
  padding: var(--gr-btn-pad-y, 12px) var(--gr-btn-pad-x, 18px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.grating-cart-button--solid {
  color: var(--gr-btn-text, #fff);
  background: var(--gr-red, #b51823);
}

.grating-cart-button--solid:hover { background: var(--gr-red-dark, #a01e0e); }

.grating-cart-button--outline {
  color: var(--gr-red, #b51823);
  background: transparent;
  border-color: currentColor;
}

.grating-cart-button--outline:hover { background: var(--gr-red-soft, #fdf1f2); }

.grating-cart-button--text {
  color: var(--gr-red, #b51823);
  background: none;
  padding-left: 0;
  padding-right: 0;
}

.grating-cart-button--text:hover { color: var(--gr-red-dark, #a01e0e); }

.grating-cart-button__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: var(--gr-red, #b51823);
  background: var(--gr-btn-text, #fff);
  border-radius: 999px;
}

.grating-cart-button__count[hidden] { display: none; }

/* Written by the script when the merchant's count class sits on an element that
   already holds a label or icon — spacing only, so the theme's own button
   styling keeps its say. */
.grating-cart-count-slot { margin-inline-start: 0.4em; }
.grating-cart-count-slot[hidden] { display: none; }

.grating-cart-button--outline .grating-cart-button__count,
.grating-cart-button--text .grating-cart-button__count {
  color: var(--gr-btn-text, #fff);
  background: var(--gr-red, #b51823);
}

/* ==================================================================
   Toasts — shared by every storefront surface (grating-toast.js).
   The stack lives on <body>, outside .grating-configurator-app, so it
   carries its own colours rather than reading the configurator's.
   Placement, colours and motion are the merchant's (app → Notifications):
   grating-toast.js sets the --gr-toast-* variables and the modifier
   classes on the stack. The fallbacks here are the same defaults, and the
   admin preview (ToastSettingsEditor.tsx) mirrors these rules.
   ================================================================== */
.gr-toasts {
  position: fixed;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  /* Derived rather than read directly: the inline --gr-toast-x can't be
     overridden by the phone rule below, this can. */
  --gr-toast-side: var(--gr-toast-x, 20px);
  max-width: min(var(--gr-toast-max, 380px), calc(100vw - 2 * var(--gr-toast-side)));
  pointer-events: none;
  right: var(--gr-toast-side);
  bottom: var(--gr-toast-y, 20px);
}

.gr-toasts--top-left, .gr-toasts--top-center, .gr-toasts--top-right {
  bottom: auto;
  top: var(--gr-toast-y, 20px);
}
.gr-toasts--top-left, .gr-toasts--bottom-left {
  right: auto;
  left: var(--gr-toast-side);
  align-items: flex-start;
}
.gr-toasts--top-center, .gr-toasts--bottom-center {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  width: max-content;
}

.gr-toast {
  --gr-toast-accent: var(--gr-toast-info, #494949);
  --gr-toast-on-accent: var(--gr-toast-info-fg, #ffffff);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  font: 500 var(--gr-toast-size, 13px)/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--gr-toast-fg, #242424);
  background: var(--gr-toast-bg, #ffffff);
  border: 1px solid var(--gr-toast-border, #e7e7e7);
  border-left: 4px solid var(--gr-toast-accent);
  border-radius: var(--gr-toast-radius, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  pointer-events: auto;
  animation: gr-toast-in 180ms ease-out;
}

.gr-toast--success { --gr-toast-accent: var(--gr-toast-success, #4e6e44); --gr-toast-on-accent: var(--gr-toast-success-fg, #ffffff); }
.gr-toast--warning { --gr-toast-accent: var(--gr-toast-warning, #d98a00); --gr-toast-on-accent: var(--gr-toast-warning-fg, #1a1a1a); }
.gr-toast--error   { --gr-toast-accent: var(--gr-toast-error, #b51823); --gr-toast-on-accent: var(--gr-toast-error-fg, #ffffff); }

.gr-toasts--accent-outline .gr-toast { border: 2px solid var(--gr-toast-accent); }
.gr-toasts--accent-filled .gr-toast {
  color: var(--gr-toast-on-accent);
  background: var(--gr-toast-accent);
  border: 1px solid var(--gr-toast-accent);
}
.gr-toasts--flat .gr-toast { box-shadow: none; }

/* Top stacks slide down from the edge they sit against. */
.gr-toasts--top-left .gr-toast,
.gr-toasts--top-center .gr-toast,
.gr-toasts--top-right .gr-toast { animation-name: gr-toast-in-down; }
.gr-toasts--anim-fade .gr-toast { animation-name: gr-toast-fade; }
.gr-toasts--anim-none .gr-toast { animation: none; }

.gr-toast__text { flex: 1; min-width: 0; }

.gr-toast__close {
  flex: none;
  margin: -4px -4px 0 0;
  padding: 0 6px;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  opacity: 0.8;
  background: none;
  border: 0;
  cursor: pointer;
}

.gr-toast__close:hover { opacity: 1; }

.gr-toast--leaving {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.gr-toasts--anim-fade .gr-toast--leaving { transform: none; }
.gr-toasts--anim-none .gr-toast--leaving { transition: none; }

@keyframes gr-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gr-toast-in-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gr-toast-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 600px) {
  /* Never further from the side than 16px on a phone; the top/bottom
     distance stays, since a fixed header covers phones just the same. */
  .gr-toasts { --gr-toast-side: min(var(--gr-toast-x, 20px), 16px); }
  .gr-toasts--stretch {
    left: var(--gr-toast-side);
    right: var(--gr-toast-side);
    transform: none;
    width: auto;
    max-width: none;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gr-toast { animation: none; }
  .gr-toast--leaving { transition: none; }
}