.floating-tools {
    position: fixed;
    right: 22px;
    top: 50%;
    z-index: 80;
    display: grid;
    gap: 9px;
    padding: 9px;
    border: 1px solid rgba(197, 165, 101, .36);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(12, 31, 25, .96), rgba(21, 49, 39, .92));
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
    backdrop-filter: blur(16px);
    transform: translateY(-50%);
}

.floating-tools.is-temporarily-hidden {
    display: none;
}

.floating-tools-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 2px 3px 8px;
    color: rgba(249, 247, 239, .68);
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.floating-tools-close b {
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
}

.floating-tools-close:hover,
.floating-tools-close:focus-visible {
    color: #f1dca8;
    outline: none;
}

.floating-tool {
    box-sizing: border-box;
    width: 72px;
    min-height: 68px;
    display: grid;
    place-items: center;
    gap: 5px;
    padding: 9px 6px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    color: #f9f7ef;
    background: rgba(255, 255, 255, .07);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.floating-tool svg {
    width: 27px;
    height: 27px;
    fill: currentColor;
}

.floating-tool.treasure-tool svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-fly-item {
    position: fixed;
    z-index: 1000;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 50%;
    color: #172019;
    background: linear-gradient(135deg, #f1dca8, #c8a361);
    box-shadow: 0 14px 34px rgba(7, 19, 15, .3);
    pointer-events: none;
}

.cart-fly-item svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.floating-tool.cart-arrived {
    animation: floating-cart-arrived .48s cubic-bezier(.2, .9, .25, 1);
}

@keyframes floating-cart-arrived {
    0%, 100% { transform: scale(1); }
    45% { color: #172019; background: linear-gradient(135deg, #f1dca8, #c8a361); transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .floating-tool.cart-arrived { animation: none; }
}

.floating-tool:hover,
.floating-tool:focus-visible {
    color: #172019;
    border-color: rgba(255, 255, 255, .65);
    background: linear-gradient(135deg, #ead39e, #c8a361);
    outline: none;
    transform: translateX(-4px);
}

.floating-group { position: relative; }

.floating-group-card {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    display: grid;
    width: 190px;
    justify-items: center;
    gap: 8px;
    border: 1px solid rgba(197, 165, 101, .42);
    border-radius: 12px;
    padding: 16px;
    color: #173026;
    background: #fff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .2);
    opacity: 0;
    pointer-events: none;
    transform: translate(8px, -50%);
    transition: opacity .18s ease, transform .18s ease;
}

.floating-group-card::after {
    position: absolute;
    top: calc(50% - 7px);
    left: 100%;
    border: 7px solid transparent;
    border-left-color: #fff;
    content: "";
}

.floating-group-card strong { font-size: 15px; }
.floating-group-card img { width: 150px; height: 150px; object-fit: contain; background: #fff; }
.floating-group-card span { color: #718078; font-size: 12px; }

.floating-group:hover .floating-group-card,
.floating-group:focus-within .floating-group-card {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
}

.floating-cart-preview {
    position: fixed;
    z-index: 79;
    width: 310px;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid rgba(197, 165, 101, .42);
    border-radius: 13px;
    color: #21352c;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 52px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.floating-cart-preview.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.floating-cart-preview-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #eee8dc; }
.floating-cart-preview-head strong { font-size: 16px; }
.floating-cart-preview-head span { color: #8a7653; font-size: 12px; }
.floating-cart-preview-list { display: grid; gap: 9px; padding-top: 10px; }
.floating-cart-preview-item { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.floating-cart-preview-item img { width: 54px; height: 46px; border-radius: 7px; object-fit: cover; background: #eee; }
.floating-cart-preview-copy { min-width: 0; display: grid; gap: 5px; }
.floating-cart-preview-copy strong { overflow: hidden; color: #263a31; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.floating-cart-preview-copy span { color: #a07127; font-size: 13px; font-weight: 800; }
.floating-cart-preview-empty { margin: 0; padding: 22px 8px; color: #77837d; font-size: 13px; text-align: center; }
.floating-cart-preview-action { min-height: 36px; display: flex; align-items: center; justify-content: center; margin-top: 12px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #3b8065, #1d5b44); font-size: 13px; font-weight: 800; text-decoration: none; }

@media (max-width: 768px) {
    .floating-cart-preview { display: none; }
}

@media (max-width: 768px) {
    .floating-tools {
        right: 12px;
        top: auto;
        bottom: 14px;
        grid-template-columns: repeat(3, auto);
        transform: none;
    }

    .floating-tools-close {
        grid-column: 1 / -1;
    }

    .floating-tool { width: 60px; min-height: 56px; padding: 7px 4px; font-size: 11px; }
    .floating-tool svg { width: 22px; height: 22px; }
    .floating-group-card { right: 0; top: auto; bottom: calc(100% + 14px); transform: translateY(8px); }
    .floating-group-card::after { left: auto; right: 23px; top: 100%; border-color: transparent; border-top-color: #fff; }
    .floating-group:hover .floating-group-card,
    .floating-group:focus-within .floating-group-card { transform: translateY(0); }
}
