/* =============================================================================
   FileBox — "Aperture" theme  (photosnaps brand)
   -----------------------------------------------------------------------------
   Light blue editorial / photo-studio personality. Cyan-tinted paper backdrop
   with a faint contact-sheet dot grid. White cards framed by tiny crop marks
   at the corners (printing registration marks). Sharp Didone serif italics
   for display, humanist sans for body. Pool-blue signal accent.

   This file overrides base.css custom properties and adds brand-scoped tweaks
   under  body.brand-photosnaps … . Other brands are unaffected because they
   load their own CSS in place of this one.
   ============================================================================= */

/* ---------- 1.  Palette + tokens ---------- */

:root {
  /* Surfaces — cream-cyan paper, white cards */
  --bg:            #F2F7FD;
  --bg-deep:       #E7EFF8;
  --bg-card:       #FFFFFF;
  --bg-card-2:     #F8FBFE;

  /* Text — deep ink blue (near-black with cool cast) */
  --fg:            #0B1E3A;
  --fg-muted:      #5A6F8B;
  --fg-faint:      #92A3BB;

  /* Lines */
  --border:        #D8E3F0;
  --border-2:      #B7CAE0;

  /* Signal: vivid pool blue */
  --accent:        #1F7AE0;
  --accent-2:      #5BA0F0;
  --accent-deep:   #0E4BA0;
  --accent-fg:     #FFFFFF;
  --accent-soft:   rgba(31, 122, 224, 0.10);
  --accent-glow:   rgba(31, 122, 224, 0.22);

  /* Status — warmer, magazine-like */
  --success:       #0E9F6E;
  --success-soft:  rgba(14, 159, 110, 0.10);
  --warning:       #D97706;
  --warning-soft:  rgba(217, 119, 6, 0.10);
  --error-fg:      #B5273F;
  --error-bg:      rgba(181, 39, 63, 0.07);

  /* Flash (success-flavoured) */
  --flash-bg:      rgba(14, 159, 110, 0.10);
  --flash-fg:      #086A4A;

  /* Effects */
  --radius:        14px;
  --radius-sm:     10px;
  --shadow:        0 1px 2px rgba(20, 50, 100, 0.04),
                   0 4px 14px rgba(20, 50, 100, 0.06),
                   0 24px 48px -24px rgba(20, 50, 100, 0.18);
  --shadow-hover:  0 1px 2px rgba(20, 50, 100, 0.05),
                   0 8px 22px rgba(20, 50, 100, 0.10),
                   0 30px 60px -28px rgba(20, 50, 100, 0.24);

  /* Type — Didone display serif × humanist body sans × clean mono */
  --font:          "Optima Nova", "Optima", "Gill Sans Nova", "Gill Sans",
                   "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
                   sans-serif;
  --font-display:  "Didot", "Bodoni 72", "Bodoni Moda", "Playfair Display",
                   "Hoefler Text", "Big Caslon", Cambria, "Times New Roman",
                   serif;
  --font-mono:     "IBM Plex Mono", "Berkeley Mono", "Fira Code",
                   "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- 2.  Body backdrop: paper + faint contact-sheet dot grid ---------- */

body.brand-photosnaps {
  color: var(--fg);
  background-color: var(--bg);
  background-image:
    /* Top-right sky wash (atmosphere) */
    radial-gradient(900px 500px at 100% -10%,
                    rgba(91, 160, 240, 0.16),
                    transparent 60%),
    /* Bottom-left cool sky wash */
    radial-gradient(800px 400px at -10% 110%,
                    rgba(31, 122, 224, 0.07),
                    transparent 60%),
    /* Faint contact-sheet dot grid (CSS only, tiles every 24px) */
    radial-gradient(circle at 12px 12px,
                    rgba(11, 30, 58, 0.05) 0.8px,
                    transparent 1.2px);
  background-size: auto, auto, 24px 24px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed;
}

/* ---------- 3.  Site header ---------- */

body.brand-photosnaps .site-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(11, 30, 58, 0.02);
}
body.brand-photosnaps .site-header::before {
  height: 2px;
  background: linear-gradient(90deg,
                var(--accent-2),
                var(--accent) 50%,
                var(--accent-deep));
  opacity: 0.85;
}
body.brand-photosnaps .site-header .brand {
  color: var(--fg);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
}
body.brand-photosnaps .site-header nav a {
  color: var(--fg-muted);
  font-family: var(--font);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.brand-photosnaps .site-header nav a:hover {
  color: var(--accent);
  text-decoration: none;
}
body.brand-photosnaps .site-header nav button.linklike {
  color: var(--fg-muted);
  font-family: var(--font);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.brand-photosnaps .site-header nav button.linklike:hover {
  color: var(--accent);
}

/* ---------- 4.  Typography ---------- */

body.brand-photosnaps {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
body.brand-photosnaps h1,
body.brand-photosnaps h2,
body.brand-photosnaps h3 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: -0.01em;
}
body.brand-photosnaps h1 {
  font-style: italic;
  font-weight: 400;
}
body.brand-photosnaps h2 {
  font-style: italic;
  font-weight: 500;
}

/* Hero headline: oversized Didone italic. */
body.brand-photosnaps .hero h1 {
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.025em;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--fg);
}
body.brand-photosnaps .hero h1::after {
  content: ".";
  color: var(--accent);
  margin-left: 0.05em;
}

body.brand-photosnaps .lead { color: var(--fg); }
body.brand-photosnaps .muted { color: var(--fg-muted); }
body.brand-photosnaps .mono,
body.brand-photosnaps code {
  font-family: var(--font-mono);
  color: var(--accent-deep);
  background: var(--bg-deep);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.92em;
}
body.brand-photosnaps a {
  color: var(--accent);
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.brand-photosnaps a:hover {
  color: var(--accent-deep);
  text-decoration-color: var(--accent);
}

body.brand-photosnaps ::selection {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* ---------- 5.  Cards (with crop-mark corners) ---------- */

body.brand-photosnaps .card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 1.75rem;
  /* Four "+" crop marks at each corner — printing registration ticks.
     Each "+" is two thin bars (8px × 1px and 1px × 8px) centred 14px from
     the nearest corner. Edge-offset positioning keeps every mark inside the
     card regardless of its width. */
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position:
    /* TL: H bar, V bar */
    left 10px top    14px, left 14px top    10px,
    /* TR */
    right 10px top    14px, right 14px top    10px,
    /* BL */
    left 10px bottom 14px, left 14px bottom 10px,
    /* BR */
    right 10px bottom 14px, right 14px bottom 10px;
  background-size:
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    8px 1px, 1px 8px;
}

body.brand-photosnaps .card.accent-card {
  background-color: var(--bg-card);
  background-image:
    /* corner crop marks */
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    /* warm sky wash from the top */
    radial-gradient(500px 240px at 50% -20%,
                    rgba(91, 160, 240, 0.18),
                    transparent 70%);
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat;
  background-position:
    left 10px top    14px, left 14px top    10px,
    right 10px top    14px, right 14px top    10px,
    left 10px bottom 14px, left 14px bottom 10px,
    right 10px bottom 14px, right 14px bottom 10px,
    0 0;
  background-size:
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    100% 100%;
}
body.brand-photosnaps .card.accent-card::before {
  height: 2px;
  background: linear-gradient(90deg,
                var(--accent-2),
                var(--accent) 50%,
                var(--accent-deep));
  opacity: 0.9;
}
body.brand-photosnaps .card.success::before {
  background: linear-gradient(90deg, #3CC79A, var(--success));
}
body.brand-photosnaps .card.danger {
  border-color: rgba(181, 39, 63, 0.30);
}

/* Section heading marker — small open-circle aperture stop */
body.brand-photosnaps .card > h2 {
  position: relative;
  padding-left: 1.6rem;
  margin-top: 0;
  font-size: 1.4rem;
}
body.brand-photosnaps .card > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background:
    radial-gradient(circle at center,
                    var(--accent) 0,
                    var(--accent) 1.5px,
                    transparent 1.6px);
}

/* ---------- 6.  Page head + tabs (admin) ---------- */

body.brand-photosnaps .page-head h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.25rem;
  letter-spacing: -0.015em;
}
body.brand-photosnaps .tabs {
  border-bottom: 1px solid var(--border);
}
body.brand-photosnaps .tabs a {
  color: var(--fg-muted);
  font-family: var(--font);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 0.6rem;
}
body.brand-photosnaps .tabs a:hover {
  color: var(--fg);
  text-decoration: none;
}
body.brand-photosnaps .tabs a.active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* ---------- 7.  Inputs ---------- */

body.brand-photosnaps .field input[type=text],
body.brand-photosnaps .field input[type=email],
body.brand-photosnaps .field input[type=password],
body.brand-photosnaps .copy-row input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(20, 50, 100, 0.04) inset;
  transition: border-color 0.18s, box-shadow 0.18s;
}
body.brand-photosnaps .field input::placeholder {
  color: var(--fg-faint);
}
body.brand-photosnaps .field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft),
              0 1px 2px rgba(20, 50, 100, 0.04) inset;
}
body.brand-photosnaps .copy-row input {
  font-family: var(--font-mono);
  color: var(--accent-deep);
  background: var(--bg-deep);
}
body.brand-photosnaps .checkbox input[type=checkbox] {
  accent-color: var(--accent);
}

/* ---------- 8.  Buttons ---------- */

body.brand-photosnaps button,
body.brand-photosnaps .btn {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent-deep);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.2rem;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 1px 2px rgba(20, 50, 100, 0.10),
    0 4px 14px -4px rgba(31, 122, 224, 0.30);
  transition: transform 0.06s ease, box-shadow 0.18s ease,
              background 0.18s ease;
}
body.brand-photosnaps button:hover,
body.brand-photosnaps .btn:hover {
  background: var(--accent-deep);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 2px 4px rgba(20, 50, 100, 0.14),
    0 10px 22px -6px rgba(31, 122, 224, 0.45);
  text-decoration: none;
}
body.brand-photosnaps button.linklike {
  background: transparent;
  color: var(--accent);
  border: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
  padding: 0;
}
body.brand-photosnaps button.linklike:hover {
  background: transparent;
  color: var(--accent-deep);
  text-decoration: underline;
  box-shadow: none;
}
body.brand-photosnaps button.danger,
body.brand-photosnaps .btn.danger {
  background: transparent;
  color: var(--error-fg);
  border: 1px solid rgba(181, 39, 63, 0.50);
  box-shadow: none;
  font-weight: 600;
}
body.brand-photosnaps button.danger:hover,
body.brand-photosnaps .btn.danger:hover {
  background: var(--error-bg);
  border-color: var(--error-fg);
  color: var(--error-fg);
  box-shadow: 0 4px 10px -4px rgba(181, 39, 63, 0.30);
}
body.brand-photosnaps button.ok,
body.brand-photosnaps .btn.ok {
  background: var(--success);
  border-color: #086A4A;
  color: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 1px 2px rgba(20, 50, 100, 0.10),
    0 4px 14px -4px rgba(14, 159, 110, 0.35);
}
body.brand-photosnaps button.ok:hover,
body.brand-photosnaps .btn.ok:hover {
  background: #086A4A;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 2px 4px rgba(20, 50, 100, 0.14),
    0 10px 22px -6px rgba(14, 159, 110, 0.45);
}

/* ---------- 9.  Dropzone — styled like a camera viewfinder ---------- */

body.brand-photosnaps .dropzone .drop {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  /* Viewfinder corner brackets — four L-shapes, one per corner. Each L is a
     horizontal 18×2 bar plus a vertical 2×18 bar meeting at a corner anchor
     14px in from the edge. */
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    radial-gradient(600px 280px at 50% 50%,
                    rgba(91, 160, 240, 0.08),
                    transparent 70%);
  background-repeat: no-repeat;
  background-position:
    /* TL */
    left 14px top    14px, left 14px top    14px,
    /* TR */
    right 14px top    14px, right 14px top    14px,
    /* BL */
    left 14px bottom 14px, left 14px bottom 14px,
    /* BR */
    right 14px bottom 14px, right 14px bottom 14px,
    0 0;
  background-size:
    18px 2px, 2px 18px,
    18px 2px, 2px 18px,
    18px 2px, 2px 18px,
    18px 2px, 2px 18px,
    100% 100%;
  transition: border-color 0.18s, transform 0.15s, box-shadow 0.18s;
}
body.brand-photosnaps .dropzone .drop:hover {
  border-color: var(--accent-2);
  box-shadow: 0 6px 24px -8px var(--accent-glow);
}
body.brand-photosnaps .dropzone .drop.dragover {
  border-color: var(--accent);
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 8px 32px -6px var(--accent-glow);
}
body.brand-photosnaps .drop-prompt {
  color: var(--fg-muted);
  font-size: 1rem;
}
body.brand-photosnaps .drop-prompt strong {
  color: var(--fg);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  display: inline-block;
  margin-bottom: 0.2rem;
}

/* ---------- 10.  Progress bar ---------- */

body.brand-photosnaps .progress {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 50, 100, 0.04) inset;
}
body.brand-photosnaps .bar {
  background: linear-gradient(90deg,
                var(--accent-2),
                var(--accent),
                var(--accent-deep));
  background-size: 200% 100%;
  animation: brand-photosnaps-shimmer 2.6s linear infinite;
}
@keyframes brand-photosnaps-shimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---------- 11.  Hero icons (subtle glow on light) ---------- */

body.brand-photosnaps .hero-icon {
  color: var(--accent);
  filter: drop-shadow(0 6px 18px var(--accent-glow));
}
body.brand-photosnaps .hero-icon.success-icon {
  color: var(--success);
  filter: drop-shadow(0 6px 18px rgba(14, 159, 110, 0.30));
}
body.brand-photosnaps .hero-icon.warning-icon {
  color: var(--warning);
  filter: drop-shadow(0 6px 18px rgba(217, 119, 6, 0.25));
}

/* ---------- 12.  Badges (flat, magazine-style) ---------- */

body.brand-photosnaps .badge {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: 1px solid rgba(31, 122, 224, 0.25);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}
body.brand-photosnaps .badge.ok {
  background: var(--success-soft);
  color: #086A4A;
  border-color: rgba(14, 159, 110, 0.30);
}
body.brand-photosnaps .badge.warn {
  background: var(--warning-soft);
  color: #9A5302;
  border-color: rgba(217, 119, 6, 0.30);
}

/* ---------- 13.  Tables (contact-sheet feel) ---------- */

body.brand-photosnaps table {
  font-feature-settings: "tnum", "lnum";
}
body.brand-photosnaps table th {
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  border-bottom: 1px solid var(--border-2);
  padding-bottom: 0.7rem;
}
body.brand-photosnaps table td {
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
body.brand-photosnaps table tr:nth-child(even) td {
  background: rgba(31, 122, 224, 0.02);
}
body.brand-photosnaps table tr:hover td {
  background: var(--accent-soft);
}
body.brand-photosnaps table tr.row-pending td {
  background: rgba(217, 119, 6, 0.06);
  border-bottom-color: rgba(217, 119, 6, 0.18);
}
body.brand-photosnaps table tr.row-pending:hover td {
  background: rgba(217, 119, 6, 0.12);
}
body.brand-photosnaps table a {
  color: var(--accent);
  text-decoration: none;
}
body.brand-photosnaps table a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
}
body.brand-photosnaps table .muted,
body.brand-photosnaps table .small {
  color: var(--fg-faint);
}

/* ---------- 14.  Definition list (meta on file_detail) ---------- */

body.brand-photosnaps .meta dt {
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  font-weight: 700;
}
body.brand-photosnaps .meta dd { color: var(--fg); }

/* ---------- 15.  Flash / Error ---------- */

body.brand-photosnaps .flash {
  background: var(--flash-bg);
  color: var(--flash-fg);
  border: 1px solid rgba(14, 159, 110, 0.25);
  border-radius: var(--radius);
}
body.brand-photosnaps .error {
  background: var(--error-bg);
  color: var(--error-fg);
  border: 1px solid rgba(181, 39, 63, 0.25);
  border-radius: var(--radius);
}

/* ---------- 16.  Login card ---------- */

body.brand-photosnaps .login-card {
  background: var(--bg-card);
  padding-top: 2rem;
}
body.brand-photosnaps .login-card h1 {
  text-align: center;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 1.5rem;
  font-size: 1.9rem;
}

/* ---------- 17.  Footer (delicate hairline + circle ornament) ---------- */

body.brand-photosnaps footer {
  color: var(--fg-faint);
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0.02em;
  position: relative;
  padding-top: 3.5rem;
}
body.brand-photosnaps footer::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}
body.brand-photosnaps footer::after {
  content: "";
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
}

/* ---------- 18.  Scrollbar (WebKit) ---------- */

body.brand-photosnaps ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
body.brand-photosnaps ::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
body.brand-photosnaps ::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border: 3px solid var(--bg-deep);
  border-radius: 999px;
}
body.brand-photosnaps ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-2);
}

/* ---------- 19.  Page-load reveal ---------- */

@keyframes brand-photosnaps-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.brand-photosnaps main > * {
  animation: brand-photosnaps-rise 0.55s cubic-bezier(.2, .7, .3, 1) both;
}
body.brand-photosnaps main > *:nth-child(1) { animation-delay: 0.04s; }
body.brand-photosnaps main > *:nth-child(2) { animation-delay: 0.10s; }
body.brand-photosnaps main > *:nth-child(3) { animation-delay: 0.16s; }
body.brand-photosnaps main > *:nth-child(4) { animation-delay: 0.22s; }
body.brand-photosnaps main > *:nth-child(5) { animation-delay: 0.28s; }
body.brand-photosnaps main > *:nth-child(6) { animation-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  body.brand-photosnaps main > *,
  body.brand-photosnaps .bar {
    animation: none;
  }
  body.brand-photosnaps .dropzone .drop,
  body.brand-photosnaps button,
  body.brand-photosnaps .btn,
  body.brand-photosnaps .field input {
    transition: none;
  }
}