/* Tuff Trucks personalizer. Uses Dawn's colour variables so it follows the theme's colour scheme. */
.ttp { --ttp-fg: rgb(var(--color-foreground, 18, 18, 18)); --ttp-bg: rgb(var(--color-background, 255, 255, 255));
  --ttp-line: rgba(var(--color-foreground, 18, 18, 18), .18); --ttp-soft: rgba(var(--color-foreground, 18, 18, 18), .05);
  --ttp-accent: #1f6feb; --ttp-warn: #8a5a00; --ttp-error: #b3261e;
  margin: 1.2rem 0 1.6rem; color: var(--ttp-fg); font-size: 1.4rem; line-height: 1.45; }
.ttp[hidden] { display: none; }
.ttp, .ttp__stage, .ttp__panel, .ttp__field { min-width: 0; }
.ttp__inner { border: 1px solid var(--ttp-line); border-radius: 10px; padding: 1.4rem; background: var(--ttp-bg); }
.ttp__titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem .8rem; margin: 0 0 .2rem; }
.ttp__tools { display: flex; flex-wrap: wrap; gap: .4rem; }
.ttp__tools .ttp__btn[aria-pressed="true"] { border-color: var(--ttp-accent); box-shadow: inset 0 0 0 1px var(--ttp-accent); }
.ttp__title { font-size: 1.7rem; font-weight: 700; margin: 0; letter-spacing: .02em; }
.ttp__hint, .ttp__note { margin: 0 0 .8rem; font-size: 1.25rem; opacity: .75; }
.ttp__note { margin: 1rem 0 0; }
.ttp__stage { margin: .6rem 0 1rem; background: repeating-conic-gradient(var(--ttp-soft) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
  border-radius: 8px; overflow: hidden; touch-action: none; }
.ttp__stage.is-zoomed { overflow-x: auto; overscroll-behavior-x: contain; }
/* the stage takes the column width and never grows with the (zoomed) canvas inside it */
.ttp__stage { contain: inline-size; }
.ttp__canvas { display: block; width: 100%; touch-action: none; user-select: none; }
.ttp__canvas:focus-visible { outline: 2px solid var(--ttp-accent); outline-offset: -2px; }
.ttp__add, .ttp__row, .ttp__seg { display: flex; flex-wrap: wrap; gap: .6rem; }
.ttp__btn { appearance: none; font: inherit; color: inherit; background: var(--ttp-bg); border: 1px solid var(--ttp-line);
  border-radius: 999px; padding: .6rem 1.3rem; cursor: pointer; min-height: 40px; }
.ttp__btn:hover { border-color: var(--ttp-fg); }
.ttp__btn.is-on { border-color: var(--ttp-accent); box-shadow: inset 0 0 0 1px var(--ttp-accent); }
.ttp__btn--sm { padding: .3rem 1rem; min-height: 34px; font-size: 1.3rem; }
.ttp__btn--danger { color: var(--ttp-error); }
.ttp__panel { display: grid; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--ttp-line); }
.ttp__field { display: grid; gap: .4rem; }
.ttp__label { font-size: 1.2rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.ttp__textarea { width: 100%; font: inherit; font-size: 1.6rem; padding: .7rem; border: 1px solid var(--ttp-line); border-radius: 6px;
  background: var(--ttp-bg); color: inherit; resize: vertical; }
.ttp__select { width: 100%; font: inherit; font-size: 1.5rem; padding: .6rem .7rem; border: 1px solid var(--ttp-line); border-radius: 6px; background: var(--ttp-bg); color: inherit; }
.ttp__fontpicker { display: grid; gap: .6rem; min-width: 0; }
.ttp__fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; max-height: 300px; overflow-y: auto; padding: .2rem; }
.ttp__font { display: flex; align-items: center; gap: .6rem; text-align: left; font: inherit; color: inherit; background: var(--ttp-bg);
  border: 1px solid var(--ttp-line); border-radius: 6px; padding: .5rem .7rem; cursor: pointer; min-height: 44px; overflow: hidden; }
.ttp__font.is-on { border-color: var(--ttp-accent); box-shadow: inset 0 0 0 1px var(--ttp-accent); }
.ttp__font-n { font-size: 1.1rem; font-weight: 700; opacity: .55; min-width: 1.2em; }
.ttp__font-s { font-size: 1.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttp__range { display: flex; align-items: center; gap: .8rem; }
.ttp__range input[type=range] { flex: 1; min-width: 0; accent-color: var(--ttp-accent); }
.ttp__num { width: 6.2em; flex: none; font: inherit; font-size: 1.3rem; font-variant-numeric: tabular-nums; text-align: right;
  padding: .3rem .4rem; border: 1px solid var(--ttp-line); border-radius: 6px; background: var(--ttp-bg); color: inherit; }
.ttp__swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.ttp__swatch { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ttp-line); cursor: pointer; padding: 0; }
.ttp__swatch.is-on { outline: 2px solid var(--ttp-accent); outline-offset: 2px; }
.ttp__swatches--chart { margin-top: .6rem; }
.ttp__swatches--chart .ttp__swatch { border-radius: 6px; width: 36px; height: 30px; }
.ttp__swatches--chart .ttp__swatch span { position: absolute; inset: auto 0 1px 0; font-size: 1rem; font-weight: 700; color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000; }
.ttp__more summary { cursor: pointer; font-size: 1.3rem; margin-top: .6rem; }
.ttp__base { margin-bottom: .8rem; }
.ttp__base[hidden] { display: none; }
.ttp__base-pick summary { margin-top: 0; display: inline-flex; align-items: center; gap: .6rem; }
.ttp__base-pick .ttp__swatches--chart { max-height: 180px; overflow-y: auto; padding: .2rem; }
.ttp__base-note { margin: 0; }
.ttp__dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ttp-line); }
.ttp__iconpicker { display: grid; gap: .6rem; }
.ttp__search { width: 100%; font: inherit; padding: .6rem .8rem; border: 1px solid var(--ttp-line); border-radius: 6px; background: var(--ttp-bg); color: inherit; }
.ttp__cats { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; }
.ttp__cats .ttp__btn { flex: none; }
.ttp__icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: .5rem; max-height: 220px; overflow-y: auto; padding: .2rem; }
.ttp__bgpicker { display: grid; gap: .6rem; min-width: 0; }
.ttp__bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.ttp__bg { display: grid; gap: .3rem; justify-items: center; font: inherit; font-size: 1.2rem; color: inherit; background: var(--ttp-bg);
  border: 1px solid var(--ttp-line); border-radius: 8px; padding: .5rem; cursor: pointer; }
.ttp__bg canvas { width: 100%; height: auto; display: block; }
.ttp__bg.is-on { border-color: var(--ttp-accent); box-shadow: inset 0 0 0 1px var(--ttp-accent); }
.ttp__bg--upload { align-content: center; min-height: 64px; border-style: dashed; }
.ttp__bg-plus { font-size: 2rem; line-height: 1; opacity: .6; }
.ttp__custom { display: inline-flex; align-items: center; gap: .6rem; padding: .2rem .8rem .2rem .3rem; border: 1px solid var(--ttp-line);
  border-radius: 999px; cursor: pointer; font-size: 1.3rem; }
.ttp__picker { width: 34px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.ttp__hex { font-variant-numeric: tabular-nums; opacity: .7; font-size: 1.2rem; }
.ttp__3d { margin: 0 0 1rem; border-radius: 8px; background: radial-gradient(circle at 50% 35%, #fbfcfd, #dfe4ea); }
.ttp__3d-canvas { display: block; touch-action: none; cursor: grab; border-radius: 8px; }
.ttp__3d-msg { text-align: center; padding: .4rem; margin: 0; }
.ttp__done { display: none; }
/* full screen */
html.ttp-noscroll, html.ttp-noscroll body { overflow: hidden; }
.ttp.is-max { position: fixed; inset: 0; z-index: 2147483000; margin: 0; overflow-y: auto; background: var(--ttp-bg);
  font-size: 1.5rem; -webkit-overflow-scrolling: touch; }
.ttp.is-max .ttp__inner { border: 0; border-radius: 0; max-width: 1400px; margin: 0 auto; min-height: 100%; padding: 1.6rem; }
.ttp.is-max .ttp__view { position: sticky; top: 0; z-index: 2; background: var(--ttp-bg); padding-top: .4rem; }
.ttp.is-max .ttp__done { display: block; width: 100%; margin-top: 1rem; background: var(--ttp-fg); color: var(--ttp-bg); font-weight: 600; }
/* with the 3D view open, the preview and the 3D view together are taller than the screen: pinned, the 3D view would be
   cut off at the bottom. So they scroll with the page, and there is room below to scroll the 3D view right up. */
.ttp.is-max.has-3d .ttp__view { position: static; }
.ttp.is-max.has-3d .ttp__inner { padding-bottom: 60vh; }
@media (min-width: 990px) {
  .ttp.is-max .ttp__inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); grid-template-rows: auto 1fr; gap: 0 2.4rem; }
  .ttp.is-max .ttp__head { grid-column: 1 / -1; }
  .ttp.is-max .ttp__view { align-self: start; top: 1.6rem; }
  .ttp.is-max .ttp__side { min-width: 0; }
}
.ttp__icon { width: 44px; height: 44px; padding: 8px; border: 1px solid var(--ttp-line); border-radius: 6px; background: var(--ttp-bg); color: inherit; cursor: pointer; }
.ttp__icon svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.ttp__icon.is-on { border-color: var(--ttp-accent); box-shadow: inset 0 0 0 1px var(--ttp-accent); }
.ttp__check { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.ttp__issues { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ttp__issue { font-size: 1.3rem; padding: .5rem .8rem; border-radius: 6px; border-left: 3px solid; }
.ttp__issue--warn { border-color: #f2a900; background: rgba(242, 169, 0, .12); }
.ttp__issue--error { border-color: var(--ttp-error); background: rgba(179, 38, 30, .1); }
/* not done yet (the sample text): quiet until Add to cart is pressed */
.ttp__issue--todo { border-color: var(--ttp-line); background: var(--ttp-soft); }
.ttp__status { margin: .8rem 0 0; font-size: 1.35rem; min-height: 1em; }
.ttp__status:empty { display: none; }
.ttp__status.is-error { color: var(--ttp-error); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .ttp__btn, .ttp__font { transition: border-color .15s, box-shadow .15s; } }
.ttp__icon img { width: 100%; height: 100%; display: block; }
.ttp__emojis .ttp__icon { padding: 5px; }
.ttp__emojis { max-height: 260px; }
.ttp__own { justify-self: start; }
.ttp__credit { margin: 0; font-size: 1.1rem; }
.ttp__credit a { color: inherit; }
/* products made of several parts (e.g. driver and passenger side): a tab per part, above the preview */
.ttp__parts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin: .6rem 0 0; }
.ttp__parts[hidden] { display: none; }
.ttp__part { font-weight: 600; }
/* a tall part is drawn narrower than the column (see layout), centred */
.ttp__canvas { margin: 0 auto; }
.ttp__issue-go { font: inherit; font-size: 1.2rem; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
/* the add buttons (dashed: something new) and, below them, what is in the design as a list of layers (solid rows) */
.ttp__addbar, .ttp__layerbox { display: grid; gap: .4rem; margin-bottom: .9rem; min-width: 0; }
.ttp__layerbox[hidden] { display: none; }
.ttp__btn--add { border-style: dashed; padding: .4rem 1.1rem; min-height: 36px; }
.ttp__plus { margin-right: .35rem; opacity: .6; }
.ttp__layers { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ttp-line); border-radius: 8px; overflow: hidden; }
.ttp__layer { display: flex; align-items: center; gap: .2rem; padding-right: .3rem; border-top: 1px solid var(--ttp-line); }
.ttp__layer:first-child { border-top: 0; }
.ttp__layer.is-on { background: rgba(31, 111, 235, .09); box-shadow: inset 3px 0 0 var(--ttp-accent); }
.ttp__layer-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: .7rem; min-height: 40px; padding: .5rem .9rem;
  font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.ttp__layer-type { flex: none; width: 1.4em; text-align: center; font-size: 1.2rem; opacity: .6; }
.ttp__layer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttp__layer-act, .ttp__layer-warn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
.ttp__layer-act { padding: 0; color: inherit; background: none; border: 0; border-radius: 6px; opacity: .55; cursor: pointer; }
.ttp__layer-act:hover, .ttp__layer-act:focus-visible { opacity: 1; background: var(--ttp-soft); }
.ttp__layer-act.is-off { visibility: hidden; }
.ttp__layer-warn { display: none; color: var(--ttp-warn); }
.ttp__layer.is-warn .ttp__layer-warn, .ttp__layer.is-error .ttp__layer-warn { display: inline-flex; }
.ttp__layer.is-error .ttp__layer-warn { color: var(--ttp-error); }
.ttp__glyph { display: inline-flex; }
.ttp__glyph svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the plain part's preview (preview_when_inactive): the part in its color and its pickers, no design tools */
.ttp.is-preview .ttp__addbar, .ttp.is-preview .ttp__layerbox, .ttp.is-preview .ttp__panel, .ttp.is-preview .ttp__issues,
.ttp.is-preview .ttp__status, .ttp.is-preview .ttp__done, .ttp.is-preview .ttp__note, .ttp.is-preview .ttp__head .ttp__hint,
.ttp.is-preview .ttp__tools, .ttp.is-preview .ttp__parts { display: none; }
.ttp.is-preview .ttp__canvas { pointer-events: none; }
.ttp__preview-note { margin: .4rem 0 0; font-size: 1.3rem; opacity: .75; }
.ttp:not(.is-preview) .ttp__preview-note { display: none; }