/* Tom — the Bow & Beads shopping-helper cat (snippets/tom-helper.liquid, assets/tom-helper.js).
   An original mascot: cream fur, navy satin bow collar with a gold bead, on a navy jewellery
   cushion. Fixed bottom-left by default (or bottom-right, stacked above the WhatsApp button),
   never covers more than its own 84 px; tucks away to a peek when hidden. */

.tom {
  --tom-size: 84px;
  --tom-outline: var(--c-text, #16213d);
  --tom-gold: var(--c-accent, #c8a15a);
  --tom-gold-light: var(--c-accent-light, #e2c98f);
  --tom-navy: var(--c-deep, #16213d);
  display: block; /* layout/theme.liquid hides .tom until this stylesheet (loaded without blocking render) arrives */
  position: fixed; z-index: 95;
  left: max(14px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom));
  width: var(--tom-size);
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.tom--right { left: auto; right: max(14px, env(safe-area-inset-right)); }
.tom--right.has-wa-below { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 70px); }
.tom[hidden] { display: none; }
.tom.is-front { z-index: 126; }
@media (min-width: 900px) { body.is-locked .tom { z-index: 126; } }
@media (max-width: 749px) {
  .tom { --tom-size: 66px; left: max(8px, env(safe-area-inset-left)); }
  .tom--right { left: auto; right: max(8px, env(safe-area-inset-right)); }
  .tom__bubble { width: min(272px, calc(100vw - var(--tom-size) - 30px)); }
  .tom__say { font-size: 16.5px; }
}

.tom__avatar {
  position: relative; display: block; width: var(--tom-size); aspect-ratio: 120 / 124; padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; color: inherit; border-radius: 40% 40% 30% 30%;
  filter: drop-shadow(0 10px 12px rgba(22, 33, 61, .2));
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.tom__avatar:hover { transform: translateY(-3px) rotate(-2deg); }
.tom__avatar:focus-visible { outline: 2px solid var(--tom-gold); outline-offset: 4px; }
.tom-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tom__badge {
  position: absolute; top: 2%; right: -2%; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--c-burgundy, #7b1e2b); color: #fff; font: 600 11px/1 var(--font-body, sans-serif);
  box-shadow: 0 0 0 2px var(--c-bg, #f7f0e4); transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.tom.has-news .tom__badge { transform: scale(1); }

/* On the 3D builder Tom gives his tips, then waits peeking over the edge (not remembered). On
   phones and tablets he sits by the top of the canvas, clear of the builder's bottom sheet. */
.tom.is-peek .tom__avatar { transform: translateY(58%) scale(.78); filter: none; }
.tom.is-peek .tom__avatar:hover, .tom.is-peek .tom__avatar:focus-visible { transform: translateY(46%) scale(.82); }
@media (max-width: 989px) {
  /* Absolute, not fixed: he scrolls away with the canvas instead of covering the design sheet. */
  .tom--builder { --tom-size: 56px; position: absolute; bottom: auto; top: calc(var(--header-h, 72px) + 92px); }
  /* ...and the opened design sheet slides over him (he comes forward only while talking). */
  .tom--builder:not(.is-front) { z-index: 2; }
  .tom--builder .tom__bubble { bottom: auto; top: 0; }
  .tom--builder .tom__tail { bottom: auto; top: 22px; }
  .tom--builder.is-peek .tom__avatar { transform: translateX(-60%) rotate(10deg) scale(.92); }
  .tom--builder.is-peek .tom__avatar:hover, .tom--builder.is-peek .tom__avatar:focus-visible { transform: translateX(-40%) rotate(6deg); }
}
/* Tucked away ("Hide Tom"): only the ears and eyes peek over the bottom edge. */
.tom.is-tucked .tom__avatar { transform: translateY(58%) scale(.78); filter: none; opacity: .92; }
.tom.is-tucked .tom__avatar:hover, .tom.is-tucked .tom__avatar:focus-visible { transform: translateY(46%) scale(.82); }
.tom.is-tucked .tom__bubble { display: none; }

/* The floating corner (Tom, WhatsApp) never hides the last line of the page. */
body:has(.tom:not(.is-tucked)) .footer__bottom, body:has(.wa-fab) .footer__bottom { padding-bottom: calc(24px + 84px + env(safe-area-inset-bottom)); }

/* ---------- drawing ---------- */
.tom-c-fur-hi { stop-color: #fffdf8; }
.tom-c-fur-lo { stop-color: #f1e5cf; }
.tom-c-eye { stop-color: var(--tom-outline); }
.tom-c-eye-hi { stop-color: #3f5288; }
.tom-c-gold-hi { stop-color: var(--tom-gold-light); }
.tom-c-gold-lo { stop-color: color-mix(in srgb, var(--tom-gold) 80%, #4a3510); }
.tom-c-navy { stop-color: var(--tom-navy); }
.tom-c-satin-hi { stop-color: color-mix(in srgb, var(--tom-navy) 70%, #8ea2d6); }
.tom-shadow { fill: var(--tom-outline); opacity: .16; }
.tom-cushion-top { fill: color-mix(in srgb, var(--tom-navy) 82%, #9db0e0); opacity: .55; }
.tom-piping { fill: none; stroke: var(--tom-gold); stroke-width: 1.3; }
.tom-tassel { fill: none; stroke: var(--tom-gold); stroke-width: 1.1; stroke-linecap: round; }
.tom-fur { stroke: var(--tom-outline); stroke-width: 1.6; stroke-linejoin: round; }
.tom-belly { fill: #fffefa; opacity: .9; }
.tom-line { fill: none; stroke: var(--tom-outline); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.tom-line-thick { fill: none; stroke: var(--tom-outline); stroke-width: 10.2; stroke-linecap: round; }
.tom-fur-thick { fill: none; stroke: #f7eedf; stroke-width: 7; stroke-linecap: round; }
.tom-ear-in { fill: #f2b6bf; }
.tom-cheek { fill: #f39fae; opacity: .5; }
.tom-whiskers path { fill: none; stroke: var(--tom-outline); stroke-width: .9; stroke-linecap: round; opacity: .45; }
.tom-glint { fill: #fff; }
.tom-lash { fill: none; stroke: var(--tom-outline); stroke-width: 1.3; stroke-linecap: round; }
.tom-eye-line { fill: none; stroke: var(--tom-outline); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tom-brow { stroke-width: 1.9; }
.tom-heart { fill: #cf3f5b; stroke: color-mix(in srgb, #cf3f5b 60%, #300); stroke-width: .6; }
.tom-nose { fill: #e38f9e; stroke: color-mix(in srgb, #e38f9e 50%, #4a1a24); stroke-width: .5; }
.tom-mouth { fill: none; stroke: var(--tom-outline); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tom-mouth-in { fill: #6c2233; }
.tom-tongue { fill: #ef8d9c; }
.tom-tear { fill: #b3dcf5; stroke: #6aa6cf; stroke-width: .6; }
.tom-collar { fill: none; stroke: var(--tom-navy); stroke-width: 4.4; stroke-linecap: round; }
.tom-collar-sheen { fill: none; stroke: color-mix(in srgb, var(--tom-navy) 55%, #a9b8e6); stroke-width: .9; stroke-linecap: round; opacity: .8; }
.tom-satin { stroke: color-mix(in srgb, var(--tom-navy) 80%, #000); stroke-width: .7; stroke-linejoin: round; }
.tom-satin-sheen { fill: none; stroke: #b7c4ea; stroke-width: .8; stroke-linecap: round; opacity: .55; }
.tom-bead { stroke: color-mix(in srgb, var(--tom-gold) 60%, #3a2a08); stroke-width: .5; }
.tom-bean { fill: #f3aeb8; }
.tom-spark { fill: var(--tom-gold); }
.tom-z { fill: none; stroke: var(--tom-outline); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.tom-svg [data-part] { transform-box: view-box; }

/* ---------- speech bubble ---------- */
.tom__bubble {
  position: absolute; left: calc(100% + 10px); bottom: 8px;
  width: min(300px, calc(100vw - var(--tom-size) - 36px));
  max-height: min(72vh, 520px); overflow: auto; overscroll-behavior: contain;
  padding: 12px 14px 12px; border-radius: 18px;
  background: var(--c-surface, #fbf7f0); color: var(--c-text, #16213d);
  border: 1px solid var(--c-line, #e0cda8);
  box-shadow: 0 26px 50px -24px rgba(22, 33, 61, .45), 0 2px 0 rgba(255, 255, 255, .6) inset;
  pointer-events: auto; transform-origin: 0 100%;
  font-size: 14.5px; line-height: 1.5;
}
.tom__bubble::before { content: ""; position: absolute; inset: 4px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tom-gold) 38%, transparent); pointer-events: none; }
.tom--right .tom__bubble { left: auto; right: calc(100% + 10px); transform-origin: 100% 100%; }
.tom__bubble[hidden] { display: none; }
.tom__tail { display: none; position: absolute; left: calc(100% + 4px); bottom: 38px; width: 13px; height: 13px; background: var(--c-surface, #fbf7f0); border-left: 1px solid var(--c-line, #e0cda8); border-bottom: 1px solid var(--c-line, #e0cda8); transform: rotate(45deg); pointer-events: none; }
.tom--right .tom__tail { left: auto; right: calc(100% + 4px); transform: rotate(-135deg); }
.tom__bubble:not([hidden]) + .tom__tail { display: block; }
.tom.is-tucked .tom__tail { display: none !important; }
.tom__bubble-head { display: flex; align-items: center; gap: 8px; margin: -4px -6px 2px 0; }
.tom__name { font-family: var(--font-heading, serif); font-size: 15px; letter-spacing: .08em; }
.tom__role { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--c-accent-text, #7e6029); }
.tom__x { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.tom__x:hover { background: color-mix(in srgb, var(--c-soft, #efe3cf) 80%, transparent); }
.tom__x:focus-visible, .tom__action:focus-visible, .tom__hide:focus-visible { outline: 2px solid var(--c-accent-strong, #a8843c); outline-offset: 2px; }
.tom__say { margin: 0 0 10px; font-family: var(--font-serif, serif); font-size: 18px; line-height: 1.28; font-style: italic; }
.tom__say:empty { display: none; }
.tom__note { margin: -4px 0 12px; font-size: 13.5px; color: var(--c-text-soft, #4a5068); }
.tom__note[hidden] { display: none; }
.tom__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tom__actions li[hidden] { display: none; }
.tom__action {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c-text, #16213d) 22%, transparent); background: var(--c-bg, #f7f0e4);
  color: inherit; font: 500 12.5px/1.2 var(--font-body, sans-serif); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.tom__action:hover { border-color: var(--tom-gold); background: color-mix(in srgb, var(--tom-gold-light) 30%, var(--c-bg, #f7f0e4)); transform: translateY(-1px); }
.tom__action--primary { background: var(--c-text, #16213d); color: var(--c-bg, #f7f0e4); border-color: var(--c-text, #16213d); }
.tom__action--primary:hover { background: var(--c-text, #16213d); color: #fff; box-shadow: inset 0 0 0 1px var(--tom-gold); }
.tom__action svg { flex: none; width: 15px; height: 15px; }
.tom__foot { display: none; justify-content: flex-end; margin-top: 8px; }
.tom__bubble.is-menu .tom__foot { display: flex; }
.tom__hide { border: 0; background: none; padding: 6px 4px; font-size: 12px; color: var(--c-muted, #545a6e); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tom__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* bead confetti */
.tom__confetti { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.tom__bead { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff6dc 0%, var(--tom-gold-light) 28%, var(--tom-gold) 68%, #6e4f1a 100%); box-shadow: 0 1px 2px rgba(60, 40, 10, .3); }
.tom__bead--pearl { background: radial-gradient(circle at 36% 32%, #fff 0%, var(--c-pearl, #f3efe8) 48%, #c7b8a1 100%); }
.tom__bead--garnet { background: radial-gradient(circle at 36% 30%, #e88a95 0%, var(--c-burgundy, #7b1e2b) 50%, #3e0b12 100%); width: 8px; height: 8px; }

/* Without GSAP (or with reduced motion) the bubble simply appears. */
@media (prefers-reduced-motion: reduce) {
  .tom__avatar, .tom__badge, .tom__action { transition: none; }
}