/* Decorative micro-layer — the polish that compounds (Sprint 2.5).
 *
 * Small reusable primitives that lift sections from "clean" to "premium":
 * hover-zoom media, numbered badges, decorative quote mark, frosted pill, logo
 * glow. All surface-aware (read --surface-* vars) and motion-safe. Colours come
 * from tokens only. */

/* ---- Hover-zoom media ---- *
 * Wrap any image in .hb-zoom; the image scales on hover, clipped by the frame.
 * Shared by category cards, product cards, gallery tiles. */
.hb-zoom { overflow: hidden; }
.hb-zoom > img,
.hb-zoom img.hb-zoom__img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
    will-change: transform;
}
.hb-zoom:hover > img,
.hb-zoom:hover img.hb-zoom__img,
.hb-zoom:focus-within img { transform: scale(1.05); }

/* ---- Numbered badge (01–05) ---- *
 * For "how to order" steps, "why us" cards. Big, gold, tabular. */
.hb-numbox {
    font-family: var(--font-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h2);
    line-height: 1;
    color: var(--surface-accent);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

/* ---- Decorative quote mark ---- *
 * Place .hb-quote on a relatively-positioned testimonial; the gold serif “ sits
 * above the text. */
.hb-quote { position: relative; }
.hb-quote::before {
    content: "\201F";
    position: absolute;
    inset-block-start: -.38em;
    inset-inline-start: -.06em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--surface-accent);
    opacity: .35;
    pointer-events: none;
}

/* ---- Frosted-glass pill ---- *
 * Breadcrumb / price / meta chip that floats over photography. */
.hb-pill-frost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: rgba(35, 31, 32, .42);
    backdrop-filter: saturate(140%) blur(6px);
    box-shadow: inset 0 0 0 1px rgba(242, 196, 133, .35);
    color: var(--hb-cream);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}

/* ---- Logo glow ---- *
 * For a logo placed over a hero photo — gold halo so it reads on busy imagery. */
.hb-logo--glow {
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .5))
            drop-shadow(0 0 24px rgba(242, 196, 133, .30));
}

/* ---- Count-up number (About stats) ---- *
 * reveal.js animates [data-count-up]; this is the rest state + tabular lock so
 * the digits don't reflow as they tick. */
.hb-countup { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .hb-zoom:hover > img,
    .hb-zoom:hover img.hb-zoom__img,
    .hb-zoom:focus-within img { transform: none; }
}