/* Top Notch Logo Studio */
.tnls {
  --tnls-fg: #121212;
  --tnls-bg: #ffffff;
  --tnls-accent: #B12F36;
  --tnls-light: #F5F2F0;
  --tnls-line: rgba(18,18,18,.14);
  --tnls-muted: rgba(18,18,18,.58);
  width: 100%; max-width: 480px; margin: 18px 0 22px; color: var(--tnls-fg);
  line-height: 1.4; -webkit-font-smoothing: antialiased;
}
.tnls[hidden] { display: none !important; }
.tnls *, .tnls *::before, .tnls *::after { box-sizing: border-box; }
.tnls p { margin: 0; }

/* Gallery mode: the studio takes the main image's place; photos stay in the thumbnail strip */
.woocommerce-product-gallery.tnls-studio > :not(.tnls-host):not(.flex-control-thumbs):not(.tnls-thumbs):not(.tnls-back) { display: none !important; }
.woocommerce-product-gallery.tnls-on { position: relative; }
.tnls-host { width: 100%; }
.tnls-host[hidden], .tnls-thumb[hidden], .tnls-thumbs[hidden], .tnls-back[hidden] { display: none !important; }
.tnls--gallery { max-width: none; margin: 0 0 12px; }

/* "Your design" thumbnail tile */
.tnls-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 0 !important; padding: 0 !important; list-style: none !important; }
.tnls-thumbs li, li.tnls-thumb { list-style: none !important; }
.tnls-thumbs li::marker, li.tnls-thumb::marker { content: none; }
.tnls-thumb__btn {
  -webkit-appearance: none; appearance: none; position: relative !important; display: block !important; width: 100% !important;
  aspect-ratio: 1 / 1; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(18,18,18,.15) !important; border-radius: 0 !important;
  background: #2B2A29 !important; box-shadow: none !important; cursor: pointer; overflow: hidden; min-height: 0 !important; line-height: 1;
}
.tnls-thumb__img { position: absolute; inset: 0; background: center 38% / cover no-repeat; }
.tnls-thumb__btn--photo { background: #fff !important; }
.tnls-thumb__btn--photo .tnls-thumb__img { background-size: contain; background-position: center; }
.tnls-thumb__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 5px; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff; line-height: 1.1;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}
.tnls-thumb__btn:hover { border-color: rgba(18,18,18,.45) !important; }
.tnls-thumb.is-active .tnls-thumb__btn, .tnls-thumbs li.is-active .tnls-thumb__btn {
  border-color: var(--tnls-accent, #B12F36) !important; box-shadow: inset 0 0 0 1px var(--tnls-accent, #B12F36) !important;
}
.tnls-thumb__btn:focus-visible { outline: 2px solid var(--tnls-accent, #B12F36); outline-offset: 2px; }
/* While the studio is showing, no photo thumbnail looks selected */
.woocommerce-product-gallery.tnls-studio .flex-control-thumbs img { opacity: .6 !important; border-color: transparent !important; box-shadow: none !important; outline: 0 !important; }
.woocommerce-product-gallery.tnls-studio .flex-control-thumbs img:hover { opacity: 1 !important; }

/* Back pill over the photos */
.tnls-back {
  -webkit-appearance: none; appearance: none; position: absolute !important; top: 14px; left: 14px; z-index: 9;
  display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; padding: 8px 14px 8px 10px !important;
  border: 0 !important; border-radius: 999px !important; background: #121212 !important; color: #fff !important;
  font: inherit; font-size: 12px !important; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: normal;
  box-shadow: 0 6px 18px rgba(0,0,0,.18) !important; cursor: pointer; min-height: 0 !important; width: auto !important;
}
.tnls-back svg { width: 14px; height: 14px; }
.tnls-back:hover { background: var(--tnls-accent, #B12F36) !important; }
.tnls-back:focus-visible { outline: 2px solid var(--tnls-accent, #B12F36); outline-offset: 2px; }

/* Print color */
.tnls__ink { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tnls__ink-label { font-size: 12px; font-weight: 600; color: var(--tnls-muted); }
.tnls__ink-opts { display: inline-flex; border: 1px solid rgba(18,18,18,.2); }
.tnls__ink-opts button {
  display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 12px !important; font-size: 12px !important; font-weight: 600;
  background: #fff !important; color: rgba(18,18,18,.72) !important;
}
.tnls__ink-opts button + button { border-left: 1px solid rgba(18,18,18,.2) !important; }
.tnls__ink-opts button i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); display: inline-block; }
.tnls__swap-dot { background: linear-gradient(135deg, #151515 50%, #F7F5F2 50%); }
.tnls__ink-opts button.is-active { background: #121212 !important; color: #fff !important; }
.tnls__ink-opts button.is-active i { border-color: rgba(255,255,255,.6); }

/* Neutralize theme / Elementor button styles */
.tnls button {
  -webkit-appearance: none; appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-transform: none; letter-spacing: inherit; border-radius: 0;
  box-shadow: none; line-height: 1.2; cursor: pointer; min-height: 0; width: auto; text-decoration: none;
}
.tnls button:focus-visible, .tnls__design:focus-visible, .tnls input:focus-visible {
  outline: 2px solid var(--tnls-accent); outline-offset: 2px;
}

.tnls__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tnls__title { font-size: 15px; font-weight: 700; }
.tnls__logo { min-width: 0; font-size: 13px; color: var(--tnls-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Stage */
.tnls__stage {
  position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  background-color: #2B2A29; border: 1px solid var(--tnls-line);
  transition: background-color .5s ease; user-select: none; -webkit-user-select: none;
}
.tnls__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 32%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.16) 100%);
}
.tnls__garment, .tnls__shade, .tnls__fx { position: absolute; inset: 0; pointer-events: none; }
.tnls__garment { z-index: 1; }
.tnls__garment svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 18px 22px rgba(0,0,0,.24)); }
.tnls__garment canvas, .tnls__fx canvas { position: absolute; display: block; }
.tnls__garment canvas { filter: drop-shadow(0 16px 20px rgba(0,0,0,.22)); }
.tnls__design { position: absolute; z-index: 4; transform: translate(-50%, -50%); pointer-events: none; }
.tnls__design canvas { display: block; width: 100%; height: auto; pointer-events: none; }
.tnls__stage.is-editing .tnls__design { cursor: grabbing; }
.tnls__shade, .tnls__fx { z-index: 3; }
.tnls__shade svg { display: block; width: 100%; height: 100%; }
.tnls__fx--mult { mix-blend-mode: multiply; }
.tnls__fx--scr { mix-blend-mode: screen; }

.tnls__frame {
  position: absolute; z-index: 6; transform: translate(-50%, -50%); pointer-events: none;
  outline: 1px dashed var(--tnls-accent); outline-offset: 4px; opacity: 0; transition: opacity .2s;
}
.tnls__stage:hover .tnls__frame, .tnls__stage.is-editing .tnls__frame, .tnls__stage:focus-within .tnls__frame { opacity: 1; }
@media (hover: none) { .tnls__frame { opacity: .85; } }
.tnls__handle {
  position: absolute; right: -13px; bottom: -13px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--tnls-accent); box-shadow: 0 1px 4px rgba(0,0,0,.3);
  pointer-events: auto; cursor: nwse-resize; touch-action: none;
}
.tnls__handle::before { content: ""; position: absolute; inset: -12px; }

.tnls__tag, .tnls__hint { position: absolute; z-index: 7; font-size: 11px; pointer-events: none; transition: color .4s; }
.tnls__tag { top: 10px; left: 12px; font-weight: 600; }
.tnls__hint { bottom: 10px; right: 12px; }
.tnls__stage[data-tone="dark"] .tnls__tag, .tnls__stage[data-tone="dark"] .tnls__hint { color: rgba(255,255,255,.65); }
.tnls__stage[data-tone="light"] .tnls__tag, .tnls__stage[data-tone="light"] .tnls__hint { color: rgba(18,18,18,.55); }

/* Empty state (before a logo is picked) */
.tnls__empty, .tnls__prompt { display: none; }
.tnls.is-empty .tnls__design, .tnls.is-empty .tnls__frame, .tnls.is-empty .tnls__hint,
.tnls.is-empty .tnls__sizebar, .tnls.is-empty .tnls__presets, .tnls.is-empty .tnls__ink, .tnls.is-empty .tnls__foot { display: none !important; }
.tnls.is-empty .tnls__empty {
  position: absolute; z-index: 4; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(255,255,255,.55); background: rgba(255,255,255,.06); pointer-events: none;
}
.tnls.is-empty .tnls__stage[data-tone="light"] .tnls__empty { border-color: rgba(18,18,18,.35); background: rgba(18,18,18,.03); }
.tnls__empty span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); text-align: center; padding: 0 6px; }
.tnls__stage[data-tone="light"] .tnls__empty span { color: rgba(18,18,18,.6); }
.tnls.is-empty .tnls__prompt {
  display: block; position: absolute; left: 50%; bottom: 14px; z-index: 5; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 28px); margin: 0; padding: 9px 14px; text-align: center;
  font-size: 13px; font-weight: 600; line-height: 1.3; color: #fff; background: rgba(18,18,18,.82); border-radius: 999px;
}
@media (prefers-reduced-motion: no-preference) {
  .tnls.is-empty .tnls__empty { animation: tnlsPulse 2.4s ease-in-out infinite; }
  @keyframes tnlsPulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
}

/* Size bar */
.tnls__sizebar {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--tnls-line); border-top: 0; background: var(--tnls-light);
}
.tnls__sizebar-label { font-size: 12px; font-weight: 600; color: var(--tnls-muted); }
.tnls__step {
  flex: none; width: 30px; height: 30px; display: inline-flex !important; align-items: center; justify-content: center;
  border: 1px solid rgba(18,18,18,.22) !important; background: #fff !important; font-size: 17px !important; font-weight: 600;
}
.tnls__step:hover { border-color: var(--tnls-fg) !important; }
.tnls__range { flex: 1; min-width: 0; width: 100%; margin: 0; accent-color: var(--tnls-accent); }
.tnls__size { flex: none; min-width: 96px; text-align: right; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .tnls__sizebar-label { display: none; } }

/* Placement presets */
.tnls__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tnls__preset {
  padding: 9px 14px !important; font-size: 13px !important; font-weight: 600;
  border: 1px solid rgba(18,18,18,.22) !important; color: rgba(18,18,18,.75) !important; background: #fff !important;
  transition: border-color .15s, background-color .15s, color .15s;
}
.tnls__preset:hover { border-color: var(--tnls-fg) !important; color: var(--tnls-fg) !important; }
.tnls__preset.is-active { background: var(--tnls-fg) !important; color: #fff !important; border-color: var(--tnls-fg) !important; }

.tnls__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.tnls__summary { font-size: 13px; color: var(--tnls-muted); }
.tnls__summary strong { color: var(--tnls-fg); font-weight: 600; }
.tnls__reset { font-size: 13px !important; text-decoration: underline !important; text-underline-offset: 3px; color: var(--tnls-muted) !important; }
.tnls__reset:hover { color: var(--tnls-fg) !important; }

@media (prefers-reduced-motion: reduce) {
  .tnls__stage, .tnls__frame, .tnls__tag, .tnls__hint, .tnls__preset { transition: none; }
}