/* ===========================================================================
   W2FLAT_260808 — the t-shirt is printed, not stitched.
   ---------------------------------------------------------------------------
   w2puff.js puts filter:url(#w2embThread) on the word, the heart and the
   mascot whenever the blank on screen is a tshirt, polo, longsleeve,
   sweatshirt, hoodie or bag — "jersey and bag: satin embroidery".

   Jersey is not embroidered. It is DTF: a film laid flat on the fabric, with a
   hard edge and full colour. The satin filter adds a specular highlight, a
   bottom shade and a drop shadow — three things that do not exist on a
   transfer, and all three cost the mark its brightness, which is the one thing
   DTF actually gives you over stitching.

   The cap keeps its 3D puff. That one is real: cap logos are embroidered, and
   the sample on the desk proves it.

   Only the tshirt is switched here. Polo, hoodie and bag keep the satin look
   until someone decides how they are actually made — changing them because
   they sit in the same CSS rule would be guessing, and two of them are not
   even buyable.

   The rules are written to beat w2puff.js, which injects its stylesheet at
   runtime: same specificity would lose on cascade order, so :has() is doubled
   on the wrap. That is not decoration, it is the reason the previous header
   fix did nothing until it carried an extra element.
   =========================================================================== */

/* 1. No thread. A DTF print has no depth, no specular, no shadow. */
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo-w,
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo-h,
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo-sup,
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo ~ div:not(:has(img)),
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2-mascot-layer div,
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) [data-w2print] div:not(:has(img)):not(:has(div)) {
  filter: none !important;
  --w2ds-thread: none !important;
  text-shadow: none !important;
}

/* 2. The heart back to its printed colour.
      heart_red_* carries (212,26,25): brightness 0.86 and saturate 1.08 baked
      in, because thread reads darker than the swatch it is matched to. On film
      the ink IS the swatch, so it goes back to the #e52d2d canon —
      brightness 1.08, saturate 0.92, measured from the file, not guessed. */
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo-h img,
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo-h svg {
  filter: brightness(1.08) saturate(0.92) !important;
}

/* 3. Crisp edges. A transfer is cut, not stitched: no softening on the way to
      the screen, so the letterforms read as sharp as the film is. */
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo-w,
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo-sup,
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo ~ div:not(:has(img)) {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ---------------------------------------------------------------------------
   4. A heavier heart on jersey: +15%, growing downward.
   ---------------------------------------------------------------------------
   transform-origin at the TOP CENTRE, so the top edge stays exactly where it
   is and the growth goes down and outward — the tail drops, the lockup keeps
   its baseline against the W, and nothing above the heart moves.

   This travels to the factory on its own. w2cart.js captures the heart with
   getBoundingClientRect on .w2logo-h, and that method reports the box AFTER
   transforms — so the server renders the same 15% larger heart the buyer saw.
   Screen and garment agree by construction rather than by two numbers kept in
   step by hand, which is the failure this project spent a day on.

   Cap is untouched: this selector names tshirt only, and the cap's own puff
   rule in w2puff.js is a different element list entirely.
   --------------------------------------------------------------------------- */
/* W2HEARTONE_260816 — the jersey's own multiplier is deleted. It made the
   heart 3.6% taller, 10.6% wider and 6.7% fatter than the one on headwear, off
   the same 0.814em base. The jersey now joins the single rule below instead of
   carrying a second number that would have to be kept in step by hand. */

/* ---------------------------------------------------------------------------
   5. The squared two: a little air, a little more weight.
   ---------------------------------------------------------------------------
   The heart grew 15% and took its right edge with it, so the ² ended up
   touching it. Two changes, both small on purpose:

   margin-left  the gap the heart just ate, given back. .14em rather than a
                pixel value: the lockup scales with the garment and with the
                size step, and a fixed gap would close again at LARGE and gape
                at SMALL.

   font-weight  the ² is the lightest part of the mark and now sits beside a
                heavier heart. On DTF there is no thread to give it presence,
                so the weight has to come from the letterform.

   Nothing else about the ² moves: no size change, no baseline shift. Its
   vertical position is what makes the lockup read as squared, and that is not
   being touched.
   --------------------------------------------------------------------------- */
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo-sup {
  /* W2HEARTONE_260816 — the .14em was the gap a 15% wider heart had eaten.
     The heart now grows 4%, and headwear is given no extra gap at all, so
     keeping this on the jersey alone would put the squared two in a different
     place on the two products: the asymmetry moved rather than removed. */
  font-weight: 800 !important;
}

/* ---------------------------------------------------------------------------
   6. W2CAPHEART_260816 — the heart drops below the W on headwear.
   ---------------------------------------------------------------------------
   Measured on the live cap render, ink bounding boxes in page pixels:

       W glyph     y  953..1024   height 72
       heart ink   y  946..1021   height 76, width 88

   The heart bottom sat 3 px ABOVE the W baseline. A mark reads as one lockup
   when the round shape overshoots the flat baseline slightly, the way a lower
   case o does against an x; stopping short of it is what made the heart look
   like it was hovering rather than sitting in the line.

   scaleY 1.11   the growth that was asked for
   scaleX 1.04   only enough that the heart does not read as squeezed

   transform-origin at the TOP CENTRE: the top edge is fixed, so the W, the
   squared two and everything above the mark stay exactly where they are and
   the whole change goes downward.

   The asset carries 4.26% transparent padding top and bottom (heart_*_filled
   is 847x798 with ink at (4,34)-(843,764)), so the box is taller than the ink.
   Worked through, that puts the ink bottom 6.8 px past the baseline, +9.4% of
   the W, and leaves the ink top where it already was.

   This reaches the factory by itself: __w2readGeometry() in w2cart.js reads
   .w2logo-h with getBoundingClientRect — post-transform — and stores w and h
   independently, which is what W2_HEART_GEO_V1 renders from. A taller box on
   screen is a taller heart on the garment. No second number to keep in step.

   W2HEARTONE_260816 — the jersey is NO LONGER separate: its selector was
   folded into this rule, which is now the only place the heart is sized.
   --------------------------------------------------------------------------- */
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="tshirt_"]) .w2logo-h,
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="cap_"]) .w2logo-h,
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="snapback_"]) .w2logo-h,
.preview-canvas-wrap.preview-canvas-wrap:has(img.shirt-img[src*="bucket_"]) .w2logo-h {
  /* W2HEARTTAIL_260816 — scaleY 1.11 -> 1.17. The origin is the top edge, so
     only the tail moves: +8.3%% of the W below its baseline becomes +14.6%%,
     and the heart ends up 11%% out of its native 847/798 proportion. Past
     1.20 it stops reading as a heart. */
  transform: scale(1.04, 1.17) !important;
  transform-origin: 50% 0% !important;
}