/* ==========================================================================
   61 · Search results — /search
   Only the page's own shell. The result cards are the All Products cards
   (.ccards / .ccard), unchanged, so search introduces no new card design.
   ========================================================================== */
.srch {
  display: flex;
  gap: .6rem;
  margin-top: 1.1rem;
  max-width: 34rem;
}
.srch__in {
  flex: 1 1 auto;
  min-width: 0;                       /* lets the input shrink inside the flex row */
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .72rem .9rem;
  -webkit-appearance: none;
  appearance: none;
}
.srch__in::placeholder { color: var(--muted); }
.srch__in:focus-visible {
  outline: 2px solid var(--brand-mid);
  outline-offset: 1px;
  border-color: var(--brand-mid);
}
.srch__go { flex: 0 0 auto; }

.srch__none {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 2rem 1.25rem;
  text-align: center;
}
.srch__none-h {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 .35rem;
}
.srch__none-p {
  color: var(--muted);
  margin: 0 0 1.15rem;
}

@media (max-width: 480px) {
  /* Stack on narrow phones so neither the field nor the button is squeezed. */
  .srch { flex-direction: column; }
  .srch__go { width: 100%; }
}

/* ==========================================================================
   62 · Floating support dock — WhatsApp + Messenger
   Fixed bottom-right on every customer-facing page. Two links, nothing more:
   no widget script, no auto-open panel, no badge, no animation.

   The hard requirement here is what it must NOT cover: Order Now, Add to
   Cart, the quantity stepper, the book choosers, the COD line, and the mobile
   sticky purchase bar. Every offset below exists for that reason.
   ========================================================================== */
.chatdock {
  position: fixed;
  z-index: 75;                        /* above the side tabs (70), below the OTO dialog */
  right: 1rem;
  /* --dock-rest is where the dock sits when the corner is free. --dock-bottom
     is where the script has actually put it, which is the resting spot until
     something is in the way. One number, written by the script and read by
     nothing else, so the measurement cannot feed on its own result. */
  --dock-rest: 16px;
  bottom: calc(var(--dock-bottom, var(--dock-rest)) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: .6rem;
  /* No transition on `bottom`, deliberately. The dock is repositioned on every
     scroll frame, so an eased move means it is still travelling across the buy
     button for the length of the ease — measured, and it is exactly where the
     remaining overlaps were coming from. Moving with the scroll instead of
     after it reads as the dock holding its place, not as animation. */
}

.chatdock__btn {
  position: relative;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(23, 22, 26, .38);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.chatdock__btn svg { width: 24px; height: 24px; }
.chatdock__btn--whatsapp  { background: #1FA855; }
.chatdock__btn--messenger { background: #0866FF; }
.chatdock__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(23, 22, 26, .45); }
.chatdock__btn:active { transform: translateY(0); }
/* Keyboard focus must be obvious against both brand colours, so the ring sits
   outside the circle rather than tinting it. */
.chatdock__btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Hover label, desktop only — a pointer can hover, a thumb cannot. */
.chatdock__tip {
  position: absolute; right: calc(100% + .55rem);
  white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .3rem .55rem;
  box-shadow: 0 4px 12px -6px rgba(23, 22, 26, .3);
  opacity: 0; transform: translateX(4px); pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .chatdock__btn:hover .chatdock__tip,
  .chatdock__btn:focus-visible .chatdock__tip { opacity: 1; transform: translateX(0); }
}
@media (hover: none) { .chatdock__tip { display: none; } }

/* ---------- must never sit on top of a purchase control ---------- */

/* The sticky Order Now / Checkout bar needs no rule of its own: it is one of
   the obstacles the script measures, so the dock clears it by the same path it
   clears everything else.
*/


/* The OTO 1 dialog and the full-screen mobile menu each own the screen. These
   are the only two things that hide the dock; overlap never does. */
body.is-oto-open .chatdock,
body:has(.menu.is-open) .chatdock { opacity: 0; pointer-events: none; }

/* /try-coloring puts its colour palette in this exact corner below 1280px.
   Same exception the side tabs already make for that page — a support button
   over the swatches would break the demo. */
.chatdock--wide-only { display: none; }
@media (min-width: 1280px) { .chatdock--wide-only { display: flex; } }

/* ---------- coexisting with the Free Coloring Page / Try Coloring tabs ----------
   Below 1280px those tabs are themselves a bottom-right stack. They are not
   modified — they keep their own markup, look and behaviour — but the dock
   would land straight on top of them, so they are moved up by exactly the
   dock's height. Above 1280px the tabs are edge tabs at mid-height and there
   is nothing to avoid. */
/* The Free Coloring Page and Try Coloring tabs are not moved at all — they
   keep the exact position, markup and behaviour they had. The dock treats them
   as obstacles and settles above them instead, which is why they needed no
   change. They still step aside on a downward scroll; the dock deliberately
   does not, because support has to stay reachable while she reads the whole
   product page. */

/* Wide screens: sit in the gutter beside the content column, not on top of it.
   The content's right edge is (100vw - maxw)/2 + gutter from the viewport edge,
   so the dock's own offset has to stay inside what is left. Below ~1300px that
   remainder is thin, which is why the value shrinks rather than the dock
   drifting over the buy box — measured overlap there was 10px of the CTA. */
@media (min-width: 1280px) {
  .chatdock {
    right: clamp(6px, calc((100vw - var(--maxw)) / 2 - 14px), 1rem);
  }
}

@media (max-width: 480px) {
  .chatdock { right: .75rem; gap: .55rem; --dock-rest: 12px; }
  .chatdock__btn { width: 46px; height: 46px; }   /* comfortable thumb target */
  .chatdock__btn svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .chatdock, .chatdock__btn, .chatdock__tip { transition: none; }
  .chatdock__btn:hover { transform: none; }
}