/*
 * CellSkin custom case designer — storefront styles.
 *
 * The editor is a phone app that happens to run in a browser: a single column no wider
 * than 440px, centred on a dark page, split into a fixed header, a case that takes all the
 * room left over, and a bottom sheet of tools. Desktop gets the same column rather than a
 * second layout, because almost every customer is on a phone.
 */

#cellskin-customizer {
  --cs-red: #E8332A;
  --cs-red-tint: #FDECEA;
  --cs-ink: #111111;
  --cs-ground: #F2F2F0;
  --cs-surface: #FFFFFF;
  --cs-fill: #F5F5F2;
  --cs-fill-soft: #FAFAF8;
  --cs-fill-alt: #F7F7F5;
  --cs-line: #E7E7E4;
  --cs-line-soft: #EDEDE9;
  --cs-line-faint: #F0F0EC;
  --cs-muted: #8A8A85;
  --cs-muted-2: #9A9A95;
  --cs-muted-3: #6E6E69;
  --cs-muted-4: #4A4A45;
  --cs-blue: #4B62F0;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  justify-content: center;
  background: var(--cs-ink);
  font-family: Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--cs-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}
/*
 * The reset is wrapped in :where() so it carries no specificity of its own. Written as
 * `#cellskin-customizer button` it would outrank every class below it and strip the design
 * back out again — black text on black buttons, colourless swatches.
 */
:where(#cellskin-customizer) *, :where(#cellskin-customizer) *::before, :where(#cellskin-customizer) *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
:where(#cellskin-customizer) button { font: inherit; color: inherit; border: none; background: none; padding: 0; cursor: pointer; }
/*
 * Centring is not part of the :where() reset: themes commonly ship `button { text-align:
 * left }`, which outranks a zero-specificity rule and pushes every label in the editor
 * against its left edge. The two buttons that really are left-aligned rows say so below.
 */
#cellskin-customizer button { text-align: center; }
#cellskin-customizer .cs-dev, #cellskin-customizer .cs-case { text-align: left; }
:where(#cellskin-customizer) input, :where(#cellskin-customizer) textarea, :where(#cellskin-customizer) select { font: inherit; }
#cellskin-customizer .cs-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
#cellskin-customizer .cs-noscroll::-webkit-scrollbar { display: none; }

.cs-app {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cs-ground);
  overflow: hidden;
}

/* ---------------------------------------------------------------- header */

.cs-head {
  flex: none;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 59px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  height: calc(59px + env(safe-area-inset-top));
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-line);
}
.cs-round {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cs-ground);
  color: var(--cs-ink);
  transition: background .15s, opacity .15s;
}
.cs-round:hover:not(:disabled) { background: #E6E6E2; }
.cs-round:disabled { opacity: .32; cursor: default; }
.cs-round svg { width: 17px; height: 17px; }
.cs-close { font-size: 17px; line-height: 1; }

.cs-head-text { flex: 1; min-width: 0; text-align: center; }
.cs-head-title {
  font-size: 14px; font-weight: 800; letter-spacing: -0.02em; color: var(--cs-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-head-sub {
  font-size: 11px; color: var(--cs-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-price-was { text-decoration: line-through; opacity: .5; font-weight: 500; margin-right: 6px; }
.cs-price-now { color: var(--cs-red); font-weight: 700; }
.cs-onsale {
  display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  background: var(--cs-red); color: #fff; font-size: 9px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
}

/* Added-to-cart confirmation */
.cs-added {
  position: fixed; inset: 0; z-index: 2147483100;
  display: grid; place-items: center; padding: 24px;
  background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .24s ease;
}
.cs-added.cs-in { opacity: 1; }
.cs-added-card {
  width: 100%; max-width: 340px; background: #fff; border-radius: 18px; padding: 28px 22px 22px;
  text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
  transform: translateY(14px) scale(.98); transition: transform .26s cubic-bezier(.2, .7, .3, 1);
}
.cs-added.cs-in .cs-added-card { transform: none; }
.cs-added-check {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--cs-red); color: #fff; display: grid; place-items: center;
  font-size: 27px; font-weight: 800;
}
.cs-added-title { font-size: 19px; font-weight: 800; color: var(--cs-ink); margin-bottom: 6px; }
.cs-added-sub { font-size: 13px; color: var(--cs-muted); margin-bottom: 22px; }
.cs-added-primary {
  width: 100%; height: 50px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--cs-red); color: #fff; font-size: 15px; font-weight: 800;
}
.cs-added-secondary {
  width: 100%; height: 46px; margin-top: 10px; border-radius: 12px; cursor: pointer;
  background: #fff; color: var(--cs-ink); font-size: 14px; font-weight: 600;
  border: 1px solid var(--cs-line);
}
@media (prefers-reduced-motion: reduce) {
  .cs-added, .cs-added-card { transition: none; }
}

.cs-add {
  flex: none;
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--cs-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: opacity .15s;
}
.cs-add:hover:not(:disabled) { opacity: .86; }
.cs-add:disabled { opacity: .4; cursor: default; }

/* ---------------------------------------------------------------- canvas */

.cs-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 190px;
  display: grid;
  place-items: center;
  padding: 14px 16px 52px;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #FBFBFA 0%, #EDEDEA 100%);
  touch-action: none;
}
/* Panning only becomes possible once the case is bigger than the window. */
.cs-canvas.cs-zoomed { overflow: auto; place-items: start center; overscroll-behavior: contain; }

/*
 * The stage is the case. Its size is set in real pixels rather than with a transform,
 * because Fabric reads pointer positions off the canvas' own box and a scaled ancestor
 * would send every tap to the wrong place. Growing the element also means the artwork is
 * rendered at higher resolution as the customer zooms in, instead of being blown up.
 */
.cs-stage {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .22));
  transition: width .18s ease, height .18s ease;
}

/*
 * The mockup artboard is much bigger than the case printed on it. It is sized so the case
 * fills the stage and the blank margins are pulled off with negative margins, so they get
 * clipped rather than shrinking the case into a stamp in the middle of the screen.
 */
.cs-frame {
  position: relative;
  flex: none;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.cs-frame img { display: block; max-width: 100%; pointer-events: none; }

.cs-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cs-layer-base { z-index: 1; }
.cs-art { position: absolute; z-index: 2; overflow: hidden; }
.cs-layer-shading { z-index: 3; mix-blend-mode: multiply; }
.cs-layer-overlay { z-index: 4; }
.cs-layer-overlay.cs-blend-screen { mix-blend-mode: screen; }

/* The artwork is clipped to the exact case shape. Dark bed by default so soft mask
   anti-aliasing does not flash a white hairline against the black phone frame. */
.cs-art {
  background: #141414;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.cs-art canvas { display: block; }
.cs-art .canvas-container { position: absolute !important; top: 0; left: 0; }
/* The backing store is resized a beat after the zoom animation; stretching the element
   keeps the picture in step with the frame in the meantime. */
.cs-art .canvas-container, .cs-art .canvas-container canvas { width: 100% !important; height: 100% !important; }

.cs-center-guide-host {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}
/* Canva-style centre guides — pink lines over the print area while a layer is snapped. */
.cs-center-guide {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  background: #FF2D55;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 6px rgba(255, 45, 85, 0.55);
}
.cs-center-guide-v {
  top: -2%; bottom: -2%;
  left: 50%;
  width: 2.5px;
  transform: translateX(-50%);
}
.cs-center-guide-h {
  left: -2%; right: -2%;
  top: 50%;
  height: 2.5px;
  transform: translateY(-50%);
}
.cs-center-guide[hidden] { display: none !important; }


.cs-empty {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 18%;
  pointer-events: none;
}
.cs-empty-title { font: 600 10px/1.5 'Space Mono', ui-monospace, monospace; letter-spacing: .14em; color: rgba(255, 255, 255, .42); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.cs-empty-hint { font-size: 12px; color: rgba(255, 255, 255, .5); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

.cs-zoompill {
  position: absolute;
  top: 12px; right: 14px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .1);
}
.cs-zoombtn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--cs-ink); }
.cs-zoombtn:disabled { opacity: .3; cursor: default; }
.cs-zoomval { min-width: 44px; text-align: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Floats over the case so selecting a layer never resizes the stage underneath. */
.cs-actions {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  z-index: 8;
  display: flex;
  justify-content: center;
  /* Keep clear of the phone's curved edges / safe area. */
  padding: 0 max(12px, env(safe-area-inset-left, 0px)) 0 max(12px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .14s, transform .14s;
}
.cs-actions.cs-on { opacity: 1; transform: none; }
.cs-actions-bar {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  padding: 3px 4px;
  border-radius: 18px;
  background: var(--cs-ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  pointer-events: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cs-actions-bar::-webkit-scrollbar { display: none; }
.cs-actions.cs-on .cs-actions-bar { pointer-events: auto; }
.cs-actions:not(.cs-on) .cs-actions-bar { pointer-events: none; }
.cs-actions-bar button {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 13px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cs-actions-sep { flex: 0 0 auto; width: 1px; height: 14px; background: rgba(255, 255, 255, .2); }


.cs-actions-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px !important;
  border-radius: 13px;
  background: var(--cs-red);
  color: #fff;
}
.cs-actions-edit svg { display: block; width: 12px; height: 12px; }

.cs-actions-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px !important;
  border-radius: 13px;
  color: #FFB4B0;
}
.cs-actions-delete svg { display: block; width: 12px; height: 12px; }


/* ---------------------------------------------------------------- bottom sheet */

.cs-sheet {
  flex: none;
  z-index: 5;
  background: var(--cs-surface);
  border-top: 1px solid var(--cs-line);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .07);
}
.cs-grab { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 0 6px; }
.cs-grab-bar { width: 38px; height: 4px; border-radius: 2px; background: #DCDCD7; }
.cs-grab-chev { display: grid; place-items: center; transition: transform .2s ease; }
.cs-sheet.cs-closed .cs-grab-chev { transform: rotate(180deg); }

/*
 * The sheet rests at a comfortable height and grows, once, for a panel that needs more —
 * never past the tall stop, or the case disappears behind its own controls. A single fixed
 * height is wrong in both directions: short panels leave half a sheet of nothing, and tall
 * ones hide their controls behind a scroll with nothing to say there is one.
 *
 * The height itself is measured and set in script; these are the fallbacks.
 */
.cs-sheet-body {
  position: relative;
  height: min(290px, 34vh);
  overflow: hidden;
  min-width: 0;
  transition: height .3s cubic-bezier(.32, .72, 0, 1);
}
.cs-sheet.cs-closed .cs-sheet-body { height: 0 !important; }
.cs-panel {
  height: min(290px, 34vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 12px;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

/*
 * There is more below this. A fade at the edge is what tells them so — the alternative is a
 * panel that ends flush at the fold and reads as finished, which is exactly how people miss
 * half the controls.
 */
.cs-more {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  pointer-events: none; opacity: 0; transition: opacity .18s ease;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--cs-surface) 82%);
}
.cs-sheet-body.cs-scrollable .cs-more { opacity: 1; }
@keyframes cs-panel-a { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cs-panel-b { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Two identical animations, alternated, so re-picking a tool always replays the entrance. */
.cs-panel.cs-anim-a { animation: cs-panel-a .26s cubic-bezier(.2, .7, .3, 1) both; }
.cs-panel.cs-anim-b { animation: cs-panel-b .26s cubic-bezier(.2, .7, .3, 1) both; }

.cs-rail {
  display: flex;
  gap: 2px;
  padding: 6px 8px 10px;
  border-top: 1px solid var(--cs-line-faint);
  overflow-x: auto;
}
.cs-tool {
  flex: 1 0 auto;
  min-width: 48px;
  padding: 7px 4px 5px;
  border-radius: 14px;
  display: grid;
  justify-items: center;
  gap: 3px;
  background: transparent;
  transition: background .15s;
}
.cs-tool.cs-on { background: var(--cs-red-tint); }
.cs-tool-ico { height: 22px; display: grid; place-items: center; color: #5C5C57; }
.cs-tool.cs-on .cs-tool-ico { color: var(--cs-red); }
.cs-tool-ico svg { width: 20px; height: 20px; }
.cs-tool-name { font-size: 10px; font-weight: 600; color: var(--cs-muted-3); white-space: nowrap; }
.cs-tool.cs-on .cs-tool-name { color: var(--cs-red); font-weight: 800; }
.cs-safe { height: env(safe-area-inset-bottom); }

/* ---------------------------------------------------------------- panel building blocks */

.cs-pad { padding: 16px 16px 6px; }
.cs-stack { display: grid; gap: 16px; }
.cs-gap-10 { display: grid; gap: 10px; }

.cs-title { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--cs-ink); }
.cs-sub { font-size: 12px; color: var(--cs-muted); }
.cs-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cs-muted);
}
.cs-label-val { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cs-muted-3); }
.cs-hint { font-size: 12px; color: var(--cs-muted); }
.cs-group { display: grid; gap: 8px; }

/*
 * Sliders are drawn rather than left to the browser. `accent-color` fills the track to the
 * thumb on some engines and floods the whole track on others, so the same value looked like
 * a different setting depending on the phone. Here the filled length is computed from the
 * value in `--cs-range-p` (0–1) and stops at the centre of the thumb, which is the point
 * the number in the label refers to.
 */
.cs-range {
  --cs-range-p: 0;
  --cs-range-thumb: 22px;
  --cs-range-track: 6px;
  /* The thumb travels between its own half-widths, so the fill has to stop at its centre. */
  --cs-range-fill: calc(var(--cs-range-p) * (100% - var(--cs-range-thumb)) + var(--cs-range-thumb) / 2);
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  background: transparent;
  /*
   * The sheet under these scrolls. Leaving vertical panning to the browser and taking the
   * rest means a swipe down the panel still scrolls even when it starts on a slider, while
   * a sideways drag stays with the slider for as long as the finger is down.
   */
  touch-action: pan-y;
}
.cs-range:focus { outline: none; }

.cs-range::-webkit-slider-runnable-track {
  height: var(--cs-range-track);
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--cs-red) 0 var(--cs-range-fill), var(--cs-line) var(--cs-range-fill) 100%);
}
.cs-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--cs-range-thumb);
  height: var(--cs-range-thumb);
  margin-top: calc((var(--cs-range-track) - var(--cs-range-thumb)) / 2);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cs-red);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}
.cs-range:active::-webkit-slider-thumb { transform: scale(1.06); }

.cs-range::-moz-range-track {
  height: var(--cs-range-track);
  border-radius: 999px;
  background: var(--cs-line);
}
.cs-range::-moz-range-progress {
  height: var(--cs-range-track);
  border-radius: 999px;
  background: var(--cs-red);
}
.cs-range::-moz-range-thumb {
  width: var(--cs-range-thumb);
  height: var(--cs-range-thumb);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cs-red);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

.cs-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.cs-swatch { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); }
.cs-swatch.cs-on { border: 2.5px solid var(--cs-ink); }
/*
 * Any other colour: a wheel until one is picked, then the colour itself.
 *
 * The control is the tile. Safari will not open the picker on the first tap of an input it
 * cannot see, so rather than hide one under a circle, the circle is the input: the wheel is
 * its background and its own swatch stays transparent until there is a colour to show.
 */
.cs-swatch-pick {
  -webkit-appearance: none; appearance: none;
  /* Browsers give colour inputs a height of their own, which would beat the square. */
  height: auto;
  margin: 0; padding: 0; overflow: hidden; cursor: pointer;
  background: conic-gradient(#FF5A52, #FFD54A, #3FBF5A, #12B5B0, #1E9BF0, #7A4BF0, #FF3D8B, #FF5A52);
}
.cs-swatch-pick::-webkit-color-swatch-wrapper { padding: 0; }
.cs-swatch-pick::-webkit-color-swatch { border: none; border-radius: 50%; opacity: 0; }
.cs-swatch-pick::-moz-color-swatch { border: none; border-radius: 50%; opacity: 0; }
.cs-swatch-pick.cs-on::-webkit-color-swatch { opacity: 1; }
.cs-swatch-pick.cs-on::-moz-color-swatch { opacity: 1; }
/* No background: the case the customer picked is left showing. */
.cs-swatch-none {
  background:
    linear-gradient(to top right,
      transparent calc(50% - 1px), var(--cs-muted-3) calc(50% - 1px),
      var(--cs-muted-3) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--cs-fill);
}

.cs-segment { display: flex; gap: 3px; padding: 3px; border-radius: 14px; background: var(--cs-fill); }
.cs-segment button {
  flex: 1; height: 34px; border-radius: 11px; font-size: 11px; font-weight: 600; color: var(--cs-muted-4);
  transition: background .15s, box-shadow .15s;
}
.cs-segment button.cs-on { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .09); font-weight: 800; color: var(--cs-ink); }

.cs-search {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px;
  border-radius: 12px;
  background: var(--cs-fill);
  border: 1.5px solid var(--cs-line-soft);
}
.cs-search svg { flex: none; }
.cs-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 13px; font-weight: 500; color: var(--cs-ink); }
.cs-search-clear { width: 20px; height: 20px; border-radius: 50%; background: #E2E2DE; color: #5C5C57; font-size: 11px; line-height: 1; display: grid; place-items: center; }

.cs-scroller { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }

.cs-btn-block {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 46px; border-radius: 14px;
  background: var(--cs-ink); color: #fff; font-size: 14px; font-weight: 700;
  transition: opacity .15s;
}
.cs-btn-block:hover { opacity: .86; }
/* The second choice on a screen that has two: present, but not competing. */
.cs-btn-quiet { background: #F5F5F2; color: #4A4A45; }
.cs-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; border-radius: 12px;
  background: var(--cs-ink); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
}
.cs-cta:disabled { opacity: .4; cursor: default; }

.cs-rows { display: grid; gap: 6px; font-size: 12px; color: var(--cs-muted-3); }
.cs-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.cs-rows b { color: var(--cs-ink); font-weight: 600; }

.cs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cs-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cs-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.cs-caption { font-size: 10px; color: var(--cs-muted-3); text-align: center; line-height: 1.3; }

/* ---- start ---- */
/*
 * The two plain cases we stock. The tile is the case, so it keeps a case's proportions —
 * but only just big enough to tell them apart, because two tall tiles push the designs
 * below them clean off the screen and nobody scrolls to what they cannot see.
 */
.cs-bases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cs-base {
  display: grid; gap: 4px; justify-items: center; min-width: 0;
  padding: 9px 10px 10px; border-radius: 13px;
  background: var(--cs-fill-soft); border: 1.5px solid var(--cs-line-soft);
}
.cs-base.cs-on { background: var(--cs-red-tint); border-color: var(--cs-red); }
.cs-base-thumb {
  position: relative;
  width: 50px; aspect-ratio: 1 / 1.9; border-radius: 9px; overflow: hidden;
  background: var(--cs-fill);
  border: 1px solid var(--cs-line);
}
/* Absolute fill avoids iOS WebKit height:100% collapsing inside aspect-ratio boxes. */
.cs-base-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cs-base-name { font-size: 12px; font-weight: 700; color: var(--cs-ink); }
.cs-base-note { font-size: 10px; color: var(--cs-muted-3); text-align: center; }
/* A case we cannot ship for this phone: still shown, so it is clear what we normally stock. */
.cs-base-off { opacity: .45; cursor: not-allowed; }

.cs-design { flex: 0 0 auto; width: 74px; display: grid; gap: 6px; justify-items: center; }
.cs-design-thumb {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1.9; border-radius: 9px; overflow: hidden;
  background: var(--cs-fill);
  border: 1px solid var(--cs-line);
}
/* Absolute fill avoids iOS WebKit height:100% collapsing inside aspect-ratio boxes. */
.cs-design-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cs-design.cs-on .cs-design-thumb { border: 2px solid var(--cs-red); }

/* ---- phone select (Start) ---- */
.cs-select-wrap { display: block; width: 100%; }
.cs-select {
  width: 100%;
  height: 46px;
  padding: 0 40px 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--cs-line-soft);
  background-color: var(--cs-fill-alt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%235C5C57' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  color: var(--cs-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.cs-select:focus { border-color: var(--cs-ink); }
.cs-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- case ---- */
.cs-case {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--cs-fill-soft); border: 1.5px solid var(--cs-line-soft);
  text-align: left;
}
.cs-case.cs-on { background: var(--cs-red-tint); border-color: var(--cs-red); }
.cs-case-name { font-size: 13px; font-weight: 600; }
.cs-case-desc { font-size: 11px; color: var(--cs-muted); }
.cs-case-price { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ---- style ---- */
.cs-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.cs-filter { flex: 0 0 auto; display: grid; gap: 5px; justify-items: center; }
.cs-filter-sw { width: 48px; height: 48px; border-radius: 12px; border: 2px solid var(--cs-line-soft); background-size: cover; background-position: center; }
.cs-filter.cs-on .cs-filter-sw { border-color: var(--cs-red); }
.cs-filter-name { font-size: 9px; color: var(--cs-muted-3); }

/* ---- photos & stickers ---- */
.cs-tile {
  position: relative;
  width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: var(--cs-fill-soft); border: 1px solid var(--cs-line-soft);
}
/* Whole, not cropped: a sticker is usually a shape on transparency, not a photo. */
.cs-tile img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; box-sizing: border-box; }
.cs-tile-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .74); font-size: 9px; font-weight: 700; color: var(--cs-red); }
.cs-uptile {
  width: 100%; aspect-ratio: 1; border-radius: 12px;
  border: 1.5px dashed #C9C9C4; background: var(--cs-fill-soft);
  display: grid; place-items: center; align-content: center; gap: 2px;
  color: var(--cs-muted-3);
}
.cs-uptile-plus { font-size: 19px; line-height: 1; }
.cs-uptile-label { font-size: 9px; }
.cs-drop {
  width: 100%; padding: 22px 16px; border-radius: 14px;
  border: 1.5px dashed #C9C9C4; background: var(--cs-fill-soft);
  display: grid; gap: 4px; justify-items: center;
  color: var(--cs-muted-3); font-size: 12px;
}
.cs-drop-note { font-size: 10px; color: var(--cs-muted-2); }

/* WhatsApp-style AI sticker maker */
.cs-make { display: grid; gap: 12px; }
.cs-make-title { font-size: 15px; font-weight: 800; color: var(--cs-ink); }
.cs-make-note { font-size: 12px; color: var(--cs-muted-3); line-height: 1.45; }
.cs-make-drop {
  padding: 28px 16px;
  border-color: #B8B8B2;
  background: linear-gradient(180deg, #FAFAF8 0%, #F3F3F0 100%);
}
.cs-make-drop span:first-child { font-size: 13px; font-weight: 700; color: var(--cs-ink); }
.cs-make-outline {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--cs-ink);
  padding: 4px 2px;
}
.cs-make-outline input { width: 18px; height: 18px; accent-color: var(--cs-red); }
.cs-make-check {
  background:
    linear-gradient(45deg, #E8E8E4 25%, transparent 25%),
    linear-gradient(-45deg, #E8E8E4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #E8E8E4 75%),
    linear-gradient(-45deg, transparent 75%, #E8E8E4 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #F7F7F5;
  border-radius: 14px;
}
/* The phone's own emoji font, so the picker shows what will land on the case. */
.cs-emoji {
  width: 100%; aspect-ratio: 1; border-radius: 10px; background: var(--cs-fill);
  display: grid; place-items: center; line-height: 1;
  font-size: 26px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.cs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* Templates scroll sideways so four tiles stay a single glanceable row on a phone. */
.cs-templates {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 2px 8px; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.cs-templates .cs-template {
  flex: 0 0 auto; width: 108px;
  scroll-snap-align: start;
}

/* What kind of case this is: a drawing of each, rather than an icon that means nothing. */
.cs-template, .cs-collage {
  display: grid; gap: 3px; justify-items: center; align-content: start;
  padding: 9px 6px 10px; border-radius: 13px;
  background: var(--cs-fill); border: 1.5px solid transparent;
}
.cs-template.cs-on, .cs-collage.cs-on { border-color: var(--cs-ink); background: #fff; }
.cs-template-art { display: block; width: 62%; }
.cs-collage-art { display: block; width: 40%; }
/* A photograph of the finished case, framed the way the plain cases are on the Start tab. */
.cs-template-shot {
  position: relative; display: block;
  width: 100%; aspect-ratio: 1 / 1.85; border-radius: 7px; overflow: hidden;
  background: #fff; border: 1px solid var(--cs-line);
}
.cs-template-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-template-shot svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 12%; box-sizing: border-box; }
.cs-template-art svg, .cs-collage-art svg {
  width: 100%; height: auto; display: block;
  fill: none; stroke: var(--cs-muted-3); stroke-width: 2.4;
}
.cs-template.cs-on .cs-template-art svg, .cs-collage.cs-on .cs-collage-art svg { stroke: var(--cs-ink); }
.cs-template-art svg circle { fill: var(--cs-muted-3); stroke: none; }
.cs-template.cs-on .cs-template-art svg circle { fill: var(--cs-ink); }
.cs-template-shot svg.cs-jersey-art {
  fill: none;
  stroke: var(--cs-muted-3);
  color: var(--cs-muted-3);
  padding: 10%;
}
.cs-template.cs-on .cs-template-shot svg.cs-jersey-art {
  stroke: var(--cs-ink);
  color: var(--cs-ink);
}
.cs-template-shot svg.cs-jersey-art text { fill: currentColor; stroke: none; }
.cs-template-name, .cs-collage span:last-child {
  font-size: 10.5px; font-weight: 700; color: var(--cs-muted-4); text-align: center; line-height: 1.2;
}
.cs-template-note { font-size: 9px; color: var(--cs-muted-2); text-align: center; line-height: 1.2; }
.cs-template.cs-on .cs-template-name, .cs-collage.cs-on span:last-child { color: var(--cs-ink); }

/*
 * The cutout, put in front of everything.
 *
 * It arrives a minute after the customer asked for it, by which time they have looked away,
 * so it takes the screen the loading message just gave up rather than appearing quietly at
 * the bottom of a panel.
 */
.cs-modal {
  position: fixed; inset: 0; z-index: 2147483200;
  display: grid; place-items: center; padding: 18px;
  background: rgba(24, 24, 22, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-family: Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  animation: cs-modal-in .18s ease-out;
}
@keyframes cs-modal-in { from { opacity: 0; } to { opacity: 1; } }
.cs-modal-card {
  position: relative; width: 100%; max-width: 330px; max-height: 86vh; overflow-y: auto;
  display: grid; gap: 10px;
  padding: 18px 16px 16px; border-radius: 20px; background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}
.cs-modal-title { font-size: 16px; font-weight: 800; color: var(--cs-ink); padding-right: 26px; }
.cs-modal-close {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--cs-fill); color: var(--cs-muted-3); font-size: 13px;
  display: grid; place-items: center;
}
@media (prefers-reduced-motion: reduce) { .cs-modal { animation: none; } }

.cs-face-check {
  border-radius: 14px; padding: 10px;
  background: repeating-conic-gradient(#F1F1EE 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  border: 1px solid var(--cs-line-soft);
  display: grid; place-items: center;
}
.cs-face-check img { width: 100%; max-height: 42vh; object-fit: contain; display: block; }

/* Layout tiles: the customer's own face, arranged the way the tile is named. */
.cs-face-layout {
  display: grid; gap: 4px; justify-items: center;
  padding: 7px 4px 8px; border-radius: 12px;
  background: var(--cs-fill); border: 1.5px solid transparent;
}
.cs-face-layout.cs-on { border-color: var(--cs-ink); background: #fff; }
.cs-face-layout span:last-child { font-size: 10px; font-weight: 700; color: var(--cs-muted-4); }
.cs-face-layout.cs-on span:last-child { color: var(--cs-ink); }
.cs-face-tile {
  width: 100%; aspect-ratio: 3 / 4; border-radius: 7px; overflow: hidden;
  background: var(--cs-fill-soft); display: block;
}
.cs-face-tile img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8%; box-sizing: border-box; }

/* Each brush shows a stroke it actually drew, which says more than its name does. */
.cs-brushes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-brush {
  display: grid; gap: 2px; justify-items: center;
  padding: 6px 4px 7px; border-radius: 12px;
  background: var(--cs-fill); border: 1.5px solid transparent;
}
.cs-brush.cs-on { border-color: var(--cs-ink); background: #fff; }
.cs-brush-ink { width: 100%; height: 26px; display: block; }
.cs-brush span { font-size: 10px; font-weight: 700; color: var(--cs-muted-4); }
.cs-brush.cs-on span { color: var(--cs-ink); }

.cs-shape { width: 100%; aspect-ratio: 1; border-radius: 10px; background: var(--cs-fill); display: grid; place-items: center; padding: 22%; }
.cs-shape svg { width: 100%; height: 100%; fill: var(--cs-muted-4); }

/* ---- text ---- */
.cs-textarea {
  width: 100%; min-height: 62px; resize: none;
  padding: 10px 12px; border-radius: 12px;
  background: var(--cs-fill-soft); border: 1px solid #E2E2DE;
  font-size: 14px; color: var(--cs-ink); outline: none;
}
.cs-textarea:focus { border-color: var(--cs-ink); }
.cs-fonts { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.cs-font { flex: 0 0 auto; display: grid; gap: 5px; justify-items: center; }
.cs-font-circle {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--cs-line);
  font-size: 16px; color: var(--cs-ink);
}
.cs-font.cs-on .cs-font-circle { border: 1.5px solid var(--cs-ink); }
.cs-font-circle.cs-font-channel {
  /* Preview the Princetown channel: solid fill with a hollow outline ring */
  -webkit-text-stroke: 1.35px currentColor;
  paint-order: stroke fill;
  letter-spacing: 0.02em;
}
.cs-font-name { font-size: 9px; color: var(--cs-muted-3); }
.cs-toggles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-toggle { height: 40px; border-radius: 12px; background: var(--cs-fill); color: var(--cs-muted-4); font-size: 12.5px; font-weight: 600; }
.cs-toggle.cs-on { background: #fff; color: var(--cs-ink); box-shadow: inset 0 0 0 1.5px var(--cs-ink); }

/* ---------------------------------------------------------------- intro loader */

/*
 * The loader covers the whole viewport, not just the 440px column, so nothing of the page
 * behind shows past its edges while the editor boots.
 */
.cs-loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: radial-gradient(140% 100% at 50% 38%, #232323 0%, #0B0B0B 100%);
  transition: opacity .55s ease, transform .55s ease;
}
.cs-loader.cs-out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.cs-loader.cs-gone { display: none; }
/*
 * A soft glow centred on the case. Anything with straight edges — a swept highlight band,
 * for instance — reads as a stray rectangle floating next to the phone rather than light,
 * so this is a radial gradient that fades to nothing well before the edge of the screen.
 */
.cs-loader-glow {
  position: absolute; left: 50%; top: 50%;
  width: min(150vw, 620px); height: min(150vw, 620px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 51, 42, .16) 0%, rgba(232, 51, 42, .05) 45%, transparent 72%);
  /* Smooths the steps a wide, very low-alpha gradient leaves behind on 8-bit displays. */
  filter: blur(18px);
  animation: cs-ld-glow 3.2s ease-in-out infinite;
  pointer-events: none;
}
.cs-loader-in { position: relative; display: grid; justify-items: center; gap: 26px; }
.cs-loader-case {
  position: relative; width: 104px; height: 200px;
  border-radius: 26px; padding: 5px;
  background: linear-gradient(160deg, #3A3A3A, #0A0A0A 60%, #2C2C2C);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .55);
  animation: cs-ld-float 2.6s ease-in-out infinite;
}
.cs-loader-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 21px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #E8332A 0%, #8E1F19 55%, #141414 100%);
}
.cs-loader-mark { font-size: 40px; font-weight: 800; color: #fff; animation: cs-ld-pop .7s cubic-bezier(.2, .7, .3, 1) both; }
.cs-loader-screen::after {
  content: '';
  position: absolute; top: -25%; left: -60%; width: 55%; height: 150%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
  transform: translateX(0) skewX(-18deg);
  animation: cs-ld-sweep 1.9s cubic-bezier(.45, 0, .3, 1) infinite;
  will-change: transform;
}
.cs-loader-brand { font-size: 11px; font-weight: 700; letter-spacing: .42em; color: rgba(255, 255, 255, .55); }
.cs-loader-head { font-size: 23px; font-weight: 800; color: #fff; }
.cs-loader-track { width: 168px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.cs-loader-fill { height: 100%; background: var(--cs-red); transform-origin: left; animation: cs-ld-bar 1.5s cubic-bezier(.4, 0, .2, 1) both; }
.cs-loader-note { font-size: 11px; color: rgba(255, 255, 255, .45); }
.cs-loader-text { display: grid; justify-items: center; gap: 10px; animation: cs-ld-rise .5s ease both; }

@keyframes cs-ld-sweep {
  0% { transform: translateX(0) skewX(-18deg); }
  100% { transform: translateX(330%) skewX(-18deg); }
}
@keyframes cs-ld-glow {
  0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes cs-ld-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes cs-ld-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cs-ld-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cs-ld-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .cs-loader-glow, .cs-loader-case, .cs-loader-screen::after { animation: none; }
}

/* ---------------------------------------------------------------- status & overlays */

.cs-msgwrap { padding: 0 16px; }
.cs-msg { font-size: 12px; padding: 9px 12px; border-radius: 10px; margin-bottom: 10px; display: none; }
.cs-msg.cs-show { display: block; }
.cs-msg-err { background: #FDECEA; color: #B32820; }
.cs-msg-ok { background: #E9F7EF; color: #1E7A4C; }
.cs-msg-info { background: #EDF1FE; color: #2B3FA8; }

/* Brief chip when rotate snaps to 0° / 90° / 180° / 270°. */
.cs-angle-snap {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%) translateY(-6px);
  z-index: 8;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(17, 17, 17, .88);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.cs-angle-snap.cs-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .cs-angle-snap { transition: opacity .01s linear; }
}

.cs-boot { display: grid; place-items: center; gap: 12px; height: 100%; padding: 40px 24px; text-align: center; color: var(--cs-muted); font-size: 13px; }
.cs-spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--cs-line); border-top-color: var(--cs-red);
  border-radius: 50%; animation: cs-spin .8s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }

.cs-busy {
  position: fixed; inset: 0; z-index: 2147483100;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: rgba(255, 255, 255, .92);
  font-family: Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cs-busy .cs-spinner { border-color: #E7E7E4; border-top-color: #E8332A; }
.cs-busy-text { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: #111; }
.cs-busy-bar { width: 220px; height: 5px; background: #E7E7E4; border-radius: 3px; margin-top: 14px; overflow: hidden; }
.cs-busy-fill { height: 100%; width: 0; background: #E8332A; transition: width .3s; }

.cs-done { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 16px; }
.cs-done img { max-width: 190px; border-radius: 12px; }
.cs-code { font-family: 'Space Mono', ui-monospace, monospace; font-size: 17px; font-weight: 700; letter-spacing: .5px; }

/* The editor owns the screen; nothing behind it should scroll. */
html.cs-locked, html.cs-locked body { overflow: hidden; }