/* ============================================================================
   TA-UBS v2 — the redesigned buy box
   Loads AFTER assets/ta-ubs.css and only applies inside .ta-ubs--v2, so the old
   stylesheet keeps working for anything still on the old markup.
   Palette is PANTONE 123 C per brand-colour-pantone-123c.md:
   yellow is a FILL, --heat-ink is the text. Nothing white ever sits on yellow.
   ========================================================================= */
.ta-ubs--v2{
  --ink:#0C0D10; --ink2:#16181D; --paper:#F6F5F2; --white:#fff;
  --muted:#5C606B; --muted2:#8A8F9C; --line:#E4E2DD; --line2:#D5D2CB;
  --heat:#FFC72C; --heat-ink:#8F6200; --on-heat:#0C0D10;
  --heat-soft:#FFF8E3; --alert:#E8850C; --alert-soft:#FFF1DC;
  --ok:#127A46; --ok-soft:#E7F4EC;
  --money:#E8F5EC; --money-line:#C3E0CE; --money-ink:#0B4D2C; --money-mute:#39755A;
  --r:14px; --r-s:10px;

  display:block; max-width:none; border:0; padding:0; background:none;
  font-size:15px; line-height:1.5; color:var(--ink);
}
.ta-ubs--v2 *,.ta-ubs--v2 *::before,.ta-ubs--v2 *::after{box-sizing:border-box}
.ta-ubs--v2 .ta-ubs__header{display:none}          /* old chrome, kept for compatibility */
.ta-ubs--v2 .ta-ubs__bridge{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------- steps ---------------- */
.ta-ubs--v2 .ta-ubs__step{
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
  margin:0 0 12px; padding:14px 16px 16px; transition:border-color .2s ease;
}
.ta-ubs--v2 .ta-ubs__step--3{padding:12px 14px 13px}
.ta-ubs--v2 .ta-ubs__step--3 .ta-ubs__stepHead{margin-bottom:9px}
.ta-ubs--v2 .ta-ubs__step.is-active{border-color:var(--heat)}
.ta-ubs--v2 .ta-ubs__stepHead{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ta-ubs--v2 .ta-ubs__stepno{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;text-align:center;
  font:800 13px/22px Archivo,Inter,system-ui,sans-serif;
  background:var(--paper);color:var(--muted);border:1px solid var(--line2);
}
.ta-ubs--v2 .ta-ubs__step.is-active .ta-ubs__stepno{background:var(--heat);color:var(--on-heat);border-color:var(--heat)}
.ta-ubs--v2 .ta-ubs__step.is-done .ta-ubs__stepno{background:var(--white);color:var(--ok);border-color:#BFE0CC;font-size:0}
.ta-ubs--v2 .ta-ubs__step.is-done .ta-ubs__stepno::after{content:'\2713';font-size:12px}
.ta-ubs--v2 .ta-ubs__stepTitle{
  margin:0;font:700 15px/1.2 Archivo,Inter,system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);
}
.ta-ubs--v2 .ta-ubs__stepHint{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:500}

/* ---------------- step 1 · artwork ---------------- */
.ta-ubs--v2 .ta-ubs__dropzone{
  border:1px dashed var(--line2);border-radius:var(--r-s);background:var(--paper);
  /* Icon beside the text rather than stacked above it: the target stays wide
     enough to drop on, at roughly half the height. */
  display:flex;align-items:center;justify-content:center;gap:11px;
  padding:13px 16px;text-align:left;cursor:pointer;
}
.ta-ubs--v2 .ta-ubs__dropzone:hover,.ta-ubs--v2 .ta-ubs__dropzone.is-over{border-color:var(--ink);background:var(--heat-soft)}
.ta-ubs--v2 .ta-ubs__dropzoneIcon{
  font-size:15px;color:var(--muted2);line-height:1;flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;background:var(--white);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.ta-ubs--v2 .ta-ubs__dropzoneText strong{display:block;font-weight:600;font-size:13.5px;margin-top:0}
.ta-ubs--v2 .ta-ubs__dropzoneText small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.ta-ubs--v2 .ta-ubs__fileInput{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ta-ubs--v2 .ta-ubs__autoNote{font-size:12px;color:var(--muted);line-height:1.4;margin:8px 0 0}
.ta-ubs--v2 .ta-ubs__artAlt{margin-top:9px}
.ta-ubs--v2 .ta-ubs__step--1{padding:13px 15px 14px}
.ta-ubs--v2 .ta-ubs__step--1 .ta-ubs__stepHead{margin-bottom:10px}
.ta-ubs--v2 .ta-ubs__libraryBtn{
  background:none!important;border:0!important;padding:0!important;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--heat);text-decoration-thickness:2px;width:auto!important;
}
.ta-ubs--v2 .ta-ubs__libraryBtn:hover{color:var(--heat-ink)!important}

/* ---------------- step 2 · transfer cards ---------------- */
.ta-ubs--v2 .ta-ubs__itemsWrap{position:relative}
.ta-ubs--v2 .ta-ubs__itemsWrap.is-scroll .ta-ubs__items{
  max-height:432px;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 9px 8px 8px;margin:-8px -9px -8px -8px;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
}
.ta-ubs--v2 .ta-ubs__itemsWrap.is-scroll .ta-ubs__items::-webkit-scrollbar{width:11px}
.ta-ubs--v2 .ta-ubs__itemsWrap.is-scroll .ta-ubs__items::-webkit-scrollbar-thumb{
  background:var(--line2);border-radius:99px;border:3px solid var(--white);background-clip:padding-box;
}

.ta-ubs--v2 .ta-ubs__item{
  display:block!important;                 /* old sheet sets flex, which flattens the card */
  border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;
  padding:12px 2px 13px!important;margin:0!important;background:transparent!important;cursor:pointer;
}
.ta-ubs--v2 .ta-ubs__item:first-child{border-top:0!important;padding-top:4px!important}
/* the old sheet rings the selected row in green; v2 uses a soft yellow field */
.ta-ubs--v2 .ta-ubs__item--selected,
.ta-ubs--v2 .ta-ubs__item.is-selected{outline:0!important}
.ta-ubs--v2 .ta-ubs__item.is-selected{
  background:var(--heat-soft)!important;border-radius:9px!important;
  box-shadow:0 0 0 7px var(--heat-soft)!important;
}
.ta-ubs--v2 .ta-ubs__itemTop{display:flex;align-items:center;gap:9px}
.ta-ubs--v2 .ta-ubs__thumb{
  width:32px!important;height:32px!important;flex:0 0 32px;border-radius:7px!important;
  border:1px solid var(--line2)!important;object-fit:cover;background:var(--paper);cursor:zoom-in;
}
.ta-ubs--v2 .ta-ubs__itemName{
  font-size:13px;font-weight:600;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ta-ubs--v2 .ta-ubs__itemName em{font-style:normal;font-weight:400;color:var(--muted2)}
.ta-ubs--v2 .ta-ubs__seen{
  margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--heat-ink);white-space:nowrap;flex:0 0 auto;
}
.ta-ubs--v2 .ta-ubs__remove{
  border:0!important;background:none!important;color:var(--muted2)!important;cursor:pointer;
  font-size:17px;line-height:1;padding:5px 7px!important;border-radius:6px;flex:0 0 auto;width:auto!important;
}
.ta-ubs--v2 .ta-ubs__remove:hover{color:var(--alert)!important;background:var(--alert-soft)!important}

.ta-ubs--v2 .ta-ubs__dims{
  display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 58px minmax(0,80px);
  gap:7px;align-items:end;margin-top:9px;
}
.ta-ubs--v2 .ta-ubs__dims label{display:block;min-width:0;margin:0}
.ta-ubs--v2 .ta-ubs__dims label span{
  display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:3px;
}
.ta-ubs--v2 .ta-ubs__dims input{
  width:100%;padding:9px 6px;border:1.5px solid var(--line2);border-radius:9px;background:var(--white);
  text-align:center;font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.ta-ubs--v2 .ta-ubs__dims input:focus{outline:2px solid var(--heat);outline-offset:1px;border-color:var(--ink)}
.ta-ubs--v2 .ta-ubs__times{text-align:center;color:var(--muted2);font-size:13px;padding-bottom:10px}
.ta-ubs--v2 .ta-ubs__each{
  text-align:right;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink2);padding-bottom:8px;
}
.ta-ubs--v2 .ta-ubs__each small{display:block;font-weight:400;color:var(--muted2);font-size:10.5px}
@media(max-width:460px){
  .ta-ubs--v2 .ta-ubs__dims{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 56px}
  .ta-ubs--v2 .ta-ubs__each{grid-column:1/-1;text-align:left;padding:5px 0 0}
  .ta-ubs--v2 .ta-ubs__each small{display:inline;margin-left:6px}
}
.ta-ubs--v2 .ta-ubs__addItem{
  margin-top:10px;background:none;border:1px dashed var(--line2);border-radius:9px;width:100%;
  padding:10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);
}
.ta-ubs--v2 .ta-ubs__addItem:hover{border-color:var(--ink);background:var(--paper);color:var(--ink)}

/* ---------------- per-transfer options ----------------
   Cut and file check are per transfer in the cart and always have been — the
   backend stores both on each upload. Only the front end forced one answer for
   the whole order. These two boxes sit on each card; the step-3 pair are masters
   that set every card at once, so nobody ticks eight files one at a time. */
.ta-ubs--v2 .ta-ubs__cardOpts{
  display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0 2px;
}
.ta-ubs--v2 .ta-ubs__cardOpt{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin:0;
  border:1px solid var(--line);border-radius:99px;padding:4px 10px 4px 8px;
  font-size:12px;font-weight:600;color:var(--muted);background:var(--white);
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.ta-ubs--v2 .ta-ubs__cardOpt:hover{border-color:var(--line2);color:var(--ink)}
.ta-ubs--v2 .ta-ubs__cardOpt input{
  width:14px;height:14px;flex:0 0 14px;margin:0;accent-color:var(--ok);cursor:pointer;
}
.ta-ubs--v2 .ta-ubs__cardOpt i{font-style:normal;font-weight:600;color:var(--muted2)}
/* On, it stops being a question and becomes a statement about this transfer. */
.ta-ubs--v2 .ta-ubs__cardOpt.is-on{
  border-color:var(--money-line);background:var(--money);color:var(--money-ink);
}
.ta-ubs--v2 .ta-ubs__cardOpt.is-on i{color:var(--money-mute)}
/* The selected card is yellow-tinted, so a white pill on it reads as a hole. */
.ta-ubs--v2 .ta-ubs__item.is-selected .ta-ubs__cardOpt{background:rgba(255,255,255,.7)}
.ta-ubs--v2 .ta-ubs__item.is-selected .ta-ubs__cardOpt.is-on{background:var(--money)}

/* The masters carry a third state: some transfers, not all. Browsers draw the
   dash for us; this just stops it reading as plain "off". */
.ta-ubs--v2 .ta-ubs__choice input:indeterminate{accent-color:var(--muted2)}

/* ---------------- rating, matched to the apparel pages ----------------
   reviews.css from ton-atelier-customizer is already enqueued here and styles
   .tac-*; this only tidies the WooCommerce wrapper it now sits inside. */
.woocommerce-product-rating:has(.tac-title-rating){margin:0}
.woocommerce-product-rating .tac-title-rating{margin:4px 0 12px}

/* ---------------- price ----------------
   Light green card, not the black slab. A total is good news, so it reads as
   good news; black made it the heaviest thing on the page. Everything here is
   a tint of --ok, so the card, the nudge and the "you saved" lines are one
   family. Smaller too: the number no longer needs to shout to be found. */
.ta-ubs--v2 .ta-ubs__priceCard{
  background:var(--money);border:1px solid var(--money-line);color:var(--money-ink);
  border-radius:var(--r);padding:10px 14px 10px;margin:0 0 10px;
}
.ta-ubs--v2 .ta-ubs__priceTop{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ta-ubs--v2 .ta-ubs__priceLabel{
  font-size:11.5px;color:var(--money-mute);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.ta-ubs--v2 .ta-ubs__total,.ta-ubs--v2 .ta-ubs__totalPrice{
  font:800 25px/1 Archivo,Inter,system-ui,sans-serif;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--money-ink);
}
.ta-ubs--v2 .ta-ubs__priceSub{
  color:var(--money-mute);font-size:12.5px;margin:0;font-variant-numeric:tabular-nums;
}
/* The supporting line and the breakdown button were two stacked rows for very
   little content. Side by side they cost one row instead of two. */
.ta-ubs--v2 .ta-ubs__priceFoot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:5px;
}
.ta-ubs--v2 .ta-ubs__brkBtn{
  margin-top:0;flex:0 0 auto;background:transparent;border:1px solid var(--money-line);
  color:var(--money-mute);border-radius:99px;padding:3px 10px;font-size:11.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;
}
/* Yellow is a fill, never text — on this tint it would vanish. Darken instead. */
.ta-ubs--v2 .ta-ubs__brkBtn:hover{border-color:var(--ok);color:var(--money-ink);background:var(--white)}
.ta-ubs--v2 .ta-ubs__brkBtn.is-open{border-color:var(--ok);color:var(--money-ink);background:var(--white)}
.ta-ubs--v2 .ta-ubs__summary{
  margin-top:10px;border-top:1px solid var(--money-line);padding-top:10px;font-size:12.5px;background:none;
}
.ta-ubs--v2 .ta-ubs__summary[hidden]{display:none}
.ta-ubs--v2 .ta-ubs__row{
  display:flex;justify-content:space-between;padding:3px 0;color:var(--money-mute);
  font-variant-numeric:tabular-nums;
}
.ta-ubs--v2 .ta-ubs__row span:last-child{color:var(--money-ink);font-weight:600}
.ta-ubs--v2 .ta-ubs__ship{margin-top:10px;padding-top:9px;border-top:1px solid var(--money-line)}
.ta-ubs--v2 .ta-ubs__shipText{font-size:12.5px;color:var(--money-mute);line-height:1.4;margin:0}
.ta-ubs--v2 .ta-ubs__shipText b{color:var(--money-ink)}
.ta-ubs--v2 .ta-ubs__shipBar{height:4px;border-radius:99px;background:#CFE6D8;overflow:hidden;margin-top:7px}
.ta-ubs--v2 .ta-ubs__shipBar i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .3s ease}

/* ---------------- tier nudge ---------------- */
.ta-ubs--v2 .ta-ubs__nudge{
  display:flex;gap:10px;align-items:flex-start;background:var(--white);border:1px solid var(--money-line);
  border-radius:var(--r-s);padding:11px 14px;margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--money-ink);
}
.ta-ubs--v2 .ta-ubs__nudge[hidden]{display:none}
.ta-ubs--v2 .ta-ubs__nudgeArrow{font-weight:800;color:var(--ok)}
.ta-ubs--v2 .ta-ubs__nudge b{font-weight:700}

/* ---------------- step 3 · choices ---------------- */
/* Three stacked rows of checkbox + paragraph pushed the Add to Cart button off
   a laptop screen. Side by side they fit in one band. Each becomes its own small
   card, so the grid still reads as three separate choices without the rules
   between them. */
.ta-ubs--v2 .ta-ubs__choices{
  display:grid;gap:8px;
  /* auto-fit, not repeat(3): the buy column is ~500px on a wide desktop but much
     narrower on a laptop, and the viewport says nothing about it. This drops to
     two columns, then one, based on the space actually available. */
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.ta-ubs--v2 .ta-ubs__choice{
  display:flex;gap:9px;align-items:flex-start;margin:0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-s);padding:9px 9px 10px;
  background:var(--white);transition:border-color .15s ease,background-color .15s ease;
}
.ta-ubs--v2 .ta-ubs__choice:hover{border-color:var(--line2);background:var(--paper)}
/* A ticked option is a decision, so it stops looking like an empty box. */
.ta-ubs--v2 .ta-ubs__choice:has(input:checked){
  border-color:var(--money-line);background:var(--money);
}
.ta-ubs--v2 .ta-ubs__choice:has(input:checked) .ta-ubs__choiceDesc{color:var(--money-mute)}
.ta-ubs--v2 .ta-ubs__choicesHint{
  margin:8px 0 0;font-size:12px;color:var(--muted2);line-height:1.4;
}
/* One column once three of them would be too narrow to read. */
/* On a phone two columns with a lone third underneath reads worse than a list. */
@media(max-width:720px){
  .ta-ubs--v2 .ta-ubs__choices{grid-template-columns:1fr;gap:6px}
  .ta-ubs--v2 .ta-ubs__choiceDesc{font-size:12px}
}
.ta-ubs--v2 .ta-ubs__choice input{margin:1px 0 0;width:16px;height:16px;flex:0 0 16px;accent-color:var(--ok)}
.ta-ubs--v2 .ta-ubs__choiceTitle{
  font-weight:600;font-size:12.5px;display:flex;gap:5px;align-items:baseline;flex-wrap:wrap;
  line-height:1.25;
}
.ta-ubs--v2 .ta-ubs__choice:hover .ta-ubs__choiceTitle{color:var(--heat-ink)}
.ta-ubs--v2 .ta-ubs__choiceDesc{
  display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.35;max-width:none;
}
.ta-ubs--v2 .ta-ubs__tag{
  font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:1px 6px;
  border-radius:99px;background:transparent;color:var(--muted2);border:1px solid var(--line);
}
.ta-ubs--v2 .ta-ubs__advBtn{
  background:none;border:0;padding:6px 0 0;cursor:pointer;font-size:13px;font-weight:600;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.ta-ubs--v2 .ta-ubs__advBtn:hover{color:var(--ink)}
.ta-ubs--v2 .ta-ubs__advBtn.is-open{color:var(--ink)}
.ta-ubs--v2 .ta-ubs__adv{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.ta-ubs--v2 .ta-ubs__toggleRow{display:flex;gap:9px;align-items:center;font-size:13.5px;padding:5px 0;cursor:pointer}
.ta-ubs--v2 .ta-ubs__toggleRow input{width:16px;height:16px;accent-color:var(--ink)}

/* ---------------- cart ---------------- */
.ta-ubs--v2 .ta-ubs__confirmPrintLabel{
  display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;margin:0 0 10px;cursor:pointer;
}
.ta-ubs--v2 .ta-ubs__confirmPrint{margin:1px 0 0;width:18px;height:18px;flex:0 0 18px;accent-color:var(--ink)}
.ta-ubs--v2 .ta-ubs__addToCartBtn{
  width:100%!important;border:0!important;border-radius:12px!important;padding:17px 20px!important;
  background:var(--heat)!important;color:var(--on-heat)!important;
  font:800 17px/1 Archivo,Inter,system-ui,sans-serif!important;letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(255,199,44,.75);
}
.ta-ubs--v2 .ta-ubs__addToCartBtn:hover{background:#FFD35A!important}
.ta-ubs--v2 .ta-ubs__gate{
  text-align:center;font-size:12.5px;font-weight:600;color:var(--alert);margin:8px 0 0;min-height:18px;line-height:1.4;
}
.ta-ubs--v2 .ta-ubs__estimate{
  margin-top:12px;padding:10px 14px;border:1px solid #CBE4D5;border-radius:var(--r-s);
  background:var(--white);font-size:13px;color:#0B5C34;text-align:center;
}

/* ---------------- tiers ---------------- */
.ta-ubs--v2 .ta-ubs__tierWrap{margin-top:22px}
.ta-ubs--v2 .ta-ubs__tierTitle{font-size:12.5px;color:var(--muted);margin-bottom:7px}
.ta-ubs--v2 .ta-ubs__tierTable{
  width:100%;border-collapse:collapse;font-size:13px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;
}
.ta-ubs--v2 .ta-ubs__tierTable th{
  background:var(--ink);color:#fff;text-align:left;padding:9px 12px;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700;
}
.ta-ubs--v2 .ta-ubs__tierTable td{padding:9px 12px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
/* the old JS marks the live tier with .is-active / inline background — keep both working */
.ta-ubs--v2 .ta-ubs__tierTable tr.is-active td,
.ta-ubs--v2 .ta-ubs__tierTable tr.ta-ubs__tierRow--active td{background:var(--heat-soft)!important;font-weight:700}

/* ---------------- size warning ---------------- */
.ta-ubs--v2 .ta-ubs__sizeWarn{
  margin-top:10px;padding:10px 13px;border-radius:var(--r-s);
  background:var(--alert-soft);border:1px solid #F0C89A;color:#8A4E00;font-size:12.5px;line-height:1.45;
}

/* ---------------- upload queue (JS-generated) ---------------- */
.ta-ubs--v2 .ta-ubs__qName{font-size:12.5px;font-weight:600}
.ta-ubs--v2 .ta-ubs__qState{font-size:12px;color:var(--muted)}

/* ---------------- garment preview ---------------- */
/* __gp* prefix on purpose: __preview* belongs to the artwork zoom modal. */
.ta-ubs--v2 .ta-ubs__garment{
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  margin:0 0 12px;padding:14px 16px 16px;
}
.ta-ubs--v2 .ta-ubs__garment[hidden]{display:none}
.ta-ubs--v2 .ta-ubs__gpStage{
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);
  padding:10px;display:grid;place-items:center;
}
.ta-ubs--v2 .ta-ubs__gpShirt{position:relative;width:100%;max-width:400px;line-height:0}
.ta-ubs--v2 .ta-ubs__gpBlank{width:100%;height:auto;display:block;border-radius:8px}
.ta-ubs--v2 .ta-ubs__gpArt{position:absolute;line-height:0}
.ta-ubs--v2 .ta-ubs__gpArt>img{
  width:100%;height:100%;display:block;
  /* DTF is opaque with a white base — it sits ON the fabric, so no blend mode.
     Just a hair of shadow for depth. */
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.28));
}
.ta-ubs--v2 .ta-ubs__gpArt.is-ghost{
  border:2px dashed var(--heat-ink);background:rgba(255,199,44,.28);
  display:grid;place-items:center;border-radius:2px;
}
.ta-ubs--v2 .ta-ubs__gpArt.is-ghost span{
  font:800 12px/1.2 Archivo,Inter,system-ui,sans-serif;color:#6E4B00;text-align:center;
}
.ta-ubs--v2 .ta-ubs__gpCap{
  display:block;text-align:center;font-size:12px;color:var(--muted2);margin-top:8px;line-height:1.4;
}
.ta-ubs--v2 .ta-ubs__gpCtl{margin-top:12px;display:grid;gap:9px}
.ta-ubs--v2 .ta-ubs__gpRow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.ta-ubs--v2 .ta-ubs__gpRow>b{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted2);flex:0 0 72px;
}
.ta-ubs--v2 .ta-ubs__gpRow>span{display:flex;gap:7px;flex-wrap:wrap;min-width:0}
.ta-ubs--v2 .ta-ubs__gpChip{
  background:var(--white);border:1.5px solid var(--line);border-radius:99px;padding:6px 12px;
  font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink);line-height:1.2;
}
.ta-ubs--v2 .ta-ubs__gpChip:hover{border-color:var(--line2)}
.ta-ubs--v2 .ta-ubs__gpChip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:460px){ .ta-ubs--v2 .ta-ubs__gpRow>b{flex:1 0 100%} }

/* ---- preview mounted into the product gallery ---- */
/* Unscoped on purpose: these live in the theme's gallery column, outside .ta-ubs. */
.ta-gp-tabs{
  display:flex;gap:4px;margin:0 0 12px;background:#F6F5F2;border:1px solid #E4E2DD;
  border-radius:99px;padding:4px;width:max-content;max-width:100%;
}
.ta-gp-tabs .ta-gp-tab{
  border:0;background:none;border-radius:99px;padding:6px 13px;cursor:pointer;min-width:0;
  font:600 12.5px/1.3 Inter,system-ui,sans-serif;color:#5C606B;white-space:nowrap;
}
.ta-gp-tabs .ta-gp-tab.is-on{background:#fff;color:#0C0D10;box-shadow:0 1px 2px rgba(12,13,16,.12)}
.ta-gp-tabs .ta-gp-tab.is-off{opacity:.45;cursor:not-allowed}
.ta-gp-tabs .ta-gp-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:#FFC72C;
  margin-left:6px;vertical-align:1px;
}
.woocommerce-product-gallery.ta-gp-off{display:none !important}
.ta-gp-pane[hidden]{display:none}
/* mounted, the tab is the label and the shirt can use the gallery's full width */
.ta-gp-pane .ta-ubs__garment{border:0;padding:0;margin:0;background:none}
.ta-gp-pane .ta-ubs__garment .ta-ubs__stepHead{display:none}
.ta-gp-pane .ta-ubs__gpShirt{max-width:540px}
@media(max-width:560px){ .ta-gp-tabs{width:auto} .ta-gp-tabs .ta-gp-tab{flex:1 1 0;white-space:normal} }

/* ============================================================================
   THEME DEFENCE — Elementor's global button styling
   The site's kit carries, at specificity (0,2,1):

       .elementor-kit-22928 button:hover,
       .elementor-kit-22928 button:focus { background-color:#000; color:#fff }

   so every button in this component turns into a black lozenge the moment it is
   hovered or focused. That is exactly what made "Advanced file handling"
   unreadable: the kit supplied the black fill, and our own :hover rule — which
   only set a colour — supplied dark text on top of it.

   Earlier rounds patched this one button at a time with !important. This does it
   once. The reset is (0,3,1) — .ta-ubs--v2 + :not(…) + :hover — which outranks
   the kit. Buttons that are SUPPOSED to have a background on hover restate it
   below in the same `button.ta-ubs__x:hover` shape, also (0,3,1), so they sit
   later in source order and win the tie.

   Excluded from the reset: the two buttons with a deliberate solid fill, which
   are restated at the end instead.
   ========================================================================= */
.ta-ubs--v2 button:not(.ta-ubs__addToCartBtn, .ta-ubs__libDel):hover,
.ta-ubs--v2 button:not(.ta-ubs__addToCartBtn, .ta-ubs__libDel):focus{
  background-color:transparent;color:var(--muted);box-shadow:none;
}
/* The tab strip is inserted before the gallery, so it lives in the theme's
   column OUTSIDE .ta-ubs--v2 and needs its own line. */
.ta-gp-tabs button.ta-gp-tab:hover,
.ta-gp-tabs button.ta-gp-tab:focus{background-color:transparent;color:#0C0D10}

/* ---- the states that are meant to have a background ---- */
.ta-ubs--v2 button.ta-ubs__brkBtn:hover,
.ta-ubs--v2 button.ta-ubs__brkBtn:focus,
.ta-ubs--v2 button.ta-ubs__brkBtn.is-open{
  background-color:var(--white);border-color:var(--ok);color:var(--money-ink);
}
.ta-ubs--v2 button.ta-ubs__advBtn:hover,
.ta-ubs--v2 button.ta-ubs__advBtn:focus{color:var(--ink)}
.ta-ubs--v2 button.ta-ubs__addItem:hover,
.ta-ubs--v2 button.ta-ubs__addItem:focus{
  background-color:var(--paper);border-color:var(--ink);color:var(--ink);
}
.ta-ubs--v2 button.ta-ubs__libraryBtn:hover,
.ta-ubs--v2 button.ta-ubs__libraryBtn:focus{color:var(--heat-ink)}
.ta-ubs--v2 button.ta-ubs__remove:hover,
.ta-ubs--v2 button.ta-ubs__remove:focus{background-color:var(--alert-soft);color:var(--alert)}
.ta-ubs--v2 button.ta-ubs__gpChip:hover,
.ta-ubs--v2 button.ta-ubs__gpChip:focus{border-color:var(--line2);color:var(--ink)}
.ta-ubs--v2 button.ta-ubs__gpChip[aria-pressed=true]{
  background-color:var(--ink);color:#fff;border-color:var(--ink);
}
.ta-gp-tabs button.ta-gp-tab.is-on{background-color:#fff;color:#0C0D10}

/* ---- the two with a fill of their own, restated so the kit cannot repaint ---- */
.ta-ubs--v2 button.ta-ubs__addToCartBtn:hover,
.ta-ubs--v2 button.ta-ubs__addToCartBtn:focus{background-color:#FFD35A;color:var(--on-heat)}
.ta-ubs--v2 button.ta-ubs__libDel:hover,
.ta-ubs--v2 button.ta-ubs__libDel:focus{background-color:#DC2626;color:#fff}

/* Keyboard users still need to see where they are — the kit's black fill was
   doing that job by accident. Give it back deliberately. */
.ta-ubs--v2 button:focus-visible,
.ta-gp-tabs button:focus-visible{outline:2px solid var(--heat);outline-offset:2px}

/* ---------------- price + rating on one line ----------------
   Unscoped on purpose: these are the theme's own elements above the uploader.
   This stylesheet is only enqueued by the shortcode, so it reaches the product
   pages that render the uploader and no others.

   Both are already inline-block, but Avada prints an empty availability div
   between them and styles it at (0,4,0):

       .product-type-simple .entry-summary .summary-container
         .avada-availability { display:block }

   A full-width block between two inline-blocks is what pushed the rating onto
   its own line. Outranking a four-class selector from here means !important on
   that one declaration; the element is empty on these products, so making it
   inline costs nothing and it still shows if it ever carries a stock message. */
.summary-container .avada-availability{
  display:inline-block !important;width:auto !important;margin:0 !important;
}
.summary-container > p.price{margin:6px 14px 2px 0 !important;vertical-align:middle}
.summary-container > .woocommerce-product-rating{margin:6px 0 2px !important;vertical-align:middle}
.summary-container > .woocommerce-product-rating .tac-title-rating{margin:0}

/* ---------------- October: the upload visitor ----------------
   Paired with booStart()/booStop() in ta-ubs.js, which picks one of three
   sprites at random and only mounts it between 1 October and 2 November, never
   under prefers-reduced-motion.

   Two nested elements because one element cannot run two transform animations
   at once: the span carries the horizontal travel, the svg inside carries the
   character's own motion. Each sprite gets its own height, speed and rhythm, so
   they do not read as one animation with three costumes. */
.ta-ubs--v2 .ta-ubs__step--1{position:relative;overflow:hidden}
.ta-ubs--v2 .ta-ubs__boo{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.ta-ubs--v2 .ta-ubs__booSprite{
  position:absolute;top:50%;left:-60px;width:50px;height:50px;margin-top:-25px;
  animation:ta-boo-drift 5.2s linear infinite;
}
.ta-ubs--v2 .ta-ubs__booSprite svg,
.ta-ubs--v2 .ta-ubs__booSprite img{
  display:block;width:100%;height:100%;opacity:.9;
  filter:drop-shadow(0 3px 5px rgba(12,13,16,.18));
}
/* The art files are 48-60px, so they are shown at or just under their native
   size. Scaling them up would only make them soft. */
.ta-ubs--v2 .ta-ubs__booSprite img{object-fit:contain}

/* They wear the brand: PANTONE 123 C as the fill, --heat-ink as the outline,
   and --on-heat for faces and eye sockets — the token that exists precisely
   because nothing light may sit on the yellow. */
.ta-ubs--v2 .ta-ubs__booBody{fill:var(--heat);stroke:var(--heat-ink)}
.ta-ubs--v2 .ta-ubs__booBone{stroke:var(--heat);fill:none}
.ta-ubs--v2 .ta-ubs__booFace{fill:var(--on-heat)}

/* --- the ghost: mid-height, unhurried, bobbing --- */
.ta-ubs--v2 .ta-ubs__boo--ghost .ta-ubs__booSprite{animation-duration:5.2s}
.ta-ubs--v2 .ta-ubs__boo--ghost .ta-ubs__booSprite svg{
  animation:ta-boo-bob 2.1s ease-in-out infinite;
}
/* --- the witch: higher up, quicker, swooping --- */
.ta-ubs--v2 .ta-ubs__boo--witch .ta-ubs__booSprite{
  top:38%;width:56px;height:56px;margin-top:-28px;animation-duration:4.3s;
}
.ta-ubs--v2 .ta-ubs__boo--witch .ta-ubs__booSprite img{
  animation:ta-boo-swoop 2.7s ease-in-out infinite;
}
/* --- the skeleton: along the floor, fastest, hopping --- */
.ta-ubs--v2 .ta-ubs__boo--skeleton .ta-ubs__booSprite{
  top:58%;width:48px;height:48px;margin-top:-24px;animation-duration:3.4s;
}
.ta-ubs--v2 .ta-ubs__boo--skeleton .ta-ubs__booSprite img{
  animation:ta-boo-hop .44s ease-in-out infinite;
}

/* `left` rather than translateX: a percentage in translateX is a share of the
   sprite, not of the card, so it would not reach the far edge. */
@keyframes ta-boo-drift{
  from{left:-60px}
  to{left:100%}
}
@keyframes ta-boo-bob{
  0%,100%{transform:translateY(-5px) rotate(-4deg)}
  50%    {transform:translateY(5px)  rotate(4deg)}
}
@keyframes ta-boo-swoop{
  0%,100%{transform:translateY(7px)  rotate(5deg)}
  50%    {transform:translateY(-9px) rotate(-7deg)}
}
@keyframes ta-boo-hop{
  0%,100%{transform:translateY(0)    rotate(-3deg)}
  50%    {transform:translateY(-7px) rotate(3deg)}
}
/* Belt and braces: the JS already declines to mount any of them under reduced
   motion, but if one is ever mounted another way, hold it still. */
@media (prefers-reduced-motion:reduce){
  .ta-ubs--v2 .ta-ubs__booSprite,
  .ta-ubs--v2 .ta-ubs__booSprite svg,
  .ta-ubs--v2 .ta-ubs__booSprite img{animation:none}
  .ta-ubs--v2 .ta-ubs__boo{display:none}
}