/* Component: Product Mini Menu – Section Nav + Product Search */

.product-mini-menu-slot {
    margin-bottom: 20px;
}

/* ── Wrapper (transparent, stacks menu + progress) ─────────────────── */

.product-mini-menu {
    --mini-menu-w: 440px;
    --mini-menu-thumb-w: 150px;
    --mini-menu-mini-thumb: 80px;
    --mini-menu-shell-open-h: 310px;
    --mini-menu-shell-padding-h: 6px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Floating state (product page, JS-managed) ────────────────────── */

.product-mini-menu.is-floating {
    position: fixed;
    bottom: 0;
    left: var(--mini-menu-float-l, 0px);
    z-index: 50;
    width: var(--mini-menu-float-w, 100%);
}

/* ── Menu shell (glass container) ──────────────────────────────────── */

.product-mini-menu__shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: var(--mini-menu-shell-open-h);
    border-radius: 14px;
    background: rgba(21, 21, 21, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    color: var(--color-sand);
    transition: min-height 0.25s ease-out, max-height 0.25s ease-out;
}

/* Open shell: EXACT fixed height (min = max = var) so the shell is the
   same size in every tab and with every search result count. Nav (4 items)
   and Products (10 items w/ internal scroll) share the exact dimensions. */
.product-mini-menu__shell.is-nav-open {
    min-height: var(--mini-menu-shell-open-h);
    max-height: var(--mini-menu-shell-open-h);
}

/* ── Search wrapper (animates reveal; default collapsed to avoid paint blink) */

.product-mini-menu__search-wrap {
    flex-shrink: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
}

/* ── Search inner (keeps its padding permanently — never animated) ────── */

.product-mini-menu__search {
    display: flex;
    align-items: center;
    padding: var(--mini-menu-shell-padding-h);
    padding-bottom:0;
}

/* Fake-relative wrapper: contains the input + button so the btn is
   anchored inside the input bounds, not the outer padded search div. */
.product-mini-menu__search-field {
    position: relative;
    flex: 1;
    display: flex;
}

.product-mini-menu__search-input {
    flex: 1;
    padding: 8px 36px 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 0;
    border-radius: 10px;
    color: var(--color-sand);
    font-size: 14px;
    line-height: 14px;
    letter-spacing: -0.01em;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.product-mini-menu__search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.product-mini-menu__search-input:focus {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.08);
}

.product-mini-menu__search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    aspect-ratio: 1 / 1;
    height: calc( 100% - 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--color-sand);
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.product-mini-menu__search-btn:hover {
    opacity: 0.7;
}

.product-mini-menu__search-icon {
    display: flex;
    align-items: center;
    padding: 5px;
    justify-content: center;
}

.product-mini-menu__search-icon--clear { display: none; }

/* bio_icon fills are #FF5500 by default — override to inherit the button's
   color (var(--color-sand)) so it matches the rest of the search UI. */
.product-mini-menu__search-icon--lupa svg {
    width: 100%;
    height: auto;
}

.product-mini-menu__search-icon--lupa svg * {
    fill: currentColor;
}

.product-mini-menu__search-btn[data-state="clear"] .product-mini-menu__search-icon--lupa { display: none; }
.product-mini-menu__search-btn[data-state="clear"] .product-mini-menu__search-icon--clear { display: block; }

/* ── Tabs wrapper (animates reveal; same logic as search-wrap) ─────────── */

.product-mini-menu__tabs-wrap {
    flex-shrink: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
}

/* ── Tabs inner (keeps its padding permanently) ─────────────────────── */

.product-mini-menu__tabs {
    display: flex;
    gap: 4px;
    padding: var(--mini-menu-shell-padding-h);
}

.product-mini-menu__tab {
    flex: 0 0 auto;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--color-sand);
    font-size: 13px;
    line-height: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    opacity: 0.5;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.product-mini-menu__tab:hover { opacity: 0.85; }

.product-mini-menu__tab.is-active {
    background: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

/* Expand search/tabs wrappers when nav is open. The inner elements keep
   their padding at all times — no padding overrides here. 100px gives
   enough headroom for any content height without clipping risk. */
.product-mini-menu__shell.is-nav-open .product-mini-menu__search-wrap {
    max-height: 100px;
    opacity: 1;
}

.product-mini-menu__shell.is-nav-open .product-mini-menu__tabs-wrap {
    max-height: 100px;
    opacity: 1;
}

/* ── Panels (scroll container) ─────────────────────────────────────── */

.product-mini-menu__panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Keep scroll contained inside the panel; prevents the page behind from
       scrolling once the user reaches the top/bottom of the product list. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* macOS-style scrollbar (overlay feel; Windows gets a thin translucent bar
   instead of the default chunky one) */
.product-mini-menu__panels::-webkit-scrollbar {
    width: 8px;
}

.product-mini-menu__panels::-webkit-scrollbar-track {
    background: transparent;
}

.product-mini-menu__panels::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.product-mini-menu__panels:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    background-clip: padding-box;
}

.product-mini-menu__panel {
    display: none;
}

.product-mini-menu__panel.is-active {
    display: block;
}

/* Disable every transition while JS measures the expanded height. Applied
   for a single synchronous tick so the user never sees it. */
.product-mini-menu.is-measuring,
.product-mini-menu.is-measuring * {
    transition: none !important;
    animation: none !important;
}

/* ── Nav item wrapper (collapse / expand animation) ────────────────── */

.product-mini-menu__item {
    overflow: hidden;
    transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
}

/* Collapse non-active nav items whenever the nav is closed.
   Default = collapsed (matches initial paint, floating-closed, docked).
   Scoped to --nav so product items in the products panel are never collapsed. */
.product-mini-menu__shell:not(.is-nav-open) .product-mini-menu__panel--nav .product-mini-menu__item:not(.is-active) {
    max-height: 0;
    opacity: 0;
}

/* When the nav is open (JS-driven on both desktop + touch), expand all nav items. */
.product-mini-menu__shell.is-nav-open .product-mini-menu__panel--nav .product-mini-menu__item {
    max-height: 200px;
    opacity: 1;
    cursor: pointer;
    transition-delay: 0.05s;
}

/* While scrolling to a section, hide non-active items regardless of open state. */
.product-mini-menu__shell.is-scrolling .product-mini-menu__panel--nav .product-mini-menu__item:not(.is-active) {
    max-height: 0 !important;
    opacity: 0 !important;
}

/* Before floating (first paint while still in slot) AND once docked we want
   the shell to behave like a static card — no pointer interaction at all so
   the user can click/focus the form fields underneath. */
.product-mini-menu:not(.is-floating) .product-mini-menu__shell,
.product-mini-menu.is-docking .product-mini-menu__shell {
    pointer-events: none;
}

.product-mini-menu:not(.is-floating) .product-mini-menu__item,
.product-mini-menu.is-docking .product-mini-menu__item {
    cursor: default;
}

/* Docked = inert card. Forces the compact visual (only the active nav item,
   no search, no tabs, no open height) regardless of any stale state. */
.product-mini-menu.is-docked .product-mini-menu__shell {
    min-height: 0;
}

.product-mini-menu.is-docked .product-mini-menu__search-wrap,
.product-mini-menu.is-docked .product-mini-menu__tabs-wrap {
    max-height: 0;
    opacity: 0;
}

.product-mini-menu.is-docked .product-mini-menu__panel--nav .product-mini-menu__item:not(.is-active) {
    max-height: 0;
    opacity: 0;
}

/* ── Nav item inner (visual: padding + flex row layout) ────────────── */

.product-mini-menu__item-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--mini-menu-shell-padding-h);
    transition: background 0.15s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .product-mini-menu__item-inner:hover {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* Product-panel items are anchor tags — reset link styling */
.product-mini-menu__item--product {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Keyboard focus highlight — matches the hover style but applied via JS class
   so it works both on mouse (ArrowDown while typing) and touch (no hover). */
.product-mini-menu__item--product.is-keyboard-focused .product-mini-menu__item-inner {
    background: rgba(255, 255, 255, 0.07);
}

/* ── Thumbnail ─────────────────────────────────────────────────────── */

.product-mini-menu__image {
    flex-shrink: 0;
    width: var(--mini-menu-thumb-w);
    border-radius: 8px;
    overflow: hidden;
}

/* Only the nav panel's active item follows the progress-driven thumb size.
   Product items keep a fixed mini-thumb width regardless of float progress. */
.product-mini-menu.is-floating .product-mini-menu__panel--nav .product-mini-menu__item .product-mini-menu__image {
    width: var(--mini-menu-thumb-current, var(--mini-menu-mini-thumb));
}

.product-mini-menu__item--product .product-mini-menu__image {
    width: var(--mini-menu-mini-thumb);
}

.product-mini-menu__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Icon-type thumbnails (no product photo) */
.product-mini-menu__icon-thumb {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-mini-menu__icon-thumb--placeholder {
    background: #2a2a2a;
    line-height: 0;
}

.product-mini-menu__icon-thumb--placeholder svg {
    width: 24px;
    height: 24px;
    fill: var(--color-white);
    opacity: 0.9;
}

.product-mini-menu__icon-thumb--empresa { background: var(--color-dark-sand); }

.product-mini-menu__icon-thumb--empresa img {
    width: 65%;
    max-width: 65%;
    max-height: 65%;
    height: auto;
    object-fit: contain;
    aspect-ratio: auto;
}

.product-mini-menu__icon-thumb--biosphera {
    background: url('../../images/thumb-bio-product.jpg') center / cover no-repeat;
}

.product-mini-menu__icon-thumb--biosphera svg {
    width: 35%;
    height: auto;
    max-height: 75%;
    color: var(--color-white);
}

.product-mini-menu__icon-thumb--contato { background: var(--color-orange); }

.product-mini-menu__icon-thumb--contato svg {
    width: 22px;
    height: 22px;
    color: var(--color-sand);
    opacity: 0.7;
}

/* ── Body (company label + title) ─────────────────────────────────── */

.product-mini-menu__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.product-mini-menu__company {
    display: block;
    font-size: 11px;
    opacity: 0.4;
    text-transform: uppercase;
    line-height: 1.3;
}

.product-mini-menu__title {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* ── Empty / loading states for products panel ─────────────────────── */

.product-mini-menu__panel-empty,
.product-mini-menu__panel-loading {
    padding: 20px 14px;
    font-size: 13px;
    opacity: 0.55;
    text-align: center;
}

.product-mini-menu__panel-sentinel {
    height: 0;
}

/* ── Progress bar (only visible when floating) ─────────────────────── */

.product-mini-menu__progress {
    display: none;
    padding: 5px 4px 10px;
}

.product-mini-menu.is-floating .product-mini-menu__progress {
    display: block;
}

.product-mini-menu__bar {
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.product-mini-menu__fill {
    height: 100%;
    width: 0;
    background: var(--color-orange);
    border-radius: 3px;
    transition: width 0.05s linear;
}

@media (hover: hover) and (pointer: fine) {
    .product-mini-menu.is-floating .product-mini-menu__shell:not(.is-nav-open):hover .product-mini-menu__panel--nav .product-mini-menu__item.is-active {
        opacity: 0.7 !important;
        background-color: rgba(0, 0, 0, 0.4);
    }
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .product-mini-menu {
        --mini-menu-w: 400px;
        --mini-menu-thumb-w: 130px;
    }
}

@media (max-width: 768px) {
    .product-mini-menu {
        --mini-menu-w: calc(100vw - 20px);
        --mini-menu-thumb-w: 100px;
    }

    .product-mini-menu__progress {
        padding-bottom: 10px;
    }

    .product-mini-menu__shell {
        border-radius: 10px;
    }

    .product-mini-menu__item-inner {
        gap: 10px;
    }

    .product-mini-menu__image { border-radius: 5px; }

    .product-mini-menu__title {
        font-size: 15px;
    }
}