/* ==========================================================================
   TECP Search — custom full-screen search pop-up (replaces Blocksy search).
   Spec: _mockups/SEARCH_SPEC.md · layout/product cards = 1:1 the collection
   gallery (gallery.css: 4 cols / col-gap 8 / row-gap 60; card ink margins
   6.6 / 4.3 / 9.5; swatches 11px, ring on .active only).
   All colours ride the shared --tecp-pop-* tokens (popups.css) → glass↔white
   switch and the final pop-up tuning apply here automatically.
   ========================================================================== */

/* --- shell: dim + full-screen glass panel sliding down from the top --- */
.tecp-search {
    position: fixed; inset: 0; z-index: 999999;   /* over the header (Blocksy modal used the same tier) */
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s 0.65s;
    font-family: Verdana, Geneva, sans-serif;
}
.tecp-search.open { pointer-events: auto; visibility: visible; transition: visibility 0s; }

/* open search LOCKS the page scroll (owner 2026-07-03) — unlike the drawers
   (mini-cart/filter let the page scroll behind, §31.3), the full-screen search
   covers everything, so background scrolling is just disorienting */
html.tecp-search-lock, html.tecp-search-lock body { overflow: hidden !important; }

.tecp-search-dim {
    position: absolute; inset: 0;
    background: var(--tecp-pop-overlay-bg);
    opacity: 0; transition: opacity 0.45s ease;
}
.tecp-search.open .tecp-search-dim { opacity: 1; }

.tecp-search-panel {
    position: absolute; inset: 0;
    transform: translateY(-100%);
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    /* ⚠ the panel itself does NOT scroll (owner 2026-07-03): the search bar,
       the section label and the terms column stay pinned — only the 3/4
       product segment (.tecp-search-prodcol) scrolls internally. */
    overflow: hidden;
    display: flex; flex-direction: column;
    /* glass = the standard pop-up stack: colour + optional tint + blur (§3 tokens) */
    background-color: var(--tecp-pop-panel-bg);
    background-image: linear-gradient(var(--tecp-pop-panel-overlay, transparent), var(--tecp-pop-panel-overlay, transparent));
    -webkit-backdrop-filter: blur(var(--tecp-pop-panel-blur));
    backdrop-filter: blur(var(--tecp-pop-panel-blur));
}
.tecp-search.open .tecp-search-panel { transform: translateY(0); }

/* --- close × — site standard (§3): char ×(U+00D7), 19px, icon tokens, rotate90 --- */
.tecp-search-close {
    position: fixed; top: 30px; right: 40px; z-index: 10;
    background: none; border: none; cursor: pointer; padding: 0; line-height: 1;
    font-size: 21px; color: var(--tecp-pop-icon);
    transition: color 0.2s ease, transform 0.2s ease;
}
.tecp-search-close:hover { color: var(--tecp-pop-icon-hover); transform: rotate(90deg); }

/* --- layout: full width with the collection's 31px side margins.
       Fills the panel as a column; the bottom padding moved into the
       scrollable product segment. --- */
.tecp-search-inner {
    padding: 0 31px;
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
}

/* --- search bar = separator line at the PAGE-TITLE height (§3: title box 172–202px)
       — typed text sits 2-3px above the line; blinking caret instead of a placeholder.
       Width: the bar row is the SAME 4-col grid as the content → the bar spans
       columns 2-3 (left edge of collection photo 2 → right edge of photo 3). --- */
.tecp-search-barrow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 8px;
    margin-top: 103px;          /* line ~125px — lowered 20px (owner 2026-07-03; was 83 = mockup height ~105px) */
}
.tecp-search-bar {
    grid-column: 2 / 4;
    position: relative;          /* anchors the custom caret */
    display: flex; align-items: flex-end; gap: 14px;
    border-bottom: 1px solid var(--tecp-pop-sep);
    padding: 0 2px 3px;         /* 3px text → line */
}
/* custom blinking caret — Chrome's NATIVE caret blink freezes after ~6 blinks
   (owner-observed, even idle); a CSS animation never stops. Native caret hidden,
   ours tracks the real cursor position (JS: selectionStart + canvas measureText). */
.tecp-search-caret {
    position: absolute;
    width: 1px; height: 16px;
    background: var(--tecp-pop-text);
    pointer-events: none;
    display: none;
    animation: tecpCaretBlink 1.06s step-end infinite;
}
.tecp-search-bar.is-focused .tecp-search-caret { display: block; }
@keyframes tecpCaretBlink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tecp-search-bar input {
    flex: 1; background: transparent; border: none; outline: none; box-shadow: none;
    /* text = the SITE FIELD standard (#fff, Verdana 13px) — Blocksy overrode colour
       (read as placeholder-grey) and padding (15px → shifted text vs our caret by a
       CONSTANT offset), hence the !important set */
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 13px !important;
    color: var(--tecp-pop-text) !important;
    line-height: 1.2;
    height: 18px !important; min-height: 0 !important;   /* ⚠ Blocksy forces ~40px on text inputs (higher specificity) → line landed 22px too low */
    padding: 0 !important;
    border-radius: 0;
    text-transform: lowercase;
    caret-color: transparent;   /* native caret hidden — our CSS-animated caret replaces it (blink freeze fix) */
}
/* ⚠ kill EVERY box artefact in EVERY state — Blocksy/kit forces a 1px border on
   text inputs that flashed as a long rectangle around the field on focus changes */
.tecp-search-bar input,
.tecp-search-bar input:focus,
.tecp-search-bar input:focus-visible,
.tecp-search-bar input:active,
.tecp-search-bar input:hover {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* magnifier = the header-menu icon (filled 15×15), pinned LEFT — still the search
   BUTTON, standard interactive hover #FFFFFF80 → #FFFFFFFF */
.tecp-search-go {
    background: none; border: none; padding: 0; cursor: pointer; line-height: 0;
    color: var(--tecp-pop-text-muted); flex-shrink: 0;
    transition: color 0.2s ease;
}
.tecp-search-go:hover { color: var(--tecp-pop-text); background: none; }

/* × clears the typed text — visible only when there IS text (.has-text on the bar).
   Site × standard (§3): U+00D7, 19px, icon tokens, rotate90. */
.tecp-search-clear {
    background: none; border: none; padding: 0; cursor: pointer; line-height: 1;
    font-size: 21px; color: var(--tecp-pop-icon);
    transition: color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    visibility: hidden;               /* keeps its slot → the input width never jumps */
}
.tecp-search-bar.has-text .tecp-search-clear { visibility: visible; }
.tecp-search-clear:hover { color: var(--tecp-pop-icon-hover); transform: rotate(90deg); background: none; }

/* --- content grid = the collection grid: 4 columns, col-gap 8.
       Column 1 = suggestion terms (in place of the first product);
       columns 2-4 = products (3 per row, like the spec). --- */
.tecp-search-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto minmax(0, 1fr);   /* row1 = pinned label, row2 = content (scrollable prodcol) */
    column-gap: 8px;
    align-items: start;
    margin-top: 43px;            /* line → headers ~45px ink (owner 2026-07-03: +20px vs the 25px standard) */
    flex: 1 1 auto; min-height: 0;
}

/* section headers — SITE STANDARD (13px/2px, #FFFFFF80 via token, lowercase);
   texts swap while typing (JS): explore→suggestions, top trending products→results.
   BOTH headers are grid row 1 → hard-guaranteed same height (owner 2026-07-03).
   The terms header sits in a centering row and gets the SAME JS-frozen width as
   the terms block → shared, immovable left edge ("invisible separator"). */
.tecp-search-seclabel,
.tecp-search-termhead {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px; letter-spacing: 2px; color: var(--tecp-pop-text-muted);
    text-transform: lowercase;
    margin: 0 0 22px;            /* header → content 25px ink */
}
.tecp-search-seclabel { grid-column: 2 / -1; grid-row: 1; }
.tecp-search-termheadrow { grid-column: 1; grid-row: 1; display: flex; justify-content: center; }
.tecp-search-termhead { text-align: left; white-space: nowrap; max-width: 100%; }

/* --- terms column (col 1). Shrink-to-fit block CENTERED in the column, terms
       LEFT-aligned to its edge ("invisible separator"). JS freezes the block width
       at init (empty state) → the edge does NOT re-center on every typed letter. --- */
.tecp-search-termcol { grid-column: 1; grid-row: 2; min-width: 0; display: flex; justify-content: center; align-items: flex-start; }
.tecp-search-termwrap { max-width: 100%; position: relative; }   /* anchors the continue link below */
#tecp-search-termlist { max-width: 100%; }

/* arrow buttons under the terms column — the site's standard arrow style (§26.5).
   Absolute container = excluded from the frozen block width. Distances are INK-tuned
   (owner 2026-07-03): last term glyphs → "continue" glyphs = 24px, and 24px between
   the two arrows (password-reset-steps pattern). */
.tecp-search-links {
    position: absolute; left: 0; top: 100%;
    margin-top: 16px;    /* + last term padding + leadings = 24px INK (measured 21.6 at 14 -> +2.4) */
}
.tecp-search-continue {
    display: block;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px; letter-spacing: 1px;
    color: var(--tecp-pop-text-muted);
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 0.2s;
}
.tecp-search-continue:hover { color: var(--tecp-pop-text); }
.tecp-search-viewall-link { margin-top: 23px; }   /* 24px INK between the two arrows (measured 22.3 at 21 -> +1.7) */
.tecp-search-term {
    display: block; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px; letter-spacing: 1px;
    color: var(--tecp-pop-text-muted);   /* standard #FFFFFF80 (owner 2026-07-03 — 0.30 trial reverted) */
    text-transform: lowercase; padding: 7px 0; transition: color 0.2s;
    white-space: nowrap;   /* NEVER wrap — long title suggestions ("demo crop — gold") overflow
                              the FROZEN block width to the right; the left edge holds */
}
.tecp-search-term:first-child { padding-top: 0; }
.tecp-search-term:hover { color: var(--tecp-pop-text); background: none; }
.tecp-search-term b { color: var(--tecp-pop-text); font-weight: 400; }
.tecp-search-term.is-none { cursor: default; color: var(--tecp-pop-text-faintest); white-space: nowrap; }   /* unwrapped so the distance to the grid can be judged (owner 2026-07-03) */
.tecp-search-term.is-none:hover { color: var(--tecp-pop-text-faintest); }

/* --- product grid (cols 2-4): inner 3-col grid = the outer columns continue exactly.
       THE scroll area — the only thing that moves when browsing more rows (owner):
       bar / label / terms stay pinned. --- */
.tecp-search-prodcol {
    grid-column: 2 / -1; grid-row: 2; min-width: 0;
    align-self: stretch;                /* fill row 2 so the scroll viewport = remaining screen */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;       /* wheel stays inside the segment */
    padding-bottom: 80px;               /* the inner's old bottom padding, now inside the scroller */
    scrollbar-width: thin;
}
.tecp-search-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 8px;               /* collection: row-gap 60, column-gap 8 */
}
/* thumbnails-per-row switch (settings → Pop-ups → Search): 4 in the same 3/4 segment,
   SAME gaps — the cards just get narrower (quality-checked: 339px card needs 678w on
   retina; the 2× thumb card covers it — §24). */
.tecp-search-c4 .tecp-search-grid { grid-template-columns: repeat(4, 1fr); }

/* --- product card = the RELATED look (owner 2026-07-02): texts LEFT (text-only
       clickable via inline spans), dot buttons RIGHT (in-place swap), hover-flip
       + hover glass size panel on the image. Donut pattern: pointer-events off
       on the card link, back on on image/text spans/dots. --- */
.tecp-search-card { display: block; cursor: pointer; text-decoration: none !important; pointer-events: none; }
/* dots: ONLY the buttons are live — the swatch CONTAINER stays dead, or the 11-14px
   gaps around the dots bubble a click to the card link (owner 2026-07-05: "a few px
   off the dot navigated to the product"). ::after pads each dot's hit-area out to
   its full 17px visual ring (box-shadow never takes clicks). */
.tecp-search-img { pointer-events: auto; }
.tecp-search-sw { pointer-events: auto; position: relative; }
.tecp-search-sw::after { content: ''; position: absolute; inset: -3px; }
.tecp-search-name > span, .tecp-search-price > span { pointer-events: auto; }

.tecp-search-img {
    display: block; aspect-ratio: 3 / 4; width: 100%; position: relative; overflow: hidden;
}
.tecp-search-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* hover = the GALLERY hover: 2nd image fades in over the primary (no zoom/scale) —
   same values as related / gallery cards (§24.5: opacity 0.35s ease) */
.tecp-search-img .tecp-search-img-hover {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}
/* flip only when hovering the IMAGE itself — hovering the caption/dots must NOT
   swap the photo (collection behaves this way; owner 2026-07-03) */
.tecp-search-img:hover .tecp-search-img-hover { opacity: 1; }

/* hover glass size panel — same markup/classes as the gallery (scoped copy;
   gallery.css does not load outside the shop) */
.tecp-search-img .tecp-loop-size-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 10%;
    display: flex; justify-content: center; align-items: center; gap: 16px;
    padding: 0 10px;
    background: #FFFFFF21;
    -webkit-backdrop-filter: blur(1.3px); backdrop-filter: blur(1.3px);
    opacity: 0; transform: translateY(100%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none; z-index: 2;
}
/* size panel slides in only when hovering the IMAGE itself (like the flip) —
   hovering the caption/dots must not trigger it (owner 2026-07-03) */
.tecp-search-img:hover .tecp-loop-size-panel { opacity: 1; transform: translateY(0); }
.tecp-search-img .tecp-loop-size {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    color: #ffffff; line-height: 1;
}
.tecp-search-img .tecp-loop-size.oos { color: rgba(255, 255, 255, 0.35); text-decoration: line-through; }

/* caption row (related sizes: name 13 / price 12 +3px / suffix 11) */
.tecp-search-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.tecp-search-text { display: block; min-width: 0; text-align: left; }
.tecp-search-name {
    display: block; font-size: 13px; letter-spacing: 1px;
    color: var(--tecp-pop-text);   /* NO lowercase — product names keep their case (owner 2026-07-03) */
}
.tecp-search-price { display: block; font-size: 12px; letter-spacing: 0.5px; color: var(--tecp-pop-text-muted); text-transform: lowercase; margin-top: 3px; }
.tecp-search-price .woocommerce-Price-amount { color: var(--tecp-pop-text-muted); }
.tecp-search-price .woocommerce-price-suffix { font-size: 11px; text-transform: lowercase; }

/* sibling colour dot BUTTONS — the gallery swatches: 11px, no ring at rest,
   own colour .active double ring; click = in-place swap (search.js) */
.tecp-search-swatches { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 11px; flex-shrink: 0; padding-right: 4px; }   /* gap scaled with the smaller 9px dots (14 × 9/11 ≈ 11) */
.tecp-search-sw {
    width: 9px; height: 9px; border-radius: 50%;   /* site-wide swatch −2px (owner 2026-07-03) */
    border: none; padding: 0; margin: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none; outline: none;
    background-size: cover; background-position: center;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.tecp-search-sw:hover { transform: scale(1.12); }
/* DARK-panel ring (filter/single variant §31.6): 2px dark gap + 1px WHITE ring —
   the white-bg (collection) variant read as a thick sloppy white blob on the glass */
.tecp-search-sw.active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65), 0 0 0 3px #fff; }

/* --- view all — lowercase, NO underline, colour hover only; centered on the PAGE
       (the row lives in the 3/4 segment whose centre sits (col+gap)/2 right of the
       page centre → shift left by exactly that: (100% + 8px) / 6, derived from
       prodcol = 3 columns + 2 gaps of the outer 4-col grid) --- */
.tecp-search-viewall-row {
    text-align: center; margin-top: 48px;
    transform: translateX(calc(-1 * (100% + 8px) / 6));
}
.tecp-search-viewall {
    display: inline-block; font-size: 11px; letter-spacing: 1px;   /* short-form standard (filter resets §30.3) */
    color: var(--tecp-pop-text-muted); text-transform: lowercase; cursor: pointer;
    text-decoration: none !important;
    transition: color 0.2s;
}
.tecp-search-viewall:hover { color: var(--tecp-pop-text); }

/* --- no matches — top-aligned with the terms column's first line (owner 2026-07-03;
       the first term has padding-top:0, so the note starts flush too) --- */
#tecp-search-note .tecp-search-empty-note {
    font-size: 12px; letter-spacing: 1px; color: var(--tecp-pop-text-faintest);
    padding: 0 0 30px;
}

/* --- responsive --- */
@media (max-width: 900px) {
    /* stacked layout → the pinned split makes no sense; whole panel scrolls */
    .tecp-search-panel { overflow-y: auto; overscroll-behavior: contain; display: block; }
    .tecp-search-inner { display: block; padding: 0 22px 60px; }
    .tecp-search-barrow { margin-top: 120px; grid-template-columns: 1fr; }
    .tecp-search-bar { grid-column: 1; }
    .tecp-search-cols { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
    .tecp-search-seclabel { grid-column: 1 / -1; }
    .tecp-search-termcol { grid-column: 1 / -1; grid-row: 2; margin-bottom: 26px; }
    .tecp-search-prodcol { grid-column: 1 / -1; grid-row: 3; overflow: visible; padding-bottom: 0; }
    .tecp-search-grid { grid-template-columns: repeat(2, 1fr); }
    .tecp-search-viewall-row { transform: none; }   /* stacked: prodcol = full width → already page-centered */
    .tecp-search-close { top: 22px; right: 22px; }
}