/* Your look screen (Look.razor). Theme tokens only; each swatch is its own data-theme scope. */

/* Theme chooser: even grid, 2 across on phone, 3 from tablet up. */
.look-themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 16px}
@media (min-width:600px){.look-themes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.look-theme{position:relative;display:flex;flex-direction:column;gap:8px;min-height:48px;padding:8px;margin:0;
  background:var(--surface);color:var(--ink);border:var(--border-width,1px) solid var(--border,var(--line));border-radius:var(--radius,14px);
  cursor:pointer;text-align:left;font:inherit;transition:transform .12s ease,box-shadow .12s ease}
.look-theme:hover{transform:translateY(-1px)}
.look-theme:focus-visible{outline:3px solid var(--primary-text);outline-offset:2px}
.look-theme.on{border-color:var(--primary-text);box-shadow:0 0 0 3px var(--primary)}
.look-theme-name{font-weight:700;font-size:.92rem;min-height:24px;display:flex;align-items:center;padding:0 4px}
.look-check{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--primary);color:var(--on-primary);font-weight:800;font-size:.85rem;box-shadow:0 2px 6px rgb(0 0 0 / .25)}

/* The swatch resolves its own theme: vendor colours are cut off so --primary/--accent fall back to the preset defaults. */
.look-swatch{--vendor-primary:initial;--vendor-accent:initial;--on-primary:initial;
  display:flex;align-items:flex-end;aspect-ratio:16/9;padding:10px;border-radius:var(--radius-sm,10px);overflow:hidden;
  background:var(--backdrop,none),var(--bg);background-size:var(--backdrop-size,auto),auto;border:var(--border-width,1px) solid var(--border)}
.look-swatch-card{display:flex;align-items:center;gap:8px;width:100%;padding:8px;background:var(--material,var(--surface));
  border:var(--border-width,1px) solid var(--border);border-radius:var(--radius-sm,10px);box-shadow:var(--shadow);
  backdrop-filter:blur(var(--material-blur,0px))}
.look-swatch-dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--primary)}
.look-swatch-bar{flex:1;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0 45%,var(--surface-2) 45%)}

/* Colour row: wraps cleanly; nothing overflows the card on phone. */
.look-colours{display:flex;flex-wrap:wrap;gap:12px}
.look-colours > .swatch{flex:1 1 150px;min-width:0}
.look-colours > .look-mode{flex:1 1 100%}
.look-colours select,.look-colours .hex{max-width:100%;min-width:0;width:100%;box-sizing:border-box}

/* Logo upload: a drop/tap area, never a raw file button. */
.look-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.look-logo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:8px 0}
.look-logo-pic{width:88px;height:88px;object-fit:contain;border-radius:var(--radius-sm,10px);background:var(--surface-2);border:var(--border-width,1px) solid var(--border)}
.look-logo-actions{display:flex;gap:8px;flex-wrap:wrap}
.look-logo-pick{position:relative;overflow:hidden;min-height:48px;display:inline-flex;align-items:center}
.look-logo-actions .btn{min-height:48px}
.look-drop{position:relative;flex:1 1 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:120px;padding:16px;border:2px dashed var(--border);border-radius:var(--radius,14px);background:var(--surface-2);
  color:var(--ink);text-align:center;cursor:pointer}
.look-drop:hover,.look-drop:focus-within{border-color:var(--primary-text);background:color-mix(in srgb,var(--primary) 8%,var(--surface-2))}
.look-drop-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:1.3rem}

/* Compact preview: header plus one shared ItemTile and the buttons it would sit beside. */
.look-preview{padding:16px;margin-top:16px;border-radius:var(--radius,14px);background:var(--backdrop,none),var(--bg);
  background-size:var(--backdrop-size,auto),auto;border:var(--border-width,1px) solid var(--border);min-height:0}
.look-preview .shop-head{margin:4px 0 12px}
.look-preview .shop-head h1{font-size:1.25rem;margin:0}
.look-preview-label{margin:0}
.look-preview-row{display:flex;gap:16px;align-items:flex-start}
.look-preview-tile{flex:0 0 150px;max-width:150px}
.look-preview-side{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.look-preview-side .btn{min-height:44px;display:inline-flex;align-items:center}
/* Light-or-dark picker: same field look as the other inputs; clear gap before the Logo heading. */
.look-colours select{min-height:44px;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm,8px);background:var(--canvas);color:var(--ink)}
.look-colours + .btn + h2{margin-top:28px}
/* The preview is a boxed panel, never the full-bleed shopper page: keep its own gap and height in light/dark mode too. */
.vendor-theme.look-preview[data-theme]{margin:16px 0 0;padding:16px;min-height:0}
.look-contrast-warn{flex-basis:100%;margin:0;padding:8px 12px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--warning-text);font-size:.85rem;font-weight:600}
.look-text-shade{color:var(--muted);font-weight:500}