/* ==== te-polish.css ==== */
/**
 * T-Shirt Elephant — Cross-cutting Polish (2026-05-10)
 *   1. Back-to-top floating button
 *   2. Page fade-in on load
 *   3. Sticky breadcrumb
 */

/* ============================================================
   1. Back-to-top button
   ============================================================ */

#te-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1776C8 0%, #125A9C 100%);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(23, 118, 200, 0.30);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9000;
}

#te-back-to-top.te-btt-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

#te-back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(23, 118, 200, 0.40);
}

#te-back-to-top:active {
    transform: translateY(0);
}

#te-back-to-top svg {
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

#te-back-to-top:hover svg {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    #te-back-to-top {
        right: 12px;
        bottom: calc(80px + env(safe-area-inset-bottom, 0));
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   2. Page fade-in on load
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
    body {
        opacity: 0;
        transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body.te-loaded {
        opacity: 1;
    }
}

/* ============================================================
   3. Sticky breadcrumb (PDP / search / category)
   ============================================================ */

nav.breadcrumb {
    position: sticky;
    top: 190px; /* sits below the sticky navbar (50px promo offset + ~137px navbar height) */
    z-index: 900; /* below navbar (1000) so navbar wins if heights drift */
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

@media (max-width: 768px) {
    nav.breadcrumb {
        font-size: 13px;
        top: 56px; /* compact mobile navbar */
    }
}

/* ==== te-tooltips.css ==== */
/**
 * T-Shirt Elephant — Generic Tooltip + Hover Lift Layer (2026-05-09)
 * Reads `data-tooltip` (and optional `data-tooltip-title`) on any element.
 * Renders a single shared tooltip element on hover/focus. Skipped on
 * touch-only devices.
 */

:root {
    --tett-bg: #0f172a;
    --tett-color: #ffffff;
    --tett-accent: #93c5fd;
    --tett-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --tett-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --tett-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#te-tt {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--tett-bg);
    color: var(--tett-color);
    padding: 10px 14px;
    border-radius: 10px;
    max-width: 280px;
    font-family: var(--tett-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.005em;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    transition: opacity 0.15s var(--tett-ease),
                transform 0.20s var(--tett-spring);
    z-index: 100000;
    visibility: hidden;
    will-change: transform, opacity;
}

#te-tt.te-tt-show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

#te-tt strong {
    display: block;
    color: var(--tett-accent);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin: 0 0 4px;
}

/* Arrow */
#te-tt::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    pointer-events: none;
}

#te-tt.te-tt-top::after {
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-top-color: var(--tett-bg);
}

#te-tt.te-tt-bottom::after {
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border-bottom-color: var(--tett-bg);
}

/* Hide entirely on touch-only devices — long-press menus cover those cases. */
@media (hover: none) {
    #te-tt {
        display: none !important;
    }
}

/* ============================================================
   Hover lift extension — fill the gaps where cards sit static
   ============================================================ */

@media (hover: hover) {
    .lp-faq-item,
    .faq-item,
    .accordion-item {
        transition: transform 0.18s var(--tett-ease),
                    box-shadow 0.18s var(--tett-ease),
                    background 0.18s var(--tett-ease);
    }

    .lp-faq-item:hover,
    .faq-item:hover,
    .accordion-item:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    }

    .trust-bar-item {
        transition: transform 0.18s var(--tett-ease);
    }

    .trust-bar-item:hover {
        transform: translateY(-1px);
    }
}

/* ==== te-skeleton.css ==== */
/**
 * T-Shirt Elephant — Skeleton Loaders (2026-05-09)
 * Shared utility classes for shimmer placeholders shown while content loads.
 */

@keyframes te-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.te-skel {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: te-skel-shimmer 1.4s linear infinite;
    border-radius: 8px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

.te-skel * {
    visibility: hidden;
}

/* ---------- Product card image skeleton ----------
   Applied to .product-image-v2 (or any container) to shimmer until the
   inner <img> reports `complete`. Class is removed by te-skeleton.js. */

.product-image-v2.te-skel-image,
.pp-card-image.te-skel-image {
    position: relative;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: te-skel-shimmer 1.4s linear infinite;
}

.product-image-v2.te-skel-image img,
.pp-card-image.te-skel-image img {
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-image-v2:not(.te-skel-image) img,
.pp-card-image:not(.te-skel-image) img {
    opacity: 1;
}

/* Bare images (no wrapper container, e.g. PDP related products):
   the shimmer sits on the <img> itself while it loads. */
img.te-skel-img {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: te-skel-shimmer 1.4s linear infinite;
    border-radius: 8px;
}

/* ---------- Search autocomplete skeleton rows ----------
   Rendered inside .tea-live-results when a query is in flight. Mirrors the
   shape of a real .tea-result-item so the layout stays stable. */

.tea-skel-row {
    display: grid;
    grid-template-columns: 56px 1fr 22px;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
}

.tea-skel-row .tea-skel-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: te-skel-shimmer 1.4s linear infinite;
}

.tea-skel-row .tea-skel-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tea-skel-row .tea-skel-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: te-skel-shimmer 1.4s linear infinite;
}

.tea-skel-row .tea-skel-line.tea-skel-line-name { width: 70%; height: 14px; }
.tea-skel-row .tea-skel-line.tea-skel-line-meta { width: 45%; height: 11px; }

.tea-skel-row .tea-skel-arrow {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: te-skel-shimmer 1.4s linear infinite;
}

@media (max-width: 480px) {
    .tea-skel-row {
        grid-template-columns: 48px 1fr 20px;
        padding: 10px 12px;
        gap: 12px;
    }
    .tea-skel-row .tea-skel-thumb {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }
}

/* ---------- Buy Blank size-row skeleton ----------
   Used while a new color's stock is being fetched. Mimics the existing
   .size-row layout (size letter | price+badge | qty controls). */

.te-skel-size-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
}

.te-skel-size-row .te-skel-size-name {
    flex: 0 0 auto;
    width: 32px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: te-skel-shimmer 1.4s linear infinite;
}

.te-skel-size-row .te-skel-size-mid {
    flex: 1 1 auto;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: te-skel-shimmer 1.4s linear infinite;
    max-width: 60%;
}

.te-skel-size-row .te-skel-qty {
    flex: 0 0 auto;
    width: 110px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: te-skel-shimmer 1.4s linear infinite;
}

@media (max-width: 768px) {
    .te-skel-size-row .te-skel-qty {
        width: 96px;
    }
}

/* ==== te-mobile-gestures.css ==== */
/**
 * T-Shirt Elephant — Mobile Gesture Upgrades (2026-05-09)
 * Action sheets (long-press menus), pull-to-refresh indicator, swipe-image dots.
 * All scoped to mobile viewports (≤768px) so desktop is unaffected.
 */

@media (max-width: 768px) {

    /* ==================== Action sheet ==================== */

    .te-action-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.40);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.20s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.20s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .te-action-backdrop.te-action-visible {
        opacity: 1;
        visibility: visible;
    }

    .te-action-sheet {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0));
        z-index: 10000;
        background: #ffffff;
        border-radius: 22px;
        box-shadow: 0 -10px 32px rgba(15, 23, 42, 0.18),
                    0 12px 28px rgba(15, 23, 42, 0.10);
        font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        transform: translateY(120%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.18s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    .te-action-sheet.te-action-visible {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .te-action-header {
        padding: 16px 20px 6px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .te-action-grip {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #cbd5e1;
        margin-top: -4px;
    }

    .te-action-title {
        font-size: 13px;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin: 0 0 4px;
    }

    .te-action-list {
        padding: 6px 8px 12px;
    }

    .te-action-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 0 14px;
        height: 56px;
        border-radius: 14px;
        text-decoration: none;
        color: #0f172a;
        background: transparent;
        border: none;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.01em;
        cursor: pointer;
        width: 100%;
        text-align: left;
        transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .te-action-item:active {
        background: rgba(23, 118, 200, 0.10);
        transform: scale(0.98);
    }

    .te-action-icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #1776C8 0%, #125A9C 100%);
        color: #ffffff;
        font-size: 16px;
        box-shadow: 0 4px 10px rgba(23, 118, 200, 0.25);
    }

    .te-action-icon-secondary {
        background: #f1f5f9;
        color: #1776C8;
        box-shadow: none;
    }

    .te-action-label {
        flex: 1 1 auto;
        min-width: 0;
    }

    .te-action-meta {
        flex: 0 0 auto;
        color: #cbd5e1;
        font-size: 16px;
    }

    /* ==================== Pull-to-refresh ==================== */

    .te-ptr {
        position: fixed;
        top: 12px;
        left: 50%;
        transform: translate(-50%, -120%);
        z-index: 9997;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1776C8 0%, #125A9C 100%);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 18px rgba(23, 118, 200, 0.35);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                    background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .te-ptr-pulling {
        opacity: 1;
    }

    .te-ptr-armed {
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
    }

    .te-ptr-firing {
        opacity: 1;
        transform: translate(-50%, 12px) !important;
        transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                    background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .te-ptr-icon {
        width: 22px;
        height: 22px;
        transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .te-ptr-firing .te-ptr-icon {
        animation: te-ptr-spin 0.9s linear infinite;
    }

    @keyframes te-ptr-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    /* ==================== Swipe dots indicator ==================== */

    .te-swipe-dots {
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
        padding: 6px 10px;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-radius: 999px;
        z-index: 5;
        pointer-events: none;
    }

    .te-swipe-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.55);
        transition: width 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .te-swipe-dot.te-swipe-active {
        width: 18px;
        border-radius: 6px;
        background: #ffffff;
    }

    /* The product gallery's main image needs to be a positioning context for
       the dots overlay. */
    .product-gallery .main-image {
        position: relative;
    }
}

/* ==== te-quickview.css ==== */
/**
 * T-Shirt Elephant — Quick View Modal (2026-05-09)
 * Opens from product cards on listing pages. Same aesthetic as the
 * chat widget + bottom-sheet patterns: rounded, soft shadow, spring entry,
 * brand `#1776C8 → #125A9C` gradient CTA, Outfit font.
 */

:root {
    --teqv-primary: #1776C8;
    --teqv-primary-dark: #125A9C;
    --teqv-text: #0f172a;
    --teqv-text-muted: #64748b;
    --teqv-border: #e5e7eb;
    --teqv-bg-soft: #f8fafc;
    --teqv-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --teqv-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --teqv-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Backdrop ---------- */

.te-qv-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--teqv-ease), visibility 0.22s var(--teqv-ease);
    z-index: 9998;
}

.te-qv-backdrop.te-qv-visible {
    opacity: 1;
    visibility: visible;
}

/* ---------- Modal ---------- */

.te-qv {
    position: fixed;
    z-index: 9999;
    background: #ffffff;
    font-family: var(--teqv-font);
    color: var(--teqv-text);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.28s var(--teqv-spring),
                opacity 0.2s var(--teqv-ease),
                visibility 0.2s var(--teqv-ease);
}

.te-qv.te-qv-visible {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.te-qv-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.06);
    color: var(--teqv-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s var(--teqv-ease), transform 0.15s var(--teqv-ease);
}

.te-qv-close:hover {
    background: rgba(15, 23, 42, 0.12);
    transform: rotate(90deg);
}

/* ---------- Inner layout ---------- */

.te-qv-inner {
    display: grid;
    height: 100%;
}

.te-qv-image {
    background: var(--teqv-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px;
}

.te-qv-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.2s var(--teqv-ease);
}

.te-qv-img.te-qv-img-loading {
    opacity: 0.5;
}

.te-qv-info {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.te-qv-brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: rgba(23, 118, 200, 0.10);
    color: var(--teqv-primary);
    font-weight: 700;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.te-qv-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--teqv-text);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

.te-qv-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--teqv-text-muted);
    font-weight: 500;
}

.te-qv-sku {
    font-family: 'JetBrains Mono', SF Mono, Menlo, monospace;
    font-size: 11px;
    background: var(--teqv-bg-soft);
    color: #475569;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.te-qv-sizes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.te-qv-sizes::before {
    content: '·';
    margin: 0 4px 0 0;
    color: #cbd5e1;
}

.te-qv-price {
    font-size: 14px;
    color: var(--teqv-text-muted);
    font-weight: 500;
    margin-top: 4px;
}

.te-qv-price strong {
    color: var(--teqv-text);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---------- Color swatches ---------- */

.te-qv-colors-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--teqv-text-muted);
    margin-bottom: 6px;
    display: block;
}

.te-qv-color-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.te-qv-colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.te-qv-swatch {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--teqv-border);
    cursor: pointer;
    transition: transform 0.15s var(--teqv-spring),
                box-shadow 0.15s var(--teqv-ease);
    padding: 0;
    background-clip: padding-box;
}

.te-qv-swatch:hover {
    transform: scale(1.10);
}

.te-qv-swatch.te-qv-swatch-active {
    box-shadow: 0 0 0 2px var(--teqv-primary);
    transform: scale(1.10);
}

.te-qv-color-name {
    font-size: 12px;
    color: var(--teqv-text-muted);
    font-weight: 500;
    margin-top: 2px;
}

.te-qv-color-name strong {
    color: var(--teqv-text);
    font-weight: 700;
}

/* ---------- Action buttons ---------- */

.te-qv-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.te-qv-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--teqv-primary) 0%, var(--teqv-primary-dark) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(23, 118, 200, 0.30);
    transition: transform 0.18s var(--teqv-ease), box-shadow 0.18s var(--teqv-ease);
}

.te-qv-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(23, 118, 200, 0.40);
    color: #fff;
    text-decoration: none;
}

.te-qv-cta:active {
    transform: translateY(0);
}

.te-qv-cta i {
    font-size: 16px;
}

.te-qv-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--teqv-primary);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    padding: 6px;
    transition: color 0.15s var(--teqv-ease);
}

.te-qv-link:hover {
    color: var(--teqv-primary-dark);
    text-decoration: underline;
}

/* ---------- Loading state ---------- */

.te-qv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 60px 20px;
    grid-column: 1 / -1;
}

.te-qv-loading span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teqv-primary);
    opacity: 0.4;
    animation: te-qv-typing 1.2s infinite var(--teqv-ease);
}

.te-qv-loading span:nth-child(2) { animation-delay: 0.15s; }
.te-qv-loading span:nth-child(3) { animation-delay: 0.3s; }

@keyframes te-qv-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-6px); opacity: 1; }
}

/* ---------- Desktop layout (≥769px) ---------- */

@media (min-width: 769px) {
    .te-qv {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.94);
        width: min(820px, 92vw);
        max-height: min(640px, 90vh);
        border-radius: 22px;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30);
        overflow: hidden;
    }

    .te-qv.te-qv-visible {
        transform: translate(-50%, -50%) scale(1);
    }

    .te-qv-inner {
        grid-template-columns: 360px 1fr;
        height: 100%;
    }

    .te-qv-image {
        min-height: 360px;
    }

    .te-qv-img {
        max-height: 480px;
    }
}

/* ---------- Mobile layout (≤768px) ---------- */

@media (max-width: 768px) {
    .te-qv {
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 88vh;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -10px 32px rgba(15, 23, 42, 0.25);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateY(100%);
    }

    .te-qv.te-qv-visible {
        transform: translateY(0);
    }

    .te-qv-inner {
        grid-template-columns: 1fr;
    }

    .te-qv-image {
        padding: 20px 16px;
        min-height: 220px;
        max-height: 240px;
    }

    .te-qv-img {
        max-height: 200px;
    }

    .te-qv-info {
        padding: 18px 20px 28px;
    }

    .te-qv-name {
        font-size: 19px;
    }

    .te-qv-close {
        top: 10px;
        right: 10px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    }
}

/* ---------- Card overlay update — hosts two buttons cleanly ---------- */

.product-overlay-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.te-qv-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--teqv-primary);
    border: 1px solid rgba(23, 118, 200, 0.18);
    font-family: var(--teqv-font);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.15s var(--teqv-ease),
                color 0.15s var(--teqv-ease),
                transform 0.15s var(--teqv-ease),
                box-shadow 0.15s var(--teqv-ease);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.te-qv-trigger:hover {
    background: var(--teqv-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 118, 200, 0.30);
}

.te-qv-trigger i {
    font-size: 14px;
}


/* ---------- Design Now button hover polish (matches Quick View pill) ---------- */

/* Add transition so direct hover changes animate smoothly */
.design-now-btn-v2 {
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Direct hover on the button — invert colors + lift further + richer shadow.
   Higher specificity beats the card-hover translateY(0) so the lift wins. */
@media (hover: hover) {
    .product-card-v2:hover .design-now-btn-v2:hover {
        background: linear-gradient(135deg, #1776C8 0%, #125A9C 100%);
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(23, 118, 200, 0.40),
                    0 4px 10px rgba(15, 23, 42, 0.15);
    }
    .product-card-v2:hover .design-now-btn-v2:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(23, 118, 200, 0.30);
    }
}

/* ==== search/search-autocomplete.css ==== */
/**
 * T-Shirt Elephant — Search Autocomplete v3 (2026-05-08)
 * Refreshed UI to match chat widget + mobile tab bar aesthetic.
 * Tokens, Outfit font, soft shadows, spring easing, blue focus accents.
 */

:root {
    --tea-primary: #1776C8;
    --tea-primary-dark: #125A9C;
    --tea-primary-soft: rgba(23, 118, 200, 0.10);
    --tea-primary-ring: rgba(23, 118, 200, 0.18);
    --tea-text: #0f172a;
    --tea-text-muted: #64748b;
    --tea-text-subtle: #94a3b8;
    --tea-border: #e5e7eb;
    --tea-border-soft: #f1f5f9;
    --tea-bg-soft: #f8fafc;
    --tea-radius-sm: 10px;
    --tea-radius-md: 14px;
    --tea-radius-lg: 20px;
    --tea-shadow-soft: 0 12px 40px rgba(15, 23, 42, 0.10);
    --tea-shadow-lift: 0 6px 18px rgba(23, 118, 200, 0.18);
    --tea-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tea-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --tea-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Live results container ---------- */

.tea-live-results {
    padding: 10px;
    max-height: 480px;
    overflow-y: auto;
    font-family: var(--tea-font);
}

.tea-results-header {
    padding: 6px 12px 10px;
    margin-bottom: 4px;
}

.tea-results-count {
    font-size: 11px;
    color: var(--tea-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tea-results-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ---------- Result item ---------- */

.tea-result-item {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr 22px;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--tea-radius-md);
    text-decoration: none;
    color: var(--tea-text);
    transition: background 0.18s var(--tea-ease),
                transform 0.18s var(--tea-ease),
                box-shadow 0.18s var(--tea-ease);
    cursor: pointer;
}

.tea-result-item::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 2px;
    background: var(--tea-primary);
    opacity: 0;
    transition: opacity 0.15s var(--tea-ease);
}

.tea-result-item:hover {
    background: var(--tea-primary-soft);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(23, 118, 200, 0.10);
    text-decoration: none;
}

.tea-result-item.tea-active {
    background: var(--tea-primary-soft);
    padding-left: 18px;
}

.tea-result-item.tea-active::before {
    opacity: 1;
}

.tea-result-thumb {
    width: 56px;
    height: 56px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--tea-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.tea-result-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tea-result-meta {
    min-width: 0;
}

.tea-result-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--tea-text);
    line-height: 1.3;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    letter-spacing: -0.01em;
}

.tea-result-name em,
.tea-result-name mark {
    background: var(--tea-primary-soft);
    color: var(--tea-primary-dark);
    font-style: normal;
    font-weight: 700;
    padding: 0 3px;
    border-radius: 3px;
}

.tea-result-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--tea-text-muted);
    flex-wrap: wrap;
}

.tea-result-brand {
    display: inline-flex;
    align-items: center;
    background: var(--tea-primary-soft);
    color: var(--tea-primary);
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.tea-result-brand em,
.tea-result-brand mark {
    font-style: normal;
    background: transparent;
    color: var(--tea-primary-dark);
    padding: 0;
}

.tea-result-sku {
    font-family: 'JetBrains Mono', SF Mono, Menlo, monospace;
    font-size: 11px;
    background: var(--tea-bg-soft);
    color: #475569;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.01em;
}

.tea-result-cat {
    color: var(--tea-text-subtle);
    font-size: 11px;
}

.tea-result-arrow {
    color: #cbd5e1;
    font-size: 16px;
    transition: color 0.18s var(--tea-ease), transform 0.18s var(--tea-ease);
}

.tea-result-item:hover .tea-result-arrow,
.tea-result-item.tea-active .tea-result-arrow {
    color: var(--tea-primary);
    transform: translateX(3px);
}

/* ---------- Loading state (3-dot bouncing spinner, matches chat) ---------- */

.tea-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 16px;
    font-family: var(--tea-font);
}

.tea-loading span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tea-primary);
    opacity: 0.4;
    animation: tea-typing 1.2s infinite var(--tea-ease);
}

.tea-loading span:nth-child(2) { animation-delay: 0.15s; }
.tea-loading span:nth-child(3) { animation-delay: 0.3s; }

@keyframes tea-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-6px); opacity: 1; }
}

/* ---------- Empty / error state ---------- */

.tea-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--tea-text-muted);
    font-size: 14px;
    font-family: var(--tea-font);
}

.tea-empty strong {
    display: block;
    color: var(--tea-text);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.tea-empty p {
    margin: 0;
    color: var(--tea-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.tea-empty a {
    color: var(--tea-primary);
    font-weight: 600;
    text-decoration: none;
}

.tea-empty a:hover {
    color: var(--tea-primary-dark);
    text-decoration: underline;
}

/* ---------- See-all CTA ---------- */

.tea-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 4px 4px;
    padding: 14px;
    background: var(--tea-bg-soft);
    border-radius: var(--tea-radius-md);
    color: var(--tea-primary);
    font-family: var(--tea-font);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.18s var(--tea-ease),
                transform 0.18s var(--tea-ease),
                box-shadow 0.18s var(--tea-ease),
                color 0.18s var(--tea-ease);
    letter-spacing: -0.01em;
}

.tea-see-all:hover {
    background: linear-gradient(135deg, var(--tea-primary), var(--tea-primary-dark));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--tea-shadow-lift);
    text-decoration: none;
}

/* ---------- Curated intent section ---------- */

.tea-intent-section {
    background: var(--tea-bg-soft);
    border: 1px solid var(--tea-border);
    border-radius: var(--tea-radius-md);
    padding: 16px;
    margin-bottom: 14px;
    font-family: var(--tea-font);
}

.tea-intent-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.tea-intent-icon {
    font-size: 18px;
    line-height: 1;
}

.tea-intent-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tea-text);
    flex: 1;
    letter-spacing: -0.01em;
}

.tea-intent-badge {
    background: linear-gradient(135deg, var(--tea-primary), var(--tea-primary-dark));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(23, 118, 200, 0.25);
}

.tea-intent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.tea-intent-card {
    background: #fff;
    border: 1px solid var(--tea-border);
    border-radius: 12px;
    padding: 10px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.2s var(--tea-ease),
                border-color 0.2s var(--tea-ease),
                box-shadow 0.2s var(--tea-ease);
}

.tea-intent-card:hover {
    transform: translateY(-2px);
    border-color: var(--tea-primary);
    box-shadow: var(--tea-shadow-lift);
    text-decoration: none;
}

.tea-intent-thumb {
    width: 100%;
    aspect-ratio: 1;
    background: var(--tea-bg-soft);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tea-intent-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tea-intent-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tea-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 32px;
}

.tea-intent-brand {
    font-size: 11px;
    color: var(--tea-primary);
    font-weight: 700;
}

.tea-intent-sku {
    color: var(--tea-text-muted);
    font-family: 'JetBrains Mono', SF Mono, Menlo, monospace;
    font-weight: 500;
    font-size: 10px;
    margin-left: 4px;
}

/* ---------- Mobile overlay results ---------- */

.tea-mobile-results {
    background: #fff;
    border-radius: var(--tea-radius-md);
    margin: 4px 4px 16px;
    overflow: hidden;
}

.tea-mobile-results:empty {
    display: none;
}

/* ---------- Mobile breakpoints ---------- */

@media (max-width: 480px) {
    .tea-result-item {
        grid-template-columns: 48px 1fr 20px;
        padding: 10px 12px;
        gap: 12px;
    }
    .tea-result-thumb {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }
    .tea-result-name {
        font-size: 13px;
    }
    .tea-intent-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Recent searches (v4) ---------- */
.tea-recents {
    padding: 4px 0 14px;
}

.tea-recents-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tea-recents-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    border-left: 3px solid #1776C8;
    padding-left: 8px;
}

.tea-recents-clear {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 6px;
}

.tea-recents-clear:hover {
    color: #1776C8;
}

.tea-recents-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tea-recent-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tea-recent-chip:hover {
    background: #e0effc;
    border-color: #1776C8;
    color: #1776C8;
    text-decoration: none;
}

.tea-recent-chip svg {
    width: 14px;
    height: 14px;
    opacity: 0.55;
    flex-shrink: 0;
}

/* Mobile overlay: recents sit above the live results */
#mobile-search-overlay .tea-recents {
    padding: 14px 16px;
}

/* ---------- Dropdown entrance choreography (v5) ----------
   The panel springs in from the top, then the browse content cascades:
   recents -> popular searches (row by row) -> category tiles -> quick links. */
.search-active .search-dropdown-panel.tea-open {
    animation: teaPanelIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: top center;
}

@keyframes teaPanelIn {
    from { opacity: 0; transform: translateY(-8px) scaleY(0.97); }
    to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

.search-dropdown-panel.tea-open .tea-recents,
.search-dropdown-panel.tea-open .search-popular-list li,
.search-dropdown-panel.tea-open .search-category-card,
.search-dropdown-panel.tea-open .search-quick-links {
    animation: teaItemIn 340ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes teaItemIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

.search-dropdown-panel.tea-open .tea-recents { animation-delay: 40ms; }

.search-dropdown-panel.tea-open .search-popular-list li:nth-child(1) { animation-delay: 70ms; }
.search-dropdown-panel.tea-open .search-popular-list li:nth-child(2) { animation-delay: 100ms; }
.search-dropdown-panel.tea-open .search-popular-list li:nth-child(3) { animation-delay: 130ms; }
.search-dropdown-panel.tea-open .search-popular-list li:nth-child(4) { animation-delay: 160ms; }
.search-dropdown-panel.tea-open .search-popular-list li:nth-child(5) { animation-delay: 190ms; }
.search-dropdown-panel.tea-open .search-popular-list li:nth-child(6) { animation-delay: 220ms; }

.search-dropdown-panel.tea-open .search-category-card:nth-child(1) { animation-delay: 90ms; }
.search-dropdown-panel.tea-open .search-category-card:nth-child(2) { animation-delay: 120ms; }
.search-dropdown-panel.tea-open .search-category-card:nth-child(3) { animation-delay: 150ms; }
.search-dropdown-panel.tea-open .search-category-card:nth-child(4) { animation-delay: 180ms; }
.search-dropdown-panel.tea-open .search-category-card:nth-child(5) { animation-delay: 210ms; }
.search-dropdown-panel.tea-open .search-category-card:nth-child(6) { animation-delay: 240ms; }

.search-dropdown-panel.tea-open .search-quick-links { animation-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
    .search-active .search-dropdown-panel.tea-open,
    .search-dropdown-panel.tea-open .tea-recents,
    .search-dropdown-panel.tea-open .search-popular-list li,
    .search-dropdown-panel.tea-open .search-category-card,
    .search-dropdown-panel.tea-open .search-quick-links {
        animation: none;
    }
}

/* ---------- Category tile hover (v6) ----------
   Matches the site-wide product card motion: deeper lift, layered navy
   shadow, and the product image tilts like a shirt being picked up. */
@media (hover: hover) {
    .search-category-card {
        transition: transform 250ms var(--te-ease, ease), box-shadow 250ms var(--te-ease, ease), border-color 250ms ease;
        overflow: hidden;
    }

    .search-category-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--te-sh-md, 0 1px 2px rgba(13, 79, 140, 0.05), 0 6px 14px rgba(13, 79, 140, 0.08), 0 16px 32px rgba(13, 79, 140, 0.07));
    }

    .search-category-card img {
        transition: transform 250ms var(--te-ease, ease);
    }

    .search-category-card:hover img {
        transform: rotate(2deg) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-category-card,
    .search-category-card img {
        transition: none;
    }
    .search-category-card:hover {
        transform: none;
    }
    .search-category-card:hover img {
        transform: none;
    }
}

/* ==== te-mobile-tabbar.css ==== */
/**
 * T-Shirt Elephant — Mobile Tab Bar v2 (2026-05-08)
 * App-style bottom navigation bar shown on mobile viewports site-wide.
 * Replaces the floating chat bubble + sticky design CTA on mobile.
 */

#te-tabbar {
    /* Hidden by default — shown only on mobile via the @media block below */
    display: none;
}

@media (max-width: 768px) {
    /* Show the tab bar */
    #te-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9998;
        height: calc(64px + env(safe-area-inset-bottom, 0));
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);
        font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .te-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 4px;
        background: transparent;
        border: none;
        color: #475569;
        font-family: inherit;
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .te-tab i {
        font-size: 20px;
        line-height: 1;
    }

    .te-tab:active {
        color: #1776C8;
    }

    /* Primary CTA — raised round button in the middle */
    .te-tab-primary {
        position: relative;
    }

    .te-tab-primary i {
        position: relative;
        z-index: 1;
        width: 56px;
        height: 56px;
        margin-top: -22px;          /* lift above the bar */
        border-radius: 50%;
        background: linear-gradient(135deg, #1776C8 0%, #125A9C 100%);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        box-shadow: 0 6px 16px rgba(23, 118, 200, 0.4);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .te-tab-primary span {
        margin-top: -2px;
        color: #1776C8;
        font-weight: 700;
    }

    .te-tab-primary:active i {
        transform: scale(0.96);
        box-shadow: 0 3px 10px rgba(23, 118, 200, 0.4);
    }

    /* Hide the legacy floating chat bubble — now in the tab bar */
    #te-chat-widget #te-chat-toggle {
        display: none !important;
    }

    /* Add bottom padding to body so page content doesn't sit under the bar */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* Hide the tab bar while the full-screen chat window or search overlay is open */
    body:has(#te-chat-window.te-open) #te-tabbar,
    body:has(.mobile-search-overlay.active) #te-tabbar {
        transform: translateY(100%);
        transition: transform 0.2s ease;
    }
}

/* ==== te-motion.css ==== */
/* ============================================================
   TE Motion System — subtle, print-shop-branded motion details
   House rules: transform/opacity only · one easing token ·
   everything <= 400ms (count-ups 1.2s) · reduced-motion = off
   ============================================================ */

:root {
    --te-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Layered elevation tokens — tight contact shadow + soft ambient
       falloff, tinted in brand navy (13,79,140) instead of grey-black. */
    --te-sh-xs: 0 1px 2px rgba(13, 79, 140, 0.08);
    --te-sh-sm: 0 1px 2px rgba(13, 79, 140, 0.06),
                0 3px 8px rgba(13, 79, 140, 0.07);
    --te-sh-md: 0 1px 2px rgba(13, 79, 140, 0.05),
                0 6px 14px rgba(13, 79, 140, 0.08),
                0 16px 32px rgba(13, 79, 140, 0.07);
    --te-sh-lg: 0 2px 4px rgba(13, 79, 140, 0.05),
                0 12px 28px rgba(13, 79, 140, 0.10),
                0 32px 64px rgba(13, 79, 140, 0.10);
}

/* ---------- Step 2: Count-up tickers ----------
   Tabular numerals while counting so digits do not jitter. */
.te-counting {
    font-variant-numeric: tabular-nums;
}

/* ---------- Step 3: Swatch & image choreography ---------- */

/* Swatch hover: lift slightly more, ring in the swatch's own colour */
.color-swatches .swatch {
    transition: transform 200ms var(--te-ease), box-shadow 200ms var(--te-ease);
}

.color-swatches .swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--swatch-c, #1776C8);
    z-index: 2;
}

/* Product image cross-fade while the new colour loads */
#main-product-image {
    transition: opacity 150ms var(--te-ease), transform 150ms var(--te-ease);
}

#main-product-image.te-img-swap {
    opacity: 0.25;
    transform: scale(1.02);
}

/* Colour name dips and settles when it changes */
.color-name {
    display: inline-block;
    transition: opacity 150ms var(--te-ease), transform 150ms var(--te-ease);
}

.color-name.te-name-swap {
    opacity: 0;
    transform: translateY(3px);
}

@media (prefers-reduced-motion: reduce) {
    .color-swatches .swatch,
    #main-product-image,
    .color-name {
        transition: none;
    }
    .color-swatches .swatch:hover {
        transform: none;
    }
}

/* ---------- Header 2.0: frosted glass + smart collapse ---------- */

/* Frosted glass once scrolled (te-h-glass set by te-motion.js) */
body.te-h-glass .navbar-new {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: 0 1px 0 rgba(13, 79, 140, 0.07), 0 8px 24px rgba(13, 79, 140, 0.08);
}

/* Promo banner frosts over once scrolled — it stays in place, so the
   header stack never shifts vertically (no gap). */
body.te-h-glass .spring-sale-banner.promo-banner-new {
    background: rgba(5, 150, 105, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    animation: none;
}

/* Desktop: compact the bar when scrolled */
@media (min-width: 769px) {
    .navbar-top-section {
        transition: padding 250ms var(--te-ease);
    }

    body.te-h-glass .navbar-top-section {
        padding: 4px 0;
    }

    body.te-h-glass .navbar-logo img {
        transform: scale(0.84);
    }

    body.te-h-glass .navbar-logo:hover img {
        transform: scale(0.88) rotate(-2deg);
    }
}

/* Mobile: collapse search + category strip while scrolling down */
@media (max-width: 768px) {
    #navbar-new .navbar-container > div.visible-xs,
    .mobile-categories {
        max-height: 260px;
        transition: max-height 250ms var(--te-ease), opacity 200ms var(--te-ease),
                    margin 250ms var(--te-ease), padding 250ms var(--te-ease);
    }

    body.te-h-slim #navbar-new .navbar-container > div.visible-xs,
    body.te-h-slim .mobile-categories {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-top-section,
    #navbar-new .navbar-container > div.visible-xs,
    .mobile-categories {
        transition: none;
    }
}

/* ---------- Step 6: Halftone texture accents ----------
   A barely-there print-dot pattern — the visual vocabulary of
   screen printing at 4-5% opacity. */
.hero-new {
    position: relative;
}

.hero-new::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.09;
    pointer-events: none;
    /* dots fade out from the top-left corner */
    -webkit-mask-image: radial-gradient(circle at 0% 0%, #000 0%, transparent 50%);
    mask-image: radial-gradient(circle at 0% 0%, #000 0%, transparent 50%);
}

footer {
    position: relative;
}

footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.08;
    pointer-events: none;
    /* strongest along the top edge, fading down */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
}

/* ---------- Step 7: Elephant micro-moment ----------
   The logo perks up when noticed. (The SVG is a single flat path,
   so the whole mark moves rather than an individual ear.) */
@media (hover: hover) {
    .navbar-logo img {
        transition: transform 350ms var(--te-ease);
        transform-origin: 50% 60%;
    }

    .navbar-logo:hover img {
        transform: scale(1.05) rotate(-2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-logo img {
        transition: none;
    }
    .navbar-logo:hover img {
        transform: none;
    }
}

/* ---------- Step 5: Squeegee section reveals ----------
   A horizontal wipe like a screen-print squeegee pass. */
.te-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 600ms var(--te-ease);
}

.te-reveal.te-reveal-in {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    .te-reveal {
        clip-path: none;
        transition: none;
    }
}

/* ---------- Step 4: Product card lift (desktop pointers only) ---------- */
@media (hover: hover) {
    /* pp-card already lifts (te-landing.css); add the shirt tilt */
    .pp-card .pp-card-image img,
    .product-card-v2 img,
    .related-product-card img {
        transition: transform 250ms var(--te-ease);
    }

    .pp-card:hover .pp-card-image img,
    .product-card-v2:hover img,
    .related-product-card:hover img {
        transform: rotate(2deg) scale(1.05);
    }

    /* cards without an existing lift get one */
    .product-card-v2,
    .related-product-card {
        transition: transform 250ms var(--te-ease), box-shadow 250ms var(--te-ease);
    }

    .product-card-v2:hover,
    .related-product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(13, 79, 140, 0.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-card .pp-card-image img,
    .product-card-v2 img,
    .related-product-card img,
    .product-card-v2,
    .related-product-card {
        transition: none;
    }
    .pp-card:hover .pp-card-image img,
    .product-card-v2:hover img,
    .related-product-card:hover img,
    .product-card-v2:hover,
    .related-product-card:hover {
        transform: none;
    }
}

/* ---------- Shadow system: layered, ink-tinted elevation ----------
   One light source, consistent depth scale. Replaces the mix of flat
   grey-black shadows with the navy tokens defined in :root. */

/* Header (base state; the te-h-glass rule above wins once scrolled) */
.navbar-new {
    box-shadow: var(--te-sh-sm);
}

/* Floating overlays sit highest */
.mega-menu,
.search-dropdown-panel,
.account-dropdown-menu,
.te-qv {
    box-shadow: var(--te-sh-lg);
}

/* Cards: barely-off-the-page at rest, clearly lifted on hover */
.pp-card {
    box-shadow: var(--te-sh-xs);
}

.pp-card:hover {
    box-shadow: var(--te-sh-lg);
}

.product-card:hover {
    box-shadow: var(--te-sh-lg) !important; /* matches te-landing's !important */
}

.mega-menu-featured:hover {
    box-shadow: var(--te-sh-md);
}

@media (hover: hover) {
    .product-card-v2,
    .related-product-card {
        box-shadow: var(--te-sh-xs);
    }

    .product-card-v2:hover,
    .related-product-card:hover {
        box-shadow: var(--te-sh-lg);
    }
}

/* Homepage accents: ink-tinted instead of grey */
.hiw-icon-circle {
    box-shadow: var(--te-sh-md);
}

.hiw-cta-btn {
    box-shadow: 0 2px 4px rgba(13, 79, 140, 0.10),
                0 10px 24px rgba(23, 118, 200, 0.28);
}

.trust-bar {
    box-shadow: 0 2px 8px rgba(13, 79, 140, 0.12);
}

/* ---------- CTA sheen sweep ----------
   A thin streak of light glides across solid-blue CTAs on hover —
   gloss on a fresh print. Runs once per hover (animation, not
   transition, so there is no reverse sweep on mouse-out). */
@media (hover: hover) {
    .design-now-btn,
    .btn-design,
    .hiw-cta-btn,
    .hero-btn-primary-lp,
    .te-qv-cta {
        position: relative;
        overflow: hidden;
    }

    .design-now-btn::after,
    .btn-design::after,
    .hiw-cta-btn::after,
    .hero-btn-primary-lp::after,
    .te-qv-cta::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 40%;
        background: linear-gradient(105deg,
            transparent 0%,
            rgba(255, 255, 255, 0.35) 50%,
            transparent 100%);
        transform: translateX(-150%) skewX(-20deg);
        pointer-events: none;
    }

    .design-now-btn:hover::after,
    .btn-design:hover::after,
    .hiw-cta-btn:hover::after,
    .hero-btn-primary-lp:hover::after,
    .te-qv-cta:hover::after {
        animation: te-sheen 900ms var(--te-ease);
    }
}

@keyframes te-sheen {
    from { transform: translateX(-150%) skewX(-20deg); }
    to   { transform: translateX(400%) skewX(-20deg); }
}

@media (prefers-reduced-motion: reduce) {
    .design-now-btn:hover::after,
    .btn-design:hover::after,
    .hiw-cta-btn:hover::after,
    .hero-btn-primary-lp:hover::after,
    .te-qv-cta:hover::after {
        animation: none;
    }
}

/* ---------- Tactile press + craft signals ----------
   Clicks feel physical: the button compresses under the pointer.
   (The brutalist hard-shadow buttons already have their own press.) */
.btn-design:active,
.hiw-cta-btn:active,
.hero-btn-primary-lp:active,
.te-qv-cta:active,
.mega-menu-cta-pill:active,
.btn-add-blank-cart:active,
.qty-btn:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 80ms;
}

/* Text selection in brand ink */
::selection {
    background: #1776C8;
    color: #ffffff;
}

/* Slim brand scrollbar (desktop pointers only) */
@media (hover: hover) and (min-width: 769px) {
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f5f9;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(13, 79, 140, 0.35);
        border-radius: 8px;
        border: 3px solid #f1f5f9;
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(13, 79, 140, 0.55);
    }

    html {
        scrollbar-color: rgba(13, 79, 140, 0.45) #f1f5f9; /* Firefox */
        scrollbar-width: thin;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-design:active,
    .hiw-cta-btn:active,
    .hero-btn-primary-lp:active,
    .te-qv-cta:active,
    .mega-menu-cta-pill:active,
    .btn-add-blank-cart:active,
    .qty-btn:active {
        transition: none;
    }
}

/* ---------- Footer link underline grow ----------
   Footer links draw a light-blue underline left-to-right on hover,
   matching the desktop nav's existing underline behaviour. */
@media (hover: hover) {
    footer .footer-accordion-section ul li a {
        position: relative;
        display: inline-block;
    }

    footer .footer-accordion-section ul li a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 1px;
        background: rgba(255, 255, 255, 0.85);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 250ms var(--te-ease);
    }

    footer .footer-accordion-section ul li a:hover::after {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    footer .footer-accordion-section ul li a::after {
        transition: none;
    }
}

/* ---------- Living hero gradient ----------
   Two soft glows drift slowly across the hero — a lighter blue near
   the headline, a deeper navy opposite — so the page feels alive even
   when idle. Transform-only, GPU-composited, 15s alternate loop. */
.hero-new::before {
    content: "";
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(45% 60% at 28% 30%, rgba(94, 177, 240, 0.65), transparent 72%),
        radial-gradient(50% 65% at 75% 75%, rgba(9, 56, 101, 0.55), transparent 72%);
    animation: te-hero-drift 12s ease-in-out infinite alternate;
    pointer-events: none;
    will-change: transform;
}

@keyframes te-hero-drift {
    from { transform: translate3d(-6%, -4%, 0) scale(1); }
    to   { transform: translate3d(8%, 6%, 0) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-new::before {
        animation: none;
    }
}

/* ---------- Magnetic CTAs ----------
   Composed transition so the magnet's transform plays nicely with each
   button's existing shadow/colour hover effects. */
.te-magnetic {
    transition: transform 180ms var(--te-ease),
                box-shadow 250ms var(--te-ease),
                background 250ms ease,
                color 250ms ease;
    will-change: transform;
}

/* ---------- Add-to-cart flight ---------- */
.te-cart-ghost {
    position: fixed;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: var(--te-sh-md);
    z-index: 10000;
    pointer-events: none;
}

.cart-count.te-cart-pop {
    animation: teCartPop 500ms var(--te-ease);
}

@keyframes teCartPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cart-count.te-cart-pop {
        animation: none;
    }
}