:root {
    --bg: #ffffff;
    --text: #0a0a0a;
    --muted: #6b7280;   /* zinc-500 */
    --line: #e5e7eb;    /* zinc-200 */
    --soft: #f6f7f8;    /* subtle page tint */
    --card: #ffffff;    /* item tiles are pure white */
    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Typography */
    --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --fs-base: 16px;
    --fs-sm: 0.95rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.5rem;

    /* Motion */
    --easing: cubic-bezier(.2,.6,.2,1);
    --dur-fast: 120ms;
    --dur-med: 240ms;
    --dur-slow: 420ms;
    }

    /* -----------------------------
        Base / Reset
    ----------------------------- */
    *,
    *::before,
    *::after { box-sizing: border-box; }

    html, body { height: 100%; }

    html { font-size: var(--fs-base); }

    body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    img { display: block; width: 100%; height: auto; }

    a { color: inherit; text-decoration: none; }

    button { font: inherit; color: inherit; }

    :focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    }

    /* -----------------------------
        Layout helpers
    ----------------------------- */
    .container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1rem;
    }

    .muted { color: var(--muted); font-size: var(--fs-sm); }

    .section { padding: 3rem 0; }
    .section--alt { background: var(--bg); }

    .section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    }

    .section__title {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    }

    /* -----------------------------
        Header
    ----------------------------- */
    .header { border-bottom: 1px solid var(--line); }

    .logo-spot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0;
    }
    .logo-spot img {
    max-height: 150px;
    width: auto;
    }

    .header__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 2.5rem 0;
    }

    /* Decorative vines */
    .vine {
        position: absolute;
        top: -12px;
        width: 360px;   
        height: auto;
        z-index: 10;
        pointer-events: none; 
    }
    
    .vine--left {
        left: 0;
    }
    
    .vine--right {
        right: 0;
    }

    /* Search */
    .search {
    position: relative;
    display: inline-flex;
    align-items: center;
    }
    .search__icon {
    position: absolute;
    left: 0.75rem;
    opacity: 0.6;
    }
    .search__input {
    width: 16rem;
    border: 1px solid var(--line);
    background: #fff;
    padding: 0.6rem 1rem 0.6rem 2.2rem;
    border-radius: var(--radius-pill);
    outline: none;
    }
    .search__input::placeholder { color: var(--muted); }
    .search__input:focus { border-color: #cbd5e1; }

    model-viewer {
        display: inline-block;
        vertical-align: middle;
      }      

    /* Icon buttons */
    .icon-btn {
    height: 36px; width: 36px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-pill);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing);
    }
    .icon-btn:hover { background: var(--soft); border-color: var(--line); }

    /* Buttons */
    .btn {
    background: var(--text);
    color: #fff;
    border: 1px solid var(--text);
    padding: 0.6rem 1rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: 600;
    transition: opacity var(--dur-fast) var(--easing);
    }
    .btn:hover { opacity: 0.9; }

    .btn--outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
    }
    .btn--outline:hover { border-color: #cbd5e1; }

    .btn--ghost {
    background: transparent;
    color: var(--text);
    border: none;
    }

    /* -----------------------------
    Grids (tighten spacing below header)
    ----------------------------- */

    header + main .section:first-of-type { padding-top: 1.25rem; }

    .section--tight-top { padding-top: 1rem !important; }

    /* Base grid */
    .grid { 
    display: grid; 
    gap: 0.875rem; 
    }

    /* Category tiles (hero-esque) */
    .grid--featured { grid-template-columns: 1fr; }
    @media (min-width: 640px) { .grid--featured { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .grid--featured { grid-template-columns: repeat(3, 1fr); } }

    /* Product tiles (square) */
    .grid--products { grid-template-columns: 1fr; }
    @media (min-width: 640px)  { .grid--products { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .grid--products { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1280px) { .grid--products { grid-template-columns: repeat(4, 1fr); } }

    .section__head + .grid { margin-top: 0.5rem; }

    /* -----------------------------
    Category tiles (image + overlay)
    ----------------------------- */
    .tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #fff;                 
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    }
    .tile img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--easing);
    }
    .tile:hover img { transform: scale(1.05); }

    .tile__overlay {
    position: absolute; inset: 0;
    display: flex; align-items: end;
    padding: 1.1rem;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%);
    color: #fff;
    }
    .tile__overlay h3 { margin: 0; font-size: 1.05rem; }
    .tile__overlay p  { margin: 0.25rem 0 0; opacity: 0.9; }

    /* -----------------------------
    Product cards
    ----------------------------- */
    .card {
    background: var(--card);          
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--dur-med) var(--easing), transform var(--dur-med) var(--easing);
    }
    .card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    }

    /* Square media area */
    .card__media {
    position: relative;
    overflow: hidden;
    background: var(--card);          
    }
    .card__media img {
    aspect-ratio: 1 / 1;              
    object-fit: cover;
    transition: transform var(--dur-slow) var(--easing);
    }
    .card:hover .card__media img { transform: scale(1.04); }

    /* Hover "Add" button (centre bottom) */
    .add {
    position: absolute;
    left: 50%; bottom: 0.75rem;
    transform: translateX(-50%);
    display: none;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    }
    .card:hover .add { display: inline-block; }

    /* Badges */
    .badge {
    position: absolute;
    left: 0.75rem; top: 0.75rem;
    background: #0a0a0a; color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    }
    .badge--alt { background: #111827; }

    /* Body */
    .card__body {
    padding: 0.85rem 0.9rem 1.05rem;
    display: grid;
    gap: 0.3rem;
    }
    .card__body h3 {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.25;
    }
    .card__body .muted { font-size: 0.95rem; }

    /* Footer links row */
    .footer__sub .links {
    display: flex; gap: 1rem; flex-wrap: wrap;
    }

    /* Smallest screens */
    @media (max-width: 359px) {
    .search__input { width: 12rem; }
    }

    /* -----------------------------
   Falling leaves/petals 
----------------------------- */
    #leaves {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 5;                 
        overflow: hidden;
    }
    
    /* Vertical fall */
    .leaf {
        position: absolute;
        top: -12vh;
        left: 0;
        animation: leaf-fall var(--dur, 12s) linear forwards;
        will-change: transform;
    }
    
    /* Horizontal meander (separate wrapper so transforms compose) */
    .leaf > .wobble {
        animation: leaf-drift var(--dur, 12s) ease-in-out forwards;
        will-change: transform;
    }
    
    /* Visible sprite */
    .leaf > .wobble > .sprite {
        display: block;
        width: var(--size, 18px);
        height: calc(var(--size, 18px) * 1.25);
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.96;
        filter: hue-rotate(var(--hue, 0deg)) saturate(1.05);
    
        /* 1) gentle tilt forever, 2) fade after a few seconds */
        animation:
        leaf-tilt var(--spin, 9s) ease-in-out infinite,
        leaf-fade 450ms ease-out forwards;
        animation-delay:
        0s,
        var(--fadeDelay, 3s); /* JS sets this to a few seconds-ish */
        will-change: transform, opacity;
    }
    
    /* Keyframes */
    @keyframes leaf-fall { to { transform: translate3d(0, 112vh, 0); } }
    
    @keyframes leaf-drift {
        0%   { transform: translateX(0); }
        25%  { transform: translateX(var(--drift, 28px)); }
        50%  { transform: translateX(calc(var(--drift, 28px) * -0.6)); }
        75%  { transform: translateX(calc(var(--drift, 28px) * 0.4)); }
        100% { transform: translateX(0); }
    }
    
    @keyframes leaf-tilt {
        0%   { rotate: 0deg; }
        25%  { rotate: var(--tilt, 16deg); }
        50%  { rotate: calc(var(--tilt, 16deg) * -0.8); }
        75%  { rotate: calc(var(--tilt, 16deg) * 0.6); }
        100% { rotate: 0deg; }
    }
    
    @keyframes leaf-fade { to { opacity: 0; } }
    
    @media (max-width: 640px) {
        .leaf > .wobble > .sprite { width: 14px; }
    }