/* ============================================================
   FLAVOR MENU v11.29.0 - Frontend
   ============================================================ */
*{box-sizing:border-box}

/* ─────────────────────────────────────────────────────────
   v11.28.0 — Performance / smoothness primitives.
   These tiny rules cost nothing and dramatically improve
   perceived smoothness, especially on mid-range Android.
   - GPU compositing for elements that animate often.
   - paint/layout containment to stop scroll inside the menu
     from forcing the whole document to re-layout.
   - smoother momentum scrolling on iOS.
   ───────────────────────────────────────────────────────── */
.flavor-wrap{
    -webkit-overflow-scrolling:touch;
    contain:layout style;
}
.fm-card,
.fm-cat-item,
.fm-popup,
.fm-popup-overlay,
.fm-popup-card,
.fm-popup-card-inner,
.fm-section{
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
/* Hint the compositor about WHICH properties will animate so it
   pre-allocates a layer instead of paying for one mid-animation. */
.fm-card,
.fm-cat-item{will-change:transform;}
.fm-cat-item.active{will-change:transform,box-shadow,background;}
.fm-popup{will-change:transform;}
.fm-popup-overlay{will-change:opacity, background-color;}
/* v11.36.0 — sections get paint containment for faster layout/scroll */
.fm-section{contain:layout paint;}

/* Respect reduced-motion globally inside our wrap. */
@media (prefers-reduced-motion: reduce){
    .flavor-wrap *,
    .flavor-wrap *::before,
    .flavor-wrap *::after{
        animation-duration:0.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:0.15s!important;
        scroll-behavior:auto!important;
    }
}

.flavor-wrap{
    max-width:var(--fm-max-w,900px);
    margin:0 auto;
    background:var(--fm-bg,#f5f5f5);
    position:relative;
    padding-bottom:100px;
    padding-top:0;
    font-family:inherit;
    line-height:1.5;
    /* v11.18.4 — eliminate phantom gap above the catbar in any layout */
    min-height:100vh;
}
/* v11.18.4 — make sure no margin sneaks above the first child of the wrap */
.flavor-wrap > *:first-child{margin-top:0!important;}
.flavor-wrap .fm-sidebar-container{margin-top:0;}
.flavor-wrap .fm-sidebar-container > *:first-child{margin-top:0!important;}

/* Fixed background */
.flavor-wrap.fm-bg-fixed{
    background-attachment:fixed!important;
}

/* LTR support */
.flavor-wrap[data-lang="en"]{text-align:left}
.flavor-wrap[data-lang="en"] .fm-card-body{text-align:left}

/* === CATEGORY BAR === */
.fm-catbar{
    position:sticky;
    top:var(--fm-catbar-sticky,0px);
    z-index:200;
    background:var(--fm-catbar-bg,#fff);
    padding:var(--fm-catbar-pad,8px) 0 2px;
    margin-top:0;
    box-shadow:var(--fm-catbar-shadow,0 1px 6px rgba(0,0,0,.06));
    transition:box-shadow .3s;
}

/* Classic mode: ensure catbar flush to top of wrap (no gap above) */
.flavor-wrap:not(.fm-layout-sidebar):not([data-header="1"]) .fm-catbar{
    margin-top:0;
}
.fm-catbar-themed{
    background:var(--fm-catbar-bg,#fff)!important;
    backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);
}

.fm-catbar-scroll{
    display:flex;gap:var(--fm-catbar-gap,4px);
    overflow-x:auto;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;padding:0 6px;
    scrollbar-width:none;
}
.fm-catbar-scroll::-webkit-scrollbar{display:none}

.fm-catbar-track{
    height:3px;margin:4px 10px 0;border-radius:2px;
    background:var(--fm-catbar-scrollbar,#eee);
    position:relative;overflow:hidden;
    display:none;
}
.fm-catbar-track.visible{display:block}
.fm-catbar-thumb{
    height:100%;border-radius:2px;
    background:var(--fm-catbar-scrollbar-active,#888);
    position:absolute;top:0;left:0;
    min-width:20px;
    transition:left .15s ease, width .15s ease;
}

.fm-cat-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:54px;padding:var(--fm-catbar-ipy,4px) var(--fm-catbar-ipx,8px);
    border-radius:var(--fm-catbar-radius,12px);
    border:var(--fm-catbar-bw,1px) solid var(--fm-catbar-border-color,#e8e8e8);
    text-decoration:none!important;color:var(--fm-catbar-text,#555);
    cursor:pointer;flex-shrink:0;text-align:center;
    background:transparent;transition:background .15s cubic-bezier(.4,0,.2,1),
               color .15s cubic-bezier(.4,0,.2,1),
               border-color .15s cubic-bezier(.4,0,.2,1),
               box-shadow .18s cubic-bezier(.4,0,.2,1),
               border-width .15s cubic-bezier(.4,0,.2,1);
}
.fm-cat-item:hover{background:rgba(0,0,0,.02);color:var(--fm-catbar-text,#555)}
.fm-cat-item.active{
    border-color:var(--fm-catbar-active-border,#2d2d2d);
    border-width:2px;
    background:var(--fm-catbar-active-bg,#fff);
    color:var(--fm-catbar-active-text,#1a1a1a);
    box-shadow:0 2px 12px rgba(0,0,0,.12),0 0 0 1px color-mix(in srgb,var(--fm-catbar-active-border,#2d2d2d) 18%,transparent);
}

.fm-cat-icon-wrap{
    width:var(--fm-catbar-icon,36px);height:var(--fm-catbar-icon,36px);
    display:flex;align-items:center;justify-content:center;margin-bottom:1px;
}
.fm-cat-icon{width:100%;height:100%;object-fit:contain;border-radius:50%}
.fm-cat-icon-svg{width:60%;height:60%;color:#bbb}
.fm-cat-label{font-size:var(--fm-catbar-font,12px);font-weight:500;white-space:nowrap;line-height:1.3}

/* === SECTIONS === */
.fm-sections{padding:14px 12px 0}
.fm-section{margin-bottom:var(--fm-sec-gap,32px)}

.fm-section-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:0 4px}
.fm-section-title{
    font-size:var(--fm-sh-size,20px);font-weight:var(--fm-sh-weight,700);
    color:var(--fm-sh-color,#1a1a1a);white-space:nowrap;margin:0;padding:0;
    display:flex;align-items:center;gap:8px;
}
.fm-section-title-icon{width:28px;height:28px;border-radius:50%;object-fit:cover}
.fm-section-line{flex:1;height:2px;background:var(--fm-sh-line,#e0e0e0);border-radius:2px}

/* === Category Heading Box Styles (19 total) === */
.fm-heading-box-default .fm-section-title{padding:0}

/* Wings */
.fm-heading-box-wings{justify-content:center;position:relative;gap:0}
.fm-heading-box-wings .fm-section-line{display:none}
.fm-heading-box-wings .fm-section-title{
    position:relative;padding:8px 40px;
    background:var(--fm-card-bg,#fff);
    border-radius:20px;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.fm-heading-box-wings .fm-section-title::before,
.fm-heading-box-wings .fm-section-title::after{
    content:'';position:absolute;top:50%;width:30px;height:22px;
    transform:translateY(-50%);
    background:var(--fm-sh-color,#1a1a1a);
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    opacity:.6;
}
.fm-heading-box-wings .fm-section-title::before{
    right:calc(100% + 6px);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M40 15C32 5 20 2 0 0c8 5 14 10 16 15-2 5-8 10-16 15 20-2 32-5 40-15z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M40 15C32 5 20 2 0 0c8 5 14 10 16 15-2 5-8 10-16 15 20-2 32-5 40-15z'/%3E%3C/svg%3E");
}
.fm-heading-box-wings .fm-section-title::after{
    left:calc(100% + 6px);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 15C8 5 20 2 40 0c-8 5-14 10-16 15 2 5 8 10 16 15-20-2-32-5-40-15z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 15C8 5 20 2 40 0c-8 5-14 10-16 15 2 5 8 10 16 15-20-2-32-5-40-15z'/%3E%3C/svg%3E");
}

/* Ribbon */
.fm-heading-box-ribbon{justify-content:center;gap:0}
.fm-heading-box-ribbon .fm-section-line{display:none}
.fm-heading-box-ribbon .fm-section-title{
    padding:6px 32px;position:relative;
    background:var(--fm-sh-color,#1a1a1a);color:var(--fm-card-bg,#fff)!important;
    clip-path:polygon(10% 0%,90% 0%,100% 50%,90% 100%,10% 100%,0% 50%);
}

/* Banner */
.fm-heading-box-banner{justify-content:center;gap:0}
.fm-heading-box-banner .fm-section-line{display:none}
.fm-heading-box-banner .fm-section-title{
    padding:8px 36px;position:relative;
    background:linear-gradient(135deg,var(--fm-sh-color,#1a1a1a),var(--fm-catbar-active-border,#333));
    color:var(--fm-card-bg,#fff)!important;
    border-radius:4px;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
}

/* Underline */
.fm-heading-box-underline{flex-direction:column;align-items:center;gap:6px}
.fm-heading-box-underline .fm-section-line{display:none}
.fm-heading-box-underline .fm-section-title::after{
    content:'';display:block;width:60%;height:3px;margin:4px auto 0;
    background:var(--fm-catbar-active-border,#2d2d2d);border-radius:2px;
}

/* Bracket */
.fm-heading-box-bracket{justify-content:center;gap:0}
.fm-heading-box-bracket .fm-section-line{display:none}
.fm-heading-box-bracket .fm-section-title{
    padding:6px 24px;
    border:2px solid var(--fm-sh-color,#1a1a1a);border-radius:0;position:relative;
}

/* Leaf */
.fm-heading-box-leaf{justify-content:center;gap:0}
.fm-heading-box-leaf .fm-section-line{display:none}
.fm-heading-box-leaf .fm-section-title{
    padding:8px 30px;
    background:var(--fm-card-bg,#fff);border-radius:50px;
    border:2px solid var(--fm-sh-line,#e0e0e0);position:relative;
}
.fm-heading-box-leaf .fm-section-title::before,.fm-heading-box-leaf .fm-section-title::after{
    content:'';position:absolute;top:50%;transform:translateY(-50%);font-size:16px;
    width:20px;height:20px;
    background:var(--fm-sh-color,#1a1a1a);opacity:.4;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/%3E%3C/svg%3E");
    -webkit-mask-size:contain;mask-size:contain;
}
.fm-heading-box-leaf .fm-section-title::before{right:calc(100% + 4px)}
.fm-heading-box-leaf .fm-section-title::after{left:calc(100% + 4px);transform:translateY(-50%) scaleX(-1)}

/* Diamond */
.fm-heading-box-diamond{justify-content:center;gap:0}
.fm-heading-box-diamond .fm-section-line{display:none}
.fm-heading-box-diamond .fm-section-title{padding:6px 30px;position:relative}
.fm-heading-box-diamond .fm-section-title::before,.fm-heading-box-diamond .fm-section-title::after{
    content:'';position:absolute;top:50%;transform:translateY(-50%) rotate(45deg);
    width:8px;height:8px;background:var(--fm-sh-color,#1a1a1a);
}
.fm-heading-box-diamond .fm-section-title::before{right:calc(100% + 8px)}
.fm-heading-box-diamond .fm-section-title::after{left:calc(100% + 8px)}

/* Gradbar */
.fm-heading-box-gradbar{justify-content:center;gap:0}
.fm-heading-box-gradbar .fm-section-line{display:none}
.fm-heading-box-gradbar .fm-section-title{
    padding:8px 28px;
    background:linear-gradient(90deg, transparent, var(--fm-sh-line,#e0e0e0) 20%, var(--fm-sh-line,#e0e0e0) 80%, transparent);
    border-radius:8px;
}

/* --- 10 NEW HEADING STYLES --- */
/* Glow */
.fm-heading-box-glow{justify-content:center;gap:0}
.fm-heading-box-glow .fm-section-line{display:none}
.fm-heading-box-glow .fm-section-title{
    padding:8px 28px;
    background:var(--fm-card-bg,#fff);border-radius:12px;
    box-shadow:0 0 20px rgba(79,70,229,.15),0 2px 8px rgba(0,0,0,.06);
}

/* Pill */
.fm-heading-box-pill{justify-content:center;gap:0}
.fm-heading-box-pill .fm-section-line{display:none}
.fm-heading-box-pill .fm-section-title{
    padding:6px 24px;
    background:var(--fm-catbar-active-border,#2d2d2d);color:var(--fm-card-bg,#fff)!important;
    border-radius:50px;font-size:calc(var(--fm-sh-size,20px) * 0.85);
}

/* Dotted */
.fm-heading-box-dotted{justify-content:center;gap:0}
.fm-heading-box-dotted .fm-section-line{display:none}
.fm-heading-box-dotted .fm-section-title{
    padding:6px 20px;
    border:2px dotted var(--fm-sh-color,#1a1a1a);border-radius:8px;
}

/* Shadow lift */
.fm-heading-box-shadowlift{justify-content:center;gap:0}
.fm-heading-box-shadowlift .fm-section-line{display:none}
.fm-heading-box-shadowlift .fm-section-title{
    padding:10px 30px;
    background:var(--fm-card-bg,#fff);border-radius:14px;
    box-shadow:0 8px 30px rgba(0,0,0,.1);
    transform:translateY(-2px);
}

/* Tag */
.fm-heading-box-tag{justify-content:center;gap:0}
.fm-heading-box-tag .fm-section-line{display:none}
.fm-heading-box-tag .fm-section-title{
    padding:6px 24px 6px 16px;position:relative;
    background:var(--fm-sh-color,#1a1a1a);color:var(--fm-card-bg,#fff)!important;
    border-radius:0 8px 8px 0;
}
.fm-heading-box-tag .fm-section-title::before{
    content:'';position:absolute;right:100%;top:0;
    border:calc(var(--fm-sh-size,20px)*0.5 + 6px) solid transparent;
    border-right-color:var(--fm-sh-color,#1a1a1a);
}

/* Neon */
.fm-heading-box-neon{justify-content:center;gap:0}
.fm-heading-box-neon .fm-section-line{display:none}
.fm-heading-box-neon .fm-section-title{
    padding:8px 24px;
    border:2px solid var(--fm-catbar-active-border,#2d2d2d);border-radius:8px;
    box-shadow:0 0 10px var(--fm-catbar-active-border,#2d2d2d),inset 0 0 10px rgba(0,0,0,.05);
}

/* Elegant */
.fm-heading-box-elegant{justify-content:center;gap:0}
.fm-heading-box-elegant .fm-section-line{display:none}
.fm-heading-box-elegant .fm-section-title{
    padding:6px 30px;position:relative;
    letter-spacing:1px;
}
.fm-heading-box-elegant .fm-section-title::before,.fm-heading-box-elegant .fm-section-title::after{
    content:'';position:absolute;width:40px;height:1px;top:50%;
    background:var(--fm-sh-color,#1a1a1a);opacity:.4;
}
.fm-heading-box-elegant .fm-section-title::before{right:calc(100% + 6px)}
.fm-heading-box-elegant .fm-section-title::after{left:calc(100% + 6px)}

/* Stamp */
.fm-heading-box-stamp{justify-content:center;gap:0}
.fm-heading-box-stamp .fm-section-line{display:none}
.fm-heading-box-stamp .fm-section-title{
    padding:8px 20px;
    border:3px double var(--fm-sh-color,#1a1a1a);border-radius:4px;
}

/* Wave */
.fm-heading-box-wave{justify-content:center;gap:0}
.fm-heading-box-wave .fm-section-line{display:none}
.fm-heading-box-wave .fm-section-title{
    padding:8px 24px 12px;position:relative;
}
.fm-heading-box-wave .fm-section-title::after{
    content:'';position:absolute;bottom:0;left:10%;right:10%;height:4px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6'%3E%3Cpath d='M0 3Q5 0 10 3Q15 6 20 3Q25 0 30 3Q35 6 40 3' fill='none' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
    background-size:40px 6px;
    opacity:.5;
}

/* Gradient text */
.fm-heading-box-gradtext{justify-content:center;gap:0}
.fm-heading-box-gradtext .fm-section-line{display:none}
.fm-heading-box-gradtext .fm-section-title{
    padding:6px 20px;
    background:linear-gradient(135deg,var(--fm-sh-color,#1a1a1a),var(--fm-catbar-active-border,#555));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}

/* === Category Color Separation === */
.fm-cat-sep{
    padding:14px 12px;border-radius:14px;margin-bottom:var(--fm-sec-gap,32px);
    border:2px solid transparent;
    transition:all .3s ease;
}
.fm-cat-sep-0{border-color:rgba(79,70,229,.25);background:rgba(79,70,229,.04)}
.fm-cat-sep-1{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.04)}
.fm-cat-sep-2{border-color:rgba(16,185,129,.25);background:rgba(16,185,129,.04)}
.fm-cat-sep-3{border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.04)}
.fm-cat-sep-4{border-color:rgba(139,92,246,.25);background:rgba(139,92,246,.04)}
.fm-cat-sep-5{border-color:rgba(236,72,153,.25);background:rgba(236,72,153,.04)}
.fm-cat-sep-6{border-color:rgba(6,182,212,.25);background:rgba(6,182,212,.04)}
.fm-cat-sep-7{border-color:rgba(251,146,60,.25);background:rgba(251,146,60,.04)}

.fm-cat-sep-0 .fm-section-title{color:rgba(79,70,229,1)!important}
.fm-cat-sep-0 .fm-section-line{background:rgba(79,70,229,.2)!important}
.fm-cat-sep-1 .fm-section-title{color:rgba(220,38,38,1)!important}
.fm-cat-sep-1 .fm-section-line{background:rgba(220,38,38,.2)!important}
.fm-cat-sep-2 .fm-section-title{color:rgba(16,185,129,1)!important}
.fm-cat-sep-2 .fm-section-line{background:rgba(16,185,129,.2)!important}
.fm-cat-sep-3 .fm-section-title{color:rgba(245,158,11,1)!important}
.fm-cat-sep-3 .fm-section-line{background:rgba(245,158,11,.2)!important}
.fm-cat-sep-4 .fm-section-title{color:rgba(139,92,246,1)!important}
.fm-cat-sep-4 .fm-section-line{background:rgba(139,92,246,.2)!important}
.fm-cat-sep-5 .fm-section-title{color:rgba(236,72,153,1)!important}
.fm-cat-sep-5 .fm-section-line{background:rgba(236,72,153,.2)!important}
.fm-cat-sep-6 .fm-section-title{color:rgba(6,182,212,1)!important}
.fm-cat-sep-6 .fm-section-line{background:rgba(6,182,212,.2)!important}
.fm-cat-sep-7 .fm-section-title{color:rgba(251,146,60,1)!important}
.fm-cat-sep-7 .fm-section-line{background:rgba(251,146,60,.2)!important}

/* === CARDS - FIXED LAYOUT === */
.fm-cards{display:flex;flex-direction:column;gap:var(--fm-card-gap,14px)}

.fm-card{
    display:flex;flex-direction:column;
    background:var(--fm-card-bg,#fff);
    border-radius:var(--fm-card-radius,16px);
    box-shadow:var(--fm-card-shadow,0 1px 8px rgba(0,0,0,.07));
    border:var(--fm-card-bw,0px) solid var(--fm-card-border,transparent);
    overflow:hidden;
    /* v11.28.0 — single smooth ease for everything that can change. */
    transition:transform .22s cubic-bezier(.16,1,.3,1),
               box-shadow .25s ease-out,
               border-color .35s ease,
               background .35s ease;
    position:relative;padding:var(--fm-card-pad,10px);
}
.fm-card:hover{
    transform:translateY(var(--fm-card-hover-y,-2px));
    box-shadow:var(--fm-card-hover-shadow,0 6px 24px rgba(0,0,0,.12));
}

/* Top row: image + body (title, desc, price) side by side */
.fm-card-top-row{
    display:flex;flex-direction:row;gap:10px;
}
/* v11.18.0 — disabled per user request: caused layout bug in several presets
[dir="rtl"] .fm-card.fm-card-img-left .fm-card-top-row{flex-direction:row-reverse}
[dir="ltr"] .fm-card.fm-card-img-right .fm-card-top-row{flex-direction:row-reverse}
*/

.fm-card.fm-card-dir-column .fm-card-top-row{flex-direction:column}
.fm-card.fm-card-dir-column.fm-card-img-left .fm-card-top-row,
.fm-card.fm-card-dir-column.fm-card-img-right .fm-card-top-row{flex-direction:column}

/* IMAGE - contained */
.fm-card-img-wrap{
    position:relative;flex-shrink:0;
    width:var(--fm-img-w,160px);height:var(--fm-img-h,160px);
    border-radius:var(--fm-img-radius,14px);overflow:hidden;
    min-height:0;max-height:var(--fm-img-h,160px);
}
.fm-card-dir-column .fm-card-img-wrap{width:100%;height:var(--fm-img-h,160px)}
.fm-card-img{width:100%;height:100%;object-fit:var(--fm-img-fit,cover);display:block;transition:transform .3s ease}
.fm-card:hover .fm-card-img{transform:scale(1.04)}
.fm-card-img-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f8f8f8}
.fm-card-clickable{cursor:pointer}

/* BADGE */
.fm-badge{
    position:absolute;z-index:5;
    background:var(--fm-badge-bg,#4caf50);color:var(--fm-badge-text,#fff);
    font-size:var(--fm-badge-size,11px);padding:3px 8px;
    border-radius:0 0 var(--fm-badge-radius,8px) 0;
    font-weight:600;line-height:1.4;
    top:0;left:0;
}

/* BODY */
.fm-card-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden;padding:2px 4px}
.fm-card-info{flex:1;min-height:0}
.fm-card-title{font-size:var(--fm-title-size,17px);font-weight:var(--fm-title-weight,700);color:var(--fm-title-color,#1a1a1a);margin:0 0 3px;line-height:1.4}
.fm-card-desc{
    font-size:var(--fm-desc-size,12px);color:var(--fm-desc-color,#999);line-height:1.7;margin:0;
    display:-webkit-box;-webkit-line-clamp:var(--fm-desc-lines,2);-webkit-box-orient:vertical;overflow:hidden;
}
.fm-card-price{font-size:var(--fm-price-size,14px);font-weight:var(--fm-price-weight,600);color:var(--fm-price-color,#666);white-space:nowrap;margin-top:4px}

/* Bottom row: shortcode + metas - FULL WIDTH below image */
.fm-card-bottom-row{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:4px;padding-top:4px;gap:6px;
    border-top:1px solid rgba(0,0,0,.04);
}
.fm-card-bottom-row.no-meta{border-top:none;margin-top:2px;padding-top:2px}
.fm-card-metas{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.fm-meta{
    display:inline-flex;align-items:center;gap:3px;
    font-size:var(--fm-meta-size,11px);color:var(--fm-meta-text,#777);
    background:var(--fm-meta-bg,#f5f5f5);
    padding:var(--fm-meta-py,4px) var(--fm-meta-px,10px);
    border-radius:var(--fm-meta-radius,20px);white-space:nowrap;
}
.fm-meta-svg{width:14px;height:14px;flex-shrink:0}
.fm-card-btn{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end}
.fm-card-sc-area{flex-shrink:0}

/* RTL/LTR adjustments - shortcode first (right in RTL), metas second */
[dir="rtl"] .fm-card-bottom-row{flex-direction:row}
[dir="rtl"] .fm-card-metas{justify-content:flex-end}
[dir="rtl"] .fm-card-sc-area{justify-content:flex-start}
[dir="ltr"] .fm-card-bottom-row{flex-direction:row-reverse}
[dir="ltr"] .fm-card-sc-area{justify-content:flex-start}

/* === Item Borders === */
.fm-card[data-item-border="1"] .fm-card-title,
[data-item-border="1"] .fm-card-title{
    border:var(--fm-item-bw,1px) var(--fm-item-bs,solid) var(--fm-catbar-active-border,#2d2d2d);
    border-radius:var(--fm-item-br,6px);padding:2px 6px;display:inline-block;
}
[data-item-border="1"][data-item-border-targets*="price"] .fm-card-price{
    border:var(--fm-item-bw,1px) var(--fm-item-bs,solid) var(--fm-catbar-active-border,#2d2d2d);
    border-radius:var(--fm-item-br,6px);padding:2px 6px;display:inline-block;
}
[data-item-border="1"][data-item-border-targets*="desc"] .fm-card-desc{
    border:var(--fm-item-bw,1px) var(--fm-item-bs,solid) var(--fm-sh-line,#e0e0e0);
    border-radius:var(--fm-item-br,6px);padding:4px 8px;
}
[data-item-border="1"][data-item-border-targets*="meta"] .fm-meta{
    border:var(--fm-item-bw,1px) var(--fm-item-bs,solid) var(--fm-meta-text,#777);
}

/* === Cart Highlight Effects === */
.fm-card.fm-in-cart{
    transition:all .5s cubic-bezier(.4,0,.2,1);
}
/* Glow */
.fm-card.fm-in-cart.fm-hl-glow{
    box-shadow:0 0 20px rgba(79,70,229,.3),0 0 40px rgba(79,70,229,.1);
    border-color:var(--fm-catbar-active-border,#4f46e5)!important;
}
/* Pulse border */
.fm-card.fm-in-cart.fm-hl-pulse{
    border-color:var(--fm-catbar-active-border,#4f46e5)!important;
    animation:fmCartPulse 2s ease-in-out infinite;
}
@keyframes fmCartPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.2)}
    50%{box-shadow:0 0 0 8px rgba(79,70,229,0)}
}
/* Shine */
.fm-card.fm-in-cart.fm-hl-shine{
    border-color:var(--fm-catbar-active-border,#4f46e5)!important;
    overflow:hidden;
}
.fm-card.fm-in-cart.fm-hl-shine::after{
    content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);
    animation:fmCartShine 3s ease-in-out infinite;
    pointer-events:none;
}
@keyframes fmCartShine{
    0%{transform:translateX(-100%) rotate(0)}
    100%{transform:translateX(100%) rotate(0)}
}
/* Gradient border */
.fm-card.fm-in-cart.fm-hl-gradient{
    border:2px solid transparent!important;
    background-clip:padding-box;
    position:relative;
}
.fm-card.fm-in-cart.fm-hl-gradient::before{
    content:'';position:absolute;inset:-2px;border-radius:calc(var(--fm-card-radius,16px) + 2px);
    background:conic-gradient(from 0deg,var(--fm-catbar-active-border,#4f46e5),var(--fm-badge-bg,#4caf50),var(--fm-price-color,#666),var(--fm-catbar-active-border,#4f46e5));
    z-index:-1;animation:fmGradSpin 4s linear infinite;
}
@keyframes fmGradSpin{to{transform:rotate(360deg)}}

/* ============================================================
   POPUP - COMPLETELY REDESIGNED
   ============================================================ */
.fm-popup-overlay{
    display:none;position:fixed;inset:0;z-index:99999;
    background:rgba(0,0,0,0);
    align-items:flex-end;justify-content:center;
    transition:background .4s cubic-bezier(.4,0,.2,1);
    backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
}
.fm-popup-overlay.open{
    display:flex;
    background:rgba(0,0,0,.3);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.fm-popup{
    width:100%;max-width:500px;height:92vh;
    background:transparent;
    position:relative;
    transform:translateY(100%);
    transition:transform .5s cubic-bezier(.32,.72,0,1);
    display:flex;flex-direction:column;
    border-radius:24px 24px 0 0;
    overflow:hidden;
}
.fm-popup-overlay.open .fm-popup{transform:translateY(0)}

.fm-popup-glass-header{
    position:sticky;top:0;z-index:20;
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
    border-bottom:1px solid rgba(255,255,255,.3);
    padding:0;
    border-radius:24px 24px 0 0;
}
.fm-popup-handle{
    width:40px;height:5px;background:rgba(0,0,0,.15);border-radius:3px;
    margin:12px auto 10px;
}
.fm-popup-cat-scroll{
    display:flex;gap:4px;overflow-x:auto;padding:0 16px 12px;
    scrollbar-width:none;
}
.fm-popup-cat-scroll::-webkit-scrollbar{display:none}
.fm-popup-cat-item{
    padding:6px 14px;border-radius:18px;white-space:nowrap;
    font-size:12px;font-weight:500;cursor:pointer;
    background:rgba(255,255,255,.5);color:#666;
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.4);
    transition:all .25s;flex-shrink:0;
}
.fm-popup-cat-item.active{
    background:rgba(255,255,255,.85);color:#1a1a1a;
    border-color:rgba(0,0,0,.12);font-weight:600;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* Close button - BIGGER + theme-aware (v11.44.0)
   Previously a faint translucent white circle that was hard to spot on
   light cards. Now it uses the menu's active accent color so it stands
   out against any theme, with a solid fill, ring and shadow. Falls back
   to a dark chip when no theme vars are present (e.g. very old saves). */
.fm-popup-close{
    position:absolute;top:12px;right:16px;z-index:30;
    width:44px;height:44px;border-radius:50%;
    background:var(--fm-catbar-active-bg,#2d2d2d);
    color:var(--fm-catbar-active-text,#ffffff);
    border:2px solid var(--fm-catbar-active-border,rgba(255,255,255,.85));
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    font-size:20px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:transform .2s, box-shadow .2s, filter .2s;
    box-shadow:0 4px 14px rgba(0,0,0,.28),0 0 0 4px rgba(255,255,255,.55);
}
.fm-popup-close svg{stroke:currentColor;width:20px;height:20px}
[dir="ltr"] .fm-popup-close{right:auto;left:16px}
.fm-popup-close:hover{
    transform:scale(1.1);
    filter:brightness(1.08);
    box-shadow:0 6px 20px rgba(0,0,0,.34),0 0 0 5px rgba(255,255,255,.7);
}
.fm-popup-close:active{transform:scale(.95)}

.fm-popup-scroll{
    flex:1;overflow-y:auto;overflow-x:hidden;
    scroll-snap-type:y mandatory;
    -webkit-overflow-scrolling:touch;
    background:transparent;
    scroll-behavior:smooth;
}
.fm-popup-scroll::-webkit-scrollbar{width:0;display:none}

/* Popup card - SMALLER, with peek effect */
.fm-popup-card{
    scroll-snap-align:center;
    min-height:75vh;
    display:flex;flex-direction:column;
    justify-content:center;
    padding:8px 20px 12px;
    position:relative;
    transition:all .35s cubic-bezier(.32,.72,0,1);
}
.fm-popup-card-inner{
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
    border-radius:20px;
    box-shadow:0 8px 40px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.04);
    border:1px solid rgba(255,255,255,.5);
    overflow:hidden;
    transition:transform .35s cubic-bezier(.32,.72,0,1),
               box-shadow .35s cubic-bezier(.32,.72,0,1),
               opacity .3s ease,
               filter .3s ease;
    max-height:65vh;
    overflow-y:auto;
}
/* Active card - sharp, full */
.fm-popup-card.fm-popup-card-active .fm-popup-card-inner{
    transform:scale(1);opacity:1;filter:none;
    box-shadow:0 16px 60px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06);
}
/* Inactive cards - blurred peek */
.fm-popup-card:not(.fm-popup-card-active) .fm-popup-card-inner{
    transform:scale(.85);opacity:.4;filter:blur(3px);
}

.fm-popup-card-img{width:100%;height:220px;object-fit:cover;display:block}
.fm-popup-card-badge{
    position:absolute;top:28px;left:28px;
    background:var(--fm-badge-bg,#4caf50);color:var(--fm-badge-text,#fff);
    font-size:12px;padding:5px 14px;border-radius:var(--fm-badge-radius,8px);
    font-weight:600;z-index:5;backdrop-filter:blur(8px);
}
.fm-popup-card-body{padding:14px 16px 16px}
.fm-popup-card-title{font-size:18px;font-weight:700;color:#1a1a1a;margin:0 0 6px}
.fm-popup-card-price{font-size:14px;font-weight:600;color:#666;display:block;margin-bottom:8px}
.fm-popup-card-desc{font-size:12px;color:#777;line-height:1.8;margin:0 0 12px}
.fm-popup-card-metas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.fm-popup-card-metas .fm-meta{font-size:11px;padding:5px 12px;background:rgba(255,255,255,.6);backdrop-filter:blur(8px)}
.fm-popup-card-btn{display:flex;justify-content:center}

/* ============================================================
   BOTTOM TOOLBAR
   ============================================================ */
/* Toolbar spacer — reserves space in document flow for the fixed toolbar */
.fm-toolbar-spacer{
    display:block;width:100%;clear:both;
    height:72px;
    visibility:hidden;pointer-events:none;
}
.fm-toolbar-compact .fm-toolbar-spacer{height:72px}
.fm-toolbar-ultracompact .fm-toolbar-spacer{height:68px}

.fm-bottom-toolbar{
    position:fixed!important;bottom:0!important;left:0;right:0;z-index:9998;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-top:1px solid rgba(0,0,0,.06);
    box-shadow:0 -4px 20px rgba(0,0,0,.06);
    padding:8px 12px 12px;
    max-width:var(--fm-max-w,900px);margin:0 auto;
    transition:background .3s,border-color .3s;
}
/* Toolbar theme-reactive */
.fm-bottom-toolbar.fm-toolbar-themed{
    border-top-color:var(--fm-catbar-active-border,rgba(0,0,0,.06));
}
.fm-toolbar-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    width:100%;
}
/* v11.18.0 — adaptive columns based on active shortcode count */
.fm-toolbar-grid[data-sc-count="1"]{grid-template-columns:1fr;}
.fm-toolbar-grid[data-sc-count="2"]{grid-template-columns:1fr 1fr;}
.fm-toolbar-grid[data-sc-count="3"]{grid-template-columns:1fr 1fr 1fr;}
.fm-toolbar-grid[data-sc-count="4"]{grid-template-columns:1fr 1fr;}
.fm-toolbar-item{
    display:flex;align-items:center;justify-content:center;
    min-height:40px;border-radius:12px;
    background:rgba(0,0,0,.03);
    transition:background .2s,border-color .3s;overflow:hidden;
    position:relative;
}
.fm-toolbar-item:active{background:rgba(0,0,0,.06)}

/* ============================================================
   TOOLBAR LAYOUT PRESETS
   ============================================================ */
/* -- default: full-width fixed bottom -- */
/* (base styles handle it, no extra classes) */

/* -- compact: floating bar with margin + border-radius, smaller buttons -- */
.fm-toolbar-compact .fm-bottom-toolbar{
    bottom:10px!important;
    left:0!important;right:0!important;
    margin:0 auto!important;
    border-radius:18px!important;
    box-shadow:0 4px 24px rgba(0,0,0,.12)!important;
    padding:5px 8px 5px!important;
    border:1px solid rgba(0,0,0,.08)!important;
    max-width:calc(var(--fm-max-w,900px) - 20px)!important;
    width:calc(100% - 20px)!important;
}
.fm-toolbar-compact .fm-toolbar-grid{gap:4px!important;}
.fm-toolbar-compact .fm-toolbar-item{min-height:30px!important;border-radius:10px!important;}

/* -- ultracompact: 75% width, centered, smaller buttons + height -- */
.fm-toolbar-ultracompact .fm-bottom-toolbar{
    bottom:12px!important;
    left:0!important;right:0!important;
    margin:0 auto!important;
    width:75%!important;max-width:calc(var(--fm-max-w,900px) * 0.75)!important;
    border-radius:20px!important;
    box-shadow:0 4px 20px rgba(0,0,0,.10)!important;
    padding:6px 10px 6px!important;
    border:1px solid rgba(0,0,0,.07)!important;
    transform:none!important;
}
.fm-toolbar-ultracompact .fm-toolbar-grid{gap:3px!important;}
.fm-toolbar-ultracompact .fm-toolbar-item{
    min-height:26px!important;border-radius:10px!important;
    padding:0 1px!important;
}

/* -- Glass overlay for toolbar (transparent, real glass look) -- */
.fm-toolbar-glass .fm-bottom-toolbar{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.55) 0%,
        rgba(255,255,255,.35) 100%
    )!important;
    backdrop-filter:blur(40px) saturate(2.0) brightness(1.05)!important;
    -webkit-backdrop-filter:blur(40px) saturate(2.0) brightness(1.05)!important;
    border-top:1px solid rgba(255,255,255,.7)!important;
    border-bottom:none!important;
    box-shadow:
        0 -2px 24px rgba(0,0,0,.03),
        inset 0 1px 0 rgba(255,255,255,.8),
        inset 0 -1px 0 rgba(255,255,255,.2)!important;
}
.fm-toolbar-glass .fm-toolbar-item{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.35) 0%,
        rgba(255,255,255,.18) 100%
    )!important;
    border:1px solid rgba(255,255,255,.45)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 1px 3px rgba(0,0,0,.03)!important;
}

/* ============================================================
   CATBAR LAYOUT PRESETS
   ============================================================ */
/* -- compact catbar: separated floating box, sticks to top, no gap -- */
.fm-catbar-compact .fm-catbar{
    padding:8px 4px 6px!important;
    margin:6px auto 0!important;
    width:85%!important;
    border-radius:16px!important;
    box-shadow:0 2px 12px rgba(0,0,0,.08)!important;
    position:sticky!important;
    top:6px!important;
    z-index:200!important;
}
.fm-catbar-compact .fm-cat-item{
    min-width:44px!important;padding:4px 8px!important;
}
.fm-catbar-compact .fm-cat-icon-wrap{
    width:26px!important;height:26px!important;
}
.fm-catbar-compact .fm-cat-label{
    font-size:9px!important;
}
.fm-catbar-compact .fm-catbar-scroll{
    gap:4px!important;padding:0 6px!important;
}

/* -- Glass catbar — ONLY the catbar box background becomes glass, items keep theme colors -- */
.fm-catbar-glass-on .fm-catbar{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.55) 0%,
        rgba(255,255,255,.35) 100%
    )!important;
    backdrop-filter:blur(40px) saturate(2.0) brightness(1.05)!important;
    -webkit-backdrop-filter:blur(40px) saturate(2.0) brightness(1.05)!important;
    border-bottom:1px solid rgba(255,255,255,.7)!important;
    box-shadow:0 2px 16px rgba(0,0,0,.04),
        inset 0 1px 0 rgba(255,255,255,.8),
        inset 0 -1px 0 rgba(255,255,255,.2)!important;
}
/* Cat items: fully preserve theme styling - NO glass effect on individual items */
.fm-catbar-glass-on .fm-cat-item{
    background:var(--fm-catbar-bg,#fff)!important;
    border-color:var(--fm-catbar-border-color,#e8e8e8)!important;
    color:var(--fm-catbar-text,#555)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}
.fm-catbar-glass-on .fm-cat-item.active{
    background:var(--fm-catbar-active-bg,#fff)!important;
    color:var(--fm-catbar-active-text,#1a1a1a)!important;
    border-color:var(--fm-catbar-active-border,#2d2d2d)!important;
    border-width:2px!important;
    box-shadow:0 2px 12px rgba(0,0,0,.12),0 0 0 1px color-mix(in srgb,var(--fm-catbar-active-border,#2d2d2d) 18%,transparent)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}
.fm-catbar-glass-on .fm-cat-icon-wrap,
.fm-catbar-glass-on .fm-cat-label{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}

/* ============================================================
   Waiter button transform/transition fix inside toolbar
   Prevents jump/shift when clicked or state changes
   ============================================================ */
.fm-toolbar-item .wcs-call-button{
    transition:background .3s,color .3s,box-shadow .3s!important;
}
.fm-toolbar-item .wcs-call-button:hover:not(:disabled){
    transform:none!important;
}
.fm-toolbar-item .wcs-call-button:active:not(:disabled){
    transform:none!important;
}
.fm-toolbar-item .wcs-call-button.wcs-success-animation{
    animation:none!important;
    transform:none!important;
}

/* ════════════════════════════════════════════════════════════════
   v11.22.0 — TOOLBAR INTRO ANIMATION + ENHANCED TABLE-NUMBER BADGE
   ════════════════════════════════════════════════════════════════
   New, more professional sequence (total ~3.4 s):
     0.00–0.40s — table badge appears VERY SMALL (centered pill,
                  digit only, no chrome) — gentle fade-up.
     0.40–1.20s — badge GROWS into its full size while the toolbar
                  bar itself ALSO expands behind it. Icon + label
                  reveal as the badge breathes outward.
     1.20–2.30s — badge HOLDS at full size for the user to read
                  the number clearly (a subtle inner glow pulses
                  once at 1.6s for emphasis).
     2.30–2.65s — badge fades out (scale-down + blur), the four
                  shortcode buttons reveal underneath it.
     2.65–3.10s — button text labels fade in from below.

   When NO table number is present we use the original short
   ~1.6 s opening sequence (no badge to hold for). */

/* The bar itself collapses to a slim pill in the centre, hidden,
   then expands to its real width. Buttons sit invisible inside until
   the bar has finished opening. */
/* ══════════════════════════════════════════════════════════════════
   v11.30.0 — TABLE-NUMBER REVEAL: drawer-style side cap
   پاپ‌آپ مرکزی شماره میز (fm-table-hero) و slot روی toolbar
   (fm-toolbar-table-slot) کاملاً حذف شد. شماره میز حالا فقط در یک
   بج کناری ثابت سمت راست صفحه (fm-side-table) نمایش داده می‌شود.
   در page load، بج به حالت expanded با لیبل کامل ظاهر می‌شود
   (مثلاً «میز ۱۳»)، حدود ۲ ثانیه نگه می‌دارد، سپس به حالت compact
   (آیکون SVG + شماره) جمع می‌شود. رنگ بج بر اساس تم منو خوانده
   می‌شود (CSS variables). در داخل combo این بج render نمی‌شود
   چون combo بج خود را روی back-button دارد.
   ══════════════════════════════════════════════════════════════════ */

/* بج کناری شماره میز — fixed سمت راست صفحه. */
.fm-side-table{
    position:fixed;
    top:38%;
    right:0;
    transform:translateY(-50%);
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:5px;
    /* v11.47.0 — عرض بج میز برابر با ذره‌بین و دکمه برگشت (هر سه ۲۵px) */
    min-width:25px;
    padding:6px 5px 7px 6px;
    border-radius:10px 0 0 10px;
    /* رنگ‌ها از JS تنظیم می‌شوند (themeSideCap) و از تم منوی فعال
       خوانده می‌شوند. مقادیر fallback تا قبل از boot شدن JS. */
    background:var(--fm-st-bg, #2d2d2d);
    color:var(--fm-st-fg, #ffffff);
    box-shadow:
        -3px 0 14px rgba(0,0,0,.18),
        0 2px 10px rgba(0,0,0,.18),
        inset 1px 0 0 rgba(255,255,255,.10);
    font-weight:800;
    line-height:1;
    letter-spacing:.2px;
    overflow:hidden;
    white-space:nowrap;
    pointer-events:auto;
    cursor:pointer;
    direction:ltr;  /* عدد شماره میز همیشه LTR است (1,2,3...) */
    /* v11.31.0 — انتقال سریع‌تر و نرم‌تر */
    transition:background .25s ease,
               color .25s ease,
               min-width .32s cubic-bezier(.25,.85,.35,1),
               padding .32s cubic-bezier(.25,.85,.35,1);
    /* قبل از اولین expanded، بج با opacity 0 شروع می‌شود تا قبل
       از theming JS سوسوزن نباشد. JS بلافاصله fm-st-ready را اضافه
       می‌کند تا قابل دیدن شود. */
    opacity:0;
}
.fm-side-table.fm-st-ready{ opacity:1; }
.fm-side-table.fm-st-expanded{
    /* v11.46.0 — عرض ۳۵٪ کمتر (۹۰px → ۵۸px) */
    min-width:58px;
    padding:7px 9px 8px 9px;
}
.fm-side-table-icon{
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
    opacity:.82;
}
.fm-side-table-icon svg{
    width:12px;
    height:12px;
    stroke:currentColor;
}
.fm-side-table-label{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.15px;
    color:var(--fm-st-fg, #ffffff);
    opacity:0;
    max-width:0;
    overflow:hidden;
    transform:translateX(4px);
    transition:opacity .25s ease,
               max-width .32s cubic-bezier(.25,.85,.35,1),
               transform .25s cubic-bezier(.25,.85,.35,1);
}
.fm-side-table.fm-st-expanded .fm-side-table-label{
    opacity:.95;
    max-width:40px;
    transform:translateX(0);
}
.fm-side-table-num{
    font-size:13px;
    font-weight:900;
    color:var(--fm-st-num, var(--fm-st-fg, #ffffff));
    flex-shrink:0;
    transition:color .25s ease;
}
/* v11.31.0 — font-size ثابت می‌ماند؛ فقط عرض بج تغییر می‌کند */
.fm-side-table.fm-st-expanded .fm-side-table-num{
}
/* لیبل در زبان فارسی/عربی به نظم RTL نوشته شود ولی خود
   container LTR می‌ماند تا ترتیب آیکون → لیبل → شماره طبیعی
   به نظر برسد. */
[dir="rtl"] .fm-side-table .fm-side-table-label,
[lang="fa"] .fm-side-table .fm-side-table-label,
[lang="ar"] .fm-side-table .fm-side-table-label{
    direction:rtl;
}
/* pulse highlight هنگام expanded — حس «الان باز شد» می‌دهد. */
.fm-side-table.fm-st-expanded::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:0 0 0 0 var(--fm-st-fg, rgba(255,255,255,.6));
    opacity:0;
    animation:fmStPulse 1.2s cubic-bezier(.22,.9,.32,1) .15s 1 forwards;
    pointer-events:none;
}
@keyframes fmStPulse{
    0%   { opacity:.35; box-shadow:0 0 0 0   rgba(255,255,255,.35); }
    100% { opacity:0;   box-shadow:0 0 0 12px rgba(255,255,255,0); }
}

/* ── Toolbar intro: clip-path open (بدون تغییر از v11.22.0) ─── */
.fm-bottom-toolbar.fm-toolbar-intro{
    /* clip-path expands from a horizontal sliver to full width */
    clip-path:inset(0 calc(50% - 100px) 0 calc(50% - 100px) round 18px);
    -webkit-clip-path:inset(0 calc(50% - 100px) 0 calc(50% - 100px) round 18px);
    animation:fmToolbarOpen .55s cubic-bezier(.22,.9,.32,1) .15s both;
}
@keyframes fmToolbarOpen{
    0%  { clip-path:inset(0 calc(50% - 100px) 0 calc(50% - 100px) round 18px);
          -webkit-clip-path:inset(0 calc(50% - 100px) 0 calc(50% - 100px) round 18px);
          opacity:.92; }
    60% { opacity:1; }
    100%{ clip-path:inset(0 0 0 0 round 0px);
          -webkit-clip-path:inset(0 0 0 0 round 0px);
          opacity:1; }
}

/* ══════════════════════════════════════════════════════════════════
   v11.41.0 — MENU SEARCH: ذره‌بین کشویی
   یک دکمه‌ی ذره‌بین کوچک، fixed سمت راست صفحه، درست بالای بج شماره
   میز (fm-side-table). با کلیک، یک ردیف کشویی افقی باز می‌شود شامل
   ورودی جستجو، دکمه‌ی پاک‌کردن (×) و دکمه‌ی SVG خروج. رنگ‌ها از تم
   منوی فعال خوانده می‌شوند (CSS variables از طریق JS تنظیم می‌شوند).
   جایگاه ثابت است و در هر چیدمان منو سر جای خود می‌نشیند.
   ══════════════════════════════════════════════════════════════════ */
.fm-search{
    position:fixed;
    /* بالای بج شماره میز (که در top:38% است) می‌نشیند */
    top:calc(38% - 56px);
    right:0;
    transform:translateY(-50%);
    z-index:99998;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    direction:rtl;
    pointer-events:none;
}
.fm-search *{ box-sizing:border-box; }

/* دکمه‌ی ذره‌بین — نه زیاد بزرگ، نه ریز. حرفه‌ای و متعادل. */
.fm-search-fab{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    /* v11.46.0 — عرض ۳۵٪ کمتر (۳۸px → ۲۵px) */
    width:25px;
    height:38px;
    padding:0;
    border:none;
    cursor:pointer;
    border-radius:11px 0 0 11px;
    background:var(--fm-se-bg, #2d2d2d);
    color:var(--fm-se-fg, #ffffff);
    box-shadow:
        -3px 0 14px rgba(0,0,0,.16),
        0 2px 10px rgba(0,0,0,.16),
        inset 1px 0 0 rgba(255,255,255,.10);
    -webkit-tap-highlight-color:transparent;
    transition:background .25s ease,
               color .25s ease,
               transform .28s cubic-bezier(.34,1.56,.5,1),
               opacity .25s ease,
               box-shadow .25s ease;
}
.fm-search-fab:hover{
    transform:translateX(-2px);
    box-shadow:-5px 0 18px rgba(0,0,0,.22), 0 3px 12px rgba(0,0,0,.2);
}
.fm-search-fab:active{ transform:scale(.93); }
.fm-search-fab-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.fm-search-fab-icon svg{
    width:14px;
    height:14px;
    stroke:currentColor;
    transition:transform .3s cubic-bezier(.34,1.56,.5,1);
}
.fm-search-fab:hover .fm-search-fab-icon svg{ transform:rotate(-12deg) scale(1.06); }

/* وقتی drawer باز است، خود دکمه‌ی fab پنهان می‌شود (drawer جایش را می‌گیرد). */
.fm-search.fm-search-open .fm-search-fab{
    opacity:0;
    transform:scale(.4) translateX(20px);
    pointer-events:none;
}

/* ردیف کشویی جستجو */
.fm-search-drawer{
    pointer-events:auto;
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:4px;
    height:42px;
    padding:0 6px 0 7px;
    border-radius:13px 0 0 13px;
    background:var(--fm-se-bg, #2d2d2d);
    color:var(--fm-se-fg, #ffffff);
    box-shadow:
        -5px 0 22px rgba(0,0,0,.22),
        0 4px 16px rgba(0,0,0,.2),
        inset 1px 0 0 rgba(255,255,255,.12);
    /* بسته: عرض صفر، شفاف، از سمت راست جمع شده */
    width:0;
    max-width:0;
    opacity:0;
    overflow:hidden;
    white-space:nowrap;
    clip-path:inset(0 0 0 100%);
    -webkit-clip-path:inset(0 0 0 100%);
    transition:width .4s cubic-bezier(.22,.9,.3,1),
               max-width .4s cubic-bezier(.22,.9,.3,1),
               opacity .26s ease,
               clip-path .42s cubic-bezier(.22,.9,.3,1),
               -webkit-clip-path .42s cubic-bezier(.22,.9,.3,1),
               background .25s ease;
}
.fm-search.fm-search-open .fm-search-drawer{
    width:min(78vw, 320px);
    max-width:min(78vw, 320px);
    opacity:1;
    clip-path:inset(0 0 0 0);
    -webkit-clip-path:inset(0 0 0 0);
}
.fm-search-drawer-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:26px;
    opacity:.62;
}
.fm-search-drawer-icon svg{ width:16px; height:16px; stroke:currentColor; }

.fm-search-input{
    flex:1 1 auto;
    min-width:0;
    height:100%;
    border:none;
    outline:none;
    background:transparent;
    color:var(--fm-se-fg, #ffffff);
    font-family:inherit;
    font-size:13.5px;
    font-weight:600;
    padding:0 2px;
    direction:rtl;
    text-align:right;
}
.fm-search-input::placeholder{
    color:var(--fm-se-fg, #ffffff);
    opacity:.5;
    font-weight:500;
}
.fm-search-input::-webkit-search-cancel-button{ display:none; }

/* دکمه‌ی پاک‌کردن متن (×) — فقط وقتی متنی هست دیده می‌شود */
.fm-search-clear{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:26px;
    height:26px;
    padding:0;
    border:none;
    cursor:pointer;
    border-radius:50%;
    background:var(--fm-se-soft, rgba(255,255,255,.14));
    color:var(--fm-se-fg, #ffffff);
    opacity:0;
    transform:scale(.5);
    pointer-events:none;
    transition:opacity .2s ease, transform .24s cubic-bezier(.34,1.56,.5,1), background .2s ease;
}
.fm-search-clear svg{ width:13px; height:13px; stroke:currentColor; }
.fm-search-drawer.fm-has-text .fm-search-clear{
    opacity:.9;
    transform:scale(1);
    pointer-events:auto;
}
.fm-search-clear:hover{ background:var(--fm-se-soft2, rgba(255,255,255,.26)); }
.fm-search-clear:active{ transform:scale(.85); }

/* دکمه‌ی SVG خروج — با کلیک drawer جمع می‌شود (و نتایج پاک می‌شوند) */
.fm-search-exit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:30px;
    height:30px;
    padding:0;
    border:none;
    cursor:pointer;
    border-radius:9px;
    background:var(--fm-se-accent, rgba(255,255,255,.16));
    color:var(--fm-se-accent-fg, #ffffff);
    transition:background .2s ease, transform .2s ease;
}
.fm-search-exit svg{ width:16px; height:16px; stroke:currentColor; }
.fm-search-exit:hover{ background:var(--fm-se-accent2, rgba(255,255,255,.3)); }
.fm-search-exit:active{ transform:scale(.9); }
[dir="ltr"] .fm-search-exit svg,
.flavor-wrap[data-lang="en"] .fm-search-exit svg{ transform:scaleX(-1); }
[dir="ltr"] .fm-search-exit:active svg,
.flavor-wrap[data-lang="en"] .fm-search-exit:active svg{ transform:scaleX(-1) scale(.9); }

/* استگر کوچک ورود محتویات drawer هنگام باز شدن */
.fm-search-drawer-icon,
.fm-search-input,
.fm-search-exit{
    opacity:0;
    transition:opacity .2s ease .04s;
}
.fm-search-drawer-icon{ opacity:.62; }
.fm-search.fm-search-open .fm-search-drawer-icon{ opacity:.62; }
.fm-search.fm-search-open .fm-search-input{ opacity:1; transition-delay:.16s; }
.fm-search.fm-search-open .fm-search-exit{ opacity:1; transition-delay:.22s; }
.fm-search:not(.fm-search-open) .fm-search-input,
.fm-search:not(.fm-search-open) .fm-search-exit{ opacity:0; }

/* ── بنر «در حال نمایش نتایج جستجو» ───────────────────────────── */
.fm-search-banner{
    position:fixed;
    top:12px;
    left:50%;
    transform:translateX(-50%) translateY(-130%);
    z-index:99997;
    display:flex;
    align-items:center;
    gap:8px;
    max-width:min(92vw, 420px);
    padding:8px 8px 8px 14px;
    border-radius:999px;
    background:var(--fm-se-bg, #2d2d2d);
    color:var(--fm-se-fg, #ffffff);
    box-shadow:0 8px 26px rgba(0,0,0,.26), 0 2px 8px rgba(0,0,0,.18);
    direction:rtl;
    opacity:0;
    pointer-events:none;
    transition:transform .42s cubic-bezier(.22,1.2,.36,1), opacity .3s ease;
}
.fm-search-banner.fm-search-banner-on{
    transform:translateX(-50%) translateY(0);
    opacity:1;
    pointer-events:auto;
}
.fm-search-banner-ic{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--fm-se-soft, rgba(255,255,255,.16));
}
.fm-search-banner-ic svg{ width:13px; height:13px; stroke:currentColor; }
.fm-search-banner-text{
    flex:1 1 auto;
    min-width:0;
    font-size:12.5px;
    font-weight:700;
    line-height:1.35;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.fm-search-banner-text b{
    font-weight:900;
    color:var(--fm-se-num, var(--fm-se-fg, #ffffff));
}
.fm-search-banner-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:26px;
    height:26px;
    padding:0;
    border:none;
    cursor:pointer;
    border-radius:50%;
    background:var(--fm-se-soft2, rgba(255,255,255,.2));
    color:var(--fm-se-fg, #ffffff);
    transition:background .2s ease, transform .2s ease;
}
.fm-search-banner-close svg{ width:13px; height:13px; stroke:currentColor; }
.fm-search-banner-close:hover{ background:var(--fm-se-accent2, rgba(255,255,255,.34)); }
.fm-search-banner-close:active{ transform:scale(.86); }

/* حالت «بدون نتیجه» — بنر کمی تن متفاوت می‌گیرد */
.fm-search-banner.fm-search-banner-empty .fm-search-banner-ic{
    background:var(--fm-se-accent, rgba(255,255,255,.22));
}

/* ── حالت نمایش نتایج: کارت‌ها و سکشن‌های نامرتبط مخفی ───────────── */
.fm-section.fm-search-hidden{ display:none !important; }
.fm-card.fm-search-hidden{ display:none !important; }
/* کارت‌های منطبق هنگام ورود به حالت سرچ یک fade-in نرم می‌گیرند */
.flavor-wrap.fm-searching .fm-card:not(.fm-search-hidden){
    animation:fmSearchCardIn .34s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes fmSearchCardIn{
    0%   { opacity:0; transform:translateY(8px) scale(.985); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}
/* پیام «موردی یافت نشد» داخل لیست سکشن‌ها */
.fm-search-noresult{
    display:none;
    text-align:center;
    padding:54px 20px;
    color:var(--fm-sh-color, #888);
}
.flavor-wrap.fm-searching .fm-search-noresult.fm-search-noresult-on{
    display:block;
}
.fm-search-noresult-ic{
    display:inline-flex;
    margin-bottom:12px;
    opacity:.4;
}
.fm-search-noresult-ic svg{ width:46px; height:46px; }
.fm-search-noresult-text{
    font-size:14px;
    font-weight:700;
    opacity:.7;
}

/* احترام به prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
    .fm-search-fab,
    .fm-search-drawer,
    .fm-search-banner,
    .flavor-wrap.fm-searching .fm-card:not(.fm-search-hidden){
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
    }
}

/* ── v11.41.1 — ذره‌بین سرچ داخل شورت‌کد جامع (combo) ──────────────
   هر منوی داخل combo (فارسی/انگلیسی/عربی) ذره‌بین مستقل خودش را دارد،
   اما چون عنصر fixed است باید فقط ذره‌بینِ پنلِ فعال دیده شود. پنل‌های
   غیرفعال (بدون کلاس fmc-active) خودشان hidden هستند، ولی عناصر fixed
   فرزندشان از این مخفی‌سازی پیروی نمی‌کنند؛ پس صریحاً مخفی می‌کنیم. */
.fmc-panel-menu:not(.fmc-active) .fm-search,
.fmc-panel-menu:not(.fmc-active) .fm-search-banner{
    opacity:0 !important;
    pointer-events:none !important;
    visibility:hidden !important;
}
/* پنل welcome هرگز ذره‌بین ندارد، ولی برای اطمینان: */
.fmc-panel-welcome .fm-search,
.fmc-panel-welcome .fm-search-banner{
    display:none !important;
}
/* وقتی combo در حالت warp (جابجایی harmony↔harmony) است، ذره‌بین
   پنل در حال خروج هم باید بلافاصله محو شود تا با انیمیشن تداخل نکند. */
.fmc-panel-menu.fmc-leaving .fm-search,
.fmc-panel-menu.fmc-leaving .fm-search-banner{
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .18s ease !important;
}

/* v11.41.2 — تصحیح جایگاه ذره‌بین در combo.
   در combo، شماره میز روی دکمه‌ی برگشت (fmc-back-btn، در top:38%)
   به‌صورت بج بالای آن می‌نشیند. اگر ذره‌بین در همان top منوی معمولی
   بماند، روی/زیر بج شماره میز می‌افتد. این قوانین ذره‌بین را به‌اندازه‌ی
   کافی بالاتر می‌برند تا کاملاً بالای واحدِ «بج شماره میز + دکمه برگشت»
   قرار گیرد و در گوشه‌ی کنار، بالای بج بنشیند — همان رفتار خواسته‌شده.

   v11.42.3 — حالا ذره‌بین در combo به سطح .fmc-combo-root منتقل می‌شود
   (توسط initMenuSearch با data-fm-lifted="true") تا containing-block
   آن viewport بماند و با transform پنل‌ها جابجا نشود. این رفتار را
   دقیقاً مانند بج برگشت و شماره میز که در سطح combo root هستند
   ثابت می‌کند. */
/* حالت پایه‌ی combo (فقط دکمه برگشت، بدون بج شماره میز):
   ذره‌بین کمی بالای دکمه برگشت ۵۲px. */
.fmc-panel-menu .fm-search{
    top:calc(38% - 60px);
}
/* حالت combo با بج شماره میز: ذره‌بین بالاتر می‌رود تا بالای بج
   بنشیند (بج ~۳۰px + ۶px فاصله، بالای دکمه برگشت). */
.fmc-combo-root:has(.fmc-back-with-table) .fmc-panel-menu .fm-search{
    top:calc(38% - 90px);
}
/* fallback مبتنی بر کلاس برای مرورگرهای بدون پشتیبانی :has() —
   کلاس‌ها توسط JS (initMenuSearch) روی .fm-search اعمال می‌شوند. */
.fm-search.fm-search-in-combo{
    top:calc(38% - 60px);
}
.fm-search.fm-search-in-combo.fm-search-combo-table{
    top:calc(38% - 90px);
}
/* v11.42.3 — وقتی .fm-search به سطح combo root منتقل شد (data-fm-lifted),
   دیگر فرزند پنل transformed نیست. position:fixed آن نسبت به viewport
   حساب می‌شود و کاملاً ثابت می‌ماند — مثل back-btn و table-badge. */
.fmc-combo-root > .fm-search[data-fm-lifted="true"]{
    z-index:99998;
}
.fmc-combo-root > .fm-search.fm-search-in-combo{
    top:calc(38% - 60px);
}
.fmc-combo-root > .fm-search.fm-search-in-combo.fm-search-combo-table{
    top:calc(38% - 90px);
}

/* Toolbar items: invisible during the opening (0–0.55s), then a
   gentle background fade-in. Their text reveal is handled separately
   below so it can land last. */
.fm-bottom-toolbar.fm-toolbar-intro .fm-toolbar-item{
    opacity:0;
    transform:scale(.94);
    animation:fmToolbarItem .35s cubic-bezier(.22,.9,.32,1) .65s both;
}
@keyframes fmToolbarItem{
    from{ opacity:0; transform:scale(.94); }
    to  { opacity:1; transform:none; }
}

/* Hide button text/labels while the bar opens. They fade in last. */
.fm-bottom-toolbar.fm-toolbar-intro .fc-cart-text,
.fm-bottom-toolbar.fm-toolbar-intro .fc-tracker-sc-label,
.fm-bottom-toolbar.fm-toolbar-intro .fai-trigger-text,
.fm-bottom-toolbar.fm-toolbar-intro .wcs-button-text,
.fm-bottom-toolbar.fm-toolbar-intro .fc-cart-count,
.fm-bottom-toolbar.fm-toolbar-intro .fc-tracker-sc-badge{
    opacity:0;
    transform:translateY(4px);
    animation:fmToolbarText .45s cubic-bezier(.22,.9,.32,1) 1.10s both;
}
@keyframes fmToolbarText{
    from{ opacity:0; transform:translateY(4px); }
    to  { opacity:1; transform:none; }
}

/* ── Legacy table-badge classes kept for back-compat (now no-op) ─ */
.fm-toolbar-table-badge,
.fm-toolbar-table-slot,
.fm-table-hero,
.fm-table-hero-backdrop{ display:none !important; }

/* Reduced-motion users: skip animations */
@media (prefers-reduced-motion: reduce){
    .fm-bottom-toolbar.fm-toolbar-intro,
    .fm-bottom-toolbar.fm-toolbar-intro .fm-toolbar-item,
    .fm-bottom-toolbar.fm-toolbar-intro .fc-cart-text,
    .fm-bottom-toolbar.fm-toolbar-intro .fc-tracker-sc-label,
    .fm-bottom-toolbar.fm-toolbar-intro .fai-trigger-text,
    .fm-bottom-toolbar.fm-toolbar-intro .wcs-button-text,
    .fm-bottom-toolbar.fm-toolbar-intro .fc-cart-count,
    .fm-bottom-toolbar.fm-toolbar-intro .fc-tracker-sc-badge,
    .fm-side-table,
    .fm-side-table-label,
    .fm-side-table-num,
    .fm-side-table.fm-st-expanded::before{
        animation:none!important;
        clip-path:none!important;
        -webkit-clip-path:none!important;
        opacity:1!important;
        transform:none!important;
        filter:none!important;
        transition:none!important;
    }
    /* در reduced-motion بج به‌صورت compact نمایش داده شود
       (لیبل پنهان، فقط آیکون + شماره) — خواناتر و کم‌حرکت‌تر. */
    .fm-side-table .fm-side-table-label{
        display:none !important;
    }
}
/* Customizer preview: never play the intro — every change re-renders. */
.flavor-preview .fm-bottom-toolbar.fm-toolbar-intro,
.flavor-preview .fm-bottom-toolbar.fm-toolbar-intro .fm-toolbar-item,
.flavor-preview .fm-bottom-toolbar.fm-toolbar-intro .fc-cart-text,
.flavor-preview .fm-bottom-toolbar.fm-toolbar-intro .fc-tracker-sc-label,
.flavor-preview .fm-bottom-toolbar.fm-toolbar-intro .fai-trigger-text,
.flavor-preview .fm-bottom-toolbar.fm-toolbar-intro .wcs-button-text,
.flavor-preview .fm-bottom-toolbar.fm-toolbar-intro .fc-cart-count,
.flavor-preview .fm-bottom-toolbar.fm-toolbar-intro .fc-tracker-sc-badge{
    animation:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    opacity:1!important;
    transform:none!important;
}
.flavor-preview .fm-side-table{ display:none !important; }

/* ════════════════════════════════════════════════════════════════
   v11.20.0 — Page chrome polish: kill rubber-band white sliver
   ════════════════════════════════════════════════════════════════
   The HTML/body background colour is set per-page from PHP, here
   we clamp overscroll so even slow Android scrolls never reveal
   the system white before the menu repaints. */
/* v11.23.0: overscroll allows pull-to-refresh (PTR) on mobile.
   We only block side-overscroll (x), vertical is allowed for PTR. */
html.flavor-themed-page,
html.flavor-themed-page body{
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
}
.flavor-wrap{
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
}

/* ============================================================
   BACKGROUND PRESETS (34+ options with animation support)
   ============================================================ */

/* --- Geometric Patterns --- */
.fm-bg-page-dots{
    background-image:radial-gradient(circle,var(--fm-sh-line,rgba(0,0,0,.06)) 1px,transparent 1px)!important;
    background-size:20px 20px!important;
}
.fm-bg-page-grid{
    background-image:linear-gradient(var(--fm-sh-line,rgba(0,0,0,.04)) 1px,transparent 1px),linear-gradient(90deg,var(--fm-sh-line,rgba(0,0,0,.04)) 1px,transparent 1px)!important;
    background-size:24px 24px!important;
}
.fm-bg-page-diagonal{
    background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,var(--fm-sh-line,rgba(0,0,0,.03)) 10px,var(--fm-sh-line,rgba(0,0,0,.03)) 11px)!important;
}
.fm-bg-page-zigzag{
    background-image:linear-gradient(135deg,var(--fm-sh-line,rgba(0,0,0,.03)) 25%,transparent 25%),linear-gradient(225deg,var(--fm-sh-line,rgba(0,0,0,.03)) 25%,transparent 25%),linear-gradient(315deg,var(--fm-sh-line,rgba(0,0,0,.03)) 25%,transparent 25%),linear-gradient(45deg,var(--fm-sh-line,rgba(0,0,0,.03)) 25%,transparent 25%)!important;
    background-size:20px 20px!important;
}
.fm-bg-page-waves{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20'%3E%3Cpath d='M0 10 Q25 0 50 10 Q75 20 100 10' stroke='rgba(128,128,128,0.12)' fill='none' stroke-width='1'/%3E%3C/svg%3E")!important;
    background-size:100px 20px!important;
}
.fm-bg-page-hexagon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M14 0 L28 8 L28 24 L14 32 L0 24 L0 8 Z' fill='none' stroke='rgba(128,128,128,0.1)' stroke-width='1'/%3E%3Cpath d='M14 17 L28 25 L28 41 L14 49 L0 41 L0 25 Z' fill='none' stroke='rgba(128,128,128,0.1)' stroke-width='1'/%3E%3C/svg%3E")!important;
    background-size:28px 49px!important;
}
.fm-bg-page-circles{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='8' fill='none' stroke='rgba(128,128,128,0.08)' stroke-width='1'/%3E%3C/svg%3E")!important;
    background-size:40px 40px!important;
}
.fm-bg-page-diamonds{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0L24 12L12 24L0 12Z' fill='none' stroke='rgba(128,128,128,0.08)' stroke-width='0.5'/%3E%3C/svg%3E")!important;
    background-size:24px 24px!important;
}
.fm-bg-page-crosses{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='rgba(128,128,128,0.08)' stroke-width='1' fill='none'/%3E%3C/svg%3E")!important;
    background-size:20px 20px!important;
}
.fm-bg-page-triangles{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='26'%3E%3Cpath d='M15 0L30 26H0Z' fill='none' stroke='rgba(128,128,128,0.07)' stroke-width='0.5'/%3E%3C/svg%3E")!important;
    background-size:30px 26px!important;
}
.fm-bg-page-stars{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 2l3 9h9l-7 5 3 9-8-6-8 6 3-9-7-5h9z' fill='rgba(128,128,128,0.06)' stroke='none'/%3E%3C/svg%3E")!important;
    background-size:30px 30px!important;
}
.fm-bg-page-moroccan{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M18 0a18 18 0 010 36 18 18 0 010-36M18 0a18 18 0 000 36' fill='none' stroke='rgba(128,128,128,0.06)' stroke-width='0.5'/%3E%3Ccircle cx='18' cy='18' r='6' fill='none' stroke='rgba(128,128,128,0.06)' stroke-width='0.5'/%3E%3C/svg%3E")!important;
    background-size:36px 36px!important;
}
.fm-bg-page-scales{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='20' r='10' fill='none' stroke='rgba(128,128,128,0.07)' stroke-width='0.5'/%3E%3Ccircle cx='0' cy='20' r='10' fill='none' stroke='rgba(128,128,128,0.07)' stroke-width='0.5'/%3E%3Ccircle cx='20' cy='20' r='10' fill='none' stroke='rgba(128,128,128,0.07)' stroke-width='0.5'/%3E%3C/svg%3E")!important;
    background-size:20px 20px!important;
}

/* NEW patterns */
.fm-bg-page-snow{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='10' cy='10' r='2' fill='rgba(180,200,220,0.25)'/%3E%3Ccircle cx='35' cy='25' r='1.5' fill='rgba(180,200,220,0.2)'/%3E%3Ccircle cx='20' cy='40' r='2.5' fill='rgba(180,200,220,0.18)'/%3E%3Ccircle cx='45' cy='5' r='1' fill='rgba(180,200,220,0.22)'/%3E%3C/svg%3E")!important;
    background-size:50px 50px!important;
}
.fm-bg-page-confetti{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='10' y='5' width='4' height='8' rx='1' fill='rgba(255,100,100,0.1)' transform='rotate(30 12 9)'/%3E%3Crect x='40' y='15' width='3' height='7' rx='1' fill='rgba(100,100,255,0.1)' transform='rotate(-20 41 18)'/%3E%3Crect x='25' y='40' width='4' height='6' rx='1' fill='rgba(100,200,100,0.1)' transform='rotate(45 27 43)'/%3E%3C/svg%3E")!important;
    background-size:60px 60px!important;
}
.fm-bg-page-hearts{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 30l-8-8c-2.5-2.5-2.5-6.5 0-9s6.5-2.5 9 0l-1-1 1 1c2.5-2.5 6.5-2.5 9 0s2.5 6.5 0 9z' fill='rgba(220,100,120,0.06)' transform='scale(0.5) translate(20,10)'/%3E%3C/svg%3E")!important;
    background-size:40px 40px!important;
}
.fm-bg-page-leaves{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M25 5C15 5 10 15 10 25s10 15 15 20C30 40 40 35 40 25S35 5 25 5z' fill='none' stroke='rgba(80,160,80,0.08)' stroke-width='0.8'/%3E%3C/svg%3E")!important;
    background-size:50px 50px!important;
}
.fm-bg-page-coffee{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='22' r='8' fill='none' stroke='rgba(139,90,43,0.08)' stroke-width='1'/%3E%3Cpath d='M28 22a4 4 0 000-8' fill='none' stroke='rgba(139,90,43,0.06)' stroke-width='1'/%3E%3Cpath d='M16 14Q18 8 20 14Q22 8 24 14' fill='none' stroke='rgba(139,90,43,0.06)' stroke-width='0.8'/%3E%3C/svg%3E")!important;
    background-size:40px 40px!important;
}
.fm-bg-page-bubbles{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='15' cy='15' r='10' fill='none' stroke='rgba(100,150,200,0.08)' stroke-width='1'/%3E%3Ccircle cx='45' cy='40' r='7' fill='none' stroke='rgba(100,150,200,0.06)' stroke-width='1'/%3E%3Ccircle cx='35' cy='10' r='4' fill='rgba(100,150,200,0.04)'/%3E%3C/svg%3E")!important;
    background-size:60px 60px!important;
}
.fm-bg-page-chevron{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 12L12 0L24 12L12 24Z' fill='none' stroke='rgba(128,128,128,0.06)' stroke-width='0.5'/%3E%3C/svg%3E")!important;
    background-size:24px 24px!important;
}
.fm-bg-page-brick{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='22'%3E%3Crect width='42' height='22' fill='none'/%3E%3Crect x='0' y='0' width='20' height='10' fill='none' stroke='rgba(128,128,128,0.08)' stroke-width='0.5'/%3E%3Crect x='21' y='0' width='21' height='10' fill='none' stroke='rgba(128,128,128,0.08)' stroke-width='0.5'/%3E%3Crect x='10' y='11' width='21' height='11' fill='none' stroke='rgba(128,128,128,0.08)' stroke-width='0.5'/%3E%3C/svg%3E")!important;
    background-size:42px 22px!important;
}
.fm-bg-page-plus{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='rgba(128,128,128,0.06)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
    background-size:24px 24px!important;
}
.fm-bg-page-rain{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='50'%3E%3Cline x1='10' y1='0' x2='8' y2='15' stroke='rgba(100,150,200,0.08)' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='22' y1='20' x2='20' y2='35' stroke='rgba(100,150,200,0.06)' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E")!important;
    background-size:30px 50px!important;
}

/* --- Gradients --- */
.fm-bg-page-gradient-warm{background:linear-gradient(135deg,#fef9f4,#fbe8d3)!important}
.fm-bg-page-gradient-cool{background:linear-gradient(135deg,#f0f4ff,#dde4ff)!important}
.fm-bg-page-gradient-mint{background:linear-gradient(135deg,#f0faf5,#d0f0e0)!important}
.fm-bg-page-gradient-sunset{background:linear-gradient(135deg,#fff5f5,#ffd5cc)!important}
.fm-bg-page-gradient-lavender{background:linear-gradient(135deg,#f5f0ff,#e0d5ff)!important}
.fm-bg-page-gradient-ocean{background:linear-gradient(180deg,#e8f4fd,#b8e4f7)!important}
.fm-bg-page-gradient-forest{background:linear-gradient(135deg,#e8f5e9,#c5e1a5)!important}
.fm-bg-page-gradient-rose{background:linear-gradient(135deg,#fce4ec,#f48fb1)!important}
.fm-bg-page-gradient-dark{background:linear-gradient(135deg,#1a1a2e,#0f3460)!important}
.fm-bg-page-gradient-midnight{background:linear-gradient(135deg,#0d0d0d,#232341)!important}

/* === 5 New Patterned Backgrounds (v10.3.0) === */
.fm-bg-page-damask{
    background-color:#f5f0ea;
    background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0c3 5 8 10 8 18s-5 13-8 18c3-5 8-10 8-18S23 5 20 0zM20 4c-3 5-8 10-8 18s5 13 8 18c-3-5-8-10-8-18S17 9 20 4z' fill='rgba(139,115,85,.07)' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-size:40px 40px!important;
}
.fm-bg-page-wave-lines{
    background-color:#f0f4f8;
    background-image:url("data:image/svg+xml,%3Csvg width='60' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15c15-10 15 10 30 0s15-10 30 0' stroke='rgba(74,144,164,.08)' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size:60px 30px!important;
}
.fm-bg-page-honeycomb{
    background-color:#faf8f0;
    background-image:url("data:image/svg+xml,%3Csvg width='56' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zM28 100L0 84V50l28-16 28 16v34L28 100z' stroke='rgba(212,160,23,.07)' fill='none' stroke-width='1'/%3E%3C/svg%3E");
    background-size:56px 100px!important;
}
.fm-bg-page-arabesque{
    background-color:#f5f0f5;
    background-image:url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='10' stroke='rgba(74,14,143,.06)' fill='none' stroke-width='1'/%3E%3Ccircle cx='0' cy='0' r='10' stroke='rgba(74,14,143,.06)' fill='none' stroke-width='1'/%3E%3Ccircle cx='48' cy='0' r='10' stroke='rgba(74,14,143,.06)' fill='none' stroke-width='1'/%3E%3Ccircle cx='0' cy='48' r='10' stroke='rgba(74,14,143,.06)' fill='none' stroke-width='1'/%3E%3Ccircle cx='48' cy='48' r='10' stroke='rgba(74,14,143,.06)' fill='none' stroke-width='1'/%3E%3C/svg%3E");
    background-size:48px 48px!important;
}
.fm-bg-page-terrazzo{
    background-color:#f8f5f0;
    background-image:
        radial-gradient(ellipse 6px 3px at 15% 25%,rgba(184,115,51,.1) 100%,transparent),
        radial-gradient(ellipse 4px 7px at 45% 15%,rgba(155,27,48,.06) 100%,transparent),
        radial-gradient(ellipse 5px 5px at 75% 35%,rgba(58,125,68,.07) 100%,transparent),
        radial-gradient(ellipse 3px 6px at 25% 65%,rgba(74,144,164,.06) 100%,transparent),
        radial-gradient(ellipse 7px 4px at 65% 75%,rgba(212,175,55,.07) 100%,transparent),
        radial-gradient(ellipse 4px 4px at 85% 55%,rgba(139,115,85,.08) 100%,transparent);
    background-size:120px 120px!important;
}

/* Dark theme catbar */
.fm-bg-page-gradient-dark .fm-catbar,
.fm-bg-page-gradient-midnight .fm-catbar{
    background:rgba(0,0,0,.3)!important;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}

/* === ANIMATED BACKGROUNDS === */
/* v11.42.1 — کنترل سرعت انیمیشن پس‌زمینه در ۴ حالت.
   مقدار --fm-anim-mult ضریب مدت‌زمان انیمیشن است: عدد کوچک‌تر = سریع‌تر.
   این کلاس روی همان عنصری می‌نشیند که fm-bg-animated دارد (wrapper منو،
   پنل welcome، یا صفحه home). چون همه‌ی انیمیشن‌ها از calc(Ns*var) استفاده
   می‌کنند، تغییر این یک متغیر کل سرعت را هماهنگ تغییر می‌دهد. */
.fm-bg-speed-calm     { --fm-anim-mult:1.7; }
.fm-bg-speed-normal   { --fm-anim-mult:1; }
.fm-bg-speed-fast     { --fm-anim-mult:0.55; }
.fm-bg-speed-veryfast { --fm-anim-mult:0.3; }
.fm-bg-animated.fm-bg-page-snow{animation:fmBgDrift calc(9s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-rain{animation:fmBgFall calc(3s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-confetti{animation:fmBgDrift calc(7s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-bubbles{animation:fmBgRise calc(5s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-leaves{animation:fmBgSway calc(7s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-hearts{animation:fmBgFloat calc(6s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-dots{animation:fmBgPulseSize calc(4s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-stars{animation:fmBgTwinkle calc(3s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-waves{animation:fmBgWaveMove calc(3s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-coffee{animation:fmBgSway calc(7s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-damask{animation:fmBgSway calc(9s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-wave-lines{animation:fmBgWaveMove calc(4s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-honeycomb{animation:fmBgPulseSize calc(5s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-arabesque{animation:fmBgSway calc(9s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-terrazzo{animation:fmBgFloat calc(7s * var(--fm-anim-mult,1)) ease-in-out infinite}

@keyframes fmBgDrift{
    0%{background-position:0 0}
    100%{background-position:120px 200px}
}
@keyframes fmBgFall{
    0%{background-position:0 0}
    100%{background-position:0 200px}
}
@keyframes fmBgRise{
    0%{background-position:0 0}
    100%{background-position:0 -200px}
}
@keyframes fmBgSway{
    0%{background-position:0 0}
    25%{background-position:18px 9px}
    50%{background-position:0 18px}
    75%{background-position:-18px 9px}
    100%{background-position:0 0}
}
@keyframes fmBgFloat{
    0%{background-position:0 0}
    50%{background-position:12px -22px}
    100%{background-position:0 0}
}
@keyframes fmBgPulseSize{
    0%,100%{background-size:20px 20px}
    50%{background-size:26px 26px}
}
@keyframes fmBgTwinkle{
    0%,100%{opacity:1}
    50%{opacity:.6}
}
@keyframes fmBgWaveMove{
    0%{background-position:0 0}
    100%{background-position:200px 0}
}

/* === ANIMATION === */
/* v11.28.0 — softer spring curve so cards float in instead of jolt. */
.fm-card{animation:fmIn .42s cubic-bezier(.16,1,.3,1) both}
@keyframes fmIn{from{opacity:0;transform:translateY(14px) translateZ(0)}to{opacity:1;transform:translateY(0) translateZ(0)}}

.fm-card.fm-card-expanding{
    z-index:99998;
    transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .3s ease;
}

/* === PREVIEW === */
.flavor-preview{max-width:100%!important;font-size:12px}
.flavor-preview .fm-catbar{position:sticky;top:0}
.flavor-preview .fm-cat-item{min-width:50px;padding:3px 5px}
.flavor-preview .fm-cat-icon-wrap{width:28px;height:28px}
.flavor-preview .fm-cat-label{font-size:9px}
/* Preview: default row layout (mobile size) - excludes new layouts which size themselves */
.flavor-preview:not(.fm-layout-showcase):not(.fm-layout-minimal):not(.fm-layout-catalog):not(.fm-layout-neumorphic):not(.fm-layout-timeline):not(.fm-layout-diagonal):not(.fm-layout-blueprint):not(.fm-layout-polaroid):not(.fm-layout-terminal):not(.fm-layout-ticket):not(.fm-layout-zen):not(.fm-layout-brutalist):not(.fm-layout-cinema):not(.fm-layout-kraft):not(.fm-layout-cyberpunk):not(.fm-layout-botanical):not(.fm-layout-comic):not(.fm-layout-menuboard):not(.fm-layout-bistrot):not(.fm-layout-streetfood):not(.fm-layout-patisserie):not(.fm-layout-steakhouse):not(.fm-layout-izakaya):not(.fm-layout-speakeasy):not(.fm-layout-greenhouse):not(.fm-layout-kawaii):not(.fm-layout-trattoria):not(.fm-layout-sushibar):not(.fm-layout-icecream) .fm-card-img-wrap{width:120px!important;height:120px!important;max-height:120px!important}
/* Preview: sidebar 1col */
.flavor-preview.fm-layout-sidebar .fm-card .fm-card-img-wrap{width:100%!important;height:180px!important;max-height:180px!important}
/* Preview: big cards classic */
.flavor-preview.fm-cards-big:not(.fm-layout-sidebar) .fm-card .fm-card-img-wrap{width:100%!important;height:200px!important;max-height:200px!important}
/* Preview: 2col classic */
.flavor-preview.fm-cards-2col:not(.fm-layout-sidebar) .fm-card .fm-card-img-wrap{width:100%!important;height:124px!important;max-height:160px!important}
/* Preview: 2col sidebar */
.flavor-preview.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-img-wrap{width:100%!important;height:84px!important;max-height:130px!important}
.flavor-preview .fm-card-title{font-size:12px}
.flavor-preview .fm-card-price{font-size:10px}
.flavor-preview .fm-card-desc{font-size:9px}
.flavor-preview .fm-meta{font-size:8px;padding:2px 5px}
.flavor-preview .fm-section-title{font-size:14px}
.flavor-preview .fm-card-btn{min-width:70px}
.flavor-preview .fm-bottom-toolbar{
    position:sticky!important;bottom:0;left:0;right:0;
    max-width:100%;margin:0;padding:4px 6px 6px;
    border-radius:0;
}
.flavor-preview .fm-toolbar-item{min-height:28px;border-radius:8px}
.flavor-preview .fm-toolbar-grid{gap:4px}

/* Preview: compact layout */
.flavor-preview.fm-toolbar-compact .fm-bottom-toolbar{
    border-radius:14px!important;
    margin:0 6px 6px!important;
    max-width:calc(100% - 12px)!important;
    padding:4px 6px 4px!important;
    border:1px solid rgba(0,0,0,.08)!important;
    box-shadow:0 2px 12px rgba(0,0,0,.10)!important;
}
.flavor-preview.fm-toolbar-compact .fm-toolbar-item{min-height:26px!important;border-radius:8px!important}
.flavor-preview.fm-toolbar-compact .fm-toolbar-grid{gap:3px!important}

/* Preview: ultracompact layout */
.flavor-preview.fm-toolbar-ultracompact .fm-bottom-toolbar{
    width:75%!important;
    max-width:75%!important;
    margin:0 auto 6px!important;
    border-radius:16px!important;
    padding:5px 8px 5px!important;
    border:1px solid rgba(0,0,0,.07)!important;
    box-shadow:0 2px 12px rgba(0,0,0,.08)!important;
}
.flavor-preview.fm-toolbar-ultracompact .fm-toolbar-item{min-height:22px!important;border-radius:8px!important;padding:0 1px!important}
.flavor-preview.fm-toolbar-ultracompact .fm-toolbar-grid{gap:2px!important}

/* Preview: glass */
.flavor-preview.fm-toolbar-glass .fm-bottom-toolbar{
    background:rgba(255,255,255,.45)!important;
    backdrop-filter:blur(40px) saturate(1.8)!important;
    -webkit-backdrop-filter:blur(40px) saturate(1.8)!important;
    border-top:1px solid rgba(255,255,255,.55)!important;
    box-shadow:0 -2px 20px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.15)!important;
}
.flavor-preview.fm-toolbar-glass .fm-toolbar-item{
    background:rgba(255,255,255,.25)!important;
    border:1px solid rgba(255,255,255,.35)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4)!important;
}

/* Preview: Fix ultracompact toolbar cut-off — ensure all 4 buttons visible */
.flavor-preview.fm-toolbar-ultracompact .fm-bottom-toolbar{
    width:85%!important;max-width:85%!important;
    padding:4px 6px 4px!important;
    overflow:visible!important;
}
.flavor-preview.fm-toolbar-ultracompact .fm-toolbar-grid{
    gap:2px!important;
    grid-template-columns:1fr 1fr!important;
}
.flavor-preview.fm-toolbar-ultracompact .fm-toolbar-item{
    min-height:20px!important;border-radius:6px!important;padding:0!important;
    overflow:hidden!important;
}

/* Preview: catbar compact */
.flavor-preview.fm-catbar-compact .fm-catbar{padding:5px 2px 3px!important;margin:6px auto 0!important;width:85%!important;border-radius:12px!important;box-shadow:0 1px 8px rgba(0,0,0,.06)!important}
.flavor-preview.fm-catbar-compact .fm-cat-item{min-width:38px!important;padding:3px 5px!important}
.flavor-preview.fm-catbar-compact .fm-cat-icon-wrap{width:20px!important;height:20px!important}
.flavor-preview.fm-catbar-compact .fm-cat-label{font-size:7px!important}
.flavor-preview.fm-catbar-compact .fm-catbar-scroll{gap:3px!important;padding:0 4px!important}

/* Preview: catbar glass */
.flavor-preview.fm-catbar-glass-on .fm-catbar{
    background:rgba(255,255,255,.45)!important;
    backdrop-filter:blur(30px) saturate(1.6)!important;
    -webkit-backdrop-filter:blur(30px) saturate(1.6)!important;
}
.flavor-preview.fm-catbar-glass-on .fm-cat-item{
    background:transparent!important;
    border-color:rgba(255,255,255,.3)!important;
}

/* === RESPONSIVE === */
@media(max-width:500px){
    .fm-card-img-wrap{width:120px!important;height:120px!important;max-height:120px!important}
    .fm-card-metas{flex-wrap:wrap}
    .fm-card-btn{min-width:80px}
}

/* ============================================================
   FLAVOR MENU v8.0 - NEW ADDITIONS
   ============================================================ */

/* === META BADGES - shortcode right, metas left === */
[dir="rtl"] .fm-card-bottom-row{flex-direction:row}
[dir="rtl"] .fm-card-metas{justify-content:flex-end}
[dir="rtl"] .fm-card-sc-area{justify-content:flex-start}
[dir="ltr"] .fm-card-bottom-row{flex-direction:row-reverse}
[dir="ltr"] .fm-card-metas{justify-content:flex-start}
[dir="ltr"] .fm-card-sc-area{justify-content:flex-start}

/* === CARD BORDER (when enabled) === */
[data-card-border="1"] .fm-card{
    border:2px solid var(--fm-catbar-active-border,#2d2d2d)!important;
}

/* === IMAGE BORDER (when enabled) === */
[data-img-border="1"] .fm-card-img-wrap{
    border:var(--fm-img-bw,2px) var(--fm-img-bs,solid) var(--fm-catbar-active-border,#2d2d2d);
}

/* === POPUP BOTTOM BAR - Fixed orders/cart shortcode === */
.fm-popup-bottom-bar{
    position:sticky;bottom:0;z-index:25;
    padding:10px 16px 14px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid rgba(0,0,0,.06);
    display:flex;align-items:center;justify-content:center;
}
/* v11.46.0 — The popup orders/cart button reuses the menu toolbar markup
   (.fm-bottom-toolbar > .fm-toolbar-grid > .fm-toolbar-item) so it inherits
   the EXACT styling of the menu's orders-display button. But inside the
   popup it must NOT be fixed to the viewport — neutralise the fixed
   positioning and let it sit inline, full-width, within the bottom bar. */
.fm-popup-toolbar.fm-bottom-toolbar{
    position:static!important;
    bottom:auto!important;left:auto;right:auto;
    z-index:auto;
    width:100%;max-width:100%;
    margin:0;padding:0;
    background:transparent!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border-top:none!important;
    box-shadow:none!important;
}
.fm-popup-toolbar .fm-toolbar-grid{width:100%;}

/* === CARD ENTRY ANIMATION (stagger) === */
/* Handled by JS - no default animation to avoid flash */
[data-card-entry="1"] .fm-card{
    animation:none!important;
}

/* === NEW BACKGROUND PATTERNS === */
.fm-bg-page-spiral{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='rgba(128,128,128,0.05)' stroke-width='0.5'/%3E%3Ccircle cx='25' cy='25' r='15' fill='none' stroke='rgba(128,128,128,0.04)' stroke-width='0.5'/%3E%3Ccircle cx='25' cy='25' r='10' fill='none' stroke='rgba(128,128,128,0.06)' stroke-width='0.5'/%3E%3Ccircle cx='25' cy='25' r='5' fill='none' stroke='rgba(128,128,128,0.04)' stroke-width='0.5'/%3E%3C/svg%3E")!important;
    background-size:50px 50px!important;
}
.fm-bg-page-mosaic{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='0' y='0' width='20' height='20' fill='rgba(128,128,128,0.03)'/%3E%3Crect x='20' y='20' width='20' height='20' fill='rgba(128,128,128,0.03)'/%3E%3C/svg%3E")!important;
    background-size:40px 40px!important;
}
.fm-bg-page-arrows{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 5l5 10h-10z' fill='rgba(128,128,128,0.05)' stroke='none'/%3E%3C/svg%3E")!important;
    background-size:30px 30px!important;
}
.fm-bg-page-floral{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='25' cy='25' r='3' fill='rgba(180,120,100,0.06)'/%3E%3Ccircle cx='25' cy='18' r='4' fill='none' stroke='rgba(180,120,100,0.04)' stroke-width='0.5'/%3E%3Ccircle cx='31' cy='22' r='4' fill='none' stroke='rgba(180,120,100,0.04)' stroke-width='0.5'/%3E%3Ccircle cx='31' cy='28' r='4' fill='none' stroke='rgba(180,120,100,0.04)' stroke-width='0.5'/%3E%3Ccircle cx='25' cy='32' r='4' fill='none' stroke='rgba(180,120,100,0.04)' stroke-width='0.5'/%3E%3Ccircle cx='19' cy='28' r='4' fill='none' stroke='rgba(180,120,100,0.04)' stroke-width='0.5'/%3E%3Ccircle cx='19' cy='22' r='4' fill='none' stroke='rgba(180,120,100,0.04)' stroke-width='0.5'/%3E%3C/svg%3E")!important;
    background-size:50px 50px!important;
}
.fm-bg-page-islamic{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 4L44 24L24 44L4 24Z' fill='none' stroke='rgba(160,120,60,0.06)' stroke-width='0.5'/%3E%3Cpath d='M24 12L36 24L24 36L12 24Z' fill='none' stroke='rgba(160,120,60,0.05)' stroke-width='0.5'/%3E%3C/svg%3E")!important;
    background-size:48px 48px!important;
}
.fm-bg-page-chain{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='40'%3E%3Cellipse cx='12' cy='10' rx='8' ry='10' fill='none' stroke='rgba(128,128,128,0.06)' stroke-width='0.5'/%3E%3Cellipse cx='12' cy='30' rx='8' ry='10' fill='none' stroke='rgba(128,128,128,0.06)' stroke-width='0.5'/%3E%3C/svg%3E")!important;
    background-size:24px 40px!important;
}
.fm-bg-page-ribbon-bg{
    background-image:repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(128,80,200,0.03) 8px,rgba(128,80,200,0.03) 16px)!important;
}
.fm-bg-page-feather{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60'%3E%3Cpath d='M20 5Q30 20 20 40Q10 20 20 5Z' fill='none' stroke='rgba(80,160,120,0.05)' stroke-width='0.5'/%3E%3Cpath d='M20 5L20 40' fill='none' stroke='rgba(80,160,120,0.04)' stroke-width='0.3'/%3E%3C/svg%3E")!important;
    background-size:40px 60px!important;
}
.fm-bg-page-circuit{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20H15M25 20H40M20 0V15M20 25V40' stroke='rgba(80,120,200,0.06)' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='20' cy='20' r='3' fill='rgba(80,120,200,0.04)'/%3E%3C/svg%3E")!important;
    background-size:40px 40px!important;
}
.fm-bg-page-celtic{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='14' fill='none' stroke='rgba(128,128,80,0.06)' stroke-width='0.5'/%3E%3Ccircle cx='18' cy='18' r='8' fill='none' stroke='rgba(128,128,80,0.04)' stroke-width='0.5'/%3E%3Cpath d='M18 4V32M4 18H32' stroke='rgba(128,128,80,0.04)' stroke-width='0.3' fill='none'/%3E%3C/svg%3E")!important;
    background-size:36px 36px!important;
}

/* === BRAND NAME BACKGROUND PATTERNS === */
.fm-bg-page-brand-diagonal::before,
.fm-bg-page-brand-grid::before,
.fm-bg-page-brand-scatter::before{
    content:var(--fm-brand,'BRAND');
    position:fixed;inset:0;z-index:0;pointer-events:none;
    font-size:16px;font-weight:700;
    color:var(--fm-catbar-active-border,rgba(0,0,0,.03));
    opacity:0.04;
    overflow:hidden;
    display:flex;flex-wrap:wrap;align-content:flex-start;gap:30px;padding:20px;
    word-break:break-all;line-height:2.5;letter-spacing:8px;
}
.fm-bg-page-brand-diagonal::before{transform:rotate(-30deg) scale(1.5);transform-origin:center}
.fm-bg-page-brand-grid::before{text-align:center;justify-content:center}
.fm-bg-page-brand-scatter::before{transform:rotate(-15deg) scale(1.3);transform-origin:top left}

/* === NEW GRADIENT BACKGROUNDS === */
.fm-bg-page-gradient-peach-gold{background:linear-gradient(135deg,#ffecd2,#fcb69f)!important}
.fm-bg-page-gradient-arctic{background:linear-gradient(135deg,#e0eafc,#cfdef3)!important}
.fm-bg-page-gradient-ember{background:linear-gradient(135deg,#f5af19,#f12711)!important}
.fm-bg-page-gradient-twilight{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)!important}
.fm-bg-page-gradient-aurora-bg{background:linear-gradient(135deg,#1a2a6c,#b21f1f,#fdbb2d)!important}
.fm-bg-page-gradient-deep-sea{background:linear-gradient(135deg,#2c3e50,#4ca1af)!important}

/* Dark gradient catbar */
.fm-bg-page-gradient-twilight .fm-catbar,
.fm-bg-page-gradient-aurora-bg .fm-catbar,
.fm-bg-page-gradient-ember .fm-catbar,
.fm-bg-page-gradient-deep-sea .fm-catbar{
    background:rgba(0,0,0,.3)!important;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}

/* === NEW ANIMATED BACKGROUNDS === */
.fm-bg-animated.fm-bg-page-spiral{animation:fmBgRotate calc(30s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-mosaic{animation:fmBgPulseSize calc(12s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-arrows{animation:fmBgFall calc(10s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-floral{animation:fmBgSway calc(15s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-islamic{animation:fmBgDrift calc(20s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-chain{animation:fmBgFall calc(12s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-ribbon-bg{animation:fmBgDiagMove calc(15s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-feather{animation:fmBgFloat calc(14s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-circuit{animation:fmBgPulseSize calc(10s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-celtic{animation:fmBgRotate calc(25s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-grid{animation:fmBgDrift calc(18s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-diagonal{animation:fmBgDiagMove calc(12s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-zigzag{animation:fmBgWaveMove calc(10s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-hexagon{animation:fmBgDrift calc(16s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-circles{animation:fmBgPulseSize calc(14s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-diamonds{animation:fmBgRotate calc(20s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-crosses{animation:fmBgDrift calc(15s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-triangles{animation:fmBgFall calc(12s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-moroccan{animation:fmBgSway calc(18s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-scales{animation:fmBgRise calc(14s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-chevron{animation:fmBgDrift calc(12s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-brick{animation:fmBgWaveMove calc(16s * var(--fm-anim-mult,1)) linear infinite}
.fm-bg-animated.fm-bg-page-plus{animation:fmBgPulseSize calc(12s * var(--fm-anim-mult,1)) ease-in-out infinite}
.fm-bg-animated.fm-bg-page-brand-diagonal::before{animation:fmBgDiagMove 25s linear infinite}
.fm-bg-animated.fm-bg-page-brand-grid::before{animation:fmBgPulseSize 15s ease-in-out infinite}
.fm-bg-animated.fm-bg-page-brand-scatter::before{animation:fmBgSway 20s ease-in-out infinite}

/* v11.42.4 — Animated gradients & motion backgrounds for welcome page.
   Gradients animate by shifting their internal color-stops along the
   axis (background-size > 100% + background-position drift), which makes
   the light/shade boundary breathe gently — the most meaningful kind of
   motion for a flat gradient. Motion-* presets gain a subtle continuous
   drift on the SVG/canvas overlay. Speeds are slow on purpose so the
   movement is felt rather than seen. */
.fm-bg-animated[class*="fm-bg-page-gradient-"]{
    background-size:200% 200%!important;
    animation:fmBgGradientShift calc(22s * var(--fm-anim-mult,1)) ease-in-out infinite;
}
@keyframes fmBgGradientShift{
    0%   {background-position:0% 50%}
    50%  {background-position:100% 50%}
    100% {background-position:0% 50%}
}
/* Per-gradient motion direction — vertical for ocean/forest (sky-like),
   diagonal for warm/sunset (sun travel), radial-feel for dark/midnight. */
.fm-bg-animated.fm-bg-page-gradient-ocean,
.fm-bg-animated.fm-bg-page-gradient-arctic,
.fm-bg-animated.fm-bg-page-gradient-deep-sea{
    animation-name:fmBgGradientVertical;
}
@keyframes fmBgGradientVertical{
    0%   {background-position:50% 0%}
    50%  {background-position:50% 100%}
    100% {background-position:50% 0%}
}
.fm-bg-animated.fm-bg-page-gradient-dark,
.fm-bg-animated.fm-bg-page-gradient-midnight,
.fm-bg-animated.fm-bg-page-gradient-twilight,
.fm-bg-animated.fm-bg-page-gradient-aurora-bg{
    animation-name:fmBgGradientDiag;
    animation-duration:calc(30s * var(--fm-anim-mult,1));
}
@keyframes fmBgGradientDiag{
    0%   {background-position:0% 0%}
    25%  {background-position:100% 0%}
    50%  {background-position:100% 100%}
    75%  {background-position:0% 100%}
    100% {background-position:0% 0%}
}
/* Motion-* canvas presets — slow drift on the underlying pattern overlay */
.fm-bg-animated.fm-bg-page-motion-float,
.fm-bg-animated.fm-bg-page-motion-orbs,
.fm-bg-animated.fm-bg-page-motion-geometric{
    background-size:160% 160%!important;
    animation:fmBgGradientDiag calc(28s * var(--fm-anim-mult,1)) ease-in-out infinite;
}
/* Respect reduced-motion preference for the new animations too */
@media (prefers-reduced-motion: reduce){
    .fm-bg-animated[class*="fm-bg-page-gradient-"],
    .fm-bg-animated.fm-bg-page-motion-float,
    .fm-bg-animated.fm-bg-page-motion-orbs,
    .fm-bg-animated.fm-bg-page-motion-geometric{
        animation:none!important;
    }
}

@keyframes fmBgRotate{
    0%{background-position:0 0}
    100%{background-position:200px 200px}
}
@keyframes fmBgDiagMove{
    0%{background-position:0 0}
    100%{background-position:100px 100px}
}

/* === ACHAEMENID HEADING STYLE === */
.fm-heading-box-achaemenid{justify-content:center;gap:0}
.fm-heading-box-achaemenid .fm-section-line{display:none}
.fm-heading-box-achaemenid .fm-section-title{
    padding:8px 30px;position:relative;
    background:linear-gradient(135deg,#d4a017,#8b6914);
    color:#fff!important;
    border:1px solid rgba(212,160,23,.5);border-radius:3px;
    letter-spacing:1px;
    box-shadow:0 2px 10px rgba(139,105,20,.2),inset 0 1px 0 rgba(255,255,255,.2);
}
.fm-heading-box-achaemenid .fm-section-title::before,
.fm-heading-box-achaemenid .fm-section-title::after{
    content:'';position:absolute;top:50%;width:24px;height:24px;transform:translateY(-50%);
    background:rgba(255,215,0,.6);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z'/%3E%3C/svg%3E");
    -webkit-mask-size:contain;mask-size:contain;
}
.fm-heading-box-achaemenid .fm-section-title::before{right:calc(100% + 6px)}
.fm-heading-box-achaemenid .fm-section-title::after{left:calc(100% + 6px)}

/* === PROFESSIONAL CART HIGHLIGHT EFFECTS v8 === */
.fm-cart-anim-bg{
    position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;z-index:0;overflow:hidden;
    opacity:0;transition:opacity .5s ease;
}
.fm-card.fm-in-cart{
    position:relative;z-index:1;
    transition:all .5s cubic-bezier(.4,0,.2,1);
}
.fm-card.fm-in-cart .fm-cart-anim-bg{opacity:1}

/* Cart enter animation */
.fm-card.fm-cart-enter{
    animation:fmCartEnter .6s cubic-bezier(.22,1,.36,1);
}
@keyframes fmCartEnter{
    0%{transform:scale(1)}
    30%{transform:scale(1.04)}
    100%{transform:scale(1)}
}

/* Cart exit animation */
.fm-card.fm-cart-exit{
    animation:fmCartExit .4s ease;
}
@keyframes fmCartExit{
    0%{opacity:1}
    100%{opacity:.8}
}

/* Aurora */
.fm-card.fm-in-cart.fm-hl-aurora{
    border:2px solid var(--fm-catbar-active-border,#4f46e5)!important;
}
.fm-card.fm-in-cart.fm-hl-aurora .fm-cart-anim-bg{
    background:linear-gradient(135deg,
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.08),
        transparent 40%,
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.05) 60%,
        transparent);
    animation:fmAuroraShift 6s ease-in-out infinite;
}
@keyframes fmAuroraShift{
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}

/* Particles */
.fm-card.fm-in-cart.fm-hl-particles{
    border:2px solid var(--fm-catbar-active-border,#4f46e5)!important;
}
.fm-card.fm-in-cart.fm-hl-particles .fm-cart-anim-bg{
    background:radial-gradient(circle at 20% 30%,var(--fm-catbar-active-border,#4f46e5) 1px,transparent 1px),
               radial-gradient(circle at 80% 70%,var(--fm-catbar-active-border,#4f46e5) 1px,transparent 1px),
               radial-gradient(circle at 50% 10%,var(--fm-catbar-active-border,#4f46e5) 0.5px,transparent 0.5px);
    background-size:60px 60px;
    opacity:0.15;
    animation:fmParticleFloat 8s linear infinite;
}
@keyframes fmParticleFloat{
    0%{background-position:0 0}
    100%{background-position:60px -60px}
}

/* Ripple */
.fm-card.fm-in-cart.fm-hl-ripple{
    border:2px solid var(--fm-catbar-active-border,#4f46e5)!important;
}
.fm-card.fm-in-cart.fm-hl-ripple .fm-cart-anim-bg{
    background:radial-gradient(circle at center,transparent 30%,var(--fm-catbar-active-border,#4f46e5) 30.5%,transparent 31%);
    background-size:40px 40px;
    opacity:.08;
    animation:fmRippleExpand 4s ease-in-out infinite;
}
@keyframes fmRippleExpand{
    0%{background-size:20px 20px;opacity:.12}
    50%{background-size:60px 60px;opacity:.04}
    100%{background-size:20px 20px;opacity:.12}
}

/* Morphing border */
.fm-card.fm-in-cart.fm-hl-morphing{
    border:2px solid var(--fm-catbar-active-border,#4f46e5)!important;
    animation:fmMorphBorder 5s ease-in-out infinite;
}
@keyframes fmMorphBorder{
    0%,100%{border-radius:var(--fm-card-radius,16px)}
    25%{border-radius:20px 8px 20px 8px}
    50%{border-radius:8px 20px 8px 20px}
    75%{border-radius:14px 18px 14px 18px}
}

/* Neon */
.fm-card.fm-in-cart.fm-hl-neon{
    border:2px solid var(--fm-catbar-active-border,#4f46e5)!important;
    box-shadow:0 0 15px var(--fm-catbar-active-border,#4f46e5),
               0 0 30px rgba(79,70,229,.15),
               inset 0 0 15px rgba(79,70,229,.05);
    animation:fmNeonPulse 2s ease-in-out infinite;
}
@keyframes fmNeonPulse{
    0%,100%{box-shadow:0 0 15px var(--fm-catbar-active-border,#4f46e5),0 0 30px rgba(79,70,229,.15),inset 0 0 15px rgba(79,70,229,.05)}
    50%{box-shadow:0 0 25px var(--fm-catbar-active-border,#4f46e5),0 0 50px rgba(79,70,229,.2),inset 0 0 25px rgba(79,70,229,.08)}
}

/* Glass */
.fm-card.fm-in-cart.fm-hl-glass{
    border:2px solid rgba(255,255,255,.4)!important;
    backdrop-filter:blur(2px);
}
.fm-card.fm-in-cart.fm-hl-glass .fm-cart-anim-bg{
    background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 50%,rgba(255,255,255,.08));
    animation:fmGlassShimmer 4s ease-in-out infinite;
}
@keyframes fmGlassShimmer{
    0%{opacity:.6}
    50%{opacity:1}
    100%{opacity:.6}
}

/* === v11.26.0: Five new theme-aware cart highlight effects === */

/* 1. Shimmer Wave — موج درخشان عبوری از کارت */
.fm-card.fm-in-cart.fm-hl-shimmer{
    border:2px solid var(--fm-catbar-active-border,#4f46e5)!important;
    overflow:hidden;
}
.fm-card.fm-in-cart.fm-hl-shimmer .fm-cart-anim-bg{
    background:linear-gradient(110deg,
        transparent 0%,
        transparent 40%,
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.18) 48%,
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.32) 50%,
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.18) 52%,
        transparent 60%,
        transparent 100%);
    background-size:300% 100%;
    animation:fmShimmerWave 3.5s ease-in-out infinite;
}
@keyframes fmShimmerWave{
    0%{background-position:200% 0}
    50%{background-position:-100% 0}
    100%{background-position:-100% 0}
}

/* 2. Spotlight — نور موضعی متحرک */
.fm-card.fm-in-cart.fm-hl-spotlight{
    border:2px solid var(--fm-catbar-active-border,#4f46e5)!important;
    overflow:hidden;
}
.fm-card.fm-in-cart.fm-hl-spotlight .fm-cart-anim-bg{
    background:radial-gradient(circle 90px at var(--fm-spot-x,30%) var(--fm-spot-y,30%),
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.30),
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.10) 40%,
        transparent 70%);
    animation:fmSpotlightMove 6s ease-in-out infinite;
}
@keyframes fmSpotlightMove{
    0%,100%{--fm-spot-x:25%;--fm-spot-y:25%}
    25%{--fm-spot-x:75%;--fm-spot-y:30%}
    50%{--fm-spot-x:75%;--fm-spot-y:75%}
    75%{--fm-spot-x:25%;--fm-spot-y:70%}
}
@property --fm-spot-x{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --fm-spot-y{syntax:'<percentage>';inherits:false;initial-value:30%}

/* 3. Diagonal Stripes — راه‌راه قطری متحرک هوشمند */
.fm-card.fm-in-cart.fm-hl-stripes{
    border:2px solid var(--fm-catbar-active-border,#4f46e5)!important;
    overflow:hidden;
}
.fm-card.fm-in-cart.fm-hl-stripes .fm-cart-anim-bg{
    background:repeating-linear-gradient(45deg,
        transparent 0px,
        transparent 14px,
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.10) 14px,
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.10) 22px);
    animation:fmStripesShift 4s linear infinite;
}
@keyframes fmStripesShift{
    0%{background-position:0 0}
    100%{background-position:64px 0}
}

/* 4. Corner Frame — قاب گوشه‌ای الگانت با درخشش */
.fm-card.fm-in-cart.fm-hl-corner{
    border:2px solid var(--fm-catbar-active-border,#4f46e5)!important;
    position:relative;
}
.fm-card.fm-in-cart.fm-hl-corner::before,
.fm-card.fm-in-cart.fm-hl-corner::after{
    content:'';
    position:absolute;
    width:24px;height:24px;
    border:3px solid var(--fm-catbar-active-border,#4f46e5);
    z-index:2;
    pointer-events:none;
    animation:fmCornerPulse 2.5s ease-in-out infinite;
}
.fm-card.fm-in-cart.fm-hl-corner::before{
    top:-2px;left:-2px;
    border-right:none;border-bottom:none;
    border-top-left-radius:var(--fm-card-radius,16px);
}
.fm-card.fm-in-cart.fm-hl-corner::after{
    bottom:-2px;right:-2px;
    border-left:none;border-top:none;
    border-bottom-right-radius:var(--fm-card-radius,16px);
}
.fm-card.fm-in-cart.fm-hl-corner .fm-cart-anim-bg{
    background:radial-gradient(ellipse at top left,rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.10),transparent 50%),
               radial-gradient(ellipse at bottom right,rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.10),transparent 50%);
}
@keyframes fmCornerPulse{
    0%,100%{box-shadow:0 0 0 rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.5)}
    50%{box-shadow:0 0 12px rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.8)}
}

/* 5. Gradient Edge — لبه گرادیانی پویا، چرخان */
.fm-card.fm-in-cart.fm-hl-edge{
    border:2px solid transparent!important;
    background-clip:padding-box;
    position:relative;
}
.fm-card.fm-in-cart.fm-hl-edge::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    padding:2px;
    background:conic-gradient(from var(--fm-edge-angle,0deg),
        var(--fm-catbar-active-border,#4f46e5),
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.4),
        var(--fm-catbar-active-border,#4f46e5),
        rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.4),
        var(--fm-catbar-active-border,#4f46e5));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    animation:fmEdgeRotate 4s linear infinite;
    pointer-events:none;
    z-index:2;
}
@keyframes fmEdgeRotate{
    from{--fm-edge-angle:0deg}
    to  {--fm-edge-angle:360deg}
}
@property --fm-edge-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.fm-card.fm-in-cart.fm-hl-edge .fm-cart-anim-bg{
    background:radial-gradient(circle at 50% 50%,rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.06),transparent 70%);
}

/* Fallback for browsers without @property support — افکت‌های 2 و 5 */
@supports not (background:conic-gradient(from var(--x,0deg),red,red)){
    .fm-card.fm-in-cart.fm-hl-edge::before{
        background:linear-gradient(135deg,
            var(--fm-catbar-active-border,#4f46e5) 0%,
            rgba(var(--fm-hl-r,79),var(--fm-hl-g,70),var(--fm-hl-b,229),.4) 50%,
            var(--fm-catbar-active-border,#4f46e5) 100%);
        animation:fmEdgePulse 3s ease-in-out infinite;
    }
    @keyframes fmEdgePulse{
        0%,100%{opacity:.6}
        50%{opacity:1}
    }
}

/* === ALL 20 HEADING BOX STYLES === */
.fm-section-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fm-heading-box-default .fm-section-line{flex:1;height:1px;background:var(--fm-sh-line,#e0e0e0)}

/* Wings */
.fm-heading-box-wings{justify-content:center}
.fm-heading-box-wings .fm-section-line{display:none}
.fm-heading-box-wings .fm-section-title{
    padding:6px 18px;background:var(--fm-card-bg,#f0f0f0);border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* Ribbon */
.fm-heading-box-ribbon{justify-content:center}
.fm-heading-box-ribbon .fm-section-line{display:none}
.fm-heading-box-ribbon .fm-section-title{
    padding:6px 28px;
    background:var(--fm-sh-color,#333);color:#fff!important;
    clip-path:polygon(8% 0%,92% 0%,100% 50%,92% 100%,8% 100%,0% 50%);
}

/* Banner */
.fm-heading-box-banner{justify-content:center}
.fm-heading-box-banner .fm-section-line{display:none}
.fm-heading-box-banner .fm-section-title{
    padding:6px 24px;
    background:linear-gradient(135deg,var(--fm-sh-color,#333),color-mix(in srgb,var(--fm-sh-color,#333),#fff 25%));
    color:#fff!important;border-radius:4px;
}

/* Underline */
.fm-heading-box-underline .fm-section-line{display:none}
.fm-heading-box-underline .fm-section-title{
    border-bottom:3px solid var(--fm-catbar-active-border,#333);
    padding-bottom:6px;width:100%;text-align:center;
}

/* Bracket */
.fm-heading-box-bracket{justify-content:center}
.fm-heading-box-bracket .fm-section-line{display:none}
.fm-heading-box-bracket .fm-section-title{
    padding:5px 16px;border:2px solid var(--fm-sh-color,#333);
}

/* Leaf */
.fm-heading-box-leaf{justify-content:center}
.fm-heading-box-leaf .fm-section-line{display:none}
.fm-heading-box-leaf .fm-section-title{
    padding:6px 20px;border:1px solid var(--fm-sh-line,#ccc);border-radius:50px;
}

/* Diamond */
.fm-heading-box-diamond{justify-content:center}
.fm-heading-box-diamond .fm-section-line{display:none}
.fm-heading-box-diamond .fm-section-title::before{content:'◆ ';font-size:.7em;vertical-align:middle;color:var(--fm-catbar-active-border)}
.fm-heading-box-diamond .fm-section-title::after{content:' ◆';font-size:.7em;vertical-align:middle;color:var(--fm-catbar-active-border)}

/* Gradbar */
.fm-heading-box-gradbar{justify-content:center}
.fm-heading-box-gradbar .fm-section-line{display:none}
.fm-heading-box-gradbar .fm-section-title{
    padding:6px 24px;
    background:linear-gradient(90deg,transparent,var(--fm-sh-line,#ddd) 15%,var(--fm-sh-line,#ddd) 85%,transparent);
    border-radius:6px;
}

/* Glow */
.fm-heading-box-glow{justify-content:center}
.fm-heading-box-glow .fm-section-line{display:none}
.fm-heading-box-glow .fm-section-title{
    padding:6px 20px;background:var(--fm-card-bg,#fff);border-radius:12px;
    box-shadow:0 0 16px rgba(79,70,229,.15);
}

/* Pill */
.fm-heading-box-pill{justify-content:center}
.fm-heading-box-pill .fm-section-line{display:none}
.fm-heading-box-pill .fm-section-title{
    padding:6px 24px;background:var(--fm-sh-color,#333);color:#fff!important;border-radius:50px;
}

/* Dotted */
.fm-heading-box-dotted{justify-content:center}
.fm-heading-box-dotted .fm-section-line{display:none}
.fm-heading-box-dotted .fm-section-title{
    padding:5px 16px;border:2px dotted var(--fm-sh-color,#333);border-radius:8px;
}

/* Shadow Lift */
.fm-heading-box-shadowlift{justify-content:center}
.fm-heading-box-shadowlift .fm-section-line{display:none}
.fm-heading-box-shadowlift .fm-section-title{
    padding:8px 24px;background:var(--fm-card-bg,#fff);border-radius:14px;
    box-shadow:0 8px 28px rgba(0,0,0,.08);
}

/* Tag */
.fm-heading-box-tag{justify-content:flex-start}
.fm-heading-box-tag .fm-section-line{display:none}
.fm-heading-box-tag .fm-section-title{
    padding:6px 18px 6px 12px;
    background:var(--fm-sh-color,#333);color:#fff!important;
    border-radius:0 8px 8px 0;
}

/* Neon */
.fm-heading-box-neon{justify-content:center}
.fm-heading-box-neon .fm-section-line{display:none}
.fm-heading-box-neon .fm-section-title{
    padding:5px 18px;border:2px solid var(--fm-catbar-active-border,#4f46e5);border-radius:8px;
    box-shadow:0 0 10px var(--fm-catbar-active-border,#4f46e5);
}

/* Elegant */
.fm-heading-box-elegant{justify-content:center}
.fm-heading-box-elegant .fm-section-line{display:none}
.fm-heading-box-elegant .fm-section-title{letter-spacing:2px}
.fm-heading-box-elegant .fm-section-title::before{content:'— '}
.fm-heading-box-elegant .fm-section-title::after{content:' —'}

/* Stamp */
.fm-heading-box-stamp{justify-content:center}
.fm-heading-box-stamp .fm-section-line{display:none}
.fm-heading-box-stamp .fm-section-title{
    padding:5px 16px;border:3px double var(--fm-sh-color,#333);border-radius:4px;
}

/* Wave */
.fm-heading-box-wave .fm-section-line{display:none}
.fm-heading-box-wave .fm-section-title{
    width:100%;text-align:center;padding-bottom:8px;
    border-bottom:3px solid var(--fm-sh-line);
    text-decoration-style:wavy;
}

/* GradText (rainbow) */
.fm-heading-box-gradtext{justify-content:center}
.fm-heading-box-gradtext .fm-section-line{display:none}
.fm-heading-box-gradtext .fm-section-title{
    background:linear-gradient(90deg,var(--fm-catbar-active-border,#667eea),color-mix(in srgb,var(--fm-catbar-active-border,#764ba2),#ff6 40%));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}

/* === POPUP PEEK EFFECT - Enhanced blur === */
.fm-popup-card{
    transition:all .3s ease;
    opacity:.5;
    transform:scale(.92);
    filter:blur(2px);
}
.fm-popup-card.fm-popup-card-active{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
}
.fm-popup-card-active + .fm-popup-card{
    opacity:.7;
    transform:scale(.96);
    filter:blur(1px);
}

/* === POPUP CATEGORY BAR - Active highlight with theme color === */
.fm-popup-cat-item.active{
    color:var(--fm-catbar-active-text,#1a1a1a)!important;
    border-bottom:2px solid var(--fm-catbar-active-border,#333)!important;
    font-weight:700;
}

/* === BG FIXED - Real device fix === */
.fm-bg-fixed{
    background-attachment:fixed!important;
}
@supports (-webkit-touch-callout:none){
    .fm-bg-fixed{
        background-attachment:scroll!important;
        position:relative;
    }
    .fm-bg-fixed::before{
        content:'';position:fixed;inset:0;z-index:-1;
        background:inherit;
        background-attachment:scroll;
    }
}

/* === CATBAR THEMED - Matches bg pattern === */
.fm-catbar-themed{
    background:rgba(255,255,255,.75)!important;
    backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
}

/* === TOOLBAR THEMING - Real device fix === */
.fm-bottom-toolbar{
    background:var(--fm-catbar-bg,rgba(255,255,255,.92))!important;
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
    border-top:1px solid var(--fm-catbar-border-color,rgba(0,0,0,.06))!important;
}

/* === CATEGORY COLOR SEPARATION === */
.fm-cat-sep{border-right:3px solid transparent;padding-right:4px;margin-bottom:4px;border-radius:12px}
.fm-cat-sep-0{border-right-color:#e53e3e;background:rgba(229,62,62,.02)}
.fm-cat-sep-1{border-right-color:#dd6b20;background:rgba(221,107,32,.02)}
.fm-cat-sep-2{border-right-color:#d69e2e;background:rgba(214,158,46,.02)}
.fm-cat-sep-3{border-right-color:#38a169;background:rgba(56,161,105,.02)}
.fm-cat-sep-4{border-right-color:#3182ce;background:rgba(49,130,206,.02)}
.fm-cat-sep-5{border-right-color:#805ad5;background:rgba(128,90,213,.02)}
.fm-cat-sep-6{border-right-color:#d53f8c;background:rgba(213,63,140,.02)}
.fm-cat-sep-7{border-right-color:#718096;background:rgba(113,128,150,.02)}

/* ============================================================
   FLAVOR MENU v9.0 - UPDATES
   ============================================================ */

/* === CARD BOTTOM ROW - Shortcode right, Metas left === */
.fm-card-bottom-row{
    display:flex!important;align-items:center;
    margin-top:6px;padding-top:6px;gap:8px;
    border-top:1px solid rgba(0,0,0,.04);
    flex-direction:row!important;
}
.fm-card-bottom-row.no-meta{border-top:none!important;padding-top:2px;margin-top:2px}
[dir="rtl"] .fm-card-bottom-row{flex-direction:row!important}
.fm-card-sc-area{
    flex:0 0 auto;
    display:flex;align-items:center;justify-content:flex-start;
    overflow:visible;
}
.fm-card-metas{
    display:flex;gap:4px;flex-wrap:wrap;
    flex:1;
    justify-content:flex-end;
}
[dir="rtl"] .fm-card-sc-area{justify-content:flex-start}
[dir="rtl"] .fm-card-metas{justify-content:flex-end}

/* === CARD GAP - more spacing between cards === */
.fm-cards{gap:calc(var(--fm-card-gap,14px) + 4px)!important}

/* === SECTION GAP - spacing between category sections === */
.fm-section{margin-bottom:calc(var(--fm-sec-gap,32px) + 8px)!important}

/* === CATEGORY SECTION BACKGROUND - color from palette === */
.fm-section{
    padding:10px 10px 6px!important;
    border-radius:14px;
    transition:all .3s ease;
}

/* Category color separation v9 - updated with backgrounds matching palette */
.fm-cat-sep{
    padding:10px 10px 6px!important;
    border-radius:14px!important;
    margin-bottom:calc(var(--fm-sec-gap,32px) + 8px)!important;
    border:1.5px solid transparent;
    transition:all .3s ease;
    background:color-mix(in srgb, var(--fm-bg,#f5f5f5) 92%, var(--fm-catbar-active-border,#333) 8%)!important;
}
.fm-cat-sep-0{border-color:rgba(79,70,229,.2)!important;background:color-mix(in srgb, var(--fm-bg,#f5f5f5) 90%, rgba(79,70,229,1) 10%)!important}
.fm-cat-sep-1{border-color:rgba(220,38,38,.2)!important;background:color-mix(in srgb, var(--fm-bg,#f5f5f5) 90%, rgba(220,38,38,1) 10%)!important}
.fm-cat-sep-2{border-color:rgba(16,185,129,.2)!important;background:color-mix(in srgb, var(--fm-bg,#f5f5f5) 90%, rgba(16,185,129,1) 10%)!important}
.fm-cat-sep-3{border-color:rgba(245,158,11,.2)!important;background:color-mix(in srgb, var(--fm-bg,#f5f5f5) 90%, rgba(245,158,11,1) 10%)!important}
.fm-cat-sep-4{border-color:rgba(139,92,246,.2)!important;background:color-mix(in srgb, var(--fm-bg,#f5f5f5) 90%, rgba(139,92,246,1) 10%)!important}
.fm-cat-sep-5{border-color:rgba(236,72,153,.2)!important;background:color-mix(in srgb, var(--fm-bg,#f5f5f5) 90%, rgba(236,72,153,1) 10%)!important}
.fm-cat-sep-6{border-color:rgba(6,182,212,.2)!important;background:color-mix(in srgb, var(--fm-bg,#f5f5f5) 90%, rgba(6,182,212,1) 10%)!important}
.fm-cat-sep-7{border-color:rgba(251,146,60,.2)!important;background:color-mix(in srgb, var(--fm-bg,#f5f5f5) 90%, rgba(251,146,60,1) 10%)!important}

/* Smaller category bar display */
.fm-cat-item{min-width:48px;padding:var(--fm-catbar-ipy,3px) var(--fm-catbar-ipx,6px)}
.fm-cat-icon-wrap{width:calc(var(--fm-catbar-icon,36px) * 0.8);height:calc(var(--fm-catbar-icon,36px) * 0.8)}
.fm-cat-label{font-size:calc(var(--fm-catbar-font,12px) * 0.9)}

/* === CARD ENTRY ANIMATION v9 - proper stagger from bottom === */
@keyframes fmEntrySlideUp{
    0%{opacity:0;transform:translateY(14px)}
    100%{opacity:1;transform:translateY(0)}
}
@keyframes fmHeadingEntry{
    0%{opacity:0;transform:translateY(10px)}
    100%{opacity:1;transform:translateY(0)}
}
[data-card-entry="1"] .fm-card{
    opacity:0;
    animation:none!important;
}
[data-card-entry="1"] .fm-card.fm-entry-visible{
    animation:fmEntrySlideUp .38s cubic-bezier(.22,1,.36,1) both!important;
}
[data-card-entry="1"] .fm-section-head{
    opacity:0;
}
[data-card-entry="1"] .fm-section-head.fm-entry-visible{
    animation:fmHeadingEntry .32s cubic-bezier(.22,1,.36,1) both!important;
}

/* === POPUP PEEK - show half of adjacent cards === */
.fm-popup-card{
    scroll-snap-align:center;
    min-height:65vh!important;
    display:flex;flex-direction:column;
    justify-content:center;
    padding:4px 20px 4px!important;
    position:relative;
}
.fm-popup-card:first-child{padding-top:10vh!important}
.fm-popup-card:last-child{padding-bottom:10vh!important}
.fm-popup-card-inner{max-height:60vh!important}
.fm-popup-card:not(.fm-popup-card-active) .fm-popup-card-inner{
    transform:scale(.88)!important;opacity:.5!important;filter:blur(2px)!important;
}

/* Popup shortcode button per product */
.fm-popup-card-btn{display:flex;justify-content:center;padding:8px 0 4px}

/* === CART HIGHLIGHT ANIMATION v9 - bigger elements, smoother reaction === */
.fm-card.fm-cart-enter{
    animation:fmCartEnterV9 .7s cubic-bezier(.22,1,.36,1)!important;
}
@keyframes fmCartEnterV9{
    0%{transform:scale(1);box-shadow:var(--fm-card-shadow)}
    15%{transform:scale(1.03);box-shadow:0 8px 30px rgba(79,70,229,.2)}
    35%{transform:scale(0.98)}
    55%{transform:scale(1.015)}
    100%{transform:scale(1)}
}
.fm-card.fm-in-cart .fm-cart-anim-bg{opacity:1!important}
.fm-card.fm-in-cart .fm-badge,
.fm-card.fm-in-cart .fm-card-title,
.fm-card.fm-in-cart .fm-card-price{
    transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.fm-card.fm-cart-enter .fm-badge{animation:fmCartBadgePop .5s .1s cubic-bezier(.22,1,.36,1) both}
.fm-card.fm-cart-enter .fm-card-price{animation:fmCartPricePop .5s .15s cubic-bezier(.22,1,.36,1) both}
@keyframes fmCartBadgePop{
    0%{transform:scale(1)}
    40%{transform:scale(1.15)}
    100%{transform:scale(1)}
}
@keyframes fmCartPricePop{
    0%{transform:scale(1)}
    40%{transform:scale(1.1)}
    100%{transform:scale(1)}
}

/* === 30 ARTISTIC HEADING STYLES v9 === */
/* (Replacing old simple heading styles with artistic, calligraphic, classic designs) */

/* 1 - Calligraphy Scroll */
.fm-heading-box-calligraph{justify-content:center;gap:0}
.fm-heading-box-calligraph .fm-section-line{display:none}
.fm-heading-box-calligraph .fm-section-title{
    padding:10px 36px;position:relative;
    font-style:italic;letter-spacing:.5px;
    background:linear-gradient(135deg,var(--fm-card-bg,#fff),color-mix(in srgb,var(--fm-card-bg,#fff) 90%,var(--fm-catbar-active-border) 10%));
    border-radius:4px;
    border-top:2px solid var(--fm-catbar-active-border,#333);
    border-bottom:2px solid var(--fm-catbar-active-border,#333);
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}

/* 2 - Persian Arch */
.fm-heading-box-persianarch{justify-content:center;gap:0}
.fm-heading-box-persianarch .fm-section-line{display:none}
.fm-heading-box-persianarch .fm-section-title{
    padding:10px 32px 8px;position:relative;
    background:var(--fm-card-bg,#fff);
    border-radius:50% 50% 6px 6px / 30% 30% 6px 6px;
    border:1.5px solid var(--fm-catbar-active-border,#333);
    box-shadow:0 4px 16px rgba(0,0,0,.06);
}

/* 3 - Royal Frame */
.fm-heading-box-royalframe{justify-content:center;gap:0}
.fm-heading-box-royalframe .fm-section-line{display:none}
.fm-heading-box-royalframe .fm-section-title{
    padding:8px 28px;position:relative;
    border:2px solid var(--fm-catbar-active-border,#333);
    border-radius:2px;
    box-shadow:inset 0 0 0 3px var(--fm-card-bg,#fff),inset 0 0 0 4px var(--fm-sh-line,#ddd);
}

/* 4 - Sufi Circle */
.fm-heading-box-suficircle{justify-content:center;gap:0}
.fm-heading-box-suficircle .fm-section-line{display:none}
.fm-heading-box-suficircle .fm-section-title{
    padding:12px 28px;
    background:radial-gradient(circle at center,var(--fm-card-bg,#fff) 60%,color-mix(in srgb,var(--fm-card-bg,#fff) 85%,var(--fm-catbar-active-border) 15%) 100%);
    border-radius:50px;
    border:1px solid color-mix(in srgb,var(--fm-catbar-active-border) 30%,transparent 70%);
    box-shadow:0 2px 16px rgba(0,0,0,.04);
}

/* 5 - Mystic Lines */
.fm-heading-box-mysticlines{justify-content:center;gap:0}
.fm-heading-box-mysticlines .fm-section-line{display:none}
.fm-heading-box-mysticlines .fm-section-title{
    padding:8px 20px;position:relative;
    letter-spacing:1.5px;
}
.fm-heading-box-mysticlines .fm-section-title::before,
.fm-heading-box-mysticlines .fm-section-title::after{
    content:'';position:absolute;width:50px;height:0;top:50%;
    border-top:1px solid var(--fm-catbar-active-border,#333);
    border-bottom:1px solid var(--fm-catbar-active-border,#333);
    opacity:.4;
}
.fm-heading-box-mysticlines .fm-section-title::before{right:calc(100% + 8px);transform:translateY(-3px)}
.fm-heading-box-mysticlines .fm-section-title::after{left:calc(100% + 8px);transform:translateY(-3px)}

/* 6 - Ornate Gold */
.fm-heading-box-ornategold{justify-content:center;gap:0}
.fm-heading-box-ornategold .fm-section-line{display:none}
.fm-heading-box-ornategold .fm-section-title{
    padding:8px 30px;
    background:linear-gradient(135deg,#f6e58d,#f0c14b 30%,#daa520 70%,#f6e58d);
    color:#5a3e1b!important;
    border-radius:4px;
    border:1px solid rgba(218,165,32,.3);
    box-shadow:0 2px 10px rgba(218,165,32,.15),inset 0 1px 0 rgba(255,255,255,.4);
    letter-spacing:.8px;
}

/* 7 - Vintage Serif */
.fm-heading-box-vintageserif{justify-content:center;gap:0}
.fm-heading-box-vintageserif .fm-section-line{display:none}
.fm-heading-box-vintageserif .fm-section-title{
    padding:6px 24px;
    font-style:italic;letter-spacing:2px;
    border-bottom:1px solid var(--fm-catbar-active-border,#333);
    position:relative;
}
.fm-heading-box-vintageserif .fm-section-title::after{
    content:'✦';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
    background:var(--fm-bg,#f5f5f5);padding:0 6px;font-size:10px;
    color:var(--fm-catbar-active-border,#333);font-style:normal;
}

/* 8 - Ink Brush */
.fm-heading-box-inkbrush{justify-content:center;gap:0}
.fm-heading-box-inkbrush .fm-section-line{display:none}
.fm-heading-box-inkbrush .fm-section-title{
    padding:8px 28px;position:relative;
    background:var(--fm-sh-color,#1a1a1a);color:var(--fm-card-bg,#fff)!important;
    border-radius:2px 20px 2px 20px;
    box-shadow:3px 3px 0 var(--fm-sh-line,#ddd);
}

/* 9 - Rumi Portal */
.fm-heading-box-rumiportal{justify-content:center;gap:0}
.fm-heading-box-rumiportal .fm-section-line{display:none}
.fm-heading-box-rumiportal .fm-section-title{
    padding:10px 32px;
    background:var(--fm-card-bg,#fff);
    border:1px solid var(--fm-sh-line,#ddd);
    border-radius:50%;
    min-width:120px;text-align:center;
    box-shadow:0 0 0 4px var(--fm-bg,#f5f5f5),0 0 0 5px var(--fm-sh-line,#ddd);
}

/* 10 - Arabesque */
.fm-heading-box-arabesque{justify-content:center;gap:0}
.fm-heading-box-arabesque .fm-section-line{display:none}
.fm-heading-box-arabesque .fm-section-title{
    padding:8px 30px;position:relative;
    background:var(--fm-card-bg,#fff);
    clip-path:polygon(5% 0%,95% 0%,100% 50%,95% 100%,5% 100%,0% 50%);
    border:none;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}

/* 11 - Horizon */
.fm-heading-box-horizon{justify-content:center;gap:0}
.fm-heading-box-horizon .fm-section-line{display:none}
.fm-heading-box-horizon .fm-section-title{
    padding:8px 28px;position:relative;width:100%;text-align:center;
    background:linear-gradient(to right,transparent,var(--fm-card-bg,#fff) 20%,var(--fm-card-bg,#fff) 80%,transparent);
}
.fm-heading-box-horizon .fm-section-title::before{
    content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
    background:linear-gradient(to right,transparent,var(--fm-catbar-active-border,#333) 30%,var(--fm-catbar-active-border,#333) 70%,transparent);
    opacity:.3;
}

/* 12 - Cloud */
.fm-heading-box-cloud{justify-content:center;gap:0}
.fm-heading-box-cloud .fm-section-line{display:none}
.fm-heading-box-cloud .fm-section-title{
    padding:10px 28px;
    background:var(--fm-card-bg,#fff);
    border-radius:24px;
    box-shadow:0 4px 20px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.06);
    border:none;
}

/* 13 - Bamboo */
.fm-heading-box-bamboo{justify-content:center;gap:0}
.fm-heading-box-bamboo .fm-section-line{display:none}
.fm-heading-box-bamboo .fm-section-title{
    padding:8px 24px;position:relative;
    border-right:3px solid var(--fm-catbar-active-border,#333);
    border-left:3px solid var(--fm-catbar-active-border,#333);
    border-radius:0;
}

/* 14 - Watercolor */
.fm-heading-box-watercolor{justify-content:center;gap:0}
.fm-heading-box-watercolor .fm-section-line{display:none}
.fm-heading-box-watercolor .fm-section-title{
    padding:10px 30px;
    background:linear-gradient(135deg,
        color-mix(in srgb,var(--fm-catbar-active-border) 15%,transparent 85%),
        color-mix(in srgb,var(--fm-catbar-active-border) 8%,transparent 92%),
        color-mix(in srgb,var(--fm-catbar-active-border) 12%,transparent 88%));
    border-radius:12px;
    border:none;
}

/* 15 - Crescent */
.fm-heading-box-crescent{justify-content:center;gap:0}
.fm-heading-box-crescent .fm-section-line{display:none}
.fm-heading-box-crescent .fm-section-title{
    padding:8px 28px;position:relative;
}
.fm-heading-box-crescent .fm-section-title::before{
    content:'☽';position:absolute;top:50%;right:calc(100% + 6px);
    transform:translateY(-50%);font-size:16px;opacity:.5;
    color:var(--fm-catbar-active-border,#333);
}
.fm-heading-box-crescent .fm-section-title::after{
    content:'☾';position:absolute;top:50%;left:calc(100% + 6px);
    transform:translateY(-50%);font-size:16px;opacity:.5;
    color:var(--fm-catbar-active-border,#333);
}

/* 16 - Silk Ribbon */
.fm-heading-box-silkribbon{justify-content:center;gap:0}
.fm-heading-box-silkribbon .fm-section-line{display:none}
.fm-heading-box-silkribbon .fm-section-title{
    padding:6px 32px;
    background:linear-gradient(180deg,var(--fm-catbar-active-border,#333),color-mix(in srgb,var(--fm-catbar-active-border,#333) 70%,#000 30%));
    color:var(--fm-card-bg,#fff)!important;
    border-radius:2px;
    box-shadow:0 3px 0 color-mix(in srgb,var(--fm-catbar-active-border,#333) 60%,#000 40%);
}

/* 17 - Zen */
.fm-heading-box-zen{justify-content:center;gap:0}
.fm-heading-box-zen .fm-section-line{display:none}
.fm-heading-box-zen .fm-section-title{
    padding:8px 24px;position:relative;
    letter-spacing:3px;font-weight:300!important;
}
.fm-heading-box-zen .fm-section-title::after{
    content:'';display:block;width:30px;height:2px;margin:6px auto 0;
    background:var(--fm-catbar-active-border,#333);border-radius:2px;
}

/* 18 - Gothic */
.fm-heading-box-gothic{justify-content:center;gap:0}
.fm-heading-box-gothic .fm-section-line{display:none}
.fm-heading-box-gothic .fm-section-title{
    padding:8px 26px;
    background:var(--fm-sh-color,#1a1a1a);color:var(--fm-card-bg,#fff)!important;
    clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);
    letter-spacing:1px;
}

/* 19 - Tile */
.fm-heading-box-tile{justify-content:center;gap:0}
.fm-heading-box-tile .fm-section-line{display:none}
.fm-heading-box-tile .fm-section-title{
    padding:8px 24px;
    background:repeating-linear-gradient(45deg,transparent,transparent 3px,color-mix(in srgb,var(--fm-catbar-active-border) 8%,transparent 92%) 3px,color-mix(in srgb,var(--fm-catbar-active-border) 8%,transparent 92%) 6px);
    border:1px solid var(--fm-sh-line,#ddd);
    border-radius:6px;
}

/* 20 - Flame */
.fm-heading-box-flame{justify-content:center;gap:0}
.fm-heading-box-flame .fm-section-line{display:none}
.fm-heading-box-flame .fm-section-title{
    padding:8px 28px;
    background:linear-gradient(0deg,var(--fm-catbar-active-border,#333) 0%,color-mix(in srgb,var(--fm-catbar-active-border) 60%,#fc0 40%) 100%);
    color:#fff!important;
    border-radius:4px 4px 20px 20px;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
}

/* 21 - Parchment */
.fm-heading-box-parchment{justify-content:center;gap:0}
.fm-heading-box-parchment .fm-section-line{display:none}
.fm-heading-box-parchment .fm-section-title{
    padding:10px 28px;
    background:linear-gradient(135deg,#fdf6e3,#f0e6c8);
    border:1px solid #d4c5a0;border-radius:3px;
    color:#5a4a2a!important;
    box-shadow:2px 2px 0 rgba(0,0,0,.05);
    letter-spacing:.5px;
}

/* 22 - Cascade */
.fm-heading-box-cascade{justify-content:center;gap:0}
.fm-heading-box-cascade .fm-section-line{display:none}
.fm-heading-box-cascade .fm-section-title{
    padding:8px 24px;position:relative;
    box-shadow:0 2px 0 var(--fm-catbar-active-border,#333),0 4px 0 var(--fm-sh-line,#ddd);
}

/* 23 - Lantern */
.fm-heading-box-lantern{justify-content:center;gap:0}
.fm-heading-box-lantern .fm-section-line{display:none}
.fm-heading-box-lantern .fm-section-title{
    padding:10px 24px;
    background:var(--fm-card-bg,#fff);
    border-radius:12px 12px 4px 4px;
    border:1px solid var(--fm-sh-line,#ddd);
    border-top:3px solid var(--fm-catbar-active-border,#333);
    box-shadow:0 4px 12px rgba(0,0,0,.05);
}

/* 24 - Origami */
.fm-heading-box-origami{justify-content:center;gap:0}
.fm-heading-box-origami .fm-section-line{display:none}
.fm-heading-box-origami .fm-section-title{
    padding:8px 28px;
    background:var(--fm-card-bg,#fff);
    clip-path:polygon(4% 0%,96% 0%,100% 30%,100% 100%,0 100%,0 30%);
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    border:none;
}

/* 25 - Constellation */
.fm-heading-box-constellation{justify-content:center;gap:0}
.fm-heading-box-constellation .fm-section-line{display:none}
.fm-heading-box-constellation .fm-section-title{
    padding:8px 20px;position:relative;
}
.fm-heading-box-constellation .fm-section-title::before{content:'✧ ';opacity:.5;font-size:.8em}
.fm-heading-box-constellation .fm-section-title::after{content:' ✧';opacity:.5;font-size:.8em}

/* 26 - Stained Glass */
.fm-heading-box-stainedglass{justify-content:center;gap:0}
.fm-heading-box-stainedglass .fm-section-line{display:none}
.fm-heading-box-stainedglass .fm-section-title{
    padding:8px 28px;
    background:linear-gradient(90deg,
        color-mix(in srgb,var(--fm-catbar-active-border) 15%,var(--fm-card-bg) 85%),
        var(--fm-card-bg,#fff),
        color-mix(in srgb,var(--fm-badge-bg,#4caf50) 10%,var(--fm-card-bg) 90%));
    border:1px solid var(--fm-sh-line,#ddd);border-radius:8px;
}

/* 27 - Compass */
.fm-heading-box-compass{justify-content:center;gap:0}
.fm-heading-box-compass .fm-section-line{display:none}
.fm-heading-box-compass .fm-section-title{
    padding:10px 28px;
    background:var(--fm-card-bg,#fff);
    border:1.5px solid var(--fm-catbar-active-border,#333);
    border-radius:8px;
    position:relative;
}
.fm-heading-box-compass .fm-section-title::before{
    content:'◈';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
    background:var(--fm-bg,#f5f5f5);padding:0 4px;font-size:12px;
    color:var(--fm-catbar-active-border,#333);
}

/* 28 - Woven */
.fm-heading-box-woven{justify-content:center;gap:0}
.fm-heading-box-woven .fm-section-line{display:none}
.fm-heading-box-woven .fm-section-title{
    padding:8px 28px;
    border-top:2px dashed var(--fm-catbar-active-border,#333);
    border-bottom:2px dashed var(--fm-catbar-active-border,#333);
}

/* 29 - Manuscript */
.fm-heading-box-manuscript{justify-content:center;gap:0}
.fm-heading-box-manuscript .fm-section-line{display:none}
.fm-heading-box-manuscript .fm-section-title{
    padding:8px 24px;position:relative;
    background:var(--fm-card-bg,#fff);
    border-left:4px solid var(--fm-catbar-active-border,#333);
    border-right:4px solid var(--fm-catbar-active-border,#333);
    border-radius:0;
    font-style:italic;
}

/* 30 - Crown */
.fm-heading-box-crown{justify-content:center;gap:0}
.fm-heading-box-crown .fm-section-line{display:none}
.fm-heading-box-crown .fm-section-title{
    padding:8px 28px;position:relative;
    background:linear-gradient(180deg,var(--fm-catbar-active-border,#333),color-mix(in srgb,var(--fm-catbar-active-border) 80%,#000 20%));
    color:var(--fm-card-bg,#fff)!important;
    border-radius:0 0 12px 12px;
    letter-spacing:1px;
}
.fm-heading-box-crown .fm-section-title::before{
    content:'';position:absolute;top:-6px;left:10%;right:10%;height:6px;
    background:var(--fm-catbar-active-border,#333);
    clip-path:polygon(0% 100%,5% 0%,15% 100%,25% 0%,35% 100%,45% 0%,55% 100%,65% 0%,75% 100%,85% 0%,95% 100%,100% 0%,100% 100%);
}

/* Preview heading styles */
.flavor-preview .fm-heading-box-calligraph .fm-section-title,
.flavor-preview .fm-heading-box-persianarch .fm-section-title,
.flavor-preview .fm-heading-box-royalframe .fm-section-title,
.flavor-preview .fm-heading-box-suficircle .fm-section-title,
.flavor-preview .fm-heading-box-rumiportal .fm-section-title{
    font-size:11px!important;padding:4px 14px!important;
}

/* ============================================================
   FLAVOR MENU v9.1 - UPDATES
   ============================================================ */

/* === CARD LAYOUT: Shortcode first (right in RTL), Metas second === */
.fm-card-bottom-row{
    display:flex!important;align-items:center;
    margin-top:6px;padding-top:6px;gap:6px;
    border-top:1px solid rgba(0,0,0,.04);
}
.fm-card-bottom-row.no-meta{border-top:none!important;padding-top:2px!important;margin-top:2px!important}
[dir="rtl"] .fm-card-bottom-row{flex-direction:row!important}
[dir="ltr"] .fm-card-bottom-row{flex-direction:row-reverse!important}

.fm-card-sc-area{
    flex:0 0 auto!important;max-width:none!important;
    display:flex!important;align-items:center!important;
    overflow:visible!important;
}
[dir="rtl"] .fm-card-sc-area{justify-content:flex-start!important}
[dir="ltr"] .fm-card-sc-area{justify-content:flex-end!important}

.fm-card-metas{
    flex:1!important;max-width:none!important;
    display:flex!important;gap:3px!important;flex-wrap:nowrap!important;
    flex-direction:row!important;
    align-items:center!important;
}
[dir="rtl"] .fm-card-metas{justify-content:flex-end!important}
[dir="ltr"] .fm-card-metas{justify-content:flex-start!important}

/* Compact meta badges */
.fm-card-bottom-row .fm-meta{
    font-size:calc(var(--fm-meta-size,11px) * 0.85)!important;
    padding:var(--fm-meta-py,3px) var(--fm-meta-px,7px)!important;
    white-space:nowrap!important;
}
.fm-card-bottom-row .fm-meta-svg{
    width:11px!important;height:11px!important;
}

/* === CARD BORDER SHAPE === */
[data-card-border="1"] .fm-card{
    border-style:var(--fm-card-bs,solid)!important;
}

/* === SMOOTHER ANIMATED BACKGROUNDS v9.1 === */
/* Override all bg animations with much smoother, subtler movement */
.fm-bg-animated.fm-bg-page-dots{animation:fmBgSubtlePulse calc(25s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-grid{animation:fmBgSubtleDrift calc(40s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-diagonal{animation:fmBgSubtleDiag calc(35s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-zigzag{animation:fmBgSubtleDrift calc(30s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-waves{animation:fmBgSubtleWave calc(20s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-hexagon{animation:fmBgSubtleDrift calc(45s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-circles{animation:fmBgSubtleBreath calc(20s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-diamonds{animation:fmBgSubtleDrift calc(50s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-crosses{animation:fmBgSubtleDrift calc(35s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-triangles{animation:fmBgSubtleDrift calc(40s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-stars{animation:fmBgSubtleTwinkle calc(15s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-moroccan{animation:fmBgSubtleSway calc(30s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-scales{animation:fmBgSubtleDrift calc(35s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-snow{animation:fmBgSubtleSnow calc(30s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-rain{animation:fmBgSubtleRain calc(15s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-confetti{animation:fmBgSubtleDrift calc(25s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-bubbles{animation:fmBgSubtleBubble calc(20s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-leaves{animation:fmBgSubtleSway calc(25s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-hearts{animation:fmBgSubtlePulse calc(18s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-coffee{animation:fmBgSubtleSway calc(22s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-spiral{animation:fmBgSubtleDrift calc(50s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-mosaic{animation:fmBgSubtleBreath calc(25s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-arrows{animation:fmBgSubtleDrift calc(30s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-floral{animation:fmBgSubtleSway calc(28s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-islamic{animation:fmBgSubtleDrift calc(40s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-chain{animation:fmBgSubtleDrift calc(35s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-ribbon-bg{animation:fmBgSubtleDiag calc(30s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-feather{animation:fmBgSubtleSway calc(20s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-circuit{animation:fmBgSubtleBreath calc(22s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-celtic{animation:fmBgSubtleDrift calc(45s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-chevron{animation:fmBgSubtleDrift calc(30s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-brick{animation:fmBgSubtleDrift calc(35s * var(--fm-anim-mult,1)) ease-in-out infinite!important}
.fm-bg-animated.fm-bg-page-plus{animation:fmBgSubtleBreath calc(20s * var(--fm-anim-mult,1)) ease-in-out infinite!important}

/* Subtle non-repetitive-feeling keyframes */
@keyframes fmBgSubtleDrift{
    0%{background-position:0 0}
    20%{background-position:8px 4px}
    40%{background-position:3px 10px}
    60%{background-position:-5px 6px}
    80%{background-position:-2px -3px}
    100%{background-position:0 0}
}
@keyframes fmBgSubtleSway{
    0%{background-position:0 0}
    15%{background-position:5px 2px}
    35%{background-position:-3px 7px}
    55%{background-position:4px -2px}
    75%{background-position:-2px 5px}
    100%{background-position:0 0}
}
@keyframes fmBgSubtlePulse{
    0%,100%{background-size:20px 20px;opacity:1}
    30%{background-size:21px 21px;opacity:.95}
    70%{background-size:19px 19px;opacity:.97}
}
@keyframes fmBgSubtleBreath{
    0%,100%{opacity:1}
    25%{opacity:.92}
    50%{opacity:.96}
    75%{opacity:.94}
}
@keyframes fmBgSubtleTwinkle{
    0%,100%{opacity:1}
    20%{opacity:.9}
    40%{opacity:.95}
    60%{opacity:.88}
    80%{opacity:.93}
}
@keyframes fmBgSubtleSnow{
    0%{background-position:0 0}
    25%{background-position:3px 8px}
    50%{background-position:-2px 15px}
    75%{background-position:5px 6px}
    100%{background-position:0 0}
}
@keyframes fmBgSubtleRain{
    0%{background-position:0 0}
    50%{background-position:-1px 12px}
    100%{background-position:0 0}
}
@keyframes fmBgSubtleBubble{
    0%{background-position:0 0}
    30%{background-position:2px -5px}
    60%{background-position:-3px -8px}
    100%{background-position:0 0}
}
@keyframes fmBgSubtleDiag{
    0%{background-position:0 0}
    25%{background-position:6px 6px}
    50%{background-position:3px 10px}
    75%{background-position:-3px 4px}
    100%{background-position:0 0}
}
@keyframes fmBgSubtleWave{
    0%{background-position:0 0}
    33%{background-position:15px 0}
    66%{background-position:5px 0}
    100%{background-position:0 0}
}

/* === BG PATTERNS DARK THEME SYNC === */
/* Dark themes: make pattern strokes lighter */
.fm-bg-page-gradient-dark .fm-sections,
.fm-bg-page-gradient-midnight .fm-sections,
.fm-bg-page-gradient-twilight .fm-sections,
.fm-bg-page-gradient-aurora-bg .fm-sections,
.fm-bg-page-gradient-deep-sea .fm-sections{
    color:#e0e0e0;
}

/* Pattern backgrounds sync with color theme via CSS vars */
.fm-bg-page-dots{
    background-image:radial-gradient(circle,var(--fm-sh-line,rgba(0,0,0,.06)) 1px,transparent 1px)!important;
}
.fm-bg-page-grid{
    background-image:linear-gradient(var(--fm-sh-line,rgba(0,0,0,.04)) 1px,transparent 1px),linear-gradient(90deg,var(--fm-sh-line,rgba(0,0,0,.04)) 1px,transparent 1px)!important;
}

/* === FASTER CARD ENTRY ANIMATION v9.1 === */
@keyframes fmEntrySlideUpFast{
    0%{opacity:0;transform:translateY(20px)}
    100%{opacity:1;transform:translateY(0)}
}
@keyframes fmHeadingEntryFast{
    0%{opacity:0;transform:translateY(14px)}
    100%{opacity:1;transform:translateY(0)}
}
[data-card-entry="1"] .fm-card.fm-entry-visible{
    animation:fmEntrySlideUpFast .35s cubic-bezier(.22,1,.36,1) both!important;
}
[data-card-entry="1"] .fm-section-head.fm-entry-visible{
    animation:fmHeadingEntryFast .3s cubic-bezier(.22,1,.36,1) both!important;
}

/* === 10 NEW ARTISTIC HEADING STYLES v9.1 === */

/* 31 - Persian Carpet */
.fm-heading-box-persiancarpet{justify-content:center;gap:0}
.fm-heading-box-persiancarpet .fm-section-line{display:none}
.fm-heading-box-persiancarpet .fm-section-title{
    padding:8px 28px;position:relative;
    background:linear-gradient(135deg,#8b2252,#cd5c5c,#daa520,#cd5c5c,#8b2252);
    color:#fff!important;border-radius:4px;
    border:2px solid rgba(218,165,32,.4);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.15),0 3px 12px rgba(139,34,82,.2);
    letter-spacing:1px;
}

/* 32 - Turquoise Mosaic */
.fm-heading-box-turquoisemosaic{justify-content:center;gap:0}
.fm-heading-box-turquoisemosaic .fm-section-line{display:none}
.fm-heading-box-turquoisemosaic .fm-section-title{
    padding:8px 26px;
    background:linear-gradient(135deg,#00796b,#009688,#4db6ac);
    color:#fff!important;border-radius:6px;
    box-shadow:0 2px 0 #004d40,inset 0 1px 0 rgba(255,255,255,.2);
    border:1px solid rgba(0,77,64,.3);
}

/* 33 - Calligraphy Swirl */
.fm-heading-box-calliswirl{justify-content:center;gap:0}
.fm-heading-box-calliswirl .fm-section-line{display:none}
.fm-heading-box-calliswirl .fm-section-title{
    padding:10px 32px;position:relative;
    font-style:italic;letter-spacing:1.5px;
    background:transparent;
}
.fm-heading-box-calliswirl .fm-section-title::before,
.fm-heading-box-calliswirl .fm-section-title::after{
    content:'';position:absolute;width:35px;height:2px;top:50%;
    background:linear-gradient(to left,var(--fm-catbar-active-border,#333),transparent);
    border-radius:2px;
}
.fm-heading-box-calliswirl .fm-section-title::before{right:calc(100% + 4px)}
.fm-heading-box-calliswirl .fm-section-title::after{left:calc(100% + 4px);background:linear-gradient(to right,var(--fm-catbar-active-border,#333),transparent)}

/* 34 - Royal Arch */
.fm-heading-box-royalarch{justify-content:center;gap:0}
.fm-heading-box-royalarch .fm-section-line{display:none}
.fm-heading-box-royalarch .fm-section-title{
    padding:10px 30px 8px;
    background:linear-gradient(180deg,var(--fm-catbar-active-border,#333),color-mix(in srgb,var(--fm-catbar-active-border,#333) 60%,#000 40%));
    color:var(--fm-card-bg,#fff)!important;
    border-radius:50% 50% 8px 8px / 25% 25% 8px 8px;
    box-shadow:0 4px 16px rgba(0,0,0,.12);
}

/* 35 - Mirror Frame */
.fm-heading-box-mirrorframe{justify-content:center;gap:0}
.fm-heading-box-mirrorframe .fm-section-line{display:none}
.fm-heading-box-mirrorframe .fm-section-title{
    padding:8px 24px;
    background:var(--fm-card-bg,#fff);
    border:2px solid var(--fm-catbar-active-border,#333);
    border-radius:12px;
    box-shadow:inset 0 0 0 4px var(--fm-card-bg,#fff),inset 0 0 0 5px var(--fm-sh-line,#ddd),0 4px 16px rgba(0,0,0,.06);
}

/* 36 - Jewel */
.fm-heading-box-jewel{justify-content:center;gap:0}
.fm-heading-box-jewel .fm-section-line{display:none}
.fm-heading-box-jewel .fm-section-title{
    padding:8px 28px;
    background:linear-gradient(135deg,var(--fm-catbar-active-border,#4f46e5),color-mix(in srgb,var(--fm-catbar-active-border,#4f46e5) 50%,#c084fc 50%));
    color:#fff!important;
    border-radius:8px;
    box-shadow:0 0 20px color-mix(in srgb,var(--fm-catbar-active-border,#4f46e5) 30%,transparent 70%);
}

/* 37 - Flourish */
.fm-heading-box-flourish{justify-content:center;gap:0}
.fm-heading-box-flourish .fm-section-line{display:none}
.fm-heading-box-flourish .fm-section-title{
    padding:8px 24px;position:relative;
    letter-spacing:1px;
}
.fm-heading-box-flourish .fm-section-title::before{content:'❧ ';font-size:.8em;opacity:.5}
.fm-heading-box-flourish .fm-section-title::after{content:' ❧';font-size:.8em;opacity:.5;display:inline-block;transform:scaleX(-1)}

/* 38 - Papyrus */
.fm-heading-box-papyrus{justify-content:center;gap:0}
.fm-heading-box-papyrus .fm-section-line{display:none}
.fm-heading-box-papyrus .fm-section-title{
    padding:10px 28px;
    background:linear-gradient(135deg,#f5e6c8,#e8d5a8,#f0dbb8);
    color:#5a3e1b!important;
    border:1px solid #c4a878;border-radius:2px;
    box-shadow:3px 3px 0 rgba(0,0,0,.06),-1px -1px 0 rgba(255,255,255,.5);
    font-style:italic;
}

/* 39 - Celestial */
.fm-heading-box-celestial{justify-content:center;gap:0}
.fm-heading-box-celestial .fm-section-line{display:none}
.fm-heading-box-celestial .fm-section-title{
    padding:8px 24px;
    background:linear-gradient(135deg,#0d1b2a,#1b2838,#2d3a4a);
    color:#e0d8c0!important;
    border-radius:8px;
    box-shadow:0 0 15px rgba(218,165,32,.15),inset 0 1px 0 rgba(255,215,0,.1);
    letter-spacing:1px;
}

/* 40 - Embossed */
.fm-heading-box-embossed{justify-content:center;gap:0}
.fm-heading-box-embossed .fm-section-line{display:none}
.fm-heading-box-embossed .fm-section-title{
    padding:8px 26px;
    background:var(--fm-card-bg,#fff);
    border-radius:10px;
    text-shadow:1px 1px 0 rgba(255,255,255,.8),-1px -1px 0 rgba(0,0,0,.06);
    box-shadow:inset 2px 2px 4px rgba(0,0,0,.06),inset -2px -2px 4px rgba(255,255,255,.8),2px 2px 8px rgba(0,0,0,.04);
}

/* Preview sizes for new styles */
.flavor-preview .fm-heading-box-persiancarpet .fm-section-title,
.flavor-preview .fm-heading-box-turquoisemosaic .fm-section-title,
.flavor-preview .fm-heading-box-royalarch .fm-section-title,
.flavor-preview .fm-heading-box-jewel .fm-section-title,
.flavor-preview .fm-heading-box-celestial .fm-section-title{
    font-size:11px!important;padding:4px 14px!important;
}

/* === CATEGORY BG PRESERVED WITH PATTERNED BG === */
.fm-catbar{
    background:var(--fm-catbar-bg,#fff)!important;
    position:relative;z-index:200;
}
.fm-bg-page-dots .fm-catbar,
.fm-bg-page-grid .fm-catbar,
.fm-bg-page-diagonal .fm-catbar,
.fm-bg-page-zigzag .fm-catbar,
.fm-bg-page-waves .fm-catbar,
.fm-bg-page-hexagon .fm-catbar,
.fm-bg-page-circles .fm-catbar,
.fm-bg-page-diamonds .fm-catbar,
.fm-bg-page-crosses .fm-catbar,
.fm-bg-page-triangles .fm-catbar,
.fm-bg-page-stars .fm-catbar,
.fm-bg-page-moroccan .fm-catbar,
.fm-bg-page-scales .fm-catbar,
.fm-bg-page-snow .fm-catbar,
.fm-bg-page-confetti .fm-catbar,
.fm-bg-page-hearts .fm-catbar,
.fm-bg-page-leaves .fm-catbar,
.fm-bg-page-coffee .fm-catbar,
.fm-bg-page-bubbles .fm-catbar,
.fm-bg-page-chevron .fm-catbar,
.fm-bg-page-brick .fm-catbar,
.fm-bg-page-plus .fm-catbar,
.fm-bg-page-rain .fm-catbar,
.fm-bg-page-spiral .fm-catbar,
.fm-bg-page-mosaic .fm-catbar,
.fm-bg-page-arrows .fm-catbar,
.fm-bg-page-floral .fm-catbar,
.fm-bg-page-islamic .fm-catbar,
.fm-bg-page-chain .fm-catbar,
.fm-bg-page-ribbon-bg .fm-catbar,
.fm-bg-page-feather .fm-catbar,
.fm-bg-page-circuit .fm-catbar,
.fm-bg-page-celtic .fm-catbar{
    background:var(--fm-catbar-bg,#fff)!important;
    backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
}

/* ============================================================
   HEADER
   ============================================================ */
.fm-header{
    background:var(--fm-catbar-bg,#ffffff);
    padding:14px 16px;
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--fm-catbar-border-color,#e8e8e8);
    position:relative;z-index:10;
}
.fm-header-inner{
    display:flex;align-items:center;justify-content:center;
    max-width:var(--fm-max-w,900px);width:100%;
}
.fm-header-logo{
    display:block;max-width:100%;
}
.fm-header-placeholder{
    font-size:18px;font-weight:700;color:var(--fm-catbar-text,#555);
    letter-spacing:2px;opacity:.4;
}

/* When header is active, catbar hides on top and shows with slide animation on scroll */
.flavor-wrap[data-header="1"] .fm-catbar{
    position:fixed;top:0;left:0;right:0;z-index:9999;
    max-width:var(--fm-max-w,900px);margin:0 auto;
    transform:translateY(-100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    opacity:0;pointer-events:none;
}
.flavor-wrap[data-header="1"] .fm-catbar.fm-catbar-sticky-show{
    transform:translateY(0);
    opacity:1;pointer-events:auto;
}

/* ============================================================
   FOOTER
   ============================================================ */
.fm-footer{
    background:var(--fm-catbar-bg,#ffffff);
    border-top:1px solid var(--fm-catbar-border-color,#e8e8e8);
    padding:20px 16px 10px;
    margin-top:24px;
}
.fm-footer-inner{
    max-width:var(--fm-max-w,900px);margin:0 auto;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    text-align:center;
}
.fm-footer-logo-wrap{text-align:center;}
.fm-footer-logo{
    max-width:100px;max-height:50px;object-fit:contain;
    opacity:.85;
}
.fm-footer-text{
    font-size:12px;color:var(--fm-desc-color,#999);
    line-height:1.7;max-width:320px;
}
.fm-footer-phones{
    display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.fm-footer-phone{
    display:inline-flex;align-items:center;gap:4px;
    font-size:12px;color:var(--fm-catbar-active-border,#2d2d2d);
    text-decoration:none;padding:5px 12px;
    background:var(--fm-meta-bg,#f5f5f5);
    border-radius:20px;transition:all .2s;
    direction:ltr;
}
.fm-footer-phone:hover{opacity:.8}
.fm-footer-phone svg{flex-shrink:0}
.fm-footer-hours{
    display:flex;align-items:center;gap:5px;
    font-size:11px;color:var(--fm-meta-text,#777);
}
.fm-footer-hours svg{flex-shrink:0;opacity:.6}
.fm-footer-address{
    display:flex;align-items:flex-start;gap:5px;
    font-size:11px;color:var(--fm-meta-text,#777);
    max-width:300px;line-height:1.6;
}
.fm-footer-address svg{flex-shrink:0;margin-top:2px;opacity:.6}
.fm-footer-map{
    width:100%;max-width:320px;
    border-radius:10px;overflow:hidden;
    margin:4px 0;
}
.fm-footer-map iframe{
    width:100%!important;height:150px!important;border:none!important;
    border-radius:10px;
}
.fm-footer-bottom{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding-top:8px;border-top:1px solid var(--fm-catbar-border-color,#e8e8e8);
    width:100%;
}
.fm-footer-copyright{
    font-size:10px;color:var(--fm-desc-color,#999);opacity:.7;
}
.fm-footer-credit{font-size:10px;color:var(--fm-desc-color,#999);}
.fm-footer-credit a{
    color:var(--fm-catbar-active-border,#2d2d2d);
    text-decoration:none;
}
.fm-footer-credit a:hover{text-decoration:underline}

/* Preview scaling for footer/header */
.fmc-phone-screen .fm-header{padding:8px 10px}
.fmc-phone-screen .fm-header-logo{max-height:24px}
.fmc-phone-screen .fm-header-placeholder{font-size:12px}
.fmc-phone-screen .fm-footer{padding:10px 8px 6px;margin-top:12px}
.fmc-phone-screen .fm-footer-inner{gap:6px}
.fmc-phone-screen .fm-footer-logo{max-width:60px;max-height:30px}
.fmc-phone-screen .fm-footer-text{font-size:8px;max-width:200px}
.fmc-phone-screen .fm-footer-phone{font-size:8px;padding:3px 8px}
.fmc-phone-screen .fm-footer-phone svg{width:10px;height:10px}
.fmc-phone-screen .fm-footer-hours{font-size:8px}
.fmc-phone-screen .fm-footer-hours svg{width:10px;height:10px}
.fmc-phone-screen .fm-footer-address{font-size:8px;max-width:180px}
.fmc-phone-screen .fm-footer-address svg{width:10px;height:10px}
.fmc-phone-screen .fm-footer-map{max-width:200px}
.fmc-phone-screen .fm-footer-map iframe{height:80px!important}
.fmc-phone-screen .fm-footer-copyright{font-size:7px}
.fmc-phone-screen .fm-footer-credit{font-size:7px}
.fmc-phone-screen .fm-footer-bottom{padding-top:4px}

/* ============================================================
   FLAVOR MENU v9.9.3 - CATBAR LAYOUT PRESETS
   ============================================================ */

/* -- Catbar: always sticky to top -- */
.fm-catbar{
    position:sticky;top:var(--fm-catbar-sticky,0px);z-index:999;
}

/* -- Catbar compact v9.9.3 -- */
.fm-catbar-compact .fm-catbar{
    padding:6px 2px 3px!important;
    position:sticky!important;
    top:6px!important;
}
.fm-catbar-compact .fm-cat-item{
    min-width:46px!important;
    padding:2px 6px!important;
}
.fm-catbar-compact .fm-cat-icon-wrap{
    width:28px!important;height:28px!important;
}
.fm-catbar-compact .fm-cat-label{
    font-size:10px!important;
}
.fm-catbar-compact .fm-catbar-scroll{
    gap:3px!important;
}

/* -- Catbar glass v9.9.3 — same glass style as toolbar, only on catbar box -- */
.fm-catbar-glass-on .fm-catbar{
    background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.35) 100%)!important;
    backdrop-filter:blur(40px) saturate(2.0) brightness(1.05)!important;
    -webkit-backdrop-filter:blur(40px) saturate(2.0) brightness(1.05)!important;
    border-bottom:1px solid rgba(255,255,255,.7)!important;
    box-shadow:0 2px 16px rgba(0,0,0,.04),
        inset 0 1px 0 rgba(255,255,255,.8),
        inset 0 -1px 0 rgba(255,255,255,.2)!important;
}
/* Cat items keep their theme color from menu, no glass on individual cards */
.fm-catbar-glass-on .fm-cat-item{
    background:transparent!important;
}
.fm-catbar-glass-on .fm-cat-item.active{
    background:rgba(255,255,255,.35)!important;
}

/* -- Preview: catbar compact -- */
.flavor-preview.fm-catbar-compact .fm-catbar{
    padding:4px 2px 2px!important;
    margin:4px auto 0!important;width:85%!important;
    border-radius:10px!important;box-shadow:0 1px 6px rgba(0,0,0,.06)!important;
}
.flavor-preview.fm-catbar-compact .fm-cat-item{
    min-width:40px!important;padding:3px 5px!important;
}
.flavor-preview.fm-catbar-compact .fm-cat-icon-wrap{
    width:22px!important;height:22px!important;
}
.flavor-preview.fm-catbar-compact .fm-cat-label{
    font-size:8px!important;
}

/* -- Preview: catbar glass -- */
.flavor-preview.fm-catbar-glass-on .fm-catbar{
    background:rgba(255,255,255,.45)!important;
    backdrop-filter:blur(40px) saturate(1.8)!important;
    -webkit-backdrop-filter:blur(40px) saturate(1.8)!important;
}

/* ============================================================
   v9.9.3 FIX: Preview ultracompact toolbar - prevent button clipping
   ============================================================ */
.flavor-preview.fm-toolbar-ultracompact .fm-bottom-toolbar{
    width:80%!important;
    max-width:80%!important;
    padding:4px 6px 4px!important;
}
.flavor-preview.fm-toolbar-ultracompact .fm-toolbar-item{
    min-height:24px!important;
    overflow:visible!important;
}
.flavor-preview.fm-toolbar-ultracompact .fm-toolbar-grid{
    gap:2px!important;
}

/* v9.9.3: fm-card-sc-area flex */
.fm-card-sc-area{
    flex-shrink:0;display:flex;align-items:center;
}

/* ============================================================
   v9.9.4 - SIDEBAR LAYOUT (fm-layout-sidebar)
   Categories vertical on right, product cards as vertical rectangles
   ============================================================ */

/* Sidebar container - flex row in sidebar mode */
.fm-layout-sidebar .fm-sidebar-container{
    display:flex;flex-direction:row;gap:0;position:relative;
}

/* CRITICAL: Disable ALL blur/backdrop-filter in sidebar mode to prevent mobile blur */
.fm-layout-sidebar .fm-catbar,
.fm-layout-sidebar .fm-catbar.fm-catbar-themed,
.fm-layout-sidebar .fm-bottom-toolbar,
.fm-layout-sidebar .fm-toolbar-item{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}
.fm-layout-sidebar.fm-toolbar-glass .fm-bottom-toolbar{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:var(--fm-catbar-bg,#fff)!important;
}
.fm-layout-sidebar.fm-catbar-glass-on .fm-catbar{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:var(--fm-catbar-bg,#fff)!important;
}

/* In sidebar mode, catbar becomes vertical sidebar on the right (RTL) */
.fm-layout-sidebar .fm-catbar{
    position:sticky;top:0;z-index:200;
    width:120px;min-width:120px;max-width:120px;
    flex-shrink:0;
    height:100vh;
    overflow-y:auto;overflow-x:hidden;
    background:var(--fm-catbar-bg,#fff);
    box-shadow:-2px 0 10px rgba(0,0,0,.06);
    padding:18px 0 12px;
    order:2; /* RTL: sidebar on the right */
    scrollbar-width:thin;
    scrollbar-color:var(--fm-catbar-scrollbar,#ccc) transparent;
}
.fm-layout-sidebar[dir="ltr"] .fm-catbar{
    order:0; /* LTR: sidebar on the left */
    box-shadow:2px 0 10px rgba(0,0,0,.06);
}

.fm-layout-sidebar .fm-catbar::-webkit-scrollbar{width:3px}
.fm-layout-sidebar .fm-catbar::-webkit-scrollbar-thumb{background:var(--fm-catbar-scrollbar,#ccc);border-radius:3px}
.fm-layout-sidebar .fm-catbar::-webkit-scrollbar-track{background:transparent}

/* Hide horizontal scrollbar track in sidebar mode */
.fm-layout-sidebar .fm-catbar-track{display:none!important}

/* Catbar scroll becomes vertical flex column */
.fm-layout-sidebar .fm-catbar-scroll{
    display:flex;flex-direction:column;gap:12px;
    overflow-x:hidden;overflow-y:visible;
    padding:8px 6px;scroll-behavior:smooth;
    scrollbar-width:none;
}
.fm-layout-sidebar .fm-catbar-scroll::-webkit-scrollbar{display:none}

/* Category items - vertical style, bigger */
.fm-layout-sidebar .fm-cat-item{
    min-width:unset;width:100%;
    flex-direction:column;align-items:center;
    padding:12px 6px;
    border-radius:var(--fm-catbar-radius,12px);
    font-size:12px;
    transition:all .25s cubic-bezier(.4,0,.2,1);
}

.fm-layout-sidebar .fm-cat-icon-wrap{
    width:48px;height:48px;margin-bottom:6px;
}

.fm-layout-sidebar .fm-cat-label{
    font-size:12px;line-height:1.3;
    text-align:center;word-break:break-word;
    white-space:normal;
    max-width:96px;
    font-weight:600;
}

/* Active indicator - left/right border bar */
.fm-layout-sidebar .fm-cat-item.active{
    border-color:var(--fm-catbar-active-border,#2d2d2d);
    background:var(--fm-catbar-active-bg,#fff);
    color:var(--fm-catbar-active-text,#1a1a1a);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    position:relative;
}
.fm-layout-sidebar[dir="rtl"] .fm-cat-item.active::after{
    content:'';position:absolute;right:-8px;top:50%;transform:translateY(-50%);
    width:3.5px;height:55%;border-radius:3px;
    background:var(--fm-catbar-active-border,#2d2d2d);
}
.fm-layout-sidebar[dir="ltr"] .fm-cat-item.active::after{
    content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
    width:3.5px;height:55%;border-radius:3px;
    background:var(--fm-catbar-active-border,#2d2d2d);
}

/* Sections area takes the remaining width */
.fm-layout-sidebar .fm-sections{
    flex:1;min-width:0;
    padding:10px 6px 0;
    order:1;
}

/* Cards in sidebar layout - SINGLE COLUMN */
.fm-layout-sidebar .fm-cards{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.fm-layout-sidebar .fm-card{
    display:flex;flex-direction:column;
    padding:0;overflow:hidden;
}

.fm-layout-sidebar .fm-card .fm-card-top-row{
    flex-direction:column!important;gap:0;
}

.fm-layout-sidebar .fm-card .fm-card-img-wrap{
    width:100%!important;height:180px!important;max-height:180px!important;
    border-radius:0!important;
    border-radius:var(--fm-card-radius,16px) var(--fm-card-radius,16px) 0 0!important;
}

.fm-layout-sidebar .fm-card .fm-card-body{
    padding:10px 12px 8px;
}

.fm-layout-sidebar .fm-card .fm-card-title{
    font-size:15px;margin-bottom:3px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.fm-layout-sidebar .fm-card .fm-card-desc{
    font-size:11px;-webkit-line-clamp:2;margin-bottom:3px;
}

.fm-layout-sidebar .fm-card .fm-card-price{
    font-size:14px;margin-top:3px;
}

/* Bottom row in sidebar - metas ABOVE sc-area */
.fm-layout-sidebar .fm-card .fm-card-bottom-row{
    flex-direction:column!important;align-items:stretch!important;justify-content:flex-start;
    padding:6px 10px 8px;gap:4px;margin-top:0;
    border-top:1px solid rgba(0,0,0,.04);
}
.fm-layout-sidebar .fm-card .fm-card-bottom-row .fm-card-sc-area{
    justify-content:flex-start;flex:0 0 auto!important;order:2;
}
.fm-layout-sidebar .fm-card .fm-card-metas{
    justify-content:flex-start;gap:4px;flex:none!important;
    display:flex;flex-direction:row!important;flex-wrap:wrap;order:1;
}
.fm-layout-sidebar .fm-card .fm-meta{
    font-size:10px;padding:3px 8px;
}

/* Section headings in sidebar */
.fm-layout-sidebar .fm-section-head{
    padding:0 2px;margin-bottom:10px;gap:8px;
}
.fm-layout-sidebar .fm-section-title{
    font-size:16px;
}
.fm-layout-sidebar .fm-section-title-icon{
    width:24px;height:24px;
}
.fm-layout-sidebar .fm-section{
    margin-bottom:22px;
}

/* Header in sidebar layout */
.fm-layout-sidebar .fm-header{
    position:relative;z-index:201;
}

/* On very small screens (<=400px), sidebar narrows slightly */
@media(max-width:400px){
    .fm-layout-sidebar .fm-catbar{
        width:100px;min-width:100px;max-width:100px;padding:14px 0 10px;
    }
    .fm-layout-sidebar .fm-cat-icon-wrap{
        width:40px;height:40px;
    }
    .fm-layout-sidebar .fm-cat-label{
        font-size:10px;max-width:80px;
    }
    .fm-layout-sidebar .fm-catbar-scroll{
        gap:10px;padding:6px 7px;
    }
    .fm-layout-sidebar .fm-card .fm-card-img-wrap{
        height:150px!important;max-height:150px!important;
    }
}

/* Fix: sidebar layout toolbar stays at bottom properly */
.fm-layout-sidebar .fm-bottom-toolbar{
    position:fixed;bottom:0;left:50%;transform:translateX(-50%);
    max-width:var(--fm-max-w,900px);width:100%;z-index:300;
}

/* Fix: footer in sidebar mode */
.fm-layout-sidebar .fm-footer{
    clear:both;
}

/* Sidebar container - classic mode: no special layout */
.flavor-wrap:not(.fm-layout-sidebar) .fm-sidebar-container{
    display:block;
    margin-top:0;padding-top:0;
}

/* Badge positioning for vertical cards */
.fm-layout-sidebar .fm-badge{
    border-radius:0 0 var(--fm-badge-radius,8px) 0;
}

/* FCP button overrides for sidebar layout */
.fm-layout-sidebar .fm-card-img-wrap{
    width:100%!important;
}

/* ============================================================
   v9.9.6 - SIDEBAR LEFT POSITION
   ============================================================ */
.fm-layout-sidebar.fm-sidebar-left .fm-catbar{
    order:0!important;
    box-shadow:2px 0 10px rgba(0,0,0,.06);
}
.fm-layout-sidebar.fm-sidebar-left .fm-sections{
    order:1;
}
.fm-layout-sidebar.fm-sidebar-left[dir="rtl"] .fm-cat-item.active::after{
    right:auto;left:-8px;
}
.fm-layout-sidebar.fm-sidebar-left[dir="ltr"] .fm-cat-item.active::after{
    left:auto;right:-8px;
}

/* ============================================================
   v9.9.6 - BIG CARD MODE (fm-cards-big)
   Image on top, text below - like the sidebar card style but for all layouts
   ============================================================ */
.fm-cards-big .fm-cards{
    display:flex!important;flex-direction:column;
    gap:var(--fm-card-gap,14px);
}
.fm-cards-big .fm-card{
    display:flex;flex-direction:column;
    padding:0;overflow:hidden;
}
.fm-cards-big .fm-card .fm-card-top-row{
    flex-direction:column!important;gap:0;
}
.fm-cards-big .fm-card .fm-card-img-wrap{
    width:100%!important;height:200px!important;max-height:200px!important;
    border-radius:var(--fm-card-radius,16px) var(--fm-card-radius,16px) 0 0!important;
}
.fm-cards-big .fm-card .fm-card-body{
    padding:10px 14px 8px;
}
.fm-cards-big .fm-card .fm-card-title{
    font-size:16px;margin-bottom:3px;
}
.fm-cards-big .fm-card .fm-card-desc{
    font-size:12px;margin-bottom:3px;
}
.fm-cards-big .fm-card .fm-card-price{
    font-size:15px;margin-top:3px;
}
/* Big card: metas ABOVE sc-area */
.fm-cards-big .fm-card .fm-card-bottom-row{
    flex-direction:column!important;align-items:stretch!important;gap:4px;
    padding:6px 12px 10px;
}
.fm-cards-big .fm-card .fm-card-bottom-row .fm-card-sc-area{
    display:flex;justify-content:flex-start;order:2;
}
.fm-cards-big .fm-card .fm-card-bottom-row .fm-card-metas{
    display:flex;justify-content:flex-start;flex:none!important;max-width:none!important;
    flex-wrap:wrap!important;gap:4px!important;order:1;
}
.fm-cards-big .fm-badge{
    border-radius:0 0 var(--fm-badge-radius,8px) 0;
}

/* ============================================================
   v9.9.6 - TWO COLUMN CARDS (fm-cards-2col)
   Real 2-column grid with vertical cards
   ============================================================ */

/* --- Classic + 2 columns --- */
.fm-cards-2col:not(.fm-layout-sidebar) .fm-cards{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:var(--fm-card-gap,10px);
}
.fm-cards-2col:not(.fm-layout-sidebar) .fm-card{
    display:flex;flex-direction:column;
    padding:0;overflow:hidden;
}
.fm-cards-2col:not(.fm-layout-sidebar) .fm-card .fm-card-top-row{
    flex-direction:column!important;gap:0;
}
.fm-cards-2col:not(.fm-layout-sidebar) .fm-card .fm-card-img-wrap{
    width:100%!important;height:124px!important;max-height:160px!important;
    border-radius:var(--fm-card-radius,16px) var(--fm-card-radius,16px) 0 0!important;
}
.fm-cards-2col:not(.fm-layout-sidebar) .fm-card .fm-card-body{
    padding:6px 8px 4px;
}
.fm-cards-2col:not(.fm-layout-sidebar) .fm-card .fm-card-title{
    font-size:14px;margin-bottom:2px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-cards-2col:not(.fm-layout-sidebar) .fm-card .fm-card-desc{
    font-size:11px;-webkit-line-clamp:2;margin-bottom:2px;
}
.fm-cards-2col:not(.fm-layout-sidebar) .fm-card .fm-card-price{
    font-size:13px;margin-top:2px;
}
/* Classic 2col: metas ABOVE sc-area */
.fm-cards-2col:not(.fm-layout-sidebar) .fm-card .fm-card-bottom-row{
    flex-direction:column!important;align-items:stretch!important;gap:3px;
    padding:4px 6px 6px;
    overflow:hidden;
}
.fm-cards-2col:not(.fm-layout-sidebar) .fm-card .fm-card-bottom-row .fm-card-sc-area{
    display:flex;justify-content:flex-start;flex:none!important;
    overflow:hidden;order:2;
}
.fm-cards-2col:not(.fm-layout-sidebar) .fm-card .fm-card-bottom-row .fm-card-metas{
    display:flex;justify-content:flex-start;flex:none!important;max-width:none!important;
    flex-wrap:wrap!important;gap:3px!important;order:1;
}
.fm-cards-2col:not(.fm-layout-sidebar) .fm-badge{
    border-radius:0 0 var(--fm-badge-radius,8px) 0;
}

/* --- Sidebar + 2 columns --- */
.fm-cards-2col.fm-layout-sidebar .fm-cards{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:6px;
}
.fm-cards-2col.fm-layout-sidebar .fm-card{
    display:flex;flex-direction:column;
    padding:0;overflow:hidden;
}
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-top-row{
    flex-direction:column!important;gap:0;
}
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-img-wrap{
    width:100%!important;height:84px!important;max-height:130px!important;
    border-radius:var(--fm-card-radius,16px) var(--fm-card-radius,16px) 0 0!important;
}
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-body{
    padding:6px 8px 4px;
}
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-title{
    font-size:13px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-desc{
    font-size:10px;-webkit-line-clamp:2;
}
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-price{
    font-size:12px;
}
/* Sidebar 2col: metas horizontal ABOVE sc-area, smaller */
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-bottom-row{
    flex-direction:column!important;align-items:stretch!important;gap:2px;
    padding:3px 5px 5px;
    overflow:hidden;
}
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-bottom-row .fm-card-sc-area{
    display:flex;justify-content:flex-start;flex:none!important;
    overflow:hidden;order:2;
}
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-bottom-row .fm-card-metas{
    display:flex;justify-content:flex-start;flex:none!important;max-width:none!important;
    flex-direction:row!important;flex-wrap:wrap!important;gap:2px!important;order:1;
}
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-meta{
    font-size:8px!important;padding:2px 4px!important;
}

/* ============================================================
   v9.9.7 - TWO COLUMN MOBILE FIXES
   Keep 2 columns on ALL screen sizes + compact shortcode buttons
   ============================================================ */

/* Shortcode buttons inside 2col cards: slightly smaller to prevent overflow */
.fm-cards-2col .fm-card .fm-card-sc-area{
    transform:scale(.88);transform-origin:right center;
}
[dir="rtl"] .fm-cards-2col .fm-card .fm-card-sc-area{
    transform-origin:right center;
}
[dir="ltr"] .fm-cards-2col .fm-card .fm-card-sc-area{
    transform-origin:left center;
}
.fm-cards-2col .fm-card .fc-add-btn{
    padding:2px 5px!important;font-size:10px!important;
    height:24px!important;min-height:24px!important;
}
.fm-cards-2col .fm-card .fc-qty-btn{
    width:20px!important;height:20px!important;
}
.fm-cards-2col .fm-card .fc-qty-value{
    font-size:10px!important;min-width:18px!important;
}
.fm-cards-2col .fm-card .fc-add-icon svg{
    width:11px!important;height:11px!important;
}
.fm-cards-2col .fm-card .fc-qty-modern{
    gap:1px!important;
}

/* ============================================================
   v9.9.7 - SIDEBAR LAYOUT: tighter padding for wider cards
   ============================================================ */

/* Sidebar catbar: narrower padding */
.fm-layout-sidebar .fm-catbar-scroll{
    padding:8px 6px;
}

/* Sidebar sections: less horizontal padding */
.fm-layout-sidebar .fm-sections{
    flex:1;min-width:0;
    padding:10px 6px 0;
    order:1;
}

/* Sidebar cards: tighter padding */
.fm-layout-sidebar .fm-card .fm-card-body{
    padding:8px 8px 6px;
}

/* Sidebar 2col: smaller gap between cards */
.fm-cards-2col.fm-layout-sidebar .fm-cards{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

/* Sidebar 2col card body: compact */
.fm-cards-2col.fm-layout-sidebar .fm-card .fm-card-body{
    padding:5px 6px 3px;
}

/* Sidebar 1col: less card padding */
.fm-layout-sidebar:not(.fm-cards-2col):not(.fm-cards-big) .fm-card .fm-card-bottom-row{
    padding:5px 8px 6px;
}

/* Small screens: sidebar even narrower */
@media(max-width:400px){
    .fm-layout-sidebar .fm-catbar-scroll{
        padding:6px 4px;
    }
    .fm-layout-sidebar .fm-sections{
        padding:8px 4px 0;
    }
    .fm-cards-2col.fm-layout-sidebar .fm-cards{
        gap:4px;
    }
}

/* ============================================================
   v11.4.0 — SMART COLOR-REACTIVE & MOTION-REACTIVE BACKGROUNDS
   ============================================================ */

/* --- Smart Bubble Background (color-reactive via CSS vars) --- */
.fm-bg-page-smart-bubbles {
    position:relative;
    overflow:hidden;
    background:var(--fw-smart-bg-1,linear-gradient(135deg,#f0f4ff,#e8f0ff))!important;
}
.fm-bg-page-smart-bubbles::before {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
        radial-gradient(ellipse 38% 28% at 20% 30%, var(--fw-smart-blob1,rgba(100,130,255,0.18)) 0%, transparent 70%),
        radial-gradient(ellipse 30% 38% at 78% 68%, var(--fw-smart-blob2,rgba(160,100,255,0.14)) 0%, transparent 70%),
        radial-gradient(ellipse 22% 22% at 60% 20%, var(--fw-smart-blob3,rgba(80,180,255,0.10)) 0%, transparent 70%);
}
/* --- Smart Particles Background --- */
.fm-bg-page-smart-particles {
    position:relative;overflow:hidden;
    background:var(--fw-smart-bg-1,#f5f5f5)!important;
}
.fm-bg-page-smart-particles::before {
    content:'';
    position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:
        radial-gradient(circle 3px at 15% 25%, var(--fw-smart-dot,rgba(80,100,200,0.18)) 100%, transparent),
        radial-gradient(circle 2px at 40% 60%, var(--fw-smart-dot,rgba(80,100,200,0.14)) 100%, transparent),
        radial-gradient(circle 4px at 70% 20%, var(--fw-smart-dot,rgba(80,100,200,0.12)) 100%, transparent),
        radial-gradient(circle 2px at 85% 75%, var(--fw-smart-dot,rgba(80,100,200,0.16)) 100%, transparent),
        radial-gradient(circle 3px at 55% 85%, var(--fw-smart-dot,rgba(80,100,200,0.10)) 100%, transparent),
        radial-gradient(circle 2px at 28% 78%, var(--fw-smart-dot,rgba(80,100,200,0.12)) 100%, transparent),
        radial-gradient(circle 3px at 92% 40%, var(--fw-smart-dot,rgba(80,100,200,0.14)) 100%, transparent);
}
/* --- Smart Waves Background --- */
.fm-bg-page-smart-waves {
    position:relative;overflow:hidden;
    background:var(--fw-smart-bg-1,#f0f8f5)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30'%3E%3Cpath d='M0 15 Q30 0 60 15 Q90 30 120 15' stroke='rgba(100,160,140,0.12)' fill='none' stroke-width='1.5'/%3E%3C/svg%3E")!important;
    background-size:120px 30px!important;
}
/* --- Smart Mesh Background --- */
.fm-bg-page-smart-mesh {
    position:relative;overflow:hidden;
    background:var(--fw-smart-bg-1,#f8f0ff)!important;
}
.fm-bg-page-smart-mesh::before {
    content:'';
    position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
        conic-gradient(from 0deg at 20% 50%, var(--fw-smart-blob1,rgba(120,80,200,0.08)) 0deg, transparent 60deg, transparent 300deg, var(--fw-smart-blob1,rgba(120,80,200,0.04)) 360deg),
        conic-gradient(from 180deg at 80% 50%, var(--fw-smart-blob2,rgba(80,120,200,0.06)) 0deg, transparent 80deg, transparent 280deg, var(--fw-smart-blob2,rgba(80,120,200,0.04)) 360deg);
}
/* --- Smart Stars Background (dark) --- */
.fm-bg-page-smart-stars {
    position:relative;overflow:hidden;
    background:var(--fw-smart-bg-dark,linear-gradient(135deg,#0d1a33,#1a2a4a))!important;
}
.fm-bg-page-smart-stars::before {
    content:'';
    position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:
        radial-gradient(circle 1.5px at 10% 15%, rgba(255,255,255,0.7) 100%, transparent),
        radial-gradient(circle 1px at 25% 30%, rgba(255,255,255,0.5) 100%, transparent),
        radial-gradient(circle 2px at 45% 10%, rgba(255,255,255,0.6) 100%, transparent),
        radial-gradient(circle 1px at 65% 25%, rgba(255,255,255,0.4) 100%, transparent),
        radial-gradient(circle 1.5px at 80% 8%, rgba(255,255,255,0.7) 100%, transparent),
        radial-gradient(circle 1px at 90% 40%, rgba(255,255,255,0.5) 100%, transparent),
        radial-gradient(circle 2px at 15% 60%, rgba(255,255,255,0.4) 100%, transparent),
        radial-gradient(circle 1px at 35% 75%, rgba(255,255,255,0.6) 100%, transparent),
        radial-gradient(circle 1.5px at 55% 55%, rgba(255,255,255,0.5) 100%, transparent),
        radial-gradient(circle 1px at 72% 65%, rgba(255,255,255,0.7) 100%, transparent),
        radial-gradient(circle 2px at 88% 78%, rgba(255,255,255,0.4) 100%, transparent),
        radial-gradient(circle 1px at 5% 85%, rgba(255,255,255,0.6) 100%, transparent),
        radial-gradient(circle 1.5px at 20% 90%, rgba(255,255,255,0.5) 100%, transparent),
        radial-gradient(circle 1px at 50% 92%, rgba(255,255,255,0.4) 100%, transparent),
        radial-gradient(circle 2px at 75% 88%, rgba(255,255,255,0.6) 100%, transparent),
        radial-gradient(circle 1px at 95% 95%, rgba(255,255,255,0.5) 100%, transparent),
        radial-gradient(ellipse 60% 40% at 30% 50%, var(--fw-smart-blob1,rgba(100,140,255,0.08)) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 75% 60%, var(--fw-smart-blob2,rgba(160,100,255,0.07)) 0%, transparent 70%);
}

/* --- Motion-Reactive Orbs Background --- */
.fm-bg-page-motion-orbs {
    position:relative;overflow:hidden;
    background:var(--fw-smart-bg-1,linear-gradient(135deg,#e8f0ff,#f0e8ff))!important;
}
.fm-bg-page-motion-orbs .fw-motion-layer {
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}
/* --- Motion-Reactive Geometric --- */
.fm-bg-page-motion-geometric {
    position:relative;overflow:hidden;
    background:var(--fw-smart-bg-1,linear-gradient(135deg,#f5f5f5,#e8e8ff))!important;
}
/* --- Motion-Reactive Float --- */
.fm-bg-page-motion-float {
    position:relative;overflow:hidden;
    background:var(--fw-smart-bg-1,linear-gradient(135deg,#f0fff8,#e8f8ff))!important;
}

/* === Enhanced animated backgrounds - more visible motion === */
.fm-bg-animated.fm-bg-page-smart-bubbles::before {
    animation:fwSmartBlobPulse 8s ease-in-out infinite;
}
.fm-bg-animated.fm-bg-page-smart-particles {
    animation:fmBgDrift 12s linear infinite;
}
.fm-bg-animated.fm-bg-page-smart-waves {
    animation:fmBgWaveMove 5s linear infinite;
}
.fm-bg-animated.fm-bg-page-smart-mesh::before {
    animation:fwSmartMeshSpin 20s linear infinite;
}
.fm-bg-animated.fm-bg-page-smart-stars::before {
    animation:fwStarsTwinkle 6s ease-in-out infinite;
}
/* Enhanced visibility for existing patterns when animated */
.fm-bg-animated.fm-bg-page-dots {
    animation:fmBgPulseSize 8s ease-in-out infinite;
    background-image:radial-gradient(circle,rgba(0,0,0,.10) 1.5px,transparent 1.5px)!important;
}
.fm-bg-animated.fm-bg-page-grid {
    animation:fmBgDrift 10s linear infinite;
    background-image:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px)!important;
}
.fm-bg-animated.fm-bg-page-diagonal {
    animation:fmBgDrift 8s linear infinite;
    background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,0,0,.06) 10px,rgba(0,0,0,.06) 11px)!important;
}
.fm-bg-animated.fm-bg-page-hexagon {
    animation:fmBgPulseSize 14s ease-in-out infinite;
}
.fm-bg-animated.fm-bg-page-chevron {
    animation:fmBgDrift 10s linear infinite;
}
.fm-bg-animated.fm-bg-page-circles {
    animation:fmBgPulseSize 9s ease-in-out infinite;
}

/* Keyframes for smart/new backgrounds */
@keyframes fwSmartBlobPulse {
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:0.75;transform:scale(1.08);}
}
@keyframes fwSmartMeshSpin {
    0%{transform:rotate(0deg) scale(1);}
    50%{transform:rotate(180deg) scale(1.05);}
    100%{transform:rotate(360deg) scale(1);}
}
@keyframes fwStarsTwinkle {
    0%,100%{opacity:1;}
    25%{opacity:0.7;}
    50%{opacity:0.9;}
    75%{opacity:0.65;}
}
@keyframes fmBgWaveMove {
    0%{background-position:0 0}
    100%{background-position:120px 0}
}
@keyframes fmBgPulseSize {
    0%,100%{background-size:20px 20px;}
    50%{background-size:24px 24px;}
}

/* ============================================================
   MOTION-REACTIVE CANVAS LAYER (JS-powered)
   Applied to motion-* presets via JavaScript
   ============================================================ */
.fw-motion-canvas-wrap {
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}
.fw-motion-canvas-wrap canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

/* ============================================================
   v11.6 - NEW LAYOUT SYSTEMS
   4 brand-new layouts, each with a distinct design language.
   All layouts reuse the existing .fm-card markup and CSS vars.
   ============================================================ */


/* ============================================================
   LAYOUT 3 — SHOWCASE (fm-layout-showcase)
   Horizontal carousel per category, Instagram/TikTok story style.
   Cards are tall portraits with full-bleed image, overlay title.
   Snap scroll, categories displayed as vertical scrolling stack
   of horizontal rails. Dark moody premium feel.
   Design language: cinematic, premium, dark, vivid gradients.
   ============================================================ */
.fm-layout-showcase{
    background:var(--fm-bg,#0a0a0f);
}
.fm-layout-showcase[data-theme-loaded] .fm-section{
    /* Allow theme override but default dark */
}
.fm-layout-showcase .fm-sections{
    padding:14px 0 8px;
}
.fm-layout-showcase .fm-section{
    margin-bottom:28px;
    padding:0;
}
.fm-layout-showcase .fm-section-head{
    padding:0 14px 10px;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:10px;
}
.fm-layout-showcase .fm-section-title{
    font-size:18px;
    font-weight:800;
    letter-spacing:-.3px;
    position:relative;
    padding-inline-start:14px;
}
.fm-layout-showcase .fm-section-title::before{
    content:'';
    position:absolute;
    inset-inline-start:0;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:70%;
    border-radius:3px;
    background:linear-gradient(180deg,var(--fm-catbar-active-border,#ff3b8a),var(--fm-price-color,#9d7aff));
}
.fm-layout-showcase .fm-section-line{display:none}

/* Horizontal scrolling rail of cards */
.fm-layout-showcase .fm-cards{
    display:flex;
    flex-direction:row;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 14px 14px;
    scroll-snap-type:x mandatory;
    scroll-padding-inline-start:14px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.fm-layout-showcase .fm-cards::-webkit-scrollbar{display:none}

/* Card — portrait aspect ratio, full-bleed */
.fm-layout-showcase .fm-card{
    flex:0 0 auto;
    width:170px;
    height:250px;
    padding:0;
    border-radius:18px;
    overflow:hidden;
    position:relative;
    scroll-snap-align:start;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.06);
    transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease;
}
.fm-layout-showcase .fm-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 32px rgba(0,0,0,.38);
}
.fm-layout-showcase .fm-card .fm-card-top-row{
    flex-direction:column!important;
    gap:0;
    height:100%;
}
.fm-layout-showcase .fm-card .fm-card-img-wrap{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    border-radius:0!important;
    position:absolute;
    inset:0;
}
.fm-layout-showcase .fm-card .fm-card-img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.fm-layout-showcase .fm-card:hover .fm-card-img{
    transform:scale(1.07);
}
/* Gradient overlay for readability */
.fm-layout-showcase .fm-card .fm-card-img-wrap::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.88) 100%);
    pointer-events:none;
    z-index:2;
}
/* Top shine accent */
.fm-layout-showcase .fm-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    z-index:5;
    pointer-events:none;
}

/* Body overlaid on the bottom */
.fm-layout-showcase .fm-card .fm-card-body{
    position:absolute;
    bottom:0;left:0;right:0;
    padding:10px 12px 12px;
    z-index:4;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.fm-layout-showcase .fm-card .fm-card-info{flex:0 0 auto}
.fm-layout-showcase .fm-card .fm-card-title{
    font-size:14px;
    font-weight:700;
    color:#fff!important;
    line-height:1.3;
    margin-bottom:2px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.fm-layout-showcase .fm-card .fm-card-desc{
    font-size:10.5px;
    color:rgba(255,255,255,.82)!important;
    line-height:1.4;
    -webkit-line-clamp:1;
    margin-bottom:3px;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.fm-layout-showcase .fm-card .fm-card-price{
    font-size:13px;
    font-weight:700;
    color:#fff!important;
    margin-top:2px;
    text-shadow:0 1px 3px rgba(0,0,0,.6);
    background:rgba(255,255,255,.15);
    padding:3px 9px;
    border-radius:12px;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.2);
    display:inline-block;
    align-self:flex-start;
}

/* Bottom row — floating at top corner */
.fm-layout-showcase .fm-card .fm-card-bottom-row{
    position:absolute;
    top:10px;
    inset-inline-end:10px;
    z-index:5;
    border:none!important;
    padding:0!important;
    margin:0!important;
    background:transparent;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:5px;
}
.fm-layout-showcase .fm-card .fm-card-sc-area{order:1;flex-shrink:0}
.fm-layout-showcase .fm-card .fm-card-metas{display:none!important}

/* Badge — circular pill top-left */
.fm-layout-showcase .fm-badge{
    top:10px;
    inset-inline-start:10px;
    border-radius:12px;
    padding:3px 10px;
    font-size:10px;
    box-shadow:0 3px 8px rgba(0,0,0,.3);
    border:1px solid rgba(255,255,255,.2);
    z-index:5;
}

/* Hint dots at end of rail */
.fm-layout-showcase .fm-cards::after{
    content:'';
    flex:0 0 4px;
}

/* Section head gets a subtle "see all" affordance via ::after */
.fm-layout-showcase .fm-section-head::after{
    content:'›';
    margin-inline-start:auto;
    font-size:22px;
    opacity:.5;
    font-weight:300;
}

@media(max-width:380px){
    .fm-layout-showcase .fm-card{
        width:150px;
        height:220px;
    }
    .fm-layout-showcase .fm-card .fm-card-title{font-size:13px}
    .fm-layout-showcase .fm-card .fm-card-price{font-size:12px}
}


/* ============================================================
   LAYOUT 4 — MINIMAL (fm-layout-minimal)
   Editorial list. No images OR tiny thumbs, typography-first.
   Each card is a horizontal row: title on left, price on right,
   description below, divider between. Swiss-style, timeless.
   Design language: typographic, airy, monochrome, thin dividers.
   ============================================================ */
.fm-layout-minimal .fm-sections{
    padding:14px 14px 0;
}
.fm-layout-minimal .fm-section{
    margin-bottom:32px;
    padding:0;
}
.fm-layout-minimal .fm-section-head{
    padding:0 0 8px;
    margin-bottom:4px;
    border-bottom:1px solid var(--fm-sh-color,#1a1a1a);
    display:flex;
    align-items:baseline;
    gap:10px;
}
.fm-layout-minimal .fm-section-title{
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2.2px;
    line-height:1;
    padding:0;
}
.fm-layout-minimal .fm-section-title-icon{
    width:18px;height:18px;
}
.fm-layout-minimal .fm-section-line{display:none}

/* Sub-label to right of title: counter */
.fm-layout-minimal .fm-section-head::after{
    content:'—';
    margin-inline-start:auto;
    font-size:14px;
    opacity:.35;
    letter-spacing:2px;
}

/* Stacked list */
.fm-layout-minimal .fm-cards{
    display:flex;
    flex-direction:column;
    gap:0;
}

/* Card as list row */
.fm-layout-minimal .fm-card{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    gap:2px 14px;
    padding:14px 2px;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    border-bottom:1px dashed rgba(0,0,0,.14)!important;
    border-radius:0!important;
    transition:background .25s ease;
    position:relative;
}
.fm-layout-minimal .fm-card:hover{
    transform:none;
    box-shadow:none!important;
    background:rgba(0,0,0,.015)!important;
}
.fm-layout-minimal .fm-card:last-child{border-bottom:0!important}

/* Hide image completely in minimal */
.fm-layout-minimal .fm-card .fm-card-img-wrap{
    display:none!important;
}

.fm-layout-minimal .fm-card .fm-card-top-row{
    display:contents; /* Let grid children flow directly */
}

.fm-layout-minimal .fm-card .fm-card-body{
    grid-column:1;
    grid-row:1 / span 2;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.fm-layout-minimal .fm-card .fm-card-info{
    flex:0 0 auto;
    position:relative;
}

/* Leader dots effect — create flexible space before price */
.fm-layout-minimal .fm-card .fm-card-title{
    font-size:15.5px;
    font-weight:700;
    line-height:1.35;
    margin-bottom:1px;
    letter-spacing:-.1px;
    color:var(--fm-title-color,#1a1a1a);
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.fm-layout-minimal .fm-card .fm-card-desc{
    font-size:11.5px;
    line-height:1.55;
    -webkit-line-clamp:2;
    margin:0;
    font-style:italic;
    opacity:.78;
}
.fm-layout-minimal .fm-card .fm-card-price{
    grid-column:2;
    grid-row:1;
    font-size:15px;
    font-weight:700;
    margin-top:0;
    font-variant-numeric:tabular-nums;
    color:var(--fm-title-color,#1a1a1a);
    white-space:nowrap;
    align-self:start;
    padding-top:1px;
}

/* Bottom row becomes the metas + button at row 2, col 2 */
.fm-layout-minimal .fm-card .fm-card-bottom-row{
    grid-column:2;
    grid-row:2;
    border-top:0!important;
    padding:4px 0 0!important;
    margin:0!important;
    background:transparent;
    justify-content:flex-end;
    align-items:flex-end;
    flex-direction:row-reverse!important;
    gap:6px;
}
[dir="rtl"] .fm-layout-minimal .fm-card .fm-card-bottom-row{
    flex-direction:row!important;
}
.fm-layout-minimal .fm-card .fm-card-sc-area{
    order:2;
    flex:0 0 auto;
    transform:scale(.92);
}
.fm-layout-minimal .fm-card .fm-card-metas{
    order:1;
    display:flex!important;
    gap:4px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.fm-layout-minimal .fm-card .fm-meta{
    font-size:9.5px;
    padding:2px 7px;
    background:transparent!important;
    border:1px solid rgba(0,0,0,.12)!important;
    color:var(--fm-meta-text,#777)!important;
    border-radius:4px;
    letter-spacing:.3px;
    text-transform:uppercase;
}

/* Badge as inline tag before title */
.fm-layout-minimal .fm-badge{
    position:static!important;
    display:inline-block;
    margin-inline-end:6px;
    font-size:9px!important;
    padding:1px 6px!important;
    border-radius:3px!important;
    vertical-align:middle;
    transform:translateY(-1px);
    letter-spacing:.5px;
    text-transform:uppercase;
}

/* Number prefix for each item — "01.", "02." etc. */
.fm-layout-minimal .fm-card::before{
    content:counter(fm-menu-item, decimal-leading-zero);
    counter-increment:fm-menu-item;
    position:absolute;
    top:14px;
    inset-inline-start:-6px;
    font-size:9px;
    font-weight:600;
    opacity:.28;
    letter-spacing:1px;
    font-variant-numeric:tabular-nums;
    display:none; /* Off by default, available for customization */
}
.fm-layout-minimal .fm-section{counter-reset:fm-menu-item}

@media(max-width:380px){
    .fm-layout-minimal .fm-card{padding:12px 2px;gap:2px 10px}
    .fm-layout-minimal .fm-card .fm-card-title{font-size:14px}
    .fm-layout-minimal .fm-card .fm-card-price{font-size:14px}
    .fm-layout-minimal .fm-card .fm-card-desc{font-size:11px}
}
.flavor-preview.fm-layout-showcase .fm-card{width:110px;height:160px;border-radius:12px}
.flavor-preview.fm-layout-showcase .fm-card .fm-card-title{font-size:10px}
.flavor-preview.fm-layout-showcase .fm-card .fm-card-price{font-size:9px;padding:2px 6px}
.flavor-preview.fm-layout-showcase .fm-cards{padding:4px 10px 12px;gap:8px}
.flavor-preview.fm-layout-showcase .fm-section-title{font-size:13px}

.flavor-preview.fm-layout-minimal .fm-card{padding:8px 2px}
.flavor-preview.fm-layout-minimal .fm-card .fm-card-title{font-size:11px}
.flavor-preview.fm-layout-minimal .fm-card .fm-card-price{font-size:11px}
.flavor-preview.fm-layout-minimal .fm-card .fm-card-desc{font-size:9px}
.flavor-preview.fm-layout-minimal .fm-section-title{font-size:11px;letter-spacing:1.4px}
.fm-layout-showcase .fm-sidebar-container,
.fm-layout-minimal .fm-sidebar-container{
    display:block;
}

/* ============================================================
   LAYOUT PRESET SELECTOR — customizer styles for 6 items
   Ensure the preset grid scales to 6+ items nicely.
   ============================================================ */
#fmc-layout-presets{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}
@media(max-width:480px){
    #fmc-layout-presets{grid-template-columns:repeat(2,1fr)}
}


/* ============================================================
   v11.7 - FOUR MORE LAYOUTS — each with a distinct design language
   catalog / neumorphic / timeline / diagonal
   ============================================================ */


/* ============================================================
   LAYOUT 5 — CATALOG (fm-layout-catalog)
   Luxury boutique / high-end catalog. Products sit in a strict
   2-column grid as portrait "product cards" with a thin gold
   frame, uppercase tiny labels, centered typography, and the
   price ABOVE the title (European luxury convention).
   Design language: refined, symmetric, serifed, parchment tones.
   ============================================================ */
.fm-layout-catalog{
    --fm-catalog-frame:rgba(122, 104, 64, .55);
    --fm-catalog-accent:#7a6840;
    --fm-catalog-ink:#2a2015;
}
.fm-layout-catalog .fm-sections{
    padding:16px 12px 0;
}
.fm-layout-catalog .fm-section{
    margin-bottom:44px;
    position:relative;
}
/* Double-line section header with centered title */
.fm-layout-catalog .fm-section-head{
    justify-content:center;
    gap:14px;
    padding:14px 0 14px;
    margin-bottom:20px;
    position:relative;
    border-top:1px solid var(--fm-catalog-frame);
    border-bottom:1px solid var(--fm-catalog-frame);
}
.fm-layout-catalog .fm-section-head::before{
    content:'';
    position:absolute;left:50%;top:-5px;transform:translateX(-50%);
    width:10px;height:10px;
    background:var(--fm-catalog-accent);
    transform:translateX(-50%) rotate(45deg);
    border:2px solid var(--fm-bg,#f3ede0);
    z-index:2;
}
.fm-layout-catalog .fm-section-head::after{
    content:'';
    position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
    width:10px;height:10px;
    background:var(--fm-catalog-accent);
    transform:translateX(-50%) rotate(45deg);
    border:2px solid var(--fm-bg,#f3ede0);
    z-index:2;
}
.fm-layout-catalog .fm-section-title{
    font-size:17px;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--fm-catalog-ink);
    padding:0 20px;
    position:relative;
}
.fm-layout-catalog .fm-section-line{display:none}

/* Two-column product grid */
.fm-layout-catalog .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 14px;
}

/* Boutique card — framed portrait */
.fm-layout-catalog .fm-card{
    padding:0;
    background:#fff;
    border:1px solid var(--fm-catalog-frame);
    border-radius:3px;
    box-shadow:0 1px 3px rgba(42,32,21,.08);
    position:relative;
    overflow:visible;
    transition:box-shadow .3s ease,transform .3s ease;
}
.fm-layout-catalog .fm-card::before{
    /* Inner frame line — catalog hallmark */
    content:'';
    position:absolute;
    inset:4px;
    border:1px solid rgba(122, 104, 64, .25);
    pointer-events:none;
    z-index:1;
}
.fm-layout-catalog .fm-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(42,32,21,.14);
}
.fm-layout-catalog .fm-card .fm-card-top-row{
    flex-direction:column!important;
    gap:0;
}
.fm-layout-catalog .fm-card .fm-card-img-wrap{
    width:calc(100% - 20px)!important;
    height:auto!important;
    aspect-ratio:1 / 1;
    max-height:none!important;
    border-radius:0!important;
    margin:10px 10px 0;
    overflow:hidden;
    background:#faf5e8;
}
.fm-layout-catalog .fm-card .fm-card-body{
    padding:10px 12px 6px;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.fm-layout-catalog .fm-card .fm-card-info{
    display:flex;
    flex-direction:column;
    gap:3px;
}
/* PRICE FIRST (above title) — European luxury catalog convention */
.fm-layout-catalog .fm-card .fm-card-price{
    order:-1;
    font-size:11px;
    font-weight:600;
    color:var(--fm-catalog-accent)!important;
    letter-spacing:2px;
    text-transform:uppercase;
    margin:0 0 2px;
    font-variant-numeric:tabular-nums;
    align-self:center;
    position:relative;
    padding:2px 10px;
}
.fm-layout-catalog .fm-card .fm-card-price::before,
.fm-layout-catalog .fm-card .fm-card-price::after{
    content:'';
    position:absolute;
    top:50%;
    width:10px;
    height:1px;
    background:var(--fm-catalog-accent);
    opacity:.5;
}
.fm-layout-catalog .fm-card .fm-card-price::before{right:calc(100% - 2px)}
.fm-layout-catalog .fm-card .fm-card-price::after{left:calc(100% - 2px)}
.fm-layout-catalog .fm-card .fm-card-title{
    font-size:13px;
    font-weight:700;
    letter-spacing:.3px;
    color:var(--fm-catalog-ink)!important;
    margin:0;
    line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    text-transform:capitalize;
}
.fm-layout-catalog .fm-card .fm-card-desc{
    font-size:10.5px;
    line-height:1.5;
    color:rgba(42, 32, 21, .65)!important;
    -webkit-line-clamp:2;
    margin:0;
    font-style:italic;
}
/* Bottom action row — inline, centered */
.fm-layout-catalog .fm-card .fm-card-bottom-row{
    flex-direction:column!important;
    align-items:center!important;
    padding:6px 10px 10px;
    gap:6px;
    border-top:1px dotted var(--fm-catalog-frame);
    margin-top:4px;
}
.fm-layout-catalog .fm-card .fm-card-sc-area{order:2;justify-content:center}
.fm-layout-catalog .fm-card .fm-card-metas{
    order:1;
    justify-content:center;
    flex-direction:row!important;
    flex-wrap:wrap;
    gap:4px;
}
.fm-layout-catalog .fm-card .fm-meta{
    font-size:9px;
    padding:2px 7px;
    border-radius:2px;
    background:transparent!important;
    border:1px solid var(--fm-catalog-frame)!important;
    color:var(--fm-catalog-accent)!important;
    letter-spacing:1px;
    text-transform:uppercase;
}
/* Badge — elegant ribbon at top */
.fm-layout-catalog .fm-badge{
    top:-1px;
    inset-inline-end:10px;
    inset-inline-start:auto;
    border-radius:0 0 2px 2px;
    padding:4px 10px;
    font-size:9px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    z-index:3;
    box-shadow:0 2px 4px rgba(0,0,0,.15);
}

@media(max-width:380px){
    .fm-layout-catalog .fm-cards{gap:12px 10px}
    .fm-layout-catalog .fm-card .fm-card-title{font-size:12px}
    .fm-layout-catalog .fm-section-title{font-size:15px;letter-spacing:3px}
}


/* ============================================================
   LAYOUT 6 — NEUMORPHIC (fm-layout-neumorphic)
   Soft UI / neumorphism. Cards look embossed/extruded from the
   background surface using twin light+shadow offsets. No bold
   borders, no gradients — just soft, tactile monochrome depth.
   Design language: tactile, calm, monochromatic, physical.
   ============================================================ */
.fm-layout-neumorphic{
    --fm-neu-surface:#e6e9f0;
    --fm-neu-ink:#4a5266;
    --fm-neu-accent:#667eea;
    --fm-neu-shadow-dark:rgba(163, 177, 198, .6);
    --fm-neu-shadow-light:rgba(255, 255, 255, .9);
    background:var(--fm-neu-surface)!important;
}
.fm-layout-neumorphic .fm-sections{
    padding:16px 14px 0;
}
.fm-layout-neumorphic .fm-section{
    margin-bottom:30px;
}

/* Section heading is an extruded pill */
.fm-layout-neumorphic .fm-section-head{
    padding:14px 20px;
    margin-bottom:18px;
    background:var(--fm-neu-surface);
    border-radius:18px;
    box-shadow:
        8px 8px 18px var(--fm-neu-shadow-dark),
        -8px -8px 18px var(--fm-neu-shadow-light);
    border:0!important;
    justify-content:flex-start;
}
.fm-layout-neumorphic .fm-section-title{
    font-size:15px;
    font-weight:700;
    color:var(--fm-neu-ink);
    letter-spacing:.3px;
    padding:0;
}
.fm-layout-neumorphic .fm-section-title-icon{
    width:26px;height:26px;
    border-radius:50%;
    padding:2px;
    background:var(--fm-neu-surface);
    box-shadow:
        inset 2px 2px 4px var(--fm-neu-shadow-dark),
        inset -2px -2px 4px var(--fm-neu-shadow-light);
}
.fm-layout-neumorphic .fm-section-line{display:none}

/* Cards — soft extruded pill rows */
.fm-layout-neumorphic .fm-cards{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.fm-layout-neumorphic .fm-card{
    padding:12px;
    background:var(--fm-neu-surface)!important;
    border:0!important;
    border-radius:22px;
    box-shadow:
        7px 7px 16px var(--fm-neu-shadow-dark),
        -7px -7px 16px var(--fm-neu-shadow-light)!important;
    transition:box-shadow .4s ease,transform .4s ease;
    position:relative;
}
/* On hover — inverted to pressed/inset state */
.fm-layout-neumorphic .fm-card:hover{
    transform:none;
    box-shadow:
        inset 5px 5px 12px var(--fm-neu-shadow-dark),
        inset -5px -5px 12px var(--fm-neu-shadow-light)!important;
}
.fm-layout-neumorphic .fm-card .fm-card-top-row{
    flex-direction:row!important;
    gap:12px;
    align-items:center;
}
/* Image is a neumorphic circle — very tactile */
.fm-layout-neumorphic .fm-card .fm-card-img-wrap{
    width:96px!important;
    height:96px!important;
    max-height:96px!important;
    border-radius:50%!important;
    flex-shrink:0;
    box-shadow:
        inset 4px 4px 8px var(--fm-neu-shadow-dark),
        inset -4px -4px 8px var(--fm-neu-shadow-light);
    padding:6px;
    background:var(--fm-neu-surface);
    overflow:hidden;
}
.fm-layout-neumorphic .fm-card .fm-card-img{
    border-radius:50%;
    width:100%;height:100%;
    object-fit:cover;
}
.fm-layout-neumorphic .fm-card .fm-card-body{
    padding:2px 2px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex:1;
    min-width:0;
}
.fm-layout-neumorphic .fm-card .fm-card-title{
    font-size:14.5px;
    font-weight:700;
    color:var(--fm-neu-ink)!important;
    line-height:1.35;
    margin-bottom:3px;
    letter-spacing:.1px;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-neumorphic .fm-card .fm-card-desc{
    font-size:11.5px;
    color:rgba(74, 82, 102, .72)!important;
    line-height:1.5;
    -webkit-line-clamp:2;
    margin-bottom:5px;
}
/* Price as an embossed pill */
.fm-layout-neumorphic .fm-card .fm-card-price{
    display:inline-block;
    font-size:12.5px;
    font-weight:700;
    color:var(--fm-neu-accent)!important;
    padding:4px 12px;
    background:var(--fm-neu-surface);
    border-radius:20px;
    box-shadow:
        inset 2px 2px 4px var(--fm-neu-shadow-dark),
        inset -2px -2px 4px var(--fm-neu-shadow-light);
    align-self:flex-start;
    margin-top:0;
    font-variant-numeric:tabular-nums;
}
/* Bottom row — separated into a floating tile */
.fm-layout-neumorphic .fm-card .fm-card-bottom-row{
    border-top:0!important;
    padding:8px 0 0!important;
    margin-top:8px!important;
    gap:8px;
    flex-wrap:wrap;
}
.fm-layout-neumorphic .fm-card .fm-card-sc-area{
    flex:0 0 auto;
}
.fm-layout-neumorphic .fm-card .fm-card-metas{
    flex:1;
    gap:6px;
    justify-content:flex-end;
}
.fm-layout-neumorphic .fm-card .fm-meta{
    background:var(--fm-neu-surface)!important;
    color:var(--fm-neu-ink)!important;
    border:0!important;
    font-size:10px;
    padding:4px 10px;
    border-radius:12px;
    box-shadow:
        inset 2px 2px 3px var(--fm-neu-shadow-dark),
        inset -2px -2px 3px var(--fm-neu-shadow-light);
}
/* Badge — floating pill */
.fm-layout-neumorphic .fm-badge{
    top:6px;
    inset-inline-start:6px;
    border-radius:12px;
    padding:3px 10px;
    font-size:9.5px;
    box-shadow:
        3px 3px 6px var(--fm-neu-shadow-dark),
        -2px -2px 4px var(--fm-neu-shadow-light);
    z-index:4;
}

@media(max-width:380px){
    .fm-layout-neumorphic .fm-card .fm-card-img-wrap{
        width:76px!important;height:76px!important;max-height:76px!important;
    }
    .fm-layout-neumorphic .fm-card .fm-card-title{font-size:13px}
}


/* ============================================================
   LAYOUT 7 — TIMELINE (fm-layout-timeline)
   Vertical timeline with a center line, circular marker nodes,
   and cards alternating left/right. Each card connects to its
   marker via a short horizontal arm. Evokes a story or recipe.
   Design language: editorial, narrative, structured, linear flow.
   ============================================================ */
.fm-layout-timeline{
    --fm-tl-line:rgba(0, 0, 0, .08);
    --fm-tl-node:var(--fm-catbar-active-border, #1a1a2e);
    --fm-tl-arm:rgba(0, 0, 0, .12);
}
.fm-layout-timeline .fm-sections{
    padding:16px 0 0;
}
.fm-layout-timeline .fm-section{
    margin-bottom:36px;
    position:relative;
    padding:0 14px;
}
/* Section head — centered pill over the line */
.fm-layout-timeline .fm-section-head{
    justify-content:center;
    margin-bottom:18px;
    padding:0;
    position:relative;
    z-index:2;
}
.fm-layout-timeline .fm-section-title{
    font-size:15px;
    font-weight:800;
    padding:8px 18px;
    background:var(--fm-catbar-active-bg, #fff);
    border-radius:30px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    border:1.5px solid rgba(0,0,0,.08);
    letter-spacing:.3px;
    text-transform:uppercase;
    line-height:1;
}
.fm-layout-timeline .fm-section-title-icon{
    width:20px;height:20px;
}
.fm-layout-timeline .fm-section-line{display:none}

/* Cards container — position:relative so center line can draw */
.fm-layout-timeline .fm-cards{
    display:flex;
    flex-direction:column;
    gap:18px;
    position:relative;
    padding:8px 0 8px;
}
/* Central vertical dashed line */
.fm-layout-timeline .fm-cards::before{
    content:'';
    position:absolute;
    left:50%;top:0;bottom:0;
    width:0;
    border-left:2px dashed var(--fm-tl-line);
    transform:translateX(-50%);
    z-index:0;
}

/* Card — takes one side of the line, alternating */
.fm-layout-timeline .fm-card{
    width:calc(50% - 26px);
    padding:0;
    position:relative;
    overflow:visible;
    margin:0;
    background:var(--fm-card-bg, #fff);
    border-radius:14px;
    box-shadow:0 4px 16px rgba(0,0,0,.06);
    border:1px solid rgba(0,0,0,.04);
    z-index:1;
}
/* Odd cards (1st, 3rd, 5th by idx) on right in RTL, left in LTR */
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="0"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="2"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="4"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="6"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="8"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="10"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="12"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="14"]{
    align-self:flex-start;
}
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="1"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="3"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="5"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="7"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="9"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="11"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="13"],
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="15"]{
    align-self:flex-end;
}
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="0"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="2"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="4"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="6"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="8"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="10"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="12"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="14"]{
    align-self:flex-end;
}
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="1"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="3"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="5"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="7"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="9"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="11"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="13"],
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="15"]{
    align-self:flex-start;
}
/* Marker node on the central line */
.fm-layout-timeline .fm-card::before{
    content:'';
    position:absolute;
    top:24px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--fm-tl-node);
    border:3px solid var(--fm-bg, #fafafa);
    box-shadow:0 0 0 2px var(--fm-tl-node);
    z-index:3;
}
/* Connector arm from card to node */
.fm-layout-timeline .fm-card::after{
    content:'';
    position:absolute;
    top:30px;
    height:2px;
    background:var(--fm-tl-arm);
    z-index:2;
}
/* RTL: odd (right-side) cards — node on LEFT edge, arm extending LEFT */
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="0"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="2"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="4"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="6"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="8"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="10"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="12"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="14"]::before{
    left:-32px;
}
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="0"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="2"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="4"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="6"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="8"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="10"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="12"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="14"]::after{
    left:-20px;width:20px;
}
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="1"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="3"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="5"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="7"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="9"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="11"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="13"]::before,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="15"]::before{
    right:-32px;
}
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="1"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="3"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="5"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="7"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="9"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="11"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="13"]::after,
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="15"]::after{
    right:-20px;width:20px;
}
/* LTR mirror */
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="0"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="2"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="4"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="6"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="8"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="10"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="12"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="14"]::before{
    left:-32px;
}
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="0"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="2"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="4"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="6"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="8"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="10"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="12"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="14"]::after{
    left:-20px;width:20px;
}
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="1"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="3"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="5"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="7"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="9"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="11"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="13"]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="15"]::before{
    right:-32px;
}
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="1"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="3"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="5"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="7"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="9"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="11"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="13"]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx="15"]::after{
    right:-20px;width:20px;
}

/* Card inner structure — image as small square on top */
.fm-layout-timeline .fm-card .fm-card-top-row{
    flex-direction:column!important;
    gap:0;
}
.fm-layout-timeline .fm-card .fm-card-img-wrap{
    width:100%!important;
    height:100px!important;
    max-height:100px!important;
    border-radius:14px 14px 0 0!important;
}
.fm-layout-timeline .fm-card .fm-card-body{
    padding:8px 10px 4px;
}
.fm-layout-timeline .fm-card .fm-card-title{
    font-size:13px;
    font-weight:700;
    line-height:1.35;
    margin-bottom:3px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-timeline .fm-card .fm-card-desc{
    font-size:10.5px;
    -webkit-line-clamp:2;
    margin-bottom:3px;
}
.fm-layout-timeline .fm-card .fm-card-price{
    font-size:13px;
    margin-top:2px;
    color:var(--fm-tl-node)!important;
}
.fm-layout-timeline .fm-card .fm-card-bottom-row{
    flex-direction:column!important;
    align-items:stretch!important;
    padding:6px 10px 8px;
    gap:5px;
    border-top:1px solid rgba(0,0,0,.04);
}
.fm-layout-timeline .fm-card .fm-card-sc-area{order:2;justify-content:flex-start}
.fm-layout-timeline .fm-card .fm-card-metas{
    order:1;
    flex-direction:row!important;
    flex-wrap:wrap;gap:4px;
}
.fm-layout-timeline .fm-card .fm-meta{
    font-size:9.5px;padding:2px 7px;
}

/* On very small screens, collapse to single-column timeline */
@media(max-width:480px){
    .fm-layout-timeline .fm-cards::before{
        left:22px;
    }
    .fm-layout-timeline .fm-card{
        width:calc(100% - 40px);
        align-self:flex-end!important;
        margin-inline-start:40px!important;
    }
    .fm-layout-timeline[dir="rtl"] .fm-card{
        align-self:flex-start!important;
        margin-inline-start:0!important;
        margin-inline-end:40px!important;
    }
    .fm-layout-timeline[dir="rtl"] .fm-card::before{
        right:auto!important;left:-30px!important;
    }
    .fm-layout-timeline[dir="rtl"] .fm-card::after{
        right:auto!important;left:-18px!important;width:18px!important;
    }
    .fm-layout-timeline[dir="ltr"] .fm-card::before{
        right:auto!important;left:-30px!important;
    }
    .fm-layout-timeline[dir="ltr"] .fm-card::after{
        right:auto!important;left:-18px!important;width:18px!important;
    }
    .fm-layout-timeline .fm-card .fm-card-img-wrap{
        height:80px!important;max-height:80px!important;
    }
}


/* ============================================================
   LAYOUT 8 — DIAGONAL (fm-layout-diagonal)
   Bold editorial / art-direction. Each card is split diagonally
   via clip-path: left half is the product image (color-tinted),
   right half is dark textual panel with title/price.
   Design language: contrast, kinetic, poster-like, asymmetric.
   ============================================================ */
.fm-layout-diagonal{
    --fm-dg-dark:#1a1625;
    --fm-dg-panel:#2a2438;
    --fm-dg-ink:#fff;
    --fm-dg-muted:#a8a2ba;
    --fm-dg-accent-a:#f093fb;
    --fm-dg-accent-b:#4facfe;
    background:var(--fm-dg-dark)!important;
}
.fm-layout-diagonal .fm-sections{
    padding:14px 12px 0;
}
.fm-layout-diagonal .fm-section{
    margin-bottom:26px;
}

/* Section heading — bold display with angular accent */
.fm-layout-diagonal .fm-section-head{
    padding:0 4px 10px;
    margin-bottom:14px;
    position:relative;
    gap:10px;
    align-items:center;
}
.fm-layout-diagonal .fm-section-title{
    font-size:22px;
    font-weight:900;
    letter-spacing:-.5px;
    text-transform:uppercase;
    color:var(--fm-dg-ink)!important;
    line-height:1;
    padding:0;
    position:relative;
}
.fm-layout-diagonal .fm-section-title::after{
    /* Accent diagonal slash after title */
    content:'';
    display:inline-block;
    width:22px;height:4px;
    background:linear-gradient(90deg, var(--fm-dg-accent-a), var(--fm-dg-accent-b));
    transform:skewX(-20deg);
    margin-inline-start:10px;
    vertical-align:middle;
    border-radius:1px;
}
.fm-layout-diagonal .fm-section-title-icon{
    width:22px;height:22px;
}
.fm-layout-diagonal .fm-section-line{display:none}

/* Cards stack vertically */
.fm-layout-diagonal .fm-cards{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* Card — diagonal split */
.fm-layout-diagonal .fm-card{
    padding:0;
    overflow:hidden;
    border-radius:14px;
    background:var(--fm-dg-panel)!important;
    border:1px solid rgba(255,255,255,.05);
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    position:relative;
    min-height:130px;
    transition:transform .3s ease,box-shadow .3s ease;
}
.fm-layout-diagonal .fm-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(240, 147, 251, .15);
}
.fm-layout-diagonal .fm-card .fm-card-top-row{
    flex-direction:row!important;
    gap:0;
    align-items:stretch;
    height:100%;
}

/* Image takes left half, diagonally cut */
.fm-layout-diagonal .fm-card .fm-card-img-wrap{
    width:55%!important;
    height:130px!important;
    max-height:130px!important;
    border-radius:0!important;
    clip-path:polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
    position:relative;
    flex-shrink:0;
    margin:0;
}
[dir="ltr"] .fm-layout-diagonal .fm-card .fm-card-img-wrap{
    clip-path:polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
}
[dir="rtl"] .fm-layout-diagonal .fm-card .fm-card-img-wrap{
    clip-path:polygon(0 0, 100% 0, 100% 100%, 30px 100%);
}
/* Color tint overlay on image — alternating accents per card */
.fm-layout-diagonal .fm-card .fm-card-img-wrap::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(240, 147, 251, .25), rgba(79, 172, 254, .25));
    mix-blend-mode:overlay;
    pointer-events:none;
}
.fm-layout-diagonal .fm-card:nth-child(even) .fm-card-img-wrap::after{
    background:linear-gradient(135deg, rgba(79, 172, 254, .3), rgba(0, 242, 254, .3));
}
.fm-layout-diagonal .fm-card:nth-child(3n) .fm-card-img-wrap::after{
    background:linear-gradient(135deg, rgba(255, 107, 107, .3), rgba(254, 202, 87, .25));
}
/* Divider accent stripe right at the diagonal edge */
.fm-layout-diagonal .fm-card .fm-card-img-wrap::before{
    content:'';
    position:absolute;
    top:0;bottom:0;
    width:3px;
    background:linear-gradient(180deg, var(--fm-dg-accent-a), var(--fm-dg-accent-b));
    transform:skewX(-13deg);
    z-index:3;
}
[dir="ltr"] .fm-layout-diagonal .fm-card .fm-card-img-wrap::before{right:12px}
[dir="rtl"] .fm-layout-diagonal .fm-card .fm-card-img-wrap::before{left:12px}

/* Body — dark panel on right */
.fm-layout-diagonal .fm-card .fm-card-body{
    flex:1;
    padding:14px 14px 8px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:var(--fm-dg-ink);
    min-width:0;
}
.fm-layout-diagonal .fm-card .fm-card-title{
    font-size:15px;
    font-weight:800;
    color:var(--fm-dg-ink)!important;
    line-height:1.25;
    margin-bottom:4px;
    letter-spacing:-.2px;
    text-transform:uppercase;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-diagonal .fm-card .fm-card-desc{
    font-size:11px;
    color:var(--fm-dg-muted)!important;
    line-height:1.5;
    -webkit-line-clamp:2;
    margin-bottom:5px;
}
.fm-layout-diagonal .fm-card .fm-card-price{
    font-size:15px;
    font-weight:800;
    color:transparent!important;
    background:linear-gradient(90deg, var(--fm-dg-accent-a), var(--fm-dg-accent-b));
    -webkit-background-clip:text;
    background-clip:text;
    margin-top:2px;
    letter-spacing:-.2px;
}
.fm-layout-diagonal .fm-card:nth-child(even) .fm-card-price{
    background:linear-gradient(90deg, #4facfe, #00f2fe);
    -webkit-background-clip:text;
    background-clip:text;
}
.fm-layout-diagonal .fm-card:nth-child(3n) .fm-card-price{
    background:linear-gradient(90deg, #ff6b6b, #feca57);
    -webkit-background-clip:text;
    background-clip:text;
}

/* Bottom row — tucked inside body */
.fm-layout-diagonal .fm-card .fm-card-bottom-row{
    border-top:1px solid rgba(255,255,255,.06)!important;
    padding:6px 0 0!important;
    margin-top:6px!important;
    gap:6px;
}
.fm-layout-diagonal .fm-card .fm-card-sc-area{flex:0 0 auto}
.fm-layout-diagonal .fm-card .fm-card-metas{
    flex:1;
    gap:4px;
    justify-content:flex-end;
}
.fm-layout-diagonal .fm-card .fm-meta{
    background:rgba(255,255,255,.06)!important;
    color:var(--fm-dg-muted)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    font-size:9.5px;
    padding:2px 8px;
    border-radius:4px;
    letter-spacing:.5px;
    text-transform:uppercase;
}
/* Badge — bold diagonal tag floating over image */
.fm-layout-diagonal .fm-badge{
    top:10px;
    inset-inline-start:10px;
    background:linear-gradient(135deg, var(--fm-dg-accent-a), var(--fm-dg-accent-b))!important;
    color:#1a1625!important;
    border-radius:3px;
    padding:3px 10px;
    font-size:9.5px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    transform:skewX(-10deg);
    box-shadow:0 3px 10px rgba(240, 147, 251, .4);
    z-index:5;
}

@media(max-width:380px){
    .fm-layout-diagonal .fm-card{min-height:110px}
    .fm-layout-diagonal .fm-card .fm-card-img-wrap{height:110px!important;max-height:110px!important;width:50%!important}
    .fm-layout-diagonal .fm-card .fm-card-title{font-size:13px}
    .fm-layout-diagonal .fm-section-title{font-size:18px}
}


/* ============================================================
   PREVIEW ADJUSTMENTS for v11.7 layouts
   ============================================================ */
.flavor-preview.fm-layout-catalog .fm-cards{gap:8px 6px}
.flavor-preview.fm-layout-catalog .fm-card .fm-card-img-wrap{width:calc(100% - 10px)!important;margin:5px 5px 0}
.flavor-preview.fm-layout-catalog .fm-card .fm-card-title{font-size:10px}
.flavor-preview.fm-layout-catalog .fm-card .fm-card-price{font-size:9px;letter-spacing:1px}
.flavor-preview.fm-layout-catalog .fm-section-title{font-size:12px;letter-spacing:2px}
.flavor-preview.fm-layout-catalog .fm-card .fm-card-body{padding:6px 6px 4px}

.flavor-preview.fm-layout-neumorphic .fm-cards{gap:10px}
.flavor-preview.fm-layout-neumorphic .fm-card{padding:8px;border-radius:16px}
.flavor-preview.fm-layout-neumorphic .fm-card .fm-card-img-wrap{width:60px!important;height:60px!important;max-height:60px!important}
.flavor-preview.fm-layout-neumorphic .fm-card .fm-card-title{font-size:11px}
.flavor-preview.fm-layout-neumorphic .fm-card .fm-card-price{font-size:10px;padding:2px 8px}
.flavor-preview.fm-layout-neumorphic .fm-section-head{padding:8px 12px;border-radius:12px;margin-bottom:12px}
.flavor-preview.fm-layout-neumorphic .fm-section-title{font-size:12px}

.flavor-preview.fm-layout-timeline .fm-cards{gap:10px}
.flavor-preview.fm-layout-timeline .fm-card{width:calc(50% - 18px)}
.flavor-preview.fm-layout-timeline .fm-card .fm-card-img-wrap{height:60px!important;max-height:60px!important}
.flavor-preview.fm-layout-timeline .fm-card .fm-card-title{font-size:10px}
.flavor-preview.fm-layout-timeline .fm-card .fm-card-price{font-size:10px}
.flavor-preview.fm-layout-timeline .fm-section-title{font-size:11px;padding:5px 12px}
.flavor-preview.fm-layout-timeline .fm-card::before{width:10px;height:10px;top:14px}
.flavor-preview.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="0"]::before,
.flavor-preview.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="2"]::before{left:-22px}
.flavor-preview.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="1"]::before,
.flavor-preview.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="3"]::before{right:-22px}
.flavor-preview.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="0"]::after,
.flavor-preview.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="2"]::after{left:-14px;width:14px;top:18px}
.flavor-preview.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="1"]::after,
.flavor-preview.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx="3"]::after{right:-14px;width:14px;top:18px}

.flavor-preview.fm-layout-diagonal .fm-cards{gap:8px}
.flavor-preview.fm-layout-diagonal .fm-card{min-height:80px}
.flavor-preview.fm-layout-diagonal .fm-card .fm-card-img-wrap{height:80px!important;max-height:80px!important;width:50%!important}
.flavor-preview.fm-layout-diagonal .fm-card .fm-card-title{font-size:11px}
.flavor-preview.fm-layout-diagonal .fm-card .fm-card-price{font-size:11px}
.flavor-preview.fm-layout-diagonal .fm-card .fm-card-body{padding:8px 10px 4px}
.flavor-preview.fm-layout-diagonal .fm-section-title{font-size:15px}


/* ============================================================
   DISABLE sidebar container flex for new layouts
   ============================================================ */
.fm-layout-catalog .fm-sidebar-container,
.fm-layout-neumorphic .fm-sidebar-container,
.fm-layout-timeline .fm-sidebar-container,
.fm-layout-diagonal .fm-sidebar-container{
    display:block;
}

/* ============================================================
   BUSINESS HOURS — CLOSED STATE OVERLAY + POPUP + DISABLED CARD
   ============================================================ */

/* Toolbar closed overlay — blurs the 4 shortcodes */
.fm-bottom-toolbar.fm-toolbar-closed{position:fixed!important;}
.fm-bottom-toolbar.fm-toolbar-closed .fm-toolbar-grid{
    filter:blur(6px) saturate(.7);
    opacity:.45;
    pointer-events:none;
    user-select:none;
    transition:filter .35s,opacity .35s;
}
.fm-closed-overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--fmc-bg, #1a1a1a) 94%, transparent),
        color-mix(in srgb, var(--fmc-bg, #1a1a1a) 88%, transparent));
    color:var(--fmc-text,#fff);
    border-radius:inherit;
    padding:10px 14px;
    z-index:2;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    overflow:hidden;
    cursor:default;
}
.fm-closed-overlay::before{
    content:"";position:absolute;left:-20%;top:-50%;
    width:60%;height:200%;
    background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--fmc-accent,#e74c3c) 18%, transparent),transparent);
    transform:skewX(-20deg);
    animation:fm-closed-shimmer 3.5s ease-in-out infinite;
    pointer-events:none;
}
@keyframes fm-closed-shimmer{
    0%{left:-30%;} 100%{left:130%;}
}
.fm-closed-overlay-inner{
    display:flex;align-items:center;gap:12px;
    text-align:right;direction:rtl;
    position:relative;z-index:3;
    width:100%;max-width:100%;
}
.fm-closed-icon{
    width:40px;height:40px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--fmc-accent,#e74c3c);
    color:#fff;border-radius:50%;
    box-shadow:0 4px 16px color-mix(in srgb, var(--fmc-accent,#e74c3c) 40%, transparent);
    animation:fm-closed-pulse 2s ease-in-out infinite;
}
@keyframes fm-closed-pulse{
    0%,100%{transform:scale(1);box-shadow:0 4px 16px color-mix(in srgb, var(--fmc-accent,#e74c3c) 40%, transparent);}
    50%{transform:scale(1.08);box-shadow:0 4px 22px color-mix(in srgb, var(--fmc-accent,#e74c3c) 55%, transparent);}
}
.fm-closed-text{flex:1;min-width:0;}
.fm-closed-title{
    font-size:14px;font-weight:700;line-height:1.3;
    color:var(--fmc-text,#fff);margin-bottom:3px;
    text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.fm-closed-sub{
    font-size:11px;line-height:1.5;
    color:var(--fmc-muted,#b8b8b8);
}

/* ============================================================
   CLOSED WELCOME POPUP
   ============================================================ */
.fm-hours-popup-overlay{
    position:fixed;inset:0;z-index:99999;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.65);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    padding:16px;
    animation:fm-hp-fade .35s ease;
}
@keyframes fm-hp-fade{from{opacity:0}to{opacity:1}}
.fm-hours-popup-overlay.fm-hp-closing{animation:fm-hp-fade-out .25s ease forwards;}
@keyframes fm-hp-fade-out{to{opacity:0}}
.fm-hours-popup{
    position:relative;
    background:linear-gradient(145deg,
        var(--fmc-bg,#1a1a1a),
        color-mix(in srgb, var(--fmc-bg,#1a1a1a) 88%, #000));
    color:var(--fmc-text,#fff);
    border-radius:24px;
    padding:28px 22px 22px;
    max-width:420px;width:100%;
    max-height:90vh;overflow-y:auto;
    box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb, var(--fmc-accent,#e74c3c) 20%, transparent);
    text-align:center;
    direction:rtl;
    animation:fm-hp-slide .4s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes fm-hp-slide{
    from{transform:translateY(30px) scale(.95);opacity:0}
    to{transform:translateY(0) scale(1);opacity:1}
}
.fm-hours-popup-close{
    position:absolute;top:12px;left:12px;
    width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,.1);color:var(--fmc-text,#fff);
    border:none;cursor:pointer;font-size:20px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:.2s;
}
.fm-hours-popup-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg);}
.fm-hours-popup-icon-wrap{
    position:relative;width:80px;height:80px;margin:0 auto 14px;
    display:flex;align-items:center;justify-content:center;
}
.fm-hours-popup-icon-pulse{
    position:absolute;inset:0;border-radius:50%;
    background:var(--fmc-accent,#e74c3c);
    opacity:.3;animation:fm-hp-pulse 2s ease-out infinite;
}
@keyframes fm-hp-pulse{
    0%{transform:scale(.8);opacity:.5}
    100%{transform:scale(1.5);opacity:0}
}
.fm-hours-popup-icon{
    position:relative;z-index:2;
    width:70px;height:70px;border-radius:50%;
    background:linear-gradient(135deg,var(--fmc-accent,#e74c3c),color-mix(in srgb, var(--fmc-accent,#e74c3c) 75%, #000));
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 28px color-mix(in srgb, var(--fmc-accent,#e74c3c) 40%, transparent);
}
.fm-hours-popup-title{
    font-size:20px;font-weight:800;line-height:1.3;
    margin:0 0 6px;color:var(--fmc-text,#fff);
}
.fm-hours-popup-date{
    font-size:12px;color:var(--fmc-muted,#b8b8b8);
    margin-bottom:14px;font-weight:500;
}
.fm-hours-popup-msg{
    font-size:13px;line-height:1.7;
    color:var(--fmc-muted,#d0d0d0);
    margin:0 0 20px;padding:0 8px;
}
.fm-hours-popup-schedule{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;padding:14px;
    margin-bottom:16px;text-align:right;
}
.fm-hours-popup-schedule-title{
    font-size:13px;font-weight:700;
    color:var(--fmc-accent,#e74c3c);
    margin-bottom:10px;
    display:flex;align-items:center;gap:6px;
}
.fm-hours-popup-schedule-title::before{
    content:"";width:4px;height:14px;
    background:var(--fmc-accent,#e74c3c);
    border-radius:2px;
}
.fm-hours-popup-list{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:2px;
}
.fm-hours-popup-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:7px 10px;border-radius:8px;
    font-size:12px;
    transition:background .2s;
}
.fm-hours-popup-row.fm-is-today{
    background:color-mix(in srgb, var(--fmc-accent,#e74c3c) 18%, transparent);
    border:1px solid color-mix(in srgb, var(--fmc-accent,#e74c3c) 30%, transparent);
}
.fm-hours-popup-day{font-weight:600;color:var(--fmc-text,#fff);display:flex;align-items:center;gap:6px;}
.fm-hours-popup-today-tag{
    background:var(--fmc-accent,#e74c3c);color:#fff;
    padding:1px 7px;border-radius:6px;font-size:9px;font-weight:700;
}
.fm-hours-popup-time{
    font-weight:500;color:var(--fmc-muted,#b8b8b8);
    font-variant-numeric:tabular-nums;direction:ltr;
}
.fm-hours-popup-row.fm-day-off .fm-hours-popup-time{color:#ff6b6b;font-weight:600;}
.fm-hours-popup-footer-text{
    font-size:12px;color:var(--fmc-muted,#b8b8b8);
    margin-top:4px;font-weight:500;
}

/* ============================================================
   DISABLED PAGE-SHORTCODE CARD (replaces [flavor_menu_page] when closed)
   ============================================================ */
.fm-hours-disabled-wrap{
    max-width:900px;margin:40px auto;padding:20px;
    font-family:inherit;
}
.fm-hours-disabled-card{
    position:relative;overflow:hidden;
    background:linear-gradient(145deg,var(--fmc-bg,#1a1a1a),color-mix(in srgb, var(--fmc-bg,#1a1a1a) 85%, #000));
    color:var(--fmc-text,#fff);
    border-radius:28px;padding:40px 28px 32px;
    text-align:center;
    box-shadow:0 16px 60px rgba(0,0,0,.3);
    border:1px solid color-mix(in srgb, var(--fmc-accent,#e74c3c) 18%, transparent);
}
.fm-hours-disabled-card::before{
    content:"";position:absolute;top:-50%;right:-50%;
    width:200%;height:200%;
    background:radial-gradient(circle, color-mix(in srgb, var(--fmc-accent,#e74c3c) 12%, transparent) 0%, transparent 50%);
    animation:fm-hd-rotate 20s linear infinite;
    pointer-events:none;
}
@keyframes fm-hd-rotate{
    from{transform:rotate(0deg);} to{transform:rotate(360deg);}
}
.fm-hours-disabled-card > *{position:relative;z-index:2;}
.fm-hours-disabled-badge{
    display:inline-flex;align-items:center;gap:7px;
    padding:6px 14px;border-radius:999px;
    background:color-mix(in srgb, var(--fmc-accent,#e74c3c) 20%, transparent);
    border:1px solid color-mix(in srgb, var(--fmc-accent,#e74c3c) 40%, transparent);
    font-size:11px;font-weight:700;
    color:var(--fmc-accent,#e74c3c);
    margin-bottom:18px;
}
.fm-hours-disabled-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--fmc-accent,#e74c3c);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--fmc-accent,#e74c3c) 30%, transparent);
    animation:fm-closed-pulse 1.5s infinite;
}
.fm-hours-disabled-icon{
    width:110px;height:110px;margin:0 auto 18px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--fmc-accent,#e74c3c),color-mix(in srgb, var(--fmc-accent,#e74c3c) 60%, #000));
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 40px color-mix(in srgb, var(--fmc-accent,#e74c3c) 35%, transparent);
    animation:fm-hd-float 4s ease-in-out infinite;
}
@keyframes fm-hd-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
}
.fm-hours-disabled-title{
    font-size:24px;font-weight:800;line-height:1.3;
    margin:0 0 8px;color:var(--fmc-text,#fff);
}
.fm-hours-disabled-date{
    font-size:13px;color:var(--fmc-muted,#b8b8b8);
    margin-bottom:16px;font-weight:500;
}
.fm-hours-disabled-msg{
    font-size:14px;line-height:1.8;max-width:540px;margin:0 auto 26px;
    color:var(--fmc-muted,#d0d0d0);
}
.fm-hours-disabled-schedule{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;padding:18px 20px;
    max-width:540px;margin:0 auto 20px;
    text-align:right;
}
.fm-hours-disabled-schedule-title{
    font-size:14px;font-weight:700;
    color:var(--fmc-accent,#e74c3c);
    margin-bottom:12px;
    display:flex;align-items:center;gap:8px;
}
.fm-hours-disabled-schedule-title::before{
    content:"";width:4px;height:16px;
    background:var(--fmc-accent,#e74c3c);
    border-radius:2px;
}
.fm-hours-disabled-list{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:4px;
}
.fm-hours-disabled-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:9px 12px;border-radius:10px;font-size:13px;
}
.fm-hours-disabled-row.fm-is-today{
    background:color-mix(in srgb, var(--fmc-accent,#e74c3c) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--fmc-accent,#e74c3c) 32%, transparent);
}
.fm-hours-disabled-day{font-weight:600;color:var(--fmc-text,#fff);display:flex;align-items:center;gap:6px;}
.fm-hours-disabled-today-tag{
    background:var(--fmc-accent,#e74c3c);color:#fff;
    padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;
}
.fm-hours-disabled-time{
    font-weight:500;color:var(--fmc-muted,#b8b8b8);
    font-variant-numeric:tabular-nums;direction:ltr;
}
.fm-hours-disabled-row.fm-day-off .fm-hours-disabled-time{color:#ff6b6b;font-weight:600;}
.fm-hours-disabled-footer{
    font-size:13px;color:var(--fmc-muted,#b8b8b8);
    margin-top:4px;font-weight:500;
}

/* Responsive */
@media (max-width:600px){
    .fm-hours-popup{padding:24px 18px 18px;border-radius:20px;}
    .fm-hours-popup-title{font-size:18px;}
    .fm-hours-disabled-card{padding:30px 18px 24px;border-radius:22px;}
    .fm-hours-disabled-title{font-size:20px;}
    .fm-hours-disabled-icon{width:90px;height:90px;}
    .fm-closed-title{font-size:12px;}
    .fm-closed-sub{font-size:10px;}
    .fm-closed-icon{width:34px;height:34px;}
    .fm-closed-icon svg{width:18px;height:18px;}
}

/* ============================================================
   v11.12 - SIX BRAND-NEW LAYOUT SYSTEMS
   Each with a radically different design language.
   All reuse the existing .fm-card markup and CSS vars.
   ============================================================ */


/* ============================================================
   LAYOUT 11 — BLUEPRINT (fm-layout-blueprint)
   Technical architectural drawing aesthetic.
   Dark navy paper with a subtle cyan grid, dashed rulers,
   corner brackets on every card, monospace annotations,
   measurement arrows, and a title-block header per section.
   Design language: engineering, schematic, CAD-like.
   ============================================================ */
.fm-layout-blueprint{
    background:
        linear-gradient(rgba(15,54,92,.08) 1px, transparent 1px) 0 0/28px 28px,
        linear-gradient(90deg, rgba(15,54,92,.08) 1px, transparent 1px) 0 0/28px 28px,
        radial-gradient(ellipse at center, #0f3660 0%, #081c36 100%);
}
.fm-layout-blueprint .fm-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    padding:6px 4px;
}
.fm-layout-blueprint .fm-section{margin-bottom:34px;position:relative;padding-top:8px}
.fm-layout-blueprint .fm-section-head{
    background:#0a2a4a;
    border:1px dashed #7ec8ff;
    border-radius:0;
    padding:12px 16px 10px 90px;
    margin-bottom:18px;
    position:relative;
    font-family:'Courier New',monospace;
}
.fm-layout-blueprint .fm-section-head::before{
    content:'DWG-' attr(data-slug);
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    font-size:10px;letter-spacing:1px;color:#7ec8ff;
    background:#081c36;padding:4px 8px;border:1px solid #7ec8ff;
    font-weight:700;text-transform:uppercase;
}
.fm-layout-blueprint .fm-section-head::after{
    content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);
    width:18px;height:18px;
    background:
        linear-gradient(45deg,transparent 45%,#7ec8ff 45%,#7ec8ff 55%,transparent 55%),
        linear-gradient(-45deg,transparent 45%,#7ec8ff 45%,#7ec8ff 55%,transparent 55%);
}
.fm-layout-blueprint .fm-section-title{
    font-family:'Courier New',monospace;
    font-size:15px;font-weight:700;letter-spacing:2px;
    color:#fff;text-transform:uppercase;
}
.fm-layout-blueprint .fm-section-line{display:none}

.fm-layout-blueprint .fm-card{
    background:#0a2a4a;
    border:1px solid #3d7ab3;
    border-radius:0;
    padding:14px 12px 12px;
    position:relative;
    color:#e8f3ff;
    box-shadow:none;
    transition:border-color .2s ease, transform .25s ease;
    display:flex;flex-direction:column;
}
.fm-layout-blueprint .fm-card:hover{
    border-color:#7ec8ff;
    transform:translateY(-2px);
}
/* L-shaped corner brackets — engineering feel */
.fm-layout-blueprint .fm-card::before,
.fm-layout-blueprint .fm-card::after{
    content:'';position:absolute;width:12px;height:12px;
    border:2px solid #ffeb3b;pointer-events:none;
}
.fm-layout-blueprint .fm-card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.fm-layout-blueprint .fm-card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

.fm-layout-blueprint .fm-card .fm-card-top-row{flex-direction:column;gap:0}
.fm-layout-blueprint .fm-card .fm-card-img-wrap{
    width:100%!important;height:140px!important;max-height:140px!important;
    border-radius:0!important;border:1px dashed #7ec8ff;padding:3px;
    background:#081c36;filter:grayscale(.15) brightness(.92);
    margin-bottom:10px;
}
.fm-layout-blueprint .fm-card .fm-card-img-wrap img{
    filter:sepia(.1) hue-rotate(180deg) saturate(.8);
}
.fm-layout-blueprint .fm-card .fm-card-body{
    padding:0;font-family:'Courier New',monospace;
}
.fm-layout-blueprint .fm-card .fm-card-title{
    font-family:'Courier New',monospace;
    font-size:14px;font-weight:700;color:#fff;
    text-transform:uppercase;letter-spacing:1px;
    margin:0 0 4px;padding-bottom:4px;
    border-bottom:1px dashed #3d7ab3;
}
.fm-layout-blueprint .fm-card .fm-card-desc{
    font-family:'Courier New',monospace;
    font-size:11px;color:#9ec0e0;opacity:.85;
    line-height:1.5;margin-bottom:6px;
}
.fm-layout-blueprint .fm-card .fm-card-price{
    font-family:'Courier New',monospace;
    font-size:15px;font-weight:700;color:#ffeb3b;
    background:transparent;border:1px solid #ffeb3b;
    padding:3px 8px;display:inline-block;
}
.fm-layout-blueprint .fm-card .fm-card-bottom-row{
    margin-top:8px;padding-top:8px;
    border-top:1px dashed #3d7ab3;
}
.fm-layout-blueprint .fm-card .fm-card-metas{gap:6px}
.fm-layout-blueprint .fm-card .fm-meta{
    background:transparent;color:#7ec8ff;
    border:1px dashed #3d7ab3;border-radius:0;
    font-family:'Courier New',monospace;font-size:10px;
    text-transform:uppercase;letter-spacing:.5px;
}
/* Measurement-arrow strip at bottom of each card */
.fm-layout-blueprint .fm-card > .fm-card-bottom-row::after{
    content:'';position:absolute;left:6px;right:6px;bottom:-14px;height:8px;
    background:
        linear-gradient(90deg, #ffeb3b 0, #ffeb3b 1px, transparent 1px, transparent calc(100% - 1px), #ffeb3b calc(100% - 1px), #ffeb3b 100%) center/100% 1px no-repeat,
        linear-gradient(90deg, transparent 0, transparent 6px, #ffeb3b 6px, #ffeb3b calc(100% - 6px), transparent calc(100% - 6px)) center/100% 1px no-repeat;
    pointer-events:none;opacity:.6;
}
/* Force light text on dark theme everywhere */
.fm-layout-blueprint .fm-section-title,
.fm-layout-blueprint .fm-card-title{color:#fff!important}
.fm-layout-blueprint .fm-catbar{background:#081c36!important;border-bottom:1px dashed #7ec8ff!important}
.fm-layout-blueprint .fm-cat-item{
    color:#9ec0e0;font-family:'Courier New',monospace;
    text-transform:uppercase;letter-spacing:1px;font-size:11px;
    border:1px dashed transparent;border-radius:0;
}
.fm-layout-blueprint .fm-cat-item.active{
    color:#ffeb3b;background:transparent;border-color:#ffeb3b;
}
@media(max-width:500px){
    .fm-layout-blueprint .fm-cards{grid-template-columns:repeat(2,1fr);gap:18px}
    .fm-layout-blueprint .fm-card .fm-card-img-wrap{height:160px!important;max-height:160px!important}
    .fm-layout-blueprint .fm-section-head{padding-left:14px;padding-right:40px}
    .fm-layout-blueprint .fm-section-head::before{position:static;transform:none;display:inline-block;margin-bottom:6px}
    .fm-layout-blueprint .fm-section-head{padding-top:36px}
    .fm-layout-blueprint .fm-section-head::before{position:absolute;top:10px;left:12px}
}


/* ============================================================
   LAYOUT 12 — POLAROID (fm-layout-polaroid)
   A scrapbook wall of Polaroid photos, each tilted at a
   slight random angle, with thick white paper frames, soft
   drop-shadows, and a handwritten-style caption at the bottom.
   Tape strips and pinhole accents finish the look.
   Design language: warm, nostalgic, tactile, imperfect.
   ============================================================ */
.fm-layout-polaroid{
    background:
        radial-gradient(circle at 20% 10%, rgba(212,168,120,.12), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(196,136,88,.1), transparent 40%),
        repeating-linear-gradient(0deg, transparent 0, transparent 24px, rgba(74,62,42,.03) 24px, rgba(74,62,42,.03) 25px),
        #e8dfd2;
}
.fm-layout-polaroid .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px 18px;
    padding:18px 8px 8px;
}
.fm-layout-polaroid .fm-section{margin-bottom:32px;position:relative}
.fm-layout-polaroid .fm-section-head{
    background:transparent;border:none;padding:8px 0 14px;
    text-align:center;position:relative;
}
.fm-layout-polaroid .fm-section-head::before{
    content:'';position:absolute;left:50%;top:0;
    width:48px;height:16px;background:rgba(245,197,66,.7);
    transform:translateX(-50%) rotate(-3deg);
    border-radius:1px;
    box-shadow:0 2px 3px rgba(0,0,0,.1);
}
.fm-layout-polaroid .fm-section-title{
    font-family:'Caveat','Brush Script MT','Segoe Script',cursive;
    font-size:30px;font-weight:400;color:#4a3e2a;
    margin:18px 0 0;letter-spacing:1px;
    display:inline-block;
    padding:0 18px;
    position:relative;
}
.fm-layout-polaroid .fm-section-title::after{
    content:'';position:absolute;left:10%;right:10%;bottom:-6px;
    height:2px;background:#8a7a5a;
    border-radius:2px;opacity:.5;
    transform:rotate(-.5deg);
}
.fm-layout-polaroid .fm-section-line{display:none}

.fm-layout-polaroid .fm-card{
    background:#fff;
    border:none;border-radius:3px;
    padding:10px 10px 36px;
    box-shadow:0 3px 8px rgba(74,58,32,.18), 0 8px 22px rgba(74,58,32,.12);
    transition:transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s ease;
    display:flex;flex-direction:column;
    position:relative;
}
/* Each card gets a slight random tilt based on nth-child */
.fm-layout-polaroid .fm-card:nth-child(4n+1){transform:rotate(-2.2deg)}
.fm-layout-polaroid .fm-card:nth-child(4n+2){transform:rotate(1.6deg)}
.fm-layout-polaroid .fm-card:nth-child(4n+3){transform:rotate(-1deg)}
.fm-layout-polaroid .fm-card:nth-child(4n+4){transform:rotate(2.8deg)}
.fm-layout-polaroid .fm-card:hover{
    transform:rotate(0) translateY(-5px) scale(1.03);
    box-shadow:0 10px 20px rgba(74,58,32,.2), 0 20px 40px rgba(74,58,32,.18);
    z-index:5;
}
/* Tape strip on top of each polaroid */
.fm-layout-polaroid .fm-card::before{
    content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-3deg);
    width:52px;height:18px;background:rgba(245,197,66,.6);
    box-shadow:0 1px 2px rgba(0,0,0,.08);
    pointer-events:none;
}
/* Pinhole accent in corner */
.fm-layout-polaroid .fm-card::after{
    content:'';position:absolute;top:6px;right:6px;
    width:6px;height:6px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #b8a888 0%, #6a5940 60%, #3a2e1f 100%);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
    pointer-events:none;
}

.fm-layout-polaroid .fm-card .fm-card-top-row{flex-direction:column;gap:0}
.fm-layout-polaroid .fm-card .fm-card-img-wrap{
    width:100%!important;height:155px!important;max-height:155px!important;
    border-radius:0!important;
    margin-bottom:8px;background:#2a1810;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.fm-layout-polaroid .fm-card .fm-card-img-wrap img{
    filter:sepia(.15) saturate(1.1) contrast(1.05);
}
.fm-layout-polaroid .fm-card .fm-card-body{
    padding:6px 2px 0;text-align:center;
}
.fm-layout-polaroid .fm-card .fm-card-title{
    font-family:'Caveat','Brush Script MT','Segoe Script',cursive;
    font-size:20px;font-weight:500;color:#2a1810;
    margin:0 0 2px;line-height:1.15;
    letter-spacing:.3px;
}
.fm-layout-polaroid .fm-card .fm-card-desc{
    font-family:'Caveat','Brush Script MT','Segoe Script',cursive;
    font-size:14px;color:#6a5940;line-height:1.35;
    margin-bottom:6px;font-style:italic;
}
.fm-layout-polaroid .fm-card .fm-card-price{
    font-family:'Caveat','Brush Script MT','Segoe Script',cursive;
    font-size:22px;font-weight:600;color:#c8342f;
    background:transparent;padding:0;
    display:inline-block;
    position:absolute;bottom:12px;right:14px;
    transform:rotate(-4deg);
}
.fm-layout-polaroid .fm-card .fm-card-bottom-row{
    margin-top:4px;padding:0;border:none;
    position:absolute;bottom:10px;left:10px;right:auto;
    justify-content:flex-start;
}
.fm-layout-polaroid .fm-card .fm-card-metas{gap:4px}
.fm-layout-polaroid .fm-card .fm-meta{
    background:transparent;color:#8a7a5a;border:none;
    font-family:'Caveat','Brush Script MT','Segoe Script',cursive;
    font-size:12px;padding:0 4px;
}
.fm-layout-polaroid .fm-catbar{
    background:transparent!important;border:none!important;
    border-bottom:2px dashed rgba(74,58,32,.3)!important;
}
.fm-layout-polaroid .fm-cat-item{
    font-family:'Caveat','Brush Script MT','Segoe Script',cursive;
    font-size:17px;font-weight:500;color:#6a5940;
    background:transparent;border:none;border-radius:0;
}
.fm-layout-polaroid .fm-cat-item.active{
    color:#c8342f;background:rgba(245,197,66,.3);
    transform:rotate(-1deg);
}
@media(max-width:420px){
    .fm-layout-polaroid .fm-cards{grid-template-columns:repeat(2,1fr);gap:28px 0}
    .fm-layout-polaroid .fm-card:nth-child(n){transform:rotate(-1.2deg)}
    .fm-layout-polaroid .fm-card:nth-child(even){transform:rotate(1.4deg)}
    .fm-layout-polaroid .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
}


/* ============================================================
   LAYOUT 13 — TERMINAL (fm-layout-terminal) — v11.18.3 REDESIGN
   Cyberpunk / hacker hybrid: CRT phosphor base + neon cyan accents,
   ASCII chrome window frame, glitch-on-hover product images,
   matrix grid background, dot-matrix product images and animated
   prompt cursor. Heavily themed cat-bar and toolbar.
   Design language: high-tech, sci-fi terminal, professional dev console.
   ============================================================ */
.fm-layout-terminal{
    background:
        /* faint vertical scanlines */
        repeating-linear-gradient(0deg, rgba(0,255,170,.04) 0, rgba(0,255,170,.04) 1px, transparent 1px, transparent 3px),
        /* horizontal noise grid */
        repeating-linear-gradient(90deg, rgba(0,255,170,.025) 0, rgba(0,255,170,.025) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(0deg, rgba(0,255,170,.025) 0, rgba(0,255,170,.025) 1px, transparent 1px, transparent 40px),
        /* radial CRT glow */
        radial-gradient(ellipse at 50% 30%, #0a1f14 0%, #050d08 60%, #000 100%);
    padding:0 6px 10px;
    border-radius:14px;
    box-shadow:
        inset 0 0 80px rgba(0,0,0,.85),
        inset 0 0 20px rgba(0,255,170,.08),
        0 0 0 1px rgba(0,255,170,.18);
    font-family:'Courier New','Consolas','SF Mono','Menlo',monospace;
    position:relative;
    overflow:hidden;
}
/* ASCII chrome window frame — top bar with traffic lights */
.fm-layout-terminal::before{
    content:'● ● ●';
    display:block;
    background:linear-gradient(180deg, #1a2a1f, #0f1a14);
    color:#66ffaa;
    font-size:11px;
    letter-spacing:.6px;
    padding:8px 14px;
    border-bottom:1px solid rgba(0,255,170,.25);
    margin:0 -6px 12px;
    text-shadow:0 0 4px rgba(0,255,170,.35);
    position:sticky;top:0;z-index:5;
}
/* Subtle pulsing radial vignette overlay — v11.18.4: slowed to 12s */
.fm-layout-terminal::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.45) 100%);
    z-index:1;
    animation:fm-term-pulse 12s ease-in-out infinite;
}
@keyframes fm-term-pulse{50%{opacity:.85}}

.fm-layout-terminal .fm-cards{
    display:flex;flex-direction:column;gap:6px;
    padding:0 4px;position:relative;z-index:2;
}
.fm-layout-terminal .fm-section{margin-bottom:22px;position:relative;z-index:2;}

/* Section header — clean accent bar */
.fm-layout-terminal .fm-section-head{
    background:linear-gradient(90deg, rgba(0,255,170,.08), transparent);
    border:none;border-left:2px solid #00ffaa;
    padding:8px 12px 6px;margin-bottom:8px;
    font-family:inherit;
    box-shadow:0 0 12px rgba(0,255,170,.06);
}
/* v11.18.4 — removed boot-style prompt above section title per user request */
.fm-layout-terminal .fm-section-title{
    font-family:inherit;
    font-size:16px;font-weight:700;color:#00ffaa;
    text-shadow:0 0 8px rgba(0,255,170,.7), 0 0 16px rgba(0,255,170,.3);
    letter-spacing:1px;margin:0;
    text-transform:lowercase;
}
.fm-layout-terminal .fm-section-title::before{content:'▓ '}
.fm-layout-terminal .fm-section-title::after{
    content:'';display:inline-block;margin-left:8px;
    width:140px;max-width:50%;height:6px;
    background:repeating-linear-gradient(90deg,#00ffaa 0,#00ffaa 4px,transparent 4px,transparent 8px);
    vertical-align:middle;opacity:.5;
    box-shadow:0 0 6px rgba(0,255,170,.4);
}
.fm-layout-terminal .fm-section-line{display:none}

/* === CARD === */
.fm-layout-terminal .fm-card{
    background:linear-gradient(180deg, rgba(0,255,170,.025), rgba(0,255,170,.01));
    border:1px solid rgba(0,255,170,.18);
    border-radius:6px;
    padding:12px 14px 12px 38px;
    box-shadow:
        inset 0 0 24px rgba(0,255,170,.04),
        0 0 0 1px rgba(0,255,170,.05);
    transition:all .25s cubic-bezier(.4,0,.2,1);
    display:grid;
    grid-template-columns:88px 1fr auto;
    grid-template-rows:auto auto auto;
    grid-template-areas:
        'img title price'
        'img desc desc'
        'img meta meta';
    gap:6px 14px;
    position:relative;
    color:#aaffcc;
    overflow:hidden;
}
.fm-layout-terminal .fm-card::before{
    content:'$';position:absolute;left:14px;top:14px;
    color:#00ffaa;font-family:inherit;
    font-size:14px;font-weight:700;
    text-shadow:0 0 6px rgba(0,255,170,.7);
    z-index:3;
}
/* Animated scanning bar that crosses the card */
.fm-layout-terminal .fm-card::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg, transparent 0%, rgba(0,255,170,.08) 50%, transparent 100%);
    transform:translateX(-100%);
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.fm-layout-terminal .fm-card:hover{
    border-color:rgba(0,255,170,.6);
    background:linear-gradient(180deg, rgba(0,255,170,.06), rgba(0,255,170,.02));
    box-shadow:
        inset 0 0 30px rgba(0,255,170,.1),
        0 0 24px rgba(0,255,170,.18);
    transform:translateY(-1px);
}
.fm-layout-terminal .fm-card:hover::after{transform:translateX(100%);}
.fm-layout-terminal .fm-card:hover::before{
    animation:fm-term-blink 1s steps(2,end) infinite;
}
@keyframes fm-term-blink{50%{opacity:.2}}

.fm-layout-terminal .fm-card .fm-card-top-row{display:contents}

/* === PRODUCT IMAGE — dot-matrix / pixelated style with green tint === */
.fm-layout-terminal .fm-card .fm-card-img-wrap{
    grid-area:img !important;
    display:block !important;
    width:88px !important;height:88px !important;
    max-height:88px !important;min-height:88px !important;
    border-radius:4px !important;overflow:hidden;
    border:1px solid rgba(0,255,170,.4) !important;
    background:#0a1f14;
    position:relative;
    box-shadow:
        inset 0 0 12px rgba(0,255,170,.15),
        0 0 8px rgba(0,255,170,.12);
}
.fm-layout-terminal .fm-card .fm-card-img-wrap::before{
    content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0, rgba(0,0,0,.35) 1px, transparent 1px, transparent 3px);
    mix-blend-mode:multiply;
}
.fm-layout-terminal .fm-card .fm-card-img-wrap::after{
    content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
    background:repeating-linear-gradient(90deg, rgba(0,255,170,.08) 0, rgba(0,255,170,.08) 1px, transparent 1px, transparent 4px);
    mix-blend-mode:screen;
}
.fm-layout-terminal .fm-card .fm-card-img{
    width:100% !important;height:100% !important;object-fit:cover;
    filter:contrast(1.15) saturate(.55) brightness(.95) hue-rotate(60deg) sepia(.3);
    transition:filter .35s ease, transform .35s ease;
}
.fm-layout-terminal .fm-card:hover .fm-card-img{
    filter:contrast(1.4) saturate(1) brightness(1.1) hue-rotate(80deg) sepia(.15);
    transform:scale(1.06);
    animation:fm-term-glitch .4s steps(3) 1;
}
@keyframes fm-term-glitch{
    0%{transform:scale(1.06) translate(0,0);}
    25%{transform:scale(1.06) translate(2px,-1px);filter:contrast(1.6) saturate(1.2) hue-rotate(95deg) sepia(.2);}
    50%{transform:scale(1.06) translate(-2px,1px);filter:contrast(1.3) saturate(.9) hue-rotate(70deg) sepia(.25);}
    100%{transform:scale(1.06) translate(0,0);}
}

.fm-layout-terminal .fm-card .fm-card-body{
    grid-area:title;padding:0;display:contents;
}
.fm-layout-terminal .fm-card .fm-card-title{
    grid-area:title;align-self:start;
    font-family:inherit;
    font-size:14px;font-weight:700;color:#00ffaa;
    text-shadow:0 0 5px rgba(0,255,170,.55);
    text-transform:lowercase;letter-spacing:.5px;
    margin:0;line-height:1.3;
}
.fm-layout-terminal .fm-card .fm-card-title::before{content:'./'}
.fm-layout-terminal .fm-card .fm-card-title::after{content:'.bin';color:#66ffaa;opacity:.55;font-weight:400;}
.fm-layout-terminal .fm-card .fm-card-desc{
    grid-area:desc;
    font-family:inherit;
    font-size:11.5px;color:#88ddaa;opacity:.85;
    line-height:1.55;margin:0;
}
.fm-layout-terminal .fm-card .fm-card-desc::before{content:'# ';color:#66ffaa;opacity:.7;}
.fm-layout-terminal .fm-card .fm-card-price{
    grid-area:price;align-self:start;justify-self:end;
    font-family:inherit;
    font-size:14px;font-weight:700;color:#ffee44;
    text-shadow:0 0 6px rgba(255,238,68,.5);
    background:rgba(255,238,68,.08);padding:3px 8px;
    border:1px solid rgba(255,238,68,.3);border-radius:3px;
}
.fm-layout-terminal .fm-card .fm-card-bottom-row{
    grid-area:meta;margin:4px 0 0;padding:0;border:none;
    justify-content:flex-start;
}
.fm-layout-terminal .fm-card .fm-card-metas{gap:6px;flex-wrap:wrap;}
.fm-layout-terminal .fm-card .fm-meta{
    background:rgba(0,255,170,.06);color:#88ddaa;
    border:1px solid rgba(0,255,170,.25);border-radius:3px;
    font-family:inherit;font-size:10.5px;font-weight:600;
    padding:2px 7px;opacity:.9;
    letter-spacing:.5px;
}
.fm-layout-terminal .fm-card .fm-meta::before{content:'• ';color:#00ffaa;}

/* === CATEGORY BAR — neon tab strip === */
.fm-layout-terminal .fm-catbar{
    background:linear-gradient(180deg, rgba(0,255,170,.06), rgba(0,255,170,.02))!important;
    border:1px solid rgba(0,255,170,.3)!important;
    border-radius:6px!important;
    margin:4px 4px 14px!important;
    padding:8px 6px!important;
    box-shadow:inset 0 0 16px rgba(0,255,170,.06)!important;
}
/* v11.18.4 — removed catbar header label per user request */
.fm-layout-terminal .fm-cat-item{
    font-family:inherit;
    font-size:11px;color:#88ddaa;
    background:transparent;
    border:1px solid rgba(0,255,170,.2);
    border-radius:3px;
    text-transform:lowercase;
    padding:5px 8px;
    transition:all .2s ease;
}
.fm-layout-terminal .fm-cat-item:hover{
    border-color:rgba(0,255,170,.5);
    color:#00ffaa;
    background:rgba(0,255,170,.06);
    text-shadow:0 0 4px rgba(0,255,170,.5);
}
.fm-layout-terminal .fm-cat-item.active{
    color:#001a10;background:#00ffaa;
    border-color:#00ffaa;
    text-shadow:none;
    box-shadow:0 0 10px rgba(0,255,170,.6);
}
.fm-layout-terminal .fm-cat-item.active::before{content:'> ';font-weight:900;}
.fm-layout-terminal .fm-cat-item.active::after{content:' <';font-weight:900;}
.fm-layout-terminal .fm-cat-icon{filter:hue-rotate(60deg) saturate(.7) contrast(1.1);}
.fm-layout-terminal .fm-cat-icon-svg{color:#66ffaa;opacity:.7;}
.fm-layout-terminal .fm-cat-item.active .fm-cat-icon{filter:none;}
.fm-layout-terminal .fm-cat-item.active .fm-cat-icon-svg{color:#001a10;opacity:1;}

/* === TOOLBAR (4 shortcodes) — terminal status bar === */
.fm-layout-terminal .fm-bottom-toolbar{
    background:linear-gradient(180deg, #0f1a14, #050d08)!important;
    border-top:1px solid rgba(0,255,170,.4)!important;
    box-shadow:0 -4px 24px rgba(0,255,170,.12), inset 0 1px 0 rgba(0,255,170,.2)!important;
    padding:10px 12px 12px!important;
    backdrop-filter:none!important;
}
/* v11.18.4 — removed toolbar header label per user request */
.fm-layout-terminal .fm-toolbar-item{
    background:rgba(0,255,170,.04)!important;
    border:1px solid rgba(0,255,170,.3)!important;
    border-radius:3px!important;
    transition:all .2s ease;
    overflow:hidden;
    position:relative;
}
.fm-layout-terminal .fm-toolbar-item::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg, transparent, rgba(0,255,170,.15), transparent);
    transform:translateX(-100%);transition:transform .5s ease;
    pointer-events:none;
}
.fm-layout-terminal .fm-toolbar-item:hover{
    border-color:#00ffaa!important;
    background:rgba(0,255,170,.1)!important;
    box-shadow:0 0 12px rgba(0,255,170,.3), inset 0 0 8px rgba(0,255,170,.1);
}
.fm-layout-terminal .fm-toolbar-item:hover::before{transform:translateX(100%);}

/* Force shortcode buttons to inherit the terminal vibe */
.fm-layout-terminal .fm-toolbar-item button,
.fm-layout-terminal .fm-toolbar-item a,
.fm-layout-terminal .fm-toolbar-item .wcs-call-button,
.fm-layout-terminal .fm-toolbar-item [class*="-btn"]{
    font-family:'Courier New','Consolas',monospace!important;
    text-transform:uppercase!important;
    letter-spacing:.8px!important;
    color:#00ffaa!important;
    text-shadow:0 0 4px rgba(0,255,170,.5)!important;
    background:transparent!important;
    border:none!important;
}
.fm-layout-terminal .fm-toolbar-item svg{
    filter:drop-shadow(0 0 3px rgba(0,255,170,.5));
}

/* Blinking cursor at end of last card — keep but enhanced */
.fm-layout-terminal .fm-section:last-child .fm-card:last-child::after{
    content:'';
}
.fm-layout-terminal .fm-section:last-child .fm-card:last-child .fm-card-body::after{
    content:'_';display:inline-block;margin-left:6px;
    color:#00ffaa;font-size:14px;font-weight:700;
    animation:fm-term-blink 1s steps(2,end) infinite;
    text-shadow:0 0 8px rgba(0,255,170,.8);
}

/* === SIDEBAR mode adjustments === */
.fm-layout-terminal.fm-layout-sidebar .fm-catbar,
.fm-layout-sidebar.fm-layout-terminal .fm-catbar{
    background:linear-gradient(180deg, rgba(0,255,170,.06), rgba(0,255,170,.02))!important;
    border-left:1px solid rgba(0,255,170,.4)!important;
    border-right:none!important;
}

/* === Mobile responsiveness — keep card grid coherent === */
@media (max-width:480px){
    .fm-layout-terminal .fm-card{
        padding:10px 10px 10px 30px;
        grid-template-columns:72px 1fr;
        grid-template-rows:auto auto auto auto;
        grid-template-areas:
            'img title'
            'img price'
            'desc desc'
            'meta meta';
        gap:4px 10px;
    }
    .fm-layout-terminal .fm-card .fm-card-img-wrap{
        width:72px!important;height:72px!important;
        max-height:72px!important;min-height:72px!important;
    }
    .fm-layout-terminal .fm-card .fm-card-price{justify-self:start;font-size:13px;}
    .fm-layout-terminal .fm-card .fm-card-title{font-size:13px;}
    .fm-layout-terminal::before{font-size:10px;padding:6px 10px;}
}


/* ============================================================
   LAYOUT 14 — TICKET (fm-layout-ticket)
   Paper cinema-ticket / receipt aesthetic. Each card is a
   physical ticket with perforated dashed edges, a tear-off
   stub on the side with serial number, barcode lines, and
   "ADMIT ONE" style header. Warm cream paper background.
   Design language: tangible, physical, vintage paper goods.
   ============================================================ */
.fm-layout-ticket{
    background:
        radial-gradient(circle at 15% 20%, rgba(200,52,47,.05), transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(184,136,48,.05), transparent 40%),
        repeating-linear-gradient(45deg, transparent 0, transparent 40px, rgba(200,180,140,.08) 40px, rgba(200,180,140,.08) 41px),
        #fffcf3;
}
.fm-layout-ticket .fm-cards{
    display:flex;flex-direction:column;gap:14px;
    padding:4px 2px;
}
.fm-layout-ticket .fm-section{margin-bottom:28px;position:relative}
.fm-layout-ticket .fm-section-head{
    background:#c8342f;
    border-radius:0;
    padding:12px 16px;
    margin-bottom:14px;
    position:relative;
    text-align:center;
    color:#fffcf3;
    box-shadow:0 3px 0 #8a1f1a, 0 4px 8px rgba(0,0,0,.15);
}
.fm-layout-ticket .fm-section-head::before,
.fm-layout-ticket .fm-section-head::after{
    content:'';position:absolute;top:50%;transform:translateY(-50%);
    width:14px;height:14px;border-radius:50%;
    background:#fffcf3;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
.fm-layout-ticket .fm-section-head::before{left:-7px}
.fm-layout-ticket .fm-section-head::after{right:-7px}
.fm-layout-ticket .fm-section-title{
    font-family:'Georgia','Times New Roman',serif;
    font-size:16px;font-weight:700;color:#fffcf3;
    letter-spacing:4px;text-transform:uppercase;
    margin:0;
    text-shadow:2px 2px 0 rgba(0,0,0,.15);
}
.fm-layout-ticket .fm-section-title::before{content:'★ '}
.fm-layout-ticket .fm-section-title::after{content:' ★'}
.fm-layout-ticket .fm-section-line{display:none}

.fm-layout-ticket .fm-card{
    background:#fffcf3;
    border:2px dashed #c8342f;
    border-radius:2px;
    padding:0;
    box-shadow:0 2px 0 rgba(200,52,47,.25), 0 6px 16px rgba(42,24,16,.1);
    transition:transform .25s ease, box-shadow .25s ease;
    display:grid;
    grid-template-columns:1fr 36px 100px;
    align-items:stretch;
    position:relative;
    overflow:hidden;
    min-height:112px;
}
.fm-layout-ticket .fm-card:hover{
    transform:translateY(-3px) rotate(-.3deg);
    box-shadow:0 4px 0 rgba(200,52,47,.35), 0 12px 24px rgba(42,24,16,.15);
}
/* Notched circular cutouts on the perforation line */
.fm-layout-ticket .fm-card::before{
    content:'';position:absolute;left:calc(100% - 136px);top:-9px;
    width:16px;height:16px;border-radius:50%;
    background:#e8dfd2;
    border:2px dashed #c8342f;
}
.fm-layout-ticket .fm-card::after{
    content:'';position:absolute;left:calc(100% - 136px);bottom:-9px;
    width:16px;height:16px;border-radius:50%;
    background:#e8dfd2;
    border:2px dashed #c8342f;
}

.fm-layout-ticket .fm-card .fm-card-top-row{
    display:contents;
}
.fm-layout-ticket .fm-card .fm-card-img-wrap{
    grid-column:1/2;grid-row:1;
    width:112px!important;height:100%!important;max-height:none!important;
    border-radius:0!important;margin:10px;
    float:left;
}
.fm-layout-ticket .fm-card .fm-card-body{
    grid-column:1/2;grid-row:1;
    padding:14px 16px 12px 138px;
    display:flex;flex-direction:column;justify-content:center;
    min-height:112px;
}
.fm-layout-ticket .fm-card .fm-card-title{
    font-family:'Georgia','Times New Roman',serif;
    font-size:18px;font-weight:700;color:#2a1810;
    margin:0 0 4px;line-height:1.2;letter-spacing:.3px;
}
.fm-layout-ticket .fm-card .fm-card-desc{
    font-family:'Georgia','Times New Roman',serif;
    font-size:12px;color:#6a5940;line-height:1.45;
    margin-bottom:6px;font-style:italic;
}
.fm-layout-ticket .fm-card .fm-card-price{
    font-family:'Courier New',monospace;
    font-size:16px;font-weight:700;color:#c8342f;
    background:transparent;padding:2px 0;display:inline-block;
    letter-spacing:.5px;
}
.fm-layout-ticket .fm-card .fm-card-price::before{content:'$ '}
.fm-layout-ticket .fm-card .fm-card-bottom-row{
    grid-column:1/2;grid-row:1;
    align-self:end;justify-self:start;
    margin:0 0 10px 138px;padding:0;border:none;
    max-width:calc(100% - 148px);
}
.fm-layout-ticket .fm-card .fm-card-metas{gap:6px}
.fm-layout-ticket .fm-card .fm-meta{
    background:rgba(200,52,47,.08);color:#8a1f1a;
    border:1px solid rgba(200,52,47,.25);border-radius:2px;
    font-family:'Courier New',monospace;font-size:10px;
    text-transform:uppercase;letter-spacing:.5px;
}

/* Vertical perforation column between body and stub */
.fm-layout-ticket .fm-card > *:nth-child(2){display:none}
.fm-layout-ticket .fm-card::before,
.fm-layout-ticket .fm-card::after{z-index:2}

/* The stub: last pseudo element via extra decorator using card-idx */
.fm-layout-ticket .fm-card .fm-card-body::after{
    content:'ADMIT' ' \A ONE' '\A \A No.' '\A 00' attr(data-card-idx);
    position:absolute;right:0;top:0;bottom:0;width:120px;
    background:
        linear-gradient(90deg, transparent 0, transparent 3px, rgba(200,52,47,.6) 3px, rgba(200,52,47,.6) 4px, transparent 4px) left/8px 4px repeat-y,
        #fff6df;
    border-left:2px dashed #c8342f;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    white-space:pre;
    font-family:'Courier New',monospace;font-size:10px;
    color:#8a1f1a;text-align:center;
    letter-spacing:1px;font-weight:700;line-height:1.4;
    padding:10px 8px;
}
/* Barcode strip at bottom of stub */
.fm-layout-ticket .fm-card{background-image:none}
.fm-layout-ticket .fm-card > .fm-card-body{position:relative}

.fm-layout-ticket .fm-catbar{
    background:#fffcf3!important;
    border:2px dashed #c8342f!important;
    border-radius:2px!important;
    padding:6px 8px!important;
}
.fm-layout-ticket .fm-cat-item{
    font-family:'Georgia','Times New Roman',serif;
    font-size:13px;font-weight:700;color:#8a1f1a;
    background:transparent;border:none;border-radius:0;
    text-transform:uppercase;letter-spacing:1px;
    padding:4px 10px;
}
.fm-layout-ticket .fm-cat-item.active{
    color:#fffcf3;background:#c8342f;
    box-shadow:0 2px 0 #8a1f1a;
}
@media(max-width:480px){
    .fm-layout-ticket .fm-card{min-height:auto}
    .fm-layout-ticket .fm-card .fm-card-img-wrap{width:88px!important;margin:8px}
    .fm-layout-ticket .fm-card .fm-card-body{padding:10px 110px 10px 108px}
    .fm-layout-ticket .fm-card .fm-card-bottom-row{margin-left:108px;max-width:calc(100% - 120px)}
    .fm-layout-ticket .fm-card .fm-card-body::after{width:90px;font-size:9px}
    .fm-layout-ticket .fm-card::before,
    .fm-layout-ticket .fm-card::after{left:calc(100% - 106px)}
    .fm-layout-ticket .fm-card .fm-card-title{font-size:15px}
}


/* ============================================================
   LAYOUT 15 — ZEN (fm-layout-zen)
   Japanese minimalism. Generous whitespace, ultra-thin rules,
   a single Enso (brush circle) accent, stacked serif typography,
   vertical red-dot accent (hinomaru) on price. Rice-paper
   cream background. No boxes, only typographic rhythm.
   Design language: quiet, spacious, contemplative.
   ============================================================ */
.fm-layout-zen{
    background:
        radial-gradient(circle at 10% 10%, rgba(42,42,53,.04), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(200,52,47,.04), transparent 30%),
        #f4f1ea;
    padding:20px 4px;
}
.fm-layout-zen .fm-cards{
    display:flex;flex-direction:column;gap:0;
    padding:0 8px;
}
.fm-layout-zen .fm-section{margin-bottom:54px;position:relative;padding-top:20px}
.fm-layout-zen .fm-section-head{
    background:transparent;border:none;
    padding:0 8px 18px;margin-bottom:26px;
    text-align:center;position:relative;
    border-bottom:1px solid rgba(42,42,53,.15);
}
/* Enso brush circle accent */
.fm-layout-zen .fm-section-head::before{
    content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
    width:44px;height:44px;border-radius:50%;
    border:2.5px solid #2a2a35;
    border-right-color:transparent;border-top-color:rgba(42,42,53,.5);
    transform:translateX(-50%) rotate(-35deg);
    opacity:.7;
}
/* Red hinomaru dot inside the enso */
.fm-layout-zen .fm-section-head::after{
    content:'';position:absolute;top:16px;left:50%;transform:translateX(-50%);
    width:7px;height:7px;border-radius:50%;
    background:#c8342f;
    box-shadow:0 0 0 1px rgba(42,42,53,.1);
}
.fm-layout-zen .fm-section-title{
    font-family:'Georgia','Noto Serif','Times New Roman',serif;
    font-size:22px;font-weight:300;color:#2a2a35;
    letter-spacing:6px;margin:44px 0 4px;
    line-height:1.3;
}
.fm-layout-zen .fm-section-title::before{content:'— '}
.fm-layout-zen .fm-section-title::after{content:' —'}
.fm-layout-zen .fm-section-line{display:none}

.fm-layout-zen .fm-card{
    background:transparent;
    border:none;border-bottom:1px solid rgba(42,42,53,.1);
    border-radius:0;
    padding:22px 8px 22px 56px;
    box-shadow:none;
    transition:padding-left .3s ease, background .3s ease;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto;
    grid-template-areas:
        'title price'
        'desc desc'
        'meta meta';
    gap:6px 20px;
    position:relative;
}
.fm-layout-zen .fm-card:hover{
    padding-left:64px;
    background:rgba(42,42,53,.02);
}
/* Red hinomaru dot marker on each card */
.fm-layout-zen .fm-card::before{
    content:'';position:absolute;left:22px;top:30px;
    width:8px;height:8px;border-radius:50%;
    background:#c8342f;
    box-shadow:0 0 0 6px rgba(200,52,47,.08);
    transition:transform .3s ease;
}
.fm-layout-zen .fm-card:hover::before{
    transform:scale(1.3);
}
/* Thin vertical ink stroke to left */
.fm-layout-zen .fm-card::after{
    content:'';position:absolute;left:12px;top:30px;bottom:30px;
    width:1px;background:rgba(42,42,53,.25);
    opacity:0;transition:opacity .3s ease;
}
.fm-layout-zen .fm-card:hover::after{opacity:1}

.fm-layout-zen .fm-card .fm-card-top-row{display:contents}
.fm-layout-zen .fm-card .fm-card-img-wrap{
    display:none!important;
}
.fm-layout-zen .fm-card .fm-card-body{
    padding:0;display:contents;
}
.fm-layout-zen .fm-card .fm-card-title{
    grid-area:title;
    font-family:'Georgia','Noto Serif','Times New Roman',serif;
    font-size:21px;font-weight:400;color:#2a2a35;
    margin:0;line-height:1.25;letter-spacing:.5px;
}
.fm-layout-zen .fm-card .fm-card-desc{
    grid-area:desc;
    font-family:'Georgia','Noto Serif','Times New Roman',serif;
    font-size:13px;color:#8a8a95;line-height:1.75;
    margin:0;font-style:italic;font-weight:300;
    max-width:520px;
}
.fm-layout-zen .fm-card .fm-card-price{
    grid-area:price;align-self:center;
    font-family:'Georgia','Noto Serif','Times New Roman',serif;
    font-size:16px;font-weight:600;color:#2a2a35;
    background:transparent;padding:0;
    letter-spacing:1px;
    position:relative;
    padding-left:16px;
}
/* Little red dot before price */
.fm-layout-zen .fm-card .fm-card-price::before{
    content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:6px;height:6px;border-radius:50%;background:#c8342f;
}
.fm-layout-zen .fm-card .fm-card-bottom-row{
    grid-area:meta;margin:2px 0 0;padding:0;border:none;
    justify-content:flex-start;
}
.fm-layout-zen .fm-card .fm-card-metas{gap:14px}
.fm-layout-zen .fm-card .fm-meta{
    background:transparent;color:#8a8a95;border:none;
    font-family:'Georgia','Noto Serif','Times New Roman',serif;
    font-size:12px;font-weight:300;padding:0;
    letter-spacing:1.5px;text-transform:uppercase;
    opacity:.8;
}
.fm-layout-zen .fm-catbar{
    background:transparent!important;
    border:none!important;
    border-top:1px solid rgba(42,42,53,.1)!important;
    border-bottom:1px solid rgba(42,42,53,.1)!important;
    padding:10px 4px!important;
}
.fm-layout-zen .fm-cat-item{
    font-family:'Georgia','Noto Serif','Times New Roman',serif;
    font-size:13px;font-weight:400;color:#6a6a75;
    background:transparent;border:none;border-radius:0;
    letter-spacing:3px;text-transform:uppercase;
    padding:6px 14px;
}
.fm-layout-zen .fm-cat-item.active{
    color:#2a2a35;
    border-bottom:1px solid #c8342f;
}
@media(max-width:500px){
    .fm-layout-zen .fm-card{padding:18px 4px 18px 42px;gap:4px 10px}
    .fm-layout-zen .fm-card:hover{padding-left:48px}
    .fm-layout-zen .fm-card::before{left:12px;top:26px}
    .fm-layout-zen .fm-card::after{left:5px}
    .fm-layout-zen .fm-card .fm-card-title{font-size:17px}
    .fm-layout-zen .fm-section-title{font-size:18px;letter-spacing:4px}
}


/* ============================================================
   LAYOUT 16 — BRUTALIST (fm-layout-brutalist)
   Raw Swiss/brutalist poster typography. Heavy sans-serif
   numbers, oversized item indices, hard 4px offset drop-shadows,
   no border-radius, high-contrast color blocks per card, tilted
   section titles, thick black rules. Bold and loud.
   Design language: editorial, confrontational, typographic.
   ============================================================ */
.fm-layout-brutalist{
    background:
        linear-gradient(135deg, transparent 48%, rgba(0,0,0,.04) 48%, rgba(0,0,0,.04) 52%, transparent 52%) 0 0/24px 24px,
        #f0ede6;
    padding:8px 4px;
}
.fm-layout-brutalist .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 12px;
    padding:4px 2px;
}
.fm-layout-brutalist .fm-section{margin-bottom:38px;position:relative}
.fm-layout-brutalist .fm-section-head{
    background:#000;
    border:none;border-radius:0;
    padding:14px 18px;
    margin-bottom:22px;
    position:relative;
    transform:rotate(-1deg);
    box-shadow:6px 6px 0 #ff3366;
}
.fm-layout-brutalist .fm-section-title{
    font-family:'Arial Black','Helvetica Neue','Impact',sans-serif;
    font-size:22px;font-weight:900;color:#fff;
    letter-spacing:-.5px;margin:0;
    text-transform:uppercase;line-height:1;
}
.fm-layout-brutalist .fm-section-title::before{
    content:'//';color:#ffeb3b;margin-left:0;margin-right:8px;
}
.fm-layout-brutalist .fm-section-line{display:none}

.fm-layout-brutalist .fm-card{
    background:#fff;
    border:3px solid #000;
    border-radius:0;
    padding:0;
    box-shadow:5px 5px 0 #000;
    transition:transform .2s ease, box-shadow .2s ease;
    display:grid;
    grid-template-columns:54px 1fr;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:
        'idx img'
        'idx body'
        'idx foot';
    position:relative;
    overflow:hidden;
}
.fm-layout-brutalist .fm-card:hover{
    transform:translate(-3px,-3px);
    box-shadow:8px 8px 0 #000;
}
/* Rotate color accents — different accent per card position */
.fm-layout-brutalist .fm-card:nth-child(5n+1){box-shadow:5px 5px 0 #000, 10px 10px 0 #ff3366}
.fm-layout-brutalist .fm-card:nth-child(5n+2){box-shadow:5px 5px 0 #000, 10px 10px 0 #ffeb3b}
.fm-layout-brutalist .fm-card:nth-child(5n+3){box-shadow:5px 5px 0 #000, 10px 10px 0 #00d4a8}
.fm-layout-brutalist .fm-card:nth-child(5n+4){box-shadow:5px 5px 0 #000, 10px 10px 0 #0066ff}
.fm-layout-brutalist .fm-card:nth-child(5n+5){box-shadow:5px 5px 0 #000, 10px 10px 0 #ff9500}
.fm-layout-brutalist .fm-card:hover:nth-child(5n+1){box-shadow:8px 8px 0 #000, 13px 13px 0 #ff3366}
.fm-layout-brutalist .fm-card:hover:nth-child(5n+2){box-shadow:8px 8px 0 #000, 13px 13px 0 #ffeb3b}
.fm-layout-brutalist .fm-card:hover:nth-child(5n+3){box-shadow:8px 8px 0 #000, 13px 13px 0 #00d4a8}
.fm-layout-brutalist .fm-card:hover:nth-child(5n+4){box-shadow:8px 8px 0 #000, 13px 13px 0 #0066ff}
.fm-layout-brutalist .fm-card:hover:nth-child(5n+5){box-shadow:8px 8px 0 #000, 13px 13px 0 #ff9500}

/* Massive item index in left column */
.fm-layout-brutalist .fm-card::before{
    content:'0' attr(data-card-idx);
    grid-area:idx;
    background:#000;color:#fff;
    font-family:'Arial Black','Helvetica Neue','Impact',sans-serif;
    font-size:42px;font-weight:900;
    display:flex;align-items:center;justify-content:center;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    letter-spacing:-2px;
    line-height:1;
    padding:10px 0;
    border-right:3px solid #000;
}

.fm-layout-brutalist .fm-card .fm-card-top-row{
    grid-area:img;display:block;
}
.fm-layout-brutalist .fm-card .fm-card-img-wrap{
    grid-area:img;
    width:100%!important;height:110px!important;max-height:110px!important;
    border-radius:0!important;
    border-bottom:3px solid #000;
    filter:grayscale(1) contrast(1.2);
    background:#e0e0e0;
    margin:0;
}
.fm-layout-brutalist .fm-card:hover .fm-card-img-wrap{
    filter:grayscale(0) contrast(1);
}
.fm-layout-brutalist .fm-card .fm-card-body{
    grid-area:body;
    padding:10px 12px 8px;
    display:flex;flex-direction:column;
    background:#fff;
}
.fm-layout-brutalist .fm-card .fm-card-title{
    font-family:'Arial Black','Helvetica Neue','Impact',sans-serif;
    font-size:16px;font-weight:900;color:#000;
    margin:0 0 4px;line-height:1;letter-spacing:-.3px;
    text-transform:uppercase;
}
.fm-layout-brutalist .fm-card .fm-card-desc{
    font-family:'Arial','Helvetica Neue',sans-serif;
    font-size:11px;color:#000;line-height:1.4;
    margin-bottom:4px;
    text-transform:uppercase;letter-spacing:.3px;
    opacity:.7;
}
.fm-layout-brutalist .fm-card .fm-card-price{
    font-family:'Arial Black','Helvetica Neue','Impact',sans-serif;
    font-size:17px;font-weight:900;color:#fff;
    background:#000;padding:3px 8px 2px;display:inline-block;
    border-radius:0;letter-spacing:-.3px;
    align-self:flex-start;
}
/* Color-rotate price bg per card */
.fm-layout-brutalist .fm-card:nth-child(5n+1) .fm-card-price{background:#ff3366}
.fm-layout-brutalist .fm-card:nth-child(5n+2) .fm-card-price{background:#000;color:#ffeb3b}
.fm-layout-brutalist .fm-card:nth-child(5n+3) .fm-card-price{background:#00d4a8;color:#000}
.fm-layout-brutalist .fm-card:nth-child(5n+4) .fm-card-price{background:#0066ff}
.fm-layout-brutalist .fm-card:nth-child(5n+5) .fm-card-price{background:#ff9500;color:#000}

.fm-layout-brutalist .fm-card .fm-card-bottom-row{
    grid-area:foot;margin:0;padding:6px 12px;
    border-top:3px solid #000;background:#ffeb3b;
    justify-content:flex-start;
}
.fm-layout-brutalist .fm-card .fm-card-metas{gap:6px}
.fm-layout-brutalist .fm-card .fm-meta{
    background:#000;color:#fff;border:none;border-radius:0;
    font-family:'Arial Black','Helvetica Neue','Impact',sans-serif;
    font-size:10px;font-weight:900;padding:3px 6px;
    text-transform:uppercase;letter-spacing:.5px;
}

.fm-layout-brutalist .fm-catbar{
    background:#000!important;
    border:none!important;border-radius:0!important;
    padding:6px 8px!important;
    box-shadow:6px 6px 0 #ff3366;
}
.fm-layout-brutalist .fm-cat-item{
    font-family:'Arial Black','Helvetica Neue','Impact',sans-serif;
    font-size:12px;font-weight:900;color:#fff;
    background:transparent;border:2px solid transparent;border-radius:0;
    padding:4px 10px;text-transform:uppercase;letter-spacing:.5px;
}
.fm-layout-brutalist .fm-cat-item.active{
    color:#000;background:#ffeb3b;border-color:#ffeb3b;
}
@media(max-width:520px){
    .fm-layout-brutalist .fm-cards{grid-template-columns:repeat(2,1fr);gap:20px 0}
    .fm-layout-brutalist .fm-card::before{font-size:34px}
    .fm-layout-brutalist .fm-card{grid-template-columns:46px 1fr}
    .fm-layout-brutalist .fm-card .fm-card-img-wrap{height:140px!important;max-height:140px!important}
    .fm-layout-brutalist .fm-section-head{transform:rotate(-.5deg)}
}

/* ============================================================
   v11.13 - SIX MORE BRAND-NEW LAYOUT SYSTEMS
   Each with a radically different design language.
   All reuse the existing .fm-card markup and CSS vars.
   All show product descriptions. All keep images in full color.
   ============================================================ */


/* ============================================================
   LAYOUT 18 — CINEMA (fm-layout-cinema)
   Movie poster style. Tall vertical cards (2:3 ratio), dark
   background, large colorful image top with gradient fade to
   dark, rating stars, genre-style subtitle, neon accent bar
   under title, price in bright accent color at bottom.
   Design language: cinematic, moody, dark, premium.
   ============================================================ */
.fm-layout-cinema{
    background:
        radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.15), transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(219,39,119,.1), transparent 50%),
        #0a0a0f;
    padding:12px 4px;
    border-radius:8px;
}
.fm-layout-cinema .fm-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    padding:4px 2px;
}
.fm-layout-cinema .fm-section{margin-bottom:32px;position:relative}
.fm-layout-cinema .fm-section-head{
    background:transparent;border:none;
    padding:8px 12px 14px;margin-bottom:14px;
    position:relative;
    border-bottom:2px solid transparent;
    border-image:linear-gradient(90deg,transparent,#f59e0b,transparent) 1;
}
.fm-layout-cinema .fm-section-head::before{
    content:'NOW SHOWING';
    position:absolute;top:0;left:50%;transform:translateX(-50%);
    font-family:'Arial Black','Impact',sans-serif;
    font-size:9px;letter-spacing:4px;color:#f59e0b;
    background:#0a0a0f;padding:0 12px;
}
.fm-layout-cinema .fm-section-title{
    font-family:'Georgia','Playfair Display',serif;
    font-size:22px;font-weight:700;color:#fff;
    letter-spacing:.5px;margin:10px 0 0;
    text-align:center;
    text-shadow:0 2px 8px rgba(245,158,11,.3);
}
.fm-layout-cinema .fm-section-line{display:none}

.fm-layout-cinema .fm-card{
    background:linear-gradient(180deg,#1a1a2e,#0a0a0f);
    border:1px solid rgba(245,158,11,.2);
    border-radius:8px;
    padding:0;overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.5);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    display:flex;flex-direction:column;
    aspect-ratio:2/3.2;
    position:relative;
}
.fm-layout-cinema .fm-card:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 16px 40px rgba(0,0,0,.7), 0 0 0 2px rgba(245,158,11,.4);
    border-color:#f59e0b;
}
/* Rotate accent color per card */
.fm-layout-cinema .fm-card:nth-child(4n+1){--cin-accent:#f59e0b}
.fm-layout-cinema .fm-card:nth-child(4n+2){--cin-accent:#ec4899}
.fm-layout-cinema .fm-card:nth-child(4n+3){--cin-accent:#06b6d4}
.fm-layout-cinema .fm-card:nth-child(4n+4){--cin-accent:#a855f7}

.fm-layout-cinema .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:0;flex:1}
.fm-layout-cinema .fm-card .fm-card-img-wrap{
    width:100%!important;height:62%!important;max-height:none!important;
    border-radius:0!important;margin:0;
    position:relative;overflow:hidden;
}
.fm-layout-cinema .fm-card .fm-card-img-wrap img{
    filter:saturate(1.15) contrast(1.1);
    transition:transform .6s ease;
}
.fm-layout-cinema .fm-card:hover .fm-card-img-wrap img{transform:scale(1.08)}
.fm-layout-cinema .fm-card .fm-card-img-wrap::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 40%,rgba(10,10,15,.85) 92%,#0a0a0f 100%);
    pointer-events:none;
}
/* Rating star badge */
.fm-layout-cinema .fm-card .fm-card-img-wrap::before{
    content:'★ 4.8';position:absolute;top:8px;right:8px;z-index:2;
    font-family:'Arial Black','Impact',sans-serif;
    font-size:10px;font-weight:700;color:#0a0a0f;
    background:var(--cin-accent,#f59e0b);
    padding:3px 8px;border-radius:4px;
    letter-spacing:.5px;
    box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.fm-layout-cinema .fm-card .fm-card-body{
    padding:10px 12px 6px;
    flex:1;display:flex;flex-direction:column;
    background:linear-gradient(180deg,rgba(10,10,15,.95),#0a0a0f);
    position:relative;z-index:2;
    margin-top:-20px;
}
.fm-layout-cinema .fm-card .fm-card-title{
    font-family:'Georgia','Playfair Display',serif;
    font-size:16px;font-weight:700;color:#fff;
    margin:0 0 2px;line-height:1.15;
    text-shadow:0 2px 4px rgba(0,0,0,.5);
}
.fm-layout-cinema .fm-card .fm-card-title::after{
    content:'';display:block;width:28px;height:2px;
    background:var(--cin-accent,#f59e0b);
    margin-top:4px;
}
.fm-layout-cinema .fm-card .fm-card-desc{
    font-family:sans-serif;
    font-size:11px;color:#a1a1aa;line-height:1.4;
    margin:6px 0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    letter-spacing:.2px;
}
.fm-layout-cinema .fm-card .fm-card-price{
    font-family:'Arial Black','Impact',sans-serif;
    font-size:17px;font-weight:900;color:var(--cin-accent,#f59e0b);
    background:transparent;padding:0;
    letter-spacing:.5px;
    margin-top:auto;
    text-shadow:0 1px 6px currentColor;
}
.fm-layout-cinema .fm-card .fm-card-bottom-row{
    margin:6px 0 0;padding:6px 12px 10px;
    border-top:1px solid rgba(245,158,11,.15);
    background:transparent;
}
.fm-layout-cinema .fm-card .fm-card-metas{gap:6px}
.fm-layout-cinema .fm-card .fm-meta{
    background:rgba(245,158,11,.08);color:var(--cin-accent,#f59e0b);
    border:1px solid rgba(245,158,11,.25);border-radius:3px;
    font-family:sans-serif;font-size:10px;font-weight:600;
    text-transform:uppercase;letter-spacing:.8px;
}
.fm-layout-cinema .fm-catbar{
    background:#0a0a0f!important;
    border:1px solid rgba(245,158,11,.25)!important;
    border-radius:6px!important;
    padding:4px 6px!important;
}
.fm-layout-cinema .fm-cat-item{
    font-family:'Arial Black','Impact',sans-serif;
    font-size:11px;font-weight:700;color:#a1a1aa;
    background:transparent;border:none;border-radius:4px;
    padding:5px 12px;text-transform:uppercase;letter-spacing:1px;
}
.fm-layout-cinema .fm-cat-item.active{
    color:#0a0a0f;background:#f59e0b;
    box-shadow:0 0 12px rgba(245,158,11,.5);
}
@media(max-width:560px){
    .fm-layout-cinema .fm-cards{grid-template-columns:repeat(2,1fr);gap:10px}
    .fm-layout-cinema .fm-card .fm-card-title{font-size:14px}
}
@media(max-width:360px){
    .fm-layout-cinema .fm-cards{grid-template-columns:repeat(2,1fr)}
    .fm-layout-cinema .fm-card{aspect-ratio:5/3}
    .fm-layout-cinema .fm-card .fm-card-img-wrap{height:50%!important}
}


/* ============================================================
   LAYOUT 19 — KRAFT (fm-layout-kraft)
   Artisan kraft paper packaging. Warm brown kraft cardboard
   background, each card looks like a package wrapped in kraft
   with a white tape strip on top, red "FRESH" stamp circle,
   typewriter-style typography, twine/hemp accent details.
   Design language: artisanal, organic, handmade, farm-to-table.
   ============================================================ */
.fm-layout-kraft{
    background:
        radial-gradient(circle at 20% 20%, rgba(139,111,71,.08), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(74,44,26,.08), transparent 40%),
        repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(139,111,71,.03) 2px, rgba(139,111,71,.03) 3px),
        #d4b896;
    padding:12px 6px;
}
.fm-layout-kraft .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 14px;
    padding:4px 2px;
}
.fm-layout-kraft .fm-section{margin-bottom:28px;position:relative}
.fm-layout-kraft .fm-section-head{
    background:#4a2c1a;
    border-radius:3px;
    padding:12px 18px 12px 60px;
    margin-bottom:18px;
    position:relative;
    box-shadow:0 3px 0 #2d180a, 0 5px 12px rgba(74,44,26,.3);
}
.fm-layout-kraft .fm-section-head::before{
    content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);
    width:32px;height:32px;border-radius:50%;
    border:2px solid #f5e6d3;
    background:transparent;
    box-shadow:inset 0 0 0 4px #4a2c1a;
}
.fm-layout-kraft .fm-section-head::after{
    content:'FRESH';position:absolute;left:14px;top:50%;
    width:32px;transform:translateY(-50%);
    text-align:center;
    font-family:'Courier New',monospace;font-size:9px;font-weight:700;
    color:#f5e6d3;letter-spacing:1px;
}
.fm-layout-kraft .fm-section-title{
    font-family:'Courier New','American Typewriter',monospace;
    font-size:17px;font-weight:700;color:#f5e6d3;
    letter-spacing:1.5px;margin:0;
    text-transform:uppercase;
}
.fm-layout-kraft .fm-section-line{display:none}

.fm-layout-kraft .fm-card{
    background:
        repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(139,111,71,.04) 2px, rgba(139,111,71,.04) 3px),
        #e8d0a8;
    border:1px solid #8b6f47;
    border-radius:4px;
    padding:0;overflow:hidden;
    box-shadow:0 3px 0 rgba(74,44,26,.3), 0 6px 14px rgba(74,44,26,.15), inset 0 0 60px rgba(139,111,71,.1);
    transition:transform .25s ease, box-shadow .25s ease;
    display:flex;flex-direction:column;
    position:relative;
}
.fm-layout-kraft .fm-card:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 0 rgba(74,44,26,.3), 0 12px 24px rgba(74,44,26,.2);
}
/* Tape strip on top */
.fm-layout-kraft .fm-card::before{
    content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);
    width:70px;height:16px;
    background:rgba(245,230,211,.75);
    box-shadow:0 1px 3px rgba(74,44,26,.2);
    z-index:3;
    border-left:1px dashed rgba(139,111,71,.3);
    border-right:1px dashed rgba(139,111,71,.3);
}
/* Red stamp circle */
.fm-layout-kraft .fm-card::after{
    content:'FRESH';position:absolute;top:14px;right:10px;z-index:4;
    width:40px;height:40px;border-radius:50%;
    border:2px solid #c8342f;
    display:flex;align-items:center;justify-content:center;
    font-family:'Courier New',monospace;
    font-size:9px;font-weight:700;color:#c8342f;
    letter-spacing:.5px;
    transform:rotate(-12deg);
    background:rgba(245,230,211,.4);
    box-shadow:inset 0 0 0 4px transparent, 0 0 0 2px transparent;
    opacity:.85;
}

.fm-layout-kraft .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:18px 14px 0}
.fm-layout-kraft .fm-card .fm-card-img-wrap{
    width:100%!important;height:140px!important;max-height:140px!important;
    border-radius:3px!important;margin:0 0 10px;
    border:1px solid #8b6f47;
    box-shadow:0 2px 6px rgba(74,44,26,.2);
    position:relative;
}
.fm-layout-kraft .fm-card .fm-card-img-wrap img{
    filter:saturate(1.05) brightness(1.02);
}
.fm-layout-kraft .fm-card .fm-card-body{
    padding:0 14px 10px;
    flex:1;display:flex;flex-direction:column;
    position:relative;
}
.fm-layout-kraft .fm-card .fm-card-title{
    font-family:'Courier New','American Typewriter',monospace;
    font-size:16px;font-weight:700;color:#3a1f0f;
    margin:0 0 3px;line-height:1.15;letter-spacing:.3px;
    text-transform:uppercase;
}
.fm-layout-kraft .fm-card .fm-card-title::after{
    content:'';display:block;width:40px;height:1px;
    background:repeating-linear-gradient(90deg,#8b6f47 0,#8b6f47 3px,transparent 3px,transparent 5px);
    margin-top:5px;
}
.fm-layout-kraft .fm-card .fm-card-desc{
    font-family:'Courier New','American Typewriter',monospace;
    font-size:12px;color:#6b4423;line-height:1.5;
    margin:6px 0;
    font-style:italic;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-kraft .fm-card .fm-card-price{
    font-family:'Courier New','American Typewriter',monospace;
    font-size:16px;font-weight:700;color:#c8342f;
    background:transparent;padding:2px 0;
    display:inline-block;
    letter-spacing:1px;
    align-self:flex-start;
    margin-top:4px;
    border-top:2px solid #8b6f47;
    padding-top:4px;
}
.fm-layout-kraft .fm-card .fm-card-bottom-row{
    margin:6px 0 0;padding:8px 14px 12px;
    border-top:1px dashed #8b6f47;
    background:rgba(139,111,71,.08);
}
.fm-layout-kraft .fm-card .fm-card-metas{gap:8px}
.fm-layout-kraft .fm-card .fm-meta{
    background:transparent;color:#4a2c1a;
    border:1px dashed #8b6f47;border-radius:2px;
    font-family:'Courier New',monospace;font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;
}
.fm-layout-kraft .fm-catbar{
    background:#4a2c1a!important;
    border:1px solid #8b6f47!important;
    border-radius:3px!important;
    padding:6px 8px!important;
    box-shadow:0 3px 0 #2d180a;
}
.fm-layout-kraft .fm-cat-item{
    font-family:'Courier New','American Typewriter',monospace;
    font-size:12px;font-weight:700;color:#d4b896;
    background:transparent;border:1px dashed transparent;border-radius:2px;
    padding:4px 12px;text-transform:uppercase;letter-spacing:1px;
}
.fm-layout-kraft .fm-cat-item.active{
    color:#4a2c1a;background:#d4b896;border-color:#f5e6d3;
}
@media(max-width:480px){
    .fm-layout-kraft .fm-cards{grid-template-columns:repeat(2,1fr);gap:22px 0}
    .fm-layout-kraft .fm-card .fm-card-img-wrap{height:170px!important;max-height:170px!important}
}


/* ============================================================
   LAYOUT 20 — CYBERPUNK (fm-layout-cyberpunk)
   Futuristic neon cyberpunk. Dark purple background with
   subtle grid scan lines, clipped-corner cards (hexagonal cuts),
   magenta/cyan/yellow neon accents, monospace tech font,
   glow effects, ID numbers, data-style labels.
   Design language: futuristic, neon, tech, high-contrast.
   ============================================================ */
.fm-layout-cyberpunk{
    background:
        linear-gradient(rgba(236,72,153,.04) 1px, transparent 1px) 0 0/32px 32px,
        linear-gradient(90deg, rgba(6,182,212,.04) 1px, transparent 1px) 0 0/32px 32px,
        radial-gradient(ellipse at 30% 20%, rgba(168,85,247,.15), transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(236,72,153,.1), transparent 60%),
        #0a0014;
    padding:12px 6px;
    border-radius:6px;
}
.fm-layout-cyberpunk .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 14px;
    padding:4px 2px;
}
.fm-layout-cyberpunk .fm-section{margin-bottom:30px;position:relative}
.fm-layout-cyberpunk .fm-section-head{
    background:linear-gradient(90deg,rgba(236,72,153,.1),rgba(6,182,212,.1));
    border:none;
    border-left:3px solid #ec4899;
    border-right:3px solid #06b6d4;
    border-radius:0;
    padding:10px 20px 10px 24px;
    margin-bottom:16px;
    position:relative;
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 100%, 14px 100%);
}
.fm-layout-cyberpunk .fm-section-head::before{
    content:'// SECTION.' attr(data-slug);
    position:absolute;right:16px;top:50%;transform:translateY(-50%);
    font-family:'Courier New',monospace;
    font-size:10px;color:#06b6d4;opacity:.6;
    letter-spacing:1px;
}
.fm-layout-cyberpunk .fm-section-title{
    font-family:'Courier New','Monaco',monospace;
    font-size:15px;font-weight:700;color:#ec4899;
    letter-spacing:2px;margin:0;
    text-transform:uppercase;
    text-shadow:0 0 10px rgba(236,72,153,.6), 0 0 20px rgba(236,72,153,.3);
}
.fm-layout-cyberpunk .fm-section-title::before{content:'▸ '}
.fm-layout-cyberpunk .fm-section-line{display:none}

.fm-layout-cyberpunk .fm-card{
    background:linear-gradient(135deg,#1a0033 0%,#0a0014 100%);
    border:1px solid rgba(236,72,153,.4);
    border-radius:0;
    padding:0;overflow:hidden;
    clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display:flex;flex-direction:column;
    position:relative;
    box-shadow:0 0 0 1px rgba(236,72,153,.15), 0 4px 16px rgba(10,0,20,.8);
}
.fm-layout-cyberpunk .fm-card:hover{
    transform:translateY(-4px);
    border-color:#ec4899;
    box-shadow:0 0 0 1px rgba(236,72,153,.4), 0 0 30px rgba(236,72,153,.4), 0 8px 24px rgba(10,0,20,.9);
}
/* Rotate neon accent per card */
.fm-layout-cyberpunk .fm-card:nth-child(4n+1){--cyb-neon:#ec4899}
.fm-layout-cyberpunk .fm-card:nth-child(4n+2){--cyb-neon:#06b6d4}
.fm-layout-cyberpunk .fm-card:nth-child(4n+3){--cyb-neon:#fbbf24}
.fm-layout-cyberpunk .fm-card:nth-child(4n+4){--cyb-neon:#a855f7}
.fm-layout-cyberpunk .fm-card{border-color:var(--cyb-neon,#ec4899)}
.fm-layout-cyberpunk .fm-card:hover{box-shadow:0 0 0 1px var(--cyb-neon,#ec4899), 0 0 30px color-mix(in srgb,var(--cyb-neon,#ec4899) 40%,transparent), 0 8px 24px rgba(10,0,20,.9)}

/* ID number in corner */
.fm-layout-cyberpunk .fm-card::before{
    content:'ID:' attr(data-card-idx) '/SYS';
    position:absolute;top:6px;right:16px;z-index:3;
    font-family:'Courier New',monospace;
    font-size:9px;color:var(--cyb-neon,#ec4899);
    opacity:.7;letter-spacing:.8px;
}
/* Corner bracket */
.fm-layout-cyberpunk .fm-card::after{
    content:'';position:absolute;top:8px;left:8px;
    width:14px;height:14px;
    border-top:2px solid var(--cyb-neon,#ec4899);
    border-left:2px solid var(--cyb-neon,#ec4899);
    z-index:3;
}

.fm-layout-cyberpunk .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:22px 10px 0}
.fm-layout-cyberpunk .fm-card .fm-card-img-wrap{
    width:100%!important;height:140px!important;max-height:140px!important;
    border-radius:0!important;margin:0 0 10px;
    border:1px solid rgba(236,72,153,.3);
    position:relative;
    clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.fm-layout-cyberpunk .fm-card .fm-card-img-wrap img{
    filter:saturate(1.2) contrast(1.1);
}
.fm-layout-cyberpunk .fm-card .fm-card-img-wrap::after{
    content:'';position:absolute;inset:0;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(236,72,153,.06) 2px, rgba(236,72,153,.06) 3px);
    pointer-events:none;
}
.fm-layout-cyberpunk .fm-card .fm-card-body{
    padding:0 12px 8px;
    flex:1;display:flex;flex-direction:column;
}
.fm-layout-cyberpunk .fm-card .fm-card-title{
    font-family:'Courier New','Monaco',monospace;
    font-size:15px;font-weight:700;color:#fff;
    margin:0 0 4px;line-height:1.15;letter-spacing:.8px;
    text-transform:uppercase;
    text-shadow:0 0 8px color-mix(in srgb, var(--cyb-neon,#ec4899) 60%, transparent);
}
.fm-layout-cyberpunk .fm-card .fm-card-title::before{content:'> '}
.fm-layout-cyberpunk .fm-card .fm-card-desc{
    font-family:'Courier New','Monaco',monospace;
    font-size:11px;color:#c0a0e0;line-height:1.5;
    margin:4px 0 6px;
    opacity:.85;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    padding-left:8px;border-left:1px solid rgba(236,72,153,.3);
}
.fm-layout-cyberpunk .fm-card .fm-card-price{
    font-family:'Courier New','Monaco',monospace;
    font-size:16px;font-weight:700;color:#fbbf24;
    background:rgba(251,191,36,.1);
    padding:3px 10px;display:inline-block;
    border:1px solid rgba(251,191,36,.4);border-radius:0;
    letter-spacing:1.5px;
    align-self:flex-start;
    margin-top:auto;
    text-shadow:0 0 6px rgba(251,191,36,.5);
    clip-path:polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.fm-layout-cyberpunk .fm-card .fm-card-bottom-row{
    margin:6px 0 0;padding:8px 12px 10px;
    border-top:1px solid rgba(236,72,153,.2);
    background:rgba(236,72,153,.03);
}
.fm-layout-cyberpunk .fm-card .fm-card-metas{gap:6px}
.fm-layout-cyberpunk .fm-card .fm-meta{
    background:transparent;color:#06b6d4;
    border:1px solid rgba(6,182,212,.4);border-radius:0;
    font-family:'Courier New',monospace;font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.8px;
    clip-path:polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
    text-shadow:0 0 4px rgba(6,182,212,.5);
}
.fm-layout-cyberpunk .fm-catbar{
    background:#0a0014!important;
    border:1px solid rgba(236,72,153,.4)!important;
    border-radius:0!important;
    padding:4px 8px!important;
    clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.fm-layout-cyberpunk .fm-cat-item{
    font-family:'Courier New','Monaco',monospace;
    font-size:11px;font-weight:700;color:#c0a0e0;
    background:transparent;border:none;border-radius:0;
    padding:5px 12px;text-transform:uppercase;letter-spacing:1.2px;
    clip-path:polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
.fm-layout-cyberpunk .fm-cat-item.active{
    color:#0a0014;background:#ec4899;
    text-shadow:none;
    box-shadow:0 0 12px rgba(236,72,153,.6);
}
@media(max-width:440px){
    .fm-layout-cyberpunk .fm-cards{grid-template-columns:repeat(2,1fr);gap:20px 0}
    .fm-layout-cyberpunk .fm-card .fm-card-img-wrap{height:160px!important;max-height:160px!important}
}


/* ============================================================
   LAYOUT 21 — BOTANICAL (fm-layout-botanical)
   Vintage botanical encyclopedia. Aged cream paper, thin
   double-line frame per card, serif italic typography with
   Latin-style subtitle, decorative corner flourishes,
   roman numeral pricing, classical presentation.
   Design language: vintage, scholarly, refined, natural.
   ============================================================ */
.fm-layout-botanical{
    background:
        radial-gradient(circle at 10% 10%, rgba(168,149,106,.1), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(90,124,63,.08), transparent 40%),
        repeating-linear-gradient(0deg, transparent 0, transparent 30px, rgba(168,149,106,.04) 30px, rgba(168,149,106,.04) 31px),
        #faf5e8;
    padding:14px 6px;
}
.fm-layout-botanical .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 16px;
    padding:4px 2px;
}
.fm-layout-botanical .fm-section{margin-bottom:36px;position:relative}
.fm-layout-botanical .fm-section-head{
    background:transparent;
    border:none;
    border-top:1px solid #5a7c3f;
    border-bottom:1px solid #5a7c3f;
    border-radius:0;
    padding:14px 0;margin-bottom:22px;
    position:relative;
    text-align:center;
}
.fm-layout-botanical .fm-section-head::before{
    content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);
    width:40%;height:1px;background:#5a7c3f;
}
.fm-layout-botanical .fm-section-head::after{
    content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
    width:40%;height:1px;background:#5a7c3f;
}
.fm-layout-botanical .fm-section-title{
    font-family:'Georgia','Playfair Display',serif;
    font-size:22px;font-weight:400;color:#2a3d1a;
    letter-spacing:2px;margin:0;
    font-style:italic;
}
.fm-layout-botanical .fm-section-title::before{content:'❦ '}
.fm-layout-botanical .fm-section-title::after{content:' ❦'}
.fm-layout-botanical .fm-section-line{display:none}

.fm-layout-botanical .fm-card{
    background:#fdf9ef;
    border:1px solid #8ba973;
    border-radius:0;
    padding:6px;
    box-shadow:0 2px 8px rgba(90,124,63,.1), inset 0 0 0 1px #fdf9ef, inset 0 0 0 2px #8ba973;
    transition:transform .3s ease, box-shadow .3s ease;
    display:flex;flex-direction:column;
    position:relative;
}
.fm-layout-botanical .fm-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(90,124,63,.18), inset 0 0 0 1px #fdf9ef, inset 0 0 0 2px #5a7c3f;
}
/* Corner flourishes */
.fm-layout-botanical .fm-card::before,
.fm-layout-botanical .fm-card::after{
    content:'';position:absolute;width:18px;height:18px;
    pointer-events:none;z-index:3;
}
.fm-layout-botanical .fm-card::before{
    top:2px;left:2px;
    background:
        radial-gradient(circle at 100% 100%, transparent 8px, #5a7c3f 8px, #5a7c3f 9px, transparent 9px),
        radial-gradient(circle at 100% 100%, transparent 4px, #5a7c3f 4px, #5a7c3f 4.5px, transparent 4.5px);
}
.fm-layout-botanical .fm-card::after{
    top:2px;right:2px;
    background:
        radial-gradient(circle at 0 100%, transparent 8px, #5a7c3f 8px, #5a7c3f 9px, transparent 9px),
        radial-gradient(circle at 0 100%, transparent 4px, #5a7c3f 4px, #5a7c3f 4.5px, transparent 4.5px);
}

.fm-layout-botanical .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:8px 10px 0}
.fm-layout-botanical .fm-card .fm-card-img-wrap{
    width:100%!important;height:130px!important;max-height:130px!important;
    border-radius:0!important;margin:0 0 10px;
    border:1px solid #8ba973;
    box-shadow:inset 0 0 0 3px #fdf9ef, inset 0 0 0 4px #8ba973;
    padding:4px;background:#fdf9ef;
    position:relative;
}
.fm-layout-botanical .fm-card .fm-card-img-wrap img{
    filter:saturate(1.05) sepia(.08);
}
.fm-layout-botanical .fm-card .fm-card-body{
    padding:0 12px 10px;
    flex:1;display:flex;flex-direction:column;
    position:relative;
    text-align:center;
}
.fm-layout-botanical .fm-card .fm-card-title{
    font-family:'Georgia','Playfair Display',serif;
    font-size:18px;font-weight:700;color:#2a3d1a;
    margin:0 0 2px;line-height:1.2;
    font-style:italic;letter-spacing:.3px;
}
/* Latin-style subtitle decoration */
.fm-layout-botanical .fm-card .fm-card-title::after{
    content:'';display:block;
    width:40px;height:1px;
    background:linear-gradient(90deg,transparent,#5a7c3f,transparent);
    margin:6px auto;
}
.fm-layout-botanical .fm-card .fm-card-desc{
    font-family:'Georgia','Playfair Display',serif;
    font-size:12px;color:#5a6b42;line-height:1.55;
    margin:4px 0 8px;
    font-style:italic;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-botanical .fm-card .fm-card-price{
    font-family:'Georgia','Playfair Display',serif;
    font-size:17px;font-weight:700;color:#8b3a2a;
    background:transparent;padding:4px 14px;
    display:inline-block;
    border-top:1px solid #8ba973;
    border-bottom:1px solid #8ba973;
    letter-spacing:1.5px;
    align-self:center;
    font-style:normal;
    margin-top:auto;
}
.fm-layout-botanical .fm-card .fm-card-bottom-row{
    margin:8px 0 0;padding:8px 10px 4px;
    border-top:1px dashed rgba(139,58,42,.3);
    background:transparent;
    justify-content:center;
}
.fm-layout-botanical .fm-card .fm-card-metas{gap:8px}
.fm-layout-botanical .fm-card .fm-meta{
    background:transparent;color:#5a6b42;
    border:1px solid #8ba973;border-radius:0;
    font-family:'Georgia',serif;font-size:11px;font-weight:400;
    font-style:italic;
    letter-spacing:.5px;
}
.fm-layout-botanical .fm-catbar{
    background:#fdf9ef!important;
    border:none!important;
    border-top:1px solid #5a7c3f!important;
    border-bottom:1px solid #5a7c3f!important;
    border-radius:0!important;
    padding:8px 4px!important;
    box-shadow:inset 0 1px 0 #fdf9ef, inset 0 -1px 0 #fdf9ef, 0 0 0 3px #8ba973, 0 0 0 4px #fdf9ef;
}
.fm-layout-botanical .fm-cat-item{
    font-family:'Georgia','Playfair Display',serif;
    font-size:14px;font-weight:400;color:#5a6b42;
    background:transparent;border:none;border-radius:0;
    padding:4px 14px;font-style:italic;
    letter-spacing:.5px;
}
.fm-layout-botanical .fm-cat-item.active{
    color:#8b3a2a;
    text-decoration:underline;text-underline-offset:4px;
    text-decoration-thickness:1px;
    font-weight:700;
}
@media(max-width:500px){
    .fm-layout-botanical .fm-cards{grid-template-columns:repeat(2,1fr);gap:24px 0}
    .fm-layout-botanical .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
}


/* ============================================================
   LAYOUT 22 — COMIC (fm-layout-comic)
   Comic book pop art. Yellow halftone dot background, thick
   black borders, colored panel top bands, speech bubbles,
   POW/WOW/BAM action stickers, bold sans-serif text, rotated
   accent tags, high energy pop colors.
   Design language: pop art, Roy Lichtenstein, bold, playful.
   ============================================================ */
.fm-layout-comic{
    background:
        radial-gradient(circle at 1px 1px, rgba(0,0,0,.08) 1px, transparent 1px) 0 0/8px 8px,
        #fde047;
    padding:12px 6px;
    border-radius:0;
}
.fm-layout-comic .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 14px;
    padding:4px 2px;
}
.fm-layout-comic .fm-section{margin-bottom:32px;position:relative}
.fm-layout-comic .fm-section-head{
    background:#000;
    border:3px solid #000;
    border-radius:0;
    padding:12px 18px;
    margin-bottom:18px;
    position:relative;
    transform:rotate(-1.5deg);
    box-shadow:5px 5px 0 #ef4444, 10px 10px 0 #000;
}
.fm-layout-comic .fm-section-head::before{
    content:'';position:absolute;top:-10px;right:20px;
    width:38px;height:38px;border-radius:50%;
    background:#ef4444;border:3px solid #000;
    box-shadow:3px 3px 0 #000;
    z-index:2;
}
.fm-layout-comic .fm-section-head::after{
    content:'NEW!';position:absolute;top:-5px;right:27px;
    font-family:'Arial Black','Impact',sans-serif;
    font-size:11px;font-weight:900;color:#fff;
    transform:rotate(12deg);
    z-index:3;
    text-shadow:1px 1px 0 #000;
}
.fm-layout-comic .fm-section-title{
    font-family:'Arial Black','Impact',sans-serif;
    font-size:22px;font-weight:900;color:#fde047;
    letter-spacing:-.5px;margin:0;
    text-transform:uppercase;
    text-shadow:3px 3px 0 #ef4444;
    line-height:1;
}
.fm-layout-comic .fm-section-title::before{content:'« '}
.fm-layout-comic .fm-section-title::after{content:' »'}
.fm-layout-comic .fm-section-line{display:none}

.fm-layout-comic .fm-card{
    background:#fff;
    border:3px solid #000;
    border-radius:0;
    padding:0;overflow:hidden;
    box-shadow:5px 5px 0 #000;
    transition:transform .2s ease, box-shadow .2s ease;
    display:flex;flex-direction:column;
    position:relative;
}
.fm-layout-comic .fm-card:hover{
    transform:translate(-3px,-3px) rotate(-.5deg);
    box-shadow:8px 8px 0 #000;
}
/* Rotate pop color per card */
.fm-layout-comic .fm-card:nth-child(5n+1){--cmc-pop:#ef4444;--cmc-sticker:'POW!'}
.fm-layout-comic .fm-card:nth-child(5n+2){--cmc-pop:#3b82f6;--cmc-sticker:'WOW!'}
.fm-layout-comic .fm-card:nth-child(5n+3){--cmc-pop:#10b981;--cmc-sticker:'ZAP!'}
.fm-layout-comic .fm-card:nth-child(5n+4){--cmc-pop:#a855f7;--cmc-sticker:'BAM!'}
.fm-layout-comic .fm-card:nth-child(5n+5){--cmc-pop:#f97316;--cmc-sticker:'BOOM!'}

/* Colored top band */
.fm-layout-comic .fm-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:6px;
    background:var(--cmc-pop,#ef4444);
    border-bottom:3px solid #000;
    z-index:1;
}
/* Action sticker in corner */
.fm-layout-comic .fm-card::after{
    content:var(--cmc-sticker,'POW!');
    position:absolute;top:10px;right:8px;z-index:4;
    padding:4px 10px;
    background:#fde047;border:2px solid #000;
    font-family:'Arial Black','Impact',sans-serif;
    font-size:11px;font-weight:900;color:#000;
    letter-spacing:.5px;
    transform:rotate(12deg);
    box-shadow:2px 2px 0 #000;
    clip-path:polygon(15% 0, 90% 5%, 100% 50%, 90% 95%, 15% 100%, 0 75%, 5% 25%);
}

.fm-layout-comic .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:12px 12px 0}
.fm-layout-comic .fm-card .fm-card-img-wrap{
    width:100%!important;height:140px!important;max-height:140px!important;
    border-radius:0!important;margin:0 0 10px;
    border:3px solid #000;
    position:relative;
}
.fm-layout-comic .fm-card .fm-card-img-wrap img{
    filter:saturate(1.25) contrast(1.15);
}
/* Halftone dot overlay on image */
.fm-layout-comic .fm-card .fm-card-img-wrap::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.12) 1px, transparent 1px) 0 0/6px 6px;
    mix-blend-mode:multiply;
    pointer-events:none;
}
.fm-layout-comic .fm-card .fm-card-body{
    padding:0 14px 10px;
    flex:1;display:flex;flex-direction:column;
    position:relative;
}
.fm-layout-comic .fm-card .fm-card-title{
    font-family:'Arial Black','Impact',sans-serif;
    font-size:18px;font-weight:900;color:#000;
    margin:0 0 4px;line-height:1;letter-spacing:-.3px;
    text-transform:uppercase;
}
.fm-layout-comic .fm-card .fm-card-desc{
    font-family:sans-serif;
    font-size:12px;color:#333;line-height:1.4;
    margin:4px 0 6px;font-weight:500;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    background:#f4f4f5;
    padding:5px 8px;border:2px solid #000;
    position:relative;
}
/* Speech-bubble tail for description */
.fm-layout-comic .fm-card .fm-card-desc::after{
    content:'';position:absolute;top:-2px;left:12px;
    width:10px;height:10px;background:#f4f4f5;
    border-left:2px solid #000;border-top:2px solid #000;
    transform:rotate(45deg);margin-top:-6px;
}
.fm-layout-comic .fm-card .fm-card-price{
    font-family:'Arial Black','Impact',sans-serif;
    font-size:22px;font-weight:900;color:#fff;
    background:var(--cmc-pop,#ef4444);
    padding:4px 14px;display:inline-block;
    border:3px solid #000;border-radius:0;
    letter-spacing:-.5px;
    align-self:flex-start;
    margin-top:4px;
    box-shadow:3px 3px 0 #000;
    transform:rotate(-2deg);
    text-shadow:1px 1px 0 #000;
}
.fm-layout-comic .fm-card .fm-card-bottom-row{
    margin:10px 0 0;padding:8px 12px;
    border-top:3px solid #000;
    background:#fde047;
}
.fm-layout-comic .fm-card .fm-card-metas{gap:6px}
.fm-layout-comic .fm-card .fm-meta{
    background:#000;color:#fff;
    border:2px solid #000;border-radius:0;
    font-family:'Arial Black','Impact',sans-serif;
    font-size:11px;font-weight:900;
    text-transform:uppercase;letter-spacing:.3px;
    padding:2px 8px;
}
.fm-layout-comic .fm-catbar{
    background:#000!important;
    border:3px solid #000!important;
    border-radius:0!important;
    padding:6px 8px!important;
    box-shadow:5px 5px 0 #ef4444;
}
.fm-layout-comic .fm-cat-item{
    font-family:'Arial Black','Impact',sans-serif;
    font-size:12px;font-weight:900;color:#fff;
    background:transparent;border:2px solid transparent;border-radius:0;
    padding:4px 12px;text-transform:uppercase;letter-spacing:.5px;
}
.fm-layout-comic .fm-cat-item.active{
    color:#000;background:#fde047;border-color:#000;
    transform:rotate(-1deg);
}
@media(max-width:440px){
    .fm-layout-comic .fm-cards{grid-template-columns:repeat(2,1fr);gap:22px 0}
    .fm-layout-comic .fm-card .fm-card-img-wrap{height:170px!important;max-height:170px!important}
    .fm-layout-comic .fm-section-title{font-size:18px}
}


/* ============================================================
   v11.14 - SIX NEW RESTAURANT/CAFE LAYOUT SYSTEMS
   Each with a completely distinct design language, catbar
   treatment, 4-shortcode toolbar treatment and entry animation.
   Layouts: menuboard, bistrot, streetfood, patisserie,
            steakhouse, izakaya
   All honour color theme CSS vars (--fm-bg, --fm-card-bg, etc.)
   so background presets and theme palettes still apply.
   ============================================================ */


/* ============================================================
   LAYOUT 23 — MENUBOARD (fm-layout-menuboard)
   Chalkboard restaurant menu. Matte black slate background with
   chalk-dust noise. Hand-sketched chalk serif typography. Cards
   are "chalk boxes" with chalked borders, scribbled dividers,
   chalked price circles. Catbar is a wooden chalkboard frame
   strip with pinned tags. Toolbar is a wooden bottom rail with
   chalked icons. Entry: chalk-write-in reveal.
   Design language: rustic, handmade, nostalgic, tactile.
   ============================================================ */
.fm-layout-menuboard{
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.035), transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,.025), transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.02), transparent 70%),
        repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 1px, rgba(255,255,255,.012) 1px, rgba(255,255,255,.012) 2px),
        linear-gradient(135deg, #1a2216 0%, #0f1410 100%);
    padding:16px 10px 22px;
    position:relative;
    color:#f4ecd8;
}
.fm-layout-menuboard::before{
    content:'';position:absolute;inset:6px;pointer-events:none;z-index:0;
    border:1px solid rgba(244,236,216,.12);
    border-radius:4px;
    box-shadow:inset 0 0 0 4px rgba(139,94,52,.35), inset 0 0 0 5px rgba(90,60,30,.6), inset 0 0 14px rgba(0,0,0,.5);
}
.fm-layout-menuboard > *{position:relative;z-index:1}
.fm-layout-menuboard .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px 18px;
    padding:6px 4px;
}
.fm-layout-menuboard .fm-section{margin-bottom:32px;position:relative}
.fm-layout-menuboard .fm-section-head{
    background:transparent!important;
    border:none!important;
    border-radius:0!important;
    padding:10px 0 14px;
    margin-bottom:18px;
    text-align:center;
    position:relative;
}
.fm-layout-menuboard .fm-section-head::before{
    content:'';position:absolute;bottom:4px;left:8%;right:8%;height:2px;
    background:
        linear-gradient(90deg, transparent, #f4ecd8 8%, #f4ecd8 92%, transparent),
        linear-gradient(90deg, transparent, rgba(244,236,216,.4) 15%, rgba(244,236,216,.4) 85%, transparent);
    background-size:100% 1px, 100% 2px;background-repeat:no-repeat;
    background-position:0 0, 0 100%;
    opacity:.85;
    filter:blur(.3px);
}
.fm-layout-menuboard .fm-section-head::after{
    content:'✦';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
    background:#1a2216;padding:0 10px;color:#f4ecd8;font-size:12px;opacity:.75;
}
.fm-layout-menuboard .fm-section-title{
    font-family:'Caveat','Kalam','Shadows Into Light','Playfair Display',cursive,serif;
    font-size:26px;font-weight:700;color:#f4ecd8;
    letter-spacing:1px;margin:0;line-height:1.1;
    text-shadow:0 1px 0 rgba(0,0,0,.4), 0 0 8px rgba(244,236,216,.08);
    filter:url(#chalk-rough);
}
.fm-layout-menuboard .fm-section-title::before{content:'— '}
.fm-layout-menuboard .fm-section-title::after{content:' —'}
.fm-layout-menuboard .fm-section-line{display:none}

.fm-layout-menuboard .fm-card{
    background:
        radial-gradient(ellipse at 50% 100%, rgba(244,236,216,.04), transparent 60%),
        rgba(26,34,22,.55);
    border:none;
    border-radius:2px;
    padding:10px 12px 12px;
    box-shadow:
        inset 0 0 0 1px rgba(244,236,216,.35),
        inset 0 0 0 2px rgba(244,236,216,.08),
        0 1px 0 rgba(0,0,0,.3);
    transition:transform .3s ease, box-shadow .3s ease;
    display:flex;flex-direction:column;
    position:relative;
    overflow:hidden;
    opacity:0;
    animation:fmMenuboardChalkIn .7s cubic-bezier(.4,0,.2,1) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.08s);
}
.fm-layout-menuboard .fm-card:hover{
    transform:translateY(-2px) rotate(-.3deg);
    box-shadow:
        inset 0 0 0 1px #f4ecd8,
        inset 0 0 0 2px rgba(244,236,216,.14),
        0 8px 22px rgba(0,0,0,.45);
}
/* scribbled corner decoration */
.fm-layout-menuboard .fm-card::before{
    content:'';position:absolute;top:4px;left:4px;width:14px;height:14px;
    background:
        linear-gradient(45deg, transparent 40%, rgba(244,236,216,.55) 40%, rgba(244,236,216,.55) 45%, transparent 45%),
        linear-gradient(45deg, transparent 52%, rgba(244,236,216,.35) 52%, rgba(244,236,216,.35) 56%, transparent 56%);
    pointer-events:none;
}
.fm-layout-menuboard .fm-card::after{
    content:'';position:absolute;bottom:4px;right:4px;width:14px;height:14px;
    background:
        linear-gradient(-135deg, transparent 40%, rgba(244,236,216,.55) 40%, rgba(244,236,216,.55) 45%, transparent 45%),
        linear-gradient(-135deg, transparent 52%, rgba(244,236,216,.35) 52%, rgba(244,236,216,.35) 56%, transparent 56%);
    pointer-events:none;
}

.fm-layout-menuboard .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:2px 0 0}
.fm-layout-menuboard .fm-card .fm-card-img-wrap{
    width:100%!important;height:130px!important;max-height:130px!important;
    border-radius:3px!important;margin:0 0 10px;
    filter:saturate(.8) brightness(.92) contrast(1.08);
    border:1px dashed rgba(244,236,216,.4);
    padding:3px;background:rgba(0,0,0,.3);
    box-shadow:inset 0 0 14px rgba(0,0,0,.4);
}
.fm-layout-menuboard .fm-card:hover .fm-card-img-wrap{filter:saturate(1) brightness(1) contrast(1)}
.fm-layout-menuboard .fm-card .fm-card-body{
    padding:2px 2px 2px;flex:1;display:flex;flex-direction:column;position:relative;
}
.fm-layout-menuboard .fm-card .fm-card-title{
    font-family:'Caveat','Kalam','Shadows Into Light',cursive,serif;
    font-size:20px;font-weight:700;color:#f4ecd8;
    margin:0 0 4px;line-height:1.1;letter-spacing:.3px;
    text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.fm-layout-menuboard .fm-card .fm-card-desc{
    font-family:'Caveat','Kalam',cursive,serif;
    font-size:14px;color:rgba(244,236,216,.7);line-height:1.4;
    margin:0 0 8px;font-style:italic;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-menuboard .fm-card .fm-card-price{
    font-family:'Caveat','Kalam',cursive,serif;
    font-size:20px;font-weight:700;color:#ffd98a;
    background:transparent;padding:4px 14px;
    display:inline-block;align-self:flex-start;
    border:2px solid #ffd98a;border-radius:50%;
    margin-top:auto;
    text-shadow:0 0 6px rgba(255,217,138,.25);
    letter-spacing:.3px;
    transform:rotate(-2deg);
}
.fm-layout-menuboard .fm-card .fm-card-bottom-row{
    margin:8px -12px -12px;padding:8px 12px;
    border-top:1px dashed rgba(244,236,216,.25);
    background:rgba(0,0,0,.18);
}
.fm-layout-menuboard .fm-card .fm-card-metas{gap:6px}
.fm-layout-menuboard .fm-card .fm-meta{
    background:transparent;color:rgba(244,236,216,.8);
    border:1px dashed rgba(244,236,216,.35);border-radius:10px;
    font-family:'Caveat','Kalam',cursive,serif;
    font-size:13px;font-weight:700;padding:1px 9px;letter-spacing:.3px;
}
.fm-layout-menuboard .fm-badge{
    background:#f4ecd8!important;color:#1a2216!important;
    border-radius:2px!important;
    font-family:'Caveat',cursive,serif!important;
    font-weight:700!important;font-size:14px!important;
    transform:rotate(-4deg);
    box-shadow:0 2px 4px rgba(0,0,0,.4);
}
/* CATBAR: wooden chalkboard strip with pinned tags */
.fm-layout-menuboard .fm-catbar{
    background:
        repeating-linear-gradient(90deg, #5a3c20 0, #5a3c20 60px, #4a3016 60px, #4a3016 62px, #5a3c20 62px, #5a3c20 90px, #523820 90px, #523820 92px) !important;
    border:none!important;
    border-radius:4px!important;
    padding:10px 12px!important;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.08),
        inset 0 -2px 0 rgba(0,0,0,.35),
        0 4px 12px rgba(0,0,0,.4);
    position:relative;
}
.fm-layout-menuboard .fm-catbar::before,
.fm-layout-menuboard .fm-catbar::after{
    content:'';position:absolute;top:50%;width:8px;height:8px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #b8860b, #6b4a08);
    box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 -1px 0 rgba(0,0,0,.4);
    transform:translateY(-50%);
}
.fm-layout-menuboard .fm-catbar::before{left:6px}
.fm-layout-menuboard .fm-catbar::after{right:6px}
.fm-layout-menuboard .fm-cat-item{
    font-family:'Caveat','Kalam',cursive,serif;
    font-size:16px;font-weight:700;color:#f4ecd8;
    background:rgba(26,34,22,.85);
    border:1px dashed rgba(244,236,216,.4);border-radius:3px;
    padding:4px 14px;letter-spacing:.3px;
    box-shadow:inset 0 0 0 1px rgba(244,236,216,.08), 0 2px 4px rgba(0,0,0,.4);
}
.fm-layout-menuboard .fm-cat-item.active{
    background:#f4ecd8;color:#1a2216;
    border-color:#1a2216;
    transform:rotate(-2deg);
    text-shadow:none;
}
/* TOOLBAR: wooden bottom rail with chalked icons */
.fm-layout-menuboard .fm-bottom-toolbar{
    background:
        repeating-linear-gradient(90deg, #5a3c20 0, #5a3c20 60px, #4a3016 60px, #4a3016 62px, #5a3c20 62px, #5a3c20 90px, #523820 90px, #523820 92px) !important;
    border-top:3px solid #2a1a08!important;
    box-shadow:inset 0 3px 0 rgba(255,255,255,.08), 0 -6px 16px rgba(0,0,0,.35);
}
.fm-layout-menuboard .fm-bottom-toolbar .fm-toolbar-item{
    background:rgba(26,34,22,.7)!important;
    border:1px dashed rgba(244,236,216,.35)!important;
    border-radius:4px!important;
    color:#f4ecd8!important;
}
.fm-layout-menuboard .fm-bottom-toolbar .fm-toolbar-item:hover{
    background:rgba(244,236,216,.15)!important;
    border-color:rgba(244,236,216,.7)!important;
}
@keyframes fmMenuboardChalkIn{
    0%{opacity:0;filter:blur(2px);transform:translateY(10px) scale(.95)}
    60%{opacity:.6;filter:blur(.5px)}
    100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}
@media(max-width:560px){
    .fm-layout-menuboard .fm-cards{grid-template-columns:repeat(2,1fr);gap:18px 0}
    .fm-layout-menuboard .fm-card .fm-card-img-wrap{height:170px!important;max-height:170px!important}
    .fm-layout-menuboard .fm-section-title{font-size:22px}
}


/* ============================================================
   LAYOUT 24 — BISTROT (fm-layout-bistrot)
   Parisian café / fine bistrot. Marble-veined card background,
   brass/gold hairline borders, numbered small-caps section
   titles, elegant Didone pricing with horizontal brass rule,
   serif italic descriptions. Catbar is a brass nameplate strip.
   Toolbar is a brass-rail foot. Entry: brass-shine sweep.
   Design language: elegant, refined, hospitality, French.
   ============================================================ */
.fm-layout-bistrot{
    background:
        radial-gradient(ellipse at top, rgba(198,168,110,.12), transparent 50%),
        radial-gradient(ellipse at bottom, rgba(198,168,110,.08), transparent 50%),
        linear-gradient(180deg, #fbf7f0 0%, #f4ede0 100%);
    padding:14px 8px 20px;
    position:relative;
}
.fm-layout-bistrot .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 14px;
    padding:6px 2px;
}
.fm-layout-bistrot .fm-section{margin-bottom:34px;position:relative;counter-increment:bistrot-sec}
.fm-layout-bistrot{counter-reset:bistrot-sec}
.fm-layout-bistrot .fm-section-head{
    background:transparent!important;
    border:none!important;border-radius:0!important;
    padding:10px 0;margin-bottom:20px;
    text-align:center;position:relative;
}
.fm-layout-bistrot .fm-section-head::before{
    content:'';position:absolute;top:50%;left:0;right:0;height:1px;
    background:linear-gradient(90deg, transparent, #c6a86e 20%, #c6a86e 80%, transparent);
    transform:translateY(-50%);z-index:0;
}
.fm-layout-bistrot .fm-section-title{
    font-family:'Playfair Display','Didot','Bodoni 72',serif;
    font-size:22px;font-weight:400;color:#3a2a16;
    letter-spacing:6px;margin:0;line-height:1;
    text-transform:uppercase;
    background:linear-gradient(180deg, #fbf7f0 0%, #f4ede0 100%);
    padding:0 18px;display:inline-block;position:relative;z-index:1;
}
.fm-layout-bistrot .fm-section-title::before{
    content:'— №' counter(bistrot-sec) ' —';
    display:block;font-family:'Playfair Display',serif;
    font-size:11px;font-style:italic;color:#8a6a3c;
    letter-spacing:3px;margin-bottom:4px;font-weight:400;
    text-transform:none;
}
.fm-layout-bistrot .fm-section-line{display:none}

.fm-layout-bistrot .fm-card{
    background:
        radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.8), transparent 40%),
        radial-gradient(ellipse at 80% 85%, rgba(230,220,200,.45), transparent 45%),
        linear-gradient(135deg, #fdfaf3 0%, #f5ede0 100%);
    border:1px solid #d9c79a;
    border-radius:3px;
    padding:10px 12px 12px;
    box-shadow:
        0 1px 0 #fff inset,
        0 0 0 3px rgba(198,168,110,.12),
        0 6px 16px rgba(90,60,30,.1);
    transition:transform .4s ease, box-shadow .4s ease;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    opacity:0;
    animation:fmBistrotReveal .9s cubic-bezier(.25,.46,.45,.94) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.09s);
}
.fm-layout-bistrot .fm-card:hover{
    transform:translateY(-3px);
    box-shadow:
        0 1px 0 #fff inset,
        0 0 0 3px rgba(198,168,110,.2),
        0 12px 30px rgba(90,60,30,.18);
}
/* marble vein decoration */
.fm-layout-bistrot .fm-card::before{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.18;z-index:0;
    background:
        radial-gradient(ellipse 60% 30% at 30% 20%, rgba(180,140,80,.6), transparent 70%),
        radial-gradient(ellipse 40% 20% at 80% 70%, rgba(140,100,50,.4), transparent 70%);
    filter:blur(.5px);
}
/* brass corner ornament */
.fm-layout-bistrot .fm-card::after{
    content:'❦';position:absolute;top:6px;right:8px;z-index:2;
    font-size:12px;color:#c6a86e;opacity:.7;line-height:1;
}
.fm-layout-bistrot .fm-card > *{position:relative;z-index:1}

.fm-layout-bistrot .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:0}
.fm-layout-bistrot .fm-card .fm-card-img-wrap{
    width:100%!important;height:125px!important;max-height:125px!important;
    border-radius:2px!important;margin:0 0 10px;
    border:1px solid #c6a86e;
    box-shadow:inset 0 0 0 3px #fdfaf3, 0 1px 3px rgba(90,60,30,.15);
    filter:sepia(.12) saturate(1.05);
}
.fm-layout-bistrot .fm-card .fm-card-body{padding:2px 4px;flex:1;display:flex;flex-direction:column}
.fm-layout-bistrot .fm-card .fm-card-title{
    font-family:'Playfair Display','Didot',serif;
    font-size:17px;font-weight:700;color:#3a2a16;
    margin:0 0 4px;line-height:1.15;letter-spacing:.2px;
}
.fm-layout-bistrot .fm-card .fm-card-desc{
    font-family:'Playfair Display','Georgia',serif;
    font-size:12px;color:#6b5940;line-height:1.5;
    margin:0 0 10px;font-style:italic;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-bistrot .fm-card .fm-card-price{
    font-family:'Playfair Display','Didot',serif;
    font-size:18px;font-weight:400;color:#8b3a1f;
    background:transparent;padding:6px 0 0;
    display:block;align-self:stretch;
    border-top:1px solid #c6a86e;
    text-align:center;margin-top:auto;
    letter-spacing:1px;font-style:italic;
    position:relative;
}
.fm-layout-bistrot .fm-card .fm-card-price::before{
    content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
    width:8px;height:3px;background:#c6a86e;border-radius:0 0 4px 4px;
}
.fm-layout-bistrot .fm-card .fm-card-bottom-row{
    margin:8px -12px -12px;padding:8px 12px;
    border-top:1px solid rgba(198,168,110,.4);
    background:linear-gradient(180deg, rgba(198,168,110,.08), rgba(198,168,110,.15));
}
.fm-layout-bistrot .fm-card .fm-card-metas{gap:6px}
.fm-layout-bistrot .fm-card .fm-meta{
    background:#fdfaf3;color:#6b5940;
    border:1px solid #c6a86e;border-radius:2px;
    font-family:'Playfair Display',serif;
    font-size:11px;font-weight:400;padding:1px 8px;
    font-style:italic;letter-spacing:.3px;
}
.fm-layout-bistrot .fm-badge{
    background:linear-gradient(135deg, #c6a86e, #8b6a30)!important;
    color:#fff!important;border-radius:2px!important;
    font-family:'Playfair Display',serif!important;
    font-size:11px!important;font-weight:700!important;
    letter-spacing:1.5px;text-transform:uppercase;
    box-shadow:0 2px 4px rgba(90,60,30,.25);
}
/* CATBAR: brass nameplate strip */
.fm-layout-bistrot .fm-catbar{
    background:linear-gradient(180deg, #d9c79a 0%, #c6a86e 50%, #a88a4e 100%)!important;
    border:1px solid #8b6a30!important;
    border-radius:4px!important;
    padding:8px 10px!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        inset 0 -1px 0 rgba(0,0,0,.2),
        0 4px 10px rgba(90,60,30,.2);
    position:relative;
}
.fm-layout-bistrot .fm-catbar::before,
.fm-layout-bistrot .fm-catbar::after{
    content:'';position:absolute;top:50%;width:6px;height:6px;
    background:radial-gradient(circle at 30% 30%, #fdfaf3, #8b6a30);
    border-radius:50%;transform:translateY(-50%);
    box-shadow:inset 0 -1px 1px rgba(0,0,0,.3);
}
.fm-layout-bistrot .fm-catbar::before{left:4px}
.fm-layout-bistrot .fm-catbar::after{right:4px}
.fm-layout-bistrot .fm-cat-item{
    font-family:'Playfair Display','Didot',serif;
    font-size:14px;font-weight:400;color:#3a2a16;
    background:rgba(253,250,243,.7);
    border:1px solid rgba(90,60,30,.3);border-radius:2px;
    padding:3px 14px;letter-spacing:2px;
    text-transform:uppercase;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.fm-layout-bistrot .fm-cat-item.active{
    background:#3a2a16;color:#fdfaf3;
    border-color:#3a2a16;letter-spacing:2.5px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}
/* TOOLBAR: brass rail foot */
.fm-layout-bistrot .fm-bottom-toolbar{
    background:linear-gradient(180deg, #d9c79a 0%, #c6a86e 50%, #a88a4e 100%)!important;
    border-top:2px solid #8b6a30!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 -4px 16px rgba(90,60,30,.15);
}
.fm-layout-bistrot .fm-bottom-toolbar .fm-toolbar-item{
    background:rgba(253,250,243,.7)!important;
    border:1px solid rgba(90,60,30,.35)!important;
    border-radius:3px!important;
    color:#3a2a16!important;
}
.fm-layout-bistrot .fm-bottom-toolbar .fm-toolbar-item:hover{
    background:#3a2a16!important;color:#fdfaf3!important;
}
@keyframes fmBistrotReveal{
    0%{opacity:0;transform:translateY(14px) scale(.97);filter:brightness(.7)}
    50%{filter:brightness(1.15)}
    100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}
}
@media(max-width:560px){
    .fm-layout-bistrot .fm-cards{grid-template-columns:repeat(2,1fr);gap:16px 0}
    .fm-layout-bistrot .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
    .fm-layout-bistrot .fm-section-title{font-size:18px;letter-spacing:4px}
}


/* ============================================================
   LAYOUT 25 — STREETFOOD (fm-layout-streetfood)
   Asian night-market neon sign. Dark lacquered steel background,
   neon-outlined display titles, chrome chip prices, dotted LED
   price strips, rubber-stamp badges. Catbar is a hanging
   paper-lantern row. Toolbar is a neon-lit bottom strip.
   Entry: neon flicker-on.
   Design language: vibrant, playful, urban, nighttime.
   ============================================================ */
.fm-layout-streetfood{
    background:
        radial-gradient(circle at 20% 20%, rgba(255,56,180,.14), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(56,212,255,.14), transparent 45%),
        radial-gradient(circle at 60% 50%, rgba(255,200,56,.08), transparent 55%),
        linear-gradient(180deg, #0d1320 0%, #0a0b14 100%);
    padding:14px 8px 22px;
    color:#f0ecff;
    position:relative;
}
/* subtle grid like tiled metal */
.fm-layout-streetfood::before{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.06;
    background:
        linear-gradient(90deg, #fff 1px, transparent 1px) 0 0/30px 30px,
        linear-gradient(0deg, #fff 1px, transparent 1px) 0 0/30px 30px;
}
.fm-layout-streetfood > *{position:relative;z-index:1}
.fm-layout-streetfood .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 14px;
    padding:6px 2px;
}
.fm-layout-streetfood .fm-section{margin-bottom:34px;position:relative}
.fm-layout-streetfood .fm-section-head{
    background:transparent!important;
    border:none!important;border-radius:0!important;
    padding:8px 0;margin-bottom:20px;
    text-align:center;position:relative;
}
.fm-layout-streetfood .fm-section-title{
    font-family:'Bebas Neue','Oswald','Teko','Impact',sans-serif;
    font-size:32px;font-weight:400;color:#fff;
    letter-spacing:4px;margin:0;line-height:1;
    text-transform:uppercase;
    text-shadow:
        0 0 6px #ff38b4, 0 0 14px #ff38b4, 0 0 30px rgba(255,56,180,.55),
        0 0 3px #fff;
}
.fm-layout-streetfood .fm-section-title::before{
    content:'◢';color:#38d4ff;margin-left:0;margin-right:10px;font-size:18px;
    text-shadow:0 0 6px #38d4ff, 0 0 14px #38d4ff;vertical-align:middle;
}
.fm-layout-streetfood .fm-section-title::after{
    content:'◣';color:#38d4ff;margin-left:10px;font-size:18px;
    text-shadow:0 0 6px #38d4ff, 0 0 14px #38d4ff;vertical-align:middle;
}
.fm-layout-streetfood .fm-section-line{display:none}

.fm-layout-streetfood .fm-card{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.2)),
        #151627;
    border:1px solid rgba(255,56,180,.35);
    border-radius:10px;
    padding:8px 10px 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 1px rgba(56,212,255,.15),
        0 0 18px rgba(255,56,180,.12),
        0 8px 18px rgba(0,0,0,.45);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    opacity:0;
    animation:fmStreetfoodFlicker 1s cubic-bezier(.23,1,.32,1) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.07s);
}
.fm-layout-streetfood .fm-card:hover{
    transform:translateY(-3px);
    border-color:#ff38b4;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 0 1px rgba(56,212,255,.4),
        0 0 32px rgba(255,56,180,.35),
        0 12px 28px rgba(0,0,0,.55);
}
.fm-layout-streetfood .fm-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg, #ff38b4, #b438ff, #38d4ff, #38ffb4);
    opacity:.85;
}
/* dotted LED decoration strip */
.fm-layout-streetfood .fm-card::after{
    content:'';position:absolute;bottom:62px;left:10px;right:10px;height:3px;
    background:radial-gradient(circle, #ffc838 45%, transparent 46%) 0 0/8px 3px repeat-x;
    opacity:.7;pointer-events:none;
}

.fm-layout-streetfood .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:2px 0 0}
.fm-layout-streetfood .fm-card .fm-card-img-wrap{
    width:100%!important;height:125px!important;max-height:125px!important;
    border-radius:6px!important;margin:0 0 10px;
    border:1px solid rgba(56,212,255,.3);
    filter:saturate(1.15) contrast(1.08);
}
.fm-layout-streetfood .fm-card .fm-card-body{padding:2px 3px 4px;flex:1;display:flex;flex-direction:column}
.fm-layout-streetfood .fm-card .fm-card-title{
    font-family:'Bebas Neue','Oswald','Teko','Impact',sans-serif;
    font-size:20px;font-weight:400;color:#fff;
    margin:0 0 4px;line-height:1.05;letter-spacing:2px;
    text-transform:uppercase;
    text-shadow:0 0 4px #38d4ff, 0 0 10px rgba(56,212,255,.45);
}
.fm-layout-streetfood .fm-card .fm-card-desc{
    font-family:'Fira Code','JetBrains Mono','SF Mono',monospace;
    font-size:11px;color:rgba(240,236,255,.65);line-height:1.4;
    margin:0 0 8px;letter-spacing:.3px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-streetfood .fm-card .fm-card-price{
    font-family:'Bebas Neue','Oswald','Teko',sans-serif;
    font-size:22px;font-weight:400;color:#0a0b14;
    background:linear-gradient(180deg, #ffc838 0%, #ffaa00 100%);
    padding:2px 14px;display:inline-block;align-self:flex-start;
    border-radius:3px;letter-spacing:1px;
    margin-top:auto;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -2px 0 rgba(0,0,0,.2),
        0 0 12px rgba(255,200,56,.5);
    text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.fm-layout-streetfood .fm-card .fm-card-bottom-row{
    margin:10px -10px -10px;padding:7px 10px;
    border-top:1px solid rgba(255,56,180,.22);
    background:linear-gradient(180deg, rgba(255,56,180,.08), rgba(0,0,0,.3));
}
.fm-layout-streetfood .fm-card .fm-card-metas{gap:6px}
.fm-layout-streetfood .fm-card .fm-meta{
    background:rgba(0,0,0,.4);color:#38d4ff;
    border:1px solid rgba(56,212,255,.4);border-radius:12px;
    font-family:'Fira Code','JetBrains Mono',monospace;
    font-size:10px;font-weight:600;padding:1px 8px;
    letter-spacing:.3px;
    text-shadow:0 0 3px rgba(56,212,255,.4);
}
.fm-layout-streetfood .fm-badge{
    background:#ff38b4!important;color:#fff!important;
    border:2px dashed rgba(255,255,255,.6)!important;
    border-radius:4px!important;
    font-family:'Bebas Neue','Oswald',sans-serif!important;
    font-weight:400!important;font-size:12px!important;
    letter-spacing:1.5px;text-transform:uppercase;
    transform:rotate(-6deg);
    box-shadow:0 0 12px rgba(255,56,180,.5);
}
/* CATBAR: hanging paper-lantern row */
.fm-layout-streetfood .fm-catbar{
    background:
        linear-gradient(180deg, rgba(255,56,180,.14), transparent 50%),
        #0f101c!important;
    border:none!important;
    border-radius:0 0 12px 12px!important;
    padding:12px 10px!important;
    border-top:2px solid rgba(255,56,180,.5)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,56,180,.3),
        0 0 18px rgba(255,56,180,.2);
    position:relative;
}
.fm-layout-streetfood .fm-catbar::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:radial-gradient(circle, #ff38b4 45%, transparent 46%) 0 0/14px 2px repeat-x;
}
.fm-layout-streetfood .fm-cat-item{
    font-family:'Bebas Neue','Oswald','Teko',sans-serif;
    font-size:14px;font-weight:400;color:#f0ecff;
    background:linear-gradient(180deg, rgba(255,56,180,.18), rgba(180,56,255,.1));
    border:1px solid rgba(255,56,180,.4);border-radius:16px;
    padding:4px 14px;letter-spacing:2px;
    text-transform:uppercase;
    position:relative;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.fm-layout-streetfood .fm-cat-item::before{
    content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
    width:1px;height:6px;background:rgba(255,56,180,.6);
}
.fm-layout-streetfood .fm-cat-item.active{
    background:linear-gradient(180deg, #ff38b4, #b438ff);
    border-color:#fff;color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 14px rgba(255,56,180,.6);
    text-shadow:0 0 6px rgba(255,255,255,.7);
}
/* TOOLBAR: neon-lit bottom strip */
.fm-layout-streetfood .fm-bottom-toolbar{
    background:linear-gradient(180deg, #151627 0%, #0a0b14 100%)!important;
    border-top:2px solid #ff38b4!important;
    box-shadow:
        inset 0 2px 0 rgba(56,212,255,.2),
        0 -6px 22px rgba(255,56,180,.25);
}
.fm-layout-streetfood .fm-bottom-toolbar .fm-toolbar-item{
    background:rgba(56,212,255,.07)!important;
    border:1px solid rgba(56,212,255,.35)!important;
    border-radius:10px!important;
    color:#38d4ff!important;
    box-shadow:inset 0 0 8px rgba(56,212,255,.12);
}
.fm-layout-streetfood .fm-bottom-toolbar .fm-toolbar-item:hover{
    background:rgba(255,56,180,.12)!important;
    border-color:#ff38b4!important;color:#ff38b4!important;
    box-shadow:inset 0 0 14px rgba(255,56,180,.25), 0 0 14px rgba(255,56,180,.3);
}
@keyframes fmStreetfoodFlicker{
    0%{opacity:0}
    15%{opacity:.7}
    20%{opacity:.1}
    30%{opacity:.9}
    35%{opacity:.4}
    50%{opacity:1}
    55%{opacity:.6}
    60%{opacity:1}
    100%{opacity:1}
}
@media(max-width:560px){
    .fm-layout-streetfood .fm-cards{grid-template-columns:repeat(2,1fr);gap:16px 0}
    .fm-layout-streetfood .fm-card .fm-card-img-wrap{height:175px!important;max-height:175px!important}
    .fm-layout-streetfood .fm-section-title{font-size:26px;letter-spacing:3px}
}


/* ============================================================
   LAYOUT 26 — PATISSERIE (fm-layout-patisserie)
   Pastel French pastry shop with lace doily edges. Soft pastel
   cream gradients, scalloped lace borders, ribbon section
   titles with ornate floret, ornate corner flourishes. Catbar
   is a ribbon row. Toolbar is a lace-trim panel.
   Entry: ribbon-unfurl.
   Design language: feminine, delicate, sweet, pâtisserie.
   ============================================================ */
.fm-layout-patisserie{
    background:
        radial-gradient(circle at 15% 20%, rgba(255,182,193,.35), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(213,185,235,.3), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255,240,225,.4), transparent 70%),
        linear-gradient(180deg, #fdf4ee 0%, #f8e8ee 100%);
    padding:14px 8px 22px;
    position:relative;
}
.fm-layout-patisserie .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px 16px;
    padding:6px 2px;
}
.fm-layout-patisserie .fm-section{margin-bottom:38px;position:relative}
.fm-layout-patisserie .fm-section-head{
    background:transparent!important;
    border:none!important;border-radius:0!important;
    padding:14px 0;margin-bottom:24px;
    text-align:center;position:relative;
}
/* ribbon banner */
.fm-layout-patisserie .fm-section-head::before{
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:min(82%,380px);height:42px;
    background:linear-gradient(180deg, #e97aa5 0%, #c84e83 100%);
    clip-path:polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
    box-shadow:0 4px 12px rgba(201,78,131,.25);
    z-index:0;
}
.fm-layout-patisserie .fm-section-title{
    font-family:'Playfair Display','Cormorant Garamond','Didot',serif;
    font-size:19px;font-weight:700;color:#fff;
    letter-spacing:3px;margin:0;line-height:1;
    text-transform:uppercase;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
    position:relative;z-index:1;
    padding:0 30px;
}
.fm-layout-patisserie .fm-section-title::before{
    content:'❁';margin-left:0;margin-right:8px;color:#ffdae5;font-size:14px;
}
.fm-layout-patisserie .fm-section-title::after{
    content:'❁';margin-left:8px;color:#ffdae5;font-size:14px;
}
.fm-layout-patisserie .fm-section-line{display:none}

.fm-layout-patisserie .fm-card{
    background:
        radial-gradient(ellipse at 30% 10%, rgba(255,255,255,.9), transparent 55%),
        linear-gradient(135deg, #fffaf6 0%, #fde6ef 100%);
    border:none;
    border-radius:18px;
    padding:10px 12px 12px;
    box-shadow:
        0 2px 0 rgba(255,255,255,.8) inset,
        0 0 0 2px #fff,
        0 0 0 3px rgba(232,122,165,.25),
        0 8px 22px rgba(201,78,131,.12);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
    display:flex;flex-direction:column;
    position:relative;overflow:visible;
    opacity:0;
    animation:fmPatisserieRibbon 1s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.1s);
}
.fm-layout-patisserie .fm-card:hover{
    transform:translateY(-4px) rotate(-.4deg);
    box-shadow:
        0 2px 0 rgba(255,255,255,.8) inset,
        0 0 0 2px #fff,
        0 0 0 3px #e97aa5,
        0 14px 30px rgba(201,78,131,.22);
}
/* scalloped lace edge (top) */
.fm-layout-patisserie .fm-card::before{
    content:'';position:absolute;top:-6px;left:10px;right:10px;height:8px;
    background:
        radial-gradient(circle at 4px 2px, #fff 3px, transparent 3.5px) 0 0/8px 8px repeat-x;
    filter:drop-shadow(0 1px 0 rgba(232,122,165,.3));
    z-index:2;pointer-events:none;
}
/* floret corner ornament */
.fm-layout-patisserie .fm-card::after{
    content:'❁';position:absolute;top:8px;right:12px;
    font-size:14px;color:#e97aa5;opacity:.65;z-index:2;pointer-events:none;
}

.fm-layout-patisserie .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:2px 0 0}
.fm-layout-patisserie .fm-card .fm-card-img-wrap{
    width:100%!important;height:130px!important;max-height:130px!important;
    border-radius:12px!important;margin:0 0 10px;
    border:2px solid #fff;
    box-shadow:
        0 0 0 1px rgba(232,122,165,.3),
        inset 0 -20px 20px -10px rgba(232,122,165,.1);
    filter:saturate(1.08) brightness(1.03);
}
.fm-layout-patisserie .fm-card .fm-card-body{padding:2px 4px;flex:1;display:flex;flex-direction:column;text-align:center}
.fm-layout-patisserie .fm-card .fm-card-title{
    font-family:'Playfair Display','Cormorant Garamond',serif;
    font-size:17px;font-weight:700;color:#5a2a3e;
    margin:0 0 4px;line-height:1.2;letter-spacing:.3px;
    font-style:italic;
}
.fm-layout-patisserie .fm-card .fm-card-title::after{
    content:'';display:block;width:28px;height:2px;
    background:linear-gradient(90deg, transparent, #e97aa5, transparent);
    margin:4px auto 0;
}
.fm-layout-patisserie .fm-card .fm-card-desc{
    font-family:'Playfair Display',serif;
    font-size:12px;color:#8a5a6e;line-height:1.5;
    margin:4px 0 10px;font-style:italic;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-patisserie .fm-card .fm-card-price{
    font-family:'Playfair Display','Cormorant Garamond',serif;
    font-size:18px;font-weight:700;color:#fff;
    background:linear-gradient(135deg, #e97aa5 0%, #c84e83 100%);
    padding:3px 16px;display:inline-block;align-self:center;
    border-radius:20px;letter-spacing:.5px;
    margin-top:auto;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.4),
        0 3px 8px rgba(201,78,131,.35);
}
.fm-layout-patisserie .fm-card .fm-card-bottom-row{
    margin:10px -12px -12px;padding:10px 12px;
    border-top:1px dashed rgba(232,122,165,.3);
    background:
        radial-gradient(circle at 4px 100%, #fff 3px, transparent 3.5px) 0 100%/8px 6px repeat-x,
        linear-gradient(180deg, rgba(255,218,229,.5), rgba(255,255,255,.6));
    padding-bottom:16px;
}
.fm-layout-patisserie .fm-card .fm-card-metas{gap:6px;justify-content:center}
.fm-layout-patisserie .fm-card .fm-meta{
    background:#fff;color:#c84e83;
    border:1px solid rgba(232,122,165,.45);border-radius:14px;
    font-family:'Playfair Display',serif;
    font-size:11px;font-weight:700;padding:1px 9px;
    font-style:italic;letter-spacing:.2px;
}
.fm-layout-patisserie .fm-badge{
    background:linear-gradient(135deg, #ffd86e, #ff9eb5)!important;
    color:#5a2a3e!important;
    border-radius:14px!important;
    font-family:'Playfair Display',serif!important;
    font-weight:700!important;font-size:11px!important;
    letter-spacing:.5px;font-style:italic;
    box-shadow:0 3px 8px rgba(232,122,165,.25);
    border:1.5px solid #fff!important;
}
/* CATBAR: ribbon row */
.fm-layout-patisserie .fm-catbar{
    background:linear-gradient(180deg, #fde6ef 0%, #f9d0df 100%)!important;
    border:none!important;
    border-radius:26px!important;
    padding:8px 12px!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        inset 0 -1px 0 rgba(201,78,131,.15),
        0 4px 14px rgba(201,78,131,.15),
        0 0 0 2px #fff,
        0 0 0 3px rgba(232,122,165,.25);
}
.fm-layout-patisserie .fm-cat-item{
    font-family:'Playfair Display','Cormorant Garamond',serif;
    font-size:13px;font-weight:700;color:#8a5a6e;
    background:#fff;
    border:1px solid rgba(232,122,165,.35);border-radius:14px;
    padding:3px 14px;letter-spacing:.8px;
    font-style:italic;text-transform:uppercase;
    box-shadow:0 1px 3px rgba(201,78,131,.1);
}
.fm-layout-patisserie .fm-cat-item.active{
    background:linear-gradient(135deg, #e97aa5, #c84e83);
    color:#fff;
    border-color:#fff;
    box-shadow:0 0 0 1.5px #c84e83, 0 3px 8px rgba(201,78,131,.3);
}
/* TOOLBAR: lace-trim panel */
.fm-layout-patisserie .fm-bottom-toolbar{
    background:linear-gradient(180deg, #fde6ef 0%, #f9d0df 100%)!important;
    border-top:none!important;
    box-shadow:0 -4px 18px rgba(201,78,131,.12);
    position:relative;
}
.fm-layout-patisserie .fm-bottom-toolbar::before{
    content:'';position:absolute;top:-5px;left:0;right:0;height:6px;
    background:radial-gradient(circle at 4px 6px, #fde6ef 3.5px, transparent 4px) 0 100%/8px 6px repeat-x;
    filter:drop-shadow(0 -1px 0 rgba(232,122,165,.2));
}
.fm-layout-patisserie .fm-bottom-toolbar .fm-toolbar-item{
    background:#fff!important;
    border:1px solid rgba(232,122,165,.35)!important;
    border-radius:14px!important;
    color:#c84e83!important;
    box-shadow:0 2px 6px rgba(201,78,131,.1);
}
.fm-layout-patisserie .fm-bottom-toolbar .fm-toolbar-item:hover{
    background:linear-gradient(135deg, #e97aa5, #c84e83)!important;
    color:#fff!important;border-color:#fff!important;
    box-shadow:0 0 0 1.5px #c84e83, 0 4px 10px rgba(201,78,131,.3);
}
@keyframes fmPatisserieRibbon{
    0%{opacity:0;transform:scale(.7) rotate(-4deg);filter:blur(4px)}
    60%{opacity:1;transform:scale(1.04) rotate(.5deg);filter:blur(0)}
    100%{opacity:1;transform:scale(1) rotate(0)}
}
@media(max-width:560px){
    .fm-layout-patisserie .fm-cards{grid-template-columns:repeat(2,1fr);gap:18px 0}
    .fm-layout-patisserie .fm-card .fm-card-img-wrap{height:175px!important;max-height:175px!important}
    .fm-layout-patisserie .fm-section-title{font-size:16px;letter-spacing:2px}
}


/* ============================================================
   LAYOUT 27 — STEAKHOUSE (fm-layout-steakhouse)
   Luxury wood-and-leather steakhouse. Rich walnut woodgrain
   backdrop, embossed leather card panels with gold foil
   stamping, serif display titles with gold hairline underline,
   wax-seal price medallion. Catbar is a gold-embossed leather
   strip. Toolbar is a leather-bound rail.
   Entry: slide-and-press with depth.
   Design language: masculine, luxurious, classical, premium.
   ============================================================ */
.fm-layout-steakhouse{
    background:
        radial-gradient(ellipse at 20% 10%, rgba(180,130,60,.08), transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(100,60,20,.12), transparent 55%),
        repeating-linear-gradient(90deg, rgba(70,35,10,.12) 0, rgba(70,35,10,.12) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(180deg, rgba(120,70,30,.06) 0, rgba(120,70,30,.06) 2px, transparent 2px, transparent 5px),
        linear-gradient(135deg, #3a2312 0%, #281608 100%);
    padding:14px 8px 22px;
    color:#f4e4c8;
    position:relative;
}
.fm-layout-steakhouse .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 14px;
    padding:6px 2px;
}
.fm-layout-steakhouse .fm-section{margin-bottom:36px;position:relative}
.fm-layout-steakhouse .fm-section-head{
    background:transparent!important;
    border:none!important;border-radius:0!important;
    padding:12px 0;margin-bottom:22px;
    text-align:center;position:relative;
}
.fm-layout-steakhouse .fm-section-head::before,
.fm-layout-steakhouse .fm-section-head::after{
    content:'';position:absolute;top:50%;width:40%;height:1px;
    background:linear-gradient(90deg, transparent, #d4a76a 40%, #d4a76a 60%, transparent);
    transform:translateY(-50%);
}
.fm-layout-steakhouse .fm-section-head::before{left:0}
.fm-layout-steakhouse .fm-section-head::after{right:0}
.fm-layout-steakhouse .fm-section-title{
    font-family:'Playfair Display','Cinzel','Trajan Pro',serif;
    font-size:22px;font-weight:700;color:#d4a76a;
    letter-spacing:5px;margin:0;line-height:1;
    text-transform:uppercase;
    background:
        linear-gradient(180deg, #e8c989, #a37a3c);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 1px 0 rgba(0,0,0,.3);
    display:inline-block;padding:0 18px;
    position:relative;z-index:1;
}
.fm-layout-steakhouse .fm-section-title::before,
.fm-layout-steakhouse .fm-section-title::after{
    content:'◆';color:#d4a76a;-webkit-text-fill-color:#d4a76a;
    font-size:10px;vertical-align:middle;margin:0 10px;
}
.fm-layout-steakhouse .fm-section-line{display:none}

.fm-layout-steakhouse .fm-card{
    background:
        radial-gradient(ellipse at 20% 15%, rgba(215,168,110,.08), transparent 55%),
        linear-gradient(135deg, #2a1a0c 0%, #1a0f06 100%);
    border:1px solid #5a3a1a;
    border-radius:4px;
    padding:10px 12px 12px;
    box-shadow:
        inset 0 1px 0 rgba(215,168,110,.2),
        inset 0 -1px 0 rgba(0,0,0,.6),
        inset 0 0 0 2px rgba(215,168,110,.08),
        0 2px 0 rgba(0,0,0,.4),
        0 8px 18px rgba(0,0,0,.45);
    transition:transform .35s ease, box-shadow .35s ease;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    opacity:0;
    animation:fmSteakhousePress .8s cubic-bezier(.4,0,.2,1) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.08s);
}
.fm-layout-steakhouse .fm-card:hover{
    transform:translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(215,168,110,.3),
        inset 0 -1px 0 rgba(0,0,0,.6),
        inset 0 0 0 2px rgba(215,168,110,.18),
        0 2px 0 rgba(0,0,0,.4),
        0 14px 30px rgba(0,0,0,.55);
}
/* embossed leather texture */
.fm-layout-steakhouse .fm-card::before{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:.25;z-index:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(215,168,110,.15) 0, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(215,168,110,.12) 0, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(215,168,110,.1) 0, transparent 1px);
    background-size:8px 8px, 12px 12px, 10px 10px;
}
/* gold hairline frame */
.fm-layout-steakhouse .fm-card::after{
    content:'';position:absolute;inset:4px;pointer-events:none;
    border:1px solid rgba(215,168,110,.25);border-radius:2px;z-index:0;
}
.fm-layout-steakhouse .fm-card > *{position:relative;z-index:1}

.fm-layout-steakhouse .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:2px 0 0}
.fm-layout-steakhouse .fm-card .fm-card-img-wrap{
    width:100%!important;height:125px!important;max-height:125px!important;
    border-radius:2px!important;margin:0 0 10px;
    border:1px solid #8a5a2a;
    box-shadow:inset 0 0 0 2px #1a0f06, 0 1px 3px rgba(0,0,0,.5);
    filter:brightness(.95) contrast(1.1) saturate(.9);
}
.fm-layout-steakhouse .fm-card .fm-card-body{padding:2px 4px;flex:1;display:flex;flex-direction:column}
.fm-layout-steakhouse .fm-card .fm-card-title{
    font-family:'Playfair Display','Cinzel',serif;
    font-size:17px;font-weight:700;color:#f4e4c8;
    margin:0 0 4px;line-height:1.2;letter-spacing:1px;
    text-transform:uppercase;
    position:relative;padding-bottom:6px;
}
.fm-layout-steakhouse .fm-card .fm-card-title::after{
    content:'';position:absolute;bottom:0;left:0;width:32px;height:1px;
    background:linear-gradient(90deg, #d4a76a, transparent);
}
.fm-layout-steakhouse .fm-card .fm-card-desc{
    font-family:'Playfair Display','Georgia',serif;
    font-size:12px;color:rgba(244,228,200,.7);line-height:1.55;
    margin:0 0 10px;font-style:italic;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-steakhouse .fm-card .fm-card-price{
    font-family:'Playfair Display','Cinzel',serif;
    font-size:17px;font-weight:700;color:#1a0f06;
    background:
        radial-gradient(circle at 30% 25%, #f4d488, transparent 45%),
        linear-gradient(135deg, #d4a76a 0%, #a37a3c 100%);
    padding:4px 14px;display:inline-block;align-self:flex-start;
    border-radius:1px;letter-spacing:1.5px;
    margin-top:auto;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.3),
        inset 0 -1px 0 rgba(0,0,0,.3),
        0 2px 4px rgba(0,0,0,.4);
    border:1px solid #8a5a2a;
}
.fm-layout-steakhouse .fm-card .fm-card-bottom-row{
    margin:10px -12px -12px;padding:8px 12px;
    border-top:1px solid rgba(215,168,110,.25);
    background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.4));
}
.fm-layout-steakhouse .fm-card .fm-card-metas{gap:6px}
.fm-layout-steakhouse .fm-card .fm-meta{
    background:transparent;color:#d4a76a;
    border:1px solid rgba(215,168,110,.4);border-radius:2px;
    font-family:'Playfair Display',serif;
    font-size:11px;font-weight:700;padding:1px 8px;
    letter-spacing:1px;text-transform:uppercase;
}
.fm-layout-steakhouse .fm-badge{
    background:linear-gradient(135deg, #8b2a1f, #5a1812)!important;
    color:#f4e4c8!important;
    border:1px solid #d4a76a!important;
    border-radius:1px!important;
    font-family:'Playfair Display',serif!important;
    font-weight:700!important;font-size:10px!important;
    letter-spacing:1.5px;text-transform:uppercase;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.4);
}
/* CATBAR: gold-embossed leather strip */
.fm-layout-steakhouse .fm-catbar{
    background:
        repeating-linear-gradient(90deg, rgba(70,35,10,.2) 0, rgba(70,35,10,.2) 1px, transparent 1px, transparent 4px),
        linear-gradient(180deg, #3a2312 0%, #2a1808 100%)!important;
    border:1px solid #5a3a1a!important;
    border-radius:3px!important;
    padding:8px 10px!important;
    box-shadow:
        inset 0 1px 0 rgba(215,168,110,.2),
        inset 0 -1px 0 rgba(0,0,0,.4),
        inset 0 0 0 3px rgba(215,168,110,.08),
        0 4px 14px rgba(0,0,0,.4);
    position:relative;
}
.fm-layout-steakhouse .fm-catbar::before{
    content:'';position:absolute;top:3px;left:3px;right:3px;bottom:3px;
    border:1px solid rgba(215,168,110,.2);border-radius:1px;pointer-events:none;
}
.fm-layout-steakhouse .fm-cat-item{
    font-family:'Playfair Display','Cinzel',serif;
    font-size:13px;font-weight:700;color:#d4a76a;
    background:transparent;
    border:1px solid rgba(215,168,110,.2);border-radius:1px;
    padding:4px 14px;letter-spacing:2px;
    text-transform:uppercase;
}
.fm-layout-steakhouse .fm-cat-item.active{
    background:linear-gradient(135deg, #d4a76a, #a37a3c);
    color:#1a0f06;
    border-color:#f4d488;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 4px rgba(0,0,0,.4);
    text-shadow:0 1px 0 rgba(255,255,255,.15);
}
/* TOOLBAR: leather-bound rail */
.fm-layout-steakhouse .fm-bottom-toolbar{
    background:
        repeating-linear-gradient(90deg, rgba(70,35,10,.2) 0, rgba(70,35,10,.2) 1px, transparent 1px, transparent 4px),
        linear-gradient(180deg, #3a2312 0%, #1a0f06 100%)!important;
    border-top:2px solid #5a3a1a!important;
    box-shadow:
        inset 0 2px 0 rgba(215,168,110,.15),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 -6px 18px rgba(0,0,0,.45);
}
.fm-layout-steakhouse .fm-bottom-toolbar .fm-toolbar-item{
    background:rgba(0,0,0,.35)!important;
    border:1px solid rgba(215,168,110,.3)!important;
    border-radius:2px!important;
    color:#d4a76a!important;
    box-shadow:inset 0 1px 0 rgba(215,168,110,.08);
}
.fm-layout-steakhouse .fm-bottom-toolbar .fm-toolbar-item:hover{
    background:linear-gradient(135deg, #d4a76a, #a37a3c)!important;
    color:#1a0f06!important;
    border-color:#f4d488!important;
}
@keyframes fmSteakhousePress{
    0%{opacity:0;transform:translateY(-14px) scale(1.05);filter:brightness(.6)}
    60%{opacity:1;filter:brightness(1.1)}
    100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}
}
@media(max-width:560px){
    .fm-layout-steakhouse .fm-cards{grid-template-columns:repeat(2,1fr);gap:16px 0}
    .fm-layout-steakhouse .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
    .fm-layout-steakhouse .fm-section-title{font-size:18px;letter-spacing:3px}
}


/* ============================================================
   LAYOUT 28 — IZAKAYA (fm-layout-izakaya)
   Japanese izakaya pub. Dark wood-slat background, paper
   lantern glow, red hanko (seal) stamps, vertical kanji-style
   accent stripe, green tatami flourishes, brush-stroke section
   titles. Catbar as hanging wooden kanban plaques. Toolbar as
   red-lacquered bottom rail.
   Entry: lantern-bob sway.
   Design language: Japanese, warm, traditional, intimate.
   ============================================================ */
.fm-layout-izakaya{
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 1px, transparent 1px, transparent 38px),
        repeating-linear-gradient(90deg, transparent 0, transparent 36px, rgba(0,0,0,.3) 36px, rgba(0,0,0,.3) 38px),
        radial-gradient(ellipse at 50% 20%, rgba(220,120,60,.12), transparent 55%),
        linear-gradient(180deg, #241710 0%, #1a0f08 100%);
    padding:14px 8px 22px;
    color:#f0e2c8;
    position:relative;
}
.fm-layout-izakaya .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 14px;
    padding:6px 2px;
}
.fm-layout-izakaya .fm-section{margin-bottom:36px;position:relative}
.fm-layout-izakaya .fm-section-head{
    background:transparent!important;
    border:none!important;border-radius:0!important;
    padding:12px 0 14px;margin-bottom:20px;
    text-align:center;position:relative;
}
/* brushstroke underline */
.fm-layout-izakaya .fm-section-head::after{
    content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
    width:80px;height:5px;
    background:
        radial-gradient(ellipse at 0 50%, #d4231c, transparent 80%),
        radial-gradient(ellipse at 100% 50%, #d4231c, transparent 80%),
        linear-gradient(90deg, transparent, #d4231c 20%, #8b1812 50%, #d4231c 80%, transparent);
    border-radius:50%;
    filter:blur(.5px);
    opacity:.85;
}
.fm-layout-izakaya .fm-section-title{
    font-family:'Shippori Mincho','Noto Serif JP','Playfair Display',serif;
    font-size:23px;font-weight:700;color:#f0e2c8;
    letter-spacing:3px;margin:0;line-height:1.1;
    text-shadow:0 1px 0 rgba(0,0,0,.5);
    position:relative;
    display:inline-block;
}
.fm-layout-izakaya .fm-section-title::before{
    content:'居';color:#d4231c;font-size:14px;font-weight:400;
    background:#f0e2c8;padding:1px 4px;border-radius:2px;
    margin-right:10px;vertical-align:middle;
    box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.fm-layout-izakaya .fm-section-line{display:none}

.fm-layout-izakaya .fm-card{
    background:
        linear-gradient(180deg, #3a2418 0%, #281710 100%);
    border:none;
    border-radius:4px;
    padding:10px 12px 12px;
    box-shadow:
        inset 0 1px 0 rgba(240,226,200,.08),
        inset 0 0 0 1px rgba(240,226,200,.1),
        0 4px 0 #1a0f08,
        0 10px 22px rgba(0,0,0,.45);
    transition:transform .4s ease, box-shadow .4s ease;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    opacity:0;
    animation:fmIzakayaLantern 1s ease-out forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.09s);
    transform-origin:top center;
}
.fm-layout-izakaya .fm-card:hover{
    transform:translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(240,226,200,.12),
        inset 0 0 0 1px rgba(212,35,28,.4),
        0 4px 0 #1a0f08,
        0 16px 32px rgba(0,0,0,.6);
}
/* vertical accent bar (right side, like a kanban plate) */
.fm-layout-izakaya .fm-card::before{
    content:'';position:absolute;top:8px;bottom:8px;right:0;width:4px;
    background:linear-gradient(180deg, #d4231c 0%, #8b1812 100%);
    box-shadow:inset 1px 0 0 rgba(255,255,255,.2), -1px 0 2px rgba(0,0,0,.3);
}
/* red seal stamp (hanko) */
.fm-layout-izakaya .fm-card::after{
    content:'印';position:absolute;top:10px;right:12px;z-index:2;
    width:22px;height:22px;
    font-family:'Shippori Mincho','Noto Serif JP',serif;
    font-size:11px;color:#f0e2c8;font-weight:700;
    background:linear-gradient(135deg, #d4231c, #8b1812);
    border:1px solid #8b1812;
    display:flex;align-items:center;justify-content:center;
    transform:rotate(6deg);
    opacity:.85;
    box-shadow:0 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
    border-radius:1px;
}

.fm-layout-izakaya .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:2px 8px 0 0}
.fm-layout-izakaya .fm-card .fm-card-img-wrap{
    width:100%!important;height:125px!important;max-height:125px!important;
    border-radius:2px!important;margin:0 0 10px;
    border:1px solid rgba(240,226,200,.2);
    box-shadow:inset 0 0 0 1px #1a0f08, 0 1px 3px rgba(0,0,0,.5);
    filter:saturate(1.05) contrast(1.05);
}
.fm-layout-izakaya .fm-card .fm-card-body{padding:2px 8px 2px 2px;flex:1;display:flex;flex-direction:column}
.fm-layout-izakaya .fm-card .fm-card-title{
    font-family:'Shippori Mincho','Noto Serif JP','Playfair Display',serif;
    font-size:17px;font-weight:700;color:#f0e2c8;
    margin:0 0 4px;line-height:1.2;letter-spacing:1px;
}
.fm-layout-izakaya .fm-card .fm-card-desc{
    font-family:'Noto Serif JP','Playfair Display','Georgia',serif;
    font-size:12px;color:rgba(240,226,200,.65);line-height:1.55;
    margin:0 0 10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-izakaya .fm-card .fm-card-price{
    font-family:'Shippori Mincho','Noto Serif JP','Playfair Display',serif;
    font-size:17px;font-weight:700;color:#ffcd5c;
    background:transparent;padding:4px 0 4px 12px;
    display:block;align-self:stretch;
    border-left:3px solid #d4231c;
    letter-spacing:1px;
    margin-top:auto;
    text-shadow:0 0 8px rgba(255,205,92,.25);
}
.fm-layout-izakaya .fm-card .fm-card-bottom-row{
    margin:10px -12px -12px;padding:8px 12px;
    border-top:1px solid rgba(240,226,200,.12);
    background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}
.fm-layout-izakaya .fm-card .fm-card-metas{gap:6px}
.fm-layout-izakaya .fm-card .fm-meta{
    background:rgba(240,226,200,.06);color:#f0e2c8;
    border:1px solid rgba(240,226,200,.22);border-radius:1px;
    font-family:'Noto Serif JP','Playfair Display',serif;
    font-size:11px;font-weight:400;padding:1px 8px;letter-spacing:.5px;
}
.fm-layout-izakaya .fm-badge{
    background:linear-gradient(135deg, #d4231c, #8b1812)!important;
    color:#f0e2c8!important;
    border-radius:1px!important;
    font-family:'Shippori Mincho','Noto Serif JP',serif!important;
    font-weight:700!important;font-size:11px!important;
    letter-spacing:1px;
    border:1px solid #f0e2c8!important;
    box-shadow:0 2px 4px rgba(0,0,0,.4);
    transform:rotate(-4deg);
}
/* CATBAR: hanging wooden kanban plaques */
.fm-layout-izakaya .fm-catbar{
    background:linear-gradient(180deg, #241710 0%, #1a0f08 100%)!important;
    border:none!important;
    border-top:2px solid #d4231c!important;
    border-radius:0!important;
    padding:14px 10px 8px!important;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.4);
    position:relative;
}
/* string across the top */
.fm-layout-izakaya .fm-catbar::before{
    content:'';position:absolute;top:4px;left:10%;right:10%;height:1px;
    background:linear-gradient(90deg, transparent, rgba(240,226,200,.4) 10%, rgba(240,226,200,.4) 90%, transparent);
}
.fm-layout-izakaya .fm-cat-item{
    font-family:'Shippori Mincho','Noto Serif JP','Playfair Display',serif;
    font-size:13px;font-weight:700;color:#f0e2c8;
    background:linear-gradient(180deg, #5a3a24 0%, #3a2414 100%);
    border:1px solid #1a0f08;border-radius:2px;
    padding:4px 14px;letter-spacing:1px;
    box-shadow:
        inset 0 1px 0 rgba(240,226,200,.15),
        inset 0 -1px 0 rgba(0,0,0,.3),
        0 3px 6px rgba(0,0,0,.4);
    position:relative;
}
.fm-layout-izakaya .fm-cat-item::before{
    content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
    width:1px;height:8px;background:rgba(240,226,200,.5);
}
.fm-layout-izakaya .fm-cat-item.active{
    background:linear-gradient(180deg, #d4231c 0%, #8b1812 100%);
    color:#f0e2c8;border-color:#f0e2c8;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 -1px 0 rgba(0,0,0,.3),
        0 3px 8px rgba(212,35,28,.4);
}
/* TOOLBAR: red-lacquered bottom rail */
.fm-layout-izakaya .fm-bottom-toolbar{
    background:
        linear-gradient(180deg, #d4231c 0%, #8b1812 100%)!important;
    border-top:3px solid #1a0f08!important;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.3),
        0 -6px 18px rgba(212,35,28,.25);
}
.fm-layout-izakaya .fm-bottom-toolbar .fm-toolbar-item{
    background:rgba(26,15,8,.55)!important;
    border:1px solid rgba(240,226,200,.3)!important;
    border-radius:2px!important;
    color:#f0e2c8!important;
    box-shadow:inset 0 1px 0 rgba(240,226,200,.1);
}
.fm-layout-izakaya .fm-bottom-toolbar .fm-toolbar-item:hover{
    background:rgba(240,226,200,.15)!important;
    border-color:#f0e2c8!important;
}
@keyframes fmIzakayaLantern{
    0%{opacity:0;transform:translateY(-8px) rotate(-2deg) scale(.96)}
    40%{opacity:.7;transform:translateY(2px) rotate(1deg) scale(1.01)}
    70%{transform:translateY(-1px) rotate(-.5deg) scale(1)}
    100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}
@media(max-width:560px){
    .fm-layout-izakaya .fm-cards{grid-template-columns:repeat(2,1fr);gap:16px 0}
    .fm-layout-izakaya .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
    .fm-layout-izakaya .fm-section-title{font-size:19px;letter-spacing:2px}
}



/* ============================================================
   LAYOUT 29 — SPEAKEASY (fm-layout-speakeasy)
   Art Deco 1920s cocktail lounge. Deep emerald background with
   gold chevron & fan ornaments, stepped-pyramid frames, vertical
   zigzag side panels on cards. Section-title inside a gold arch
   with corner fans. Catbar as gilt nameplate strip with stepped
   edges; toolbar as brass rail with notched corners. Section and
   card use the theme's sh-color + active-border for gilt tones
   while keeping the deep lacquered backdrop signature.
   Entry: stepped staircase rise with gold shadow bloom.
   Design language: opulent, geometric, gilded, mysterious.
   ============================================================ */
.fm-layout-speakeasy{
    --fm-sp-dark:#0e2a26;
    --fm-sp-dark2:#071a17;
    --fm-sp-gold:var(--fm-catbar-active-border,#c9a24a);
    --fm-sp-gold-2:var(--fm-sh-color,#8b6a20);
    --fm-sp-cream:var(--fm-card-bg,#fdf7e3);
    background:
        /* diagonal gold chevron rays at corners */
        radial-gradient(ellipse at 0% 0%, rgba(201,162,74,.12), transparent 35%),
        radial-gradient(ellipse at 100% 100%, rgba(201,162,74,.12), transparent 35%),
        repeating-linear-gradient(0deg, transparent 0 28px, rgba(201,162,74,.04) 28px 29px),
        linear-gradient(180deg, var(--fm-sp-dark) 0%, var(--fm-sp-dark2) 100%);
    padding:16px 8px 22px;
    color:#f0e2b9;
    position:relative;
}
/* gold chevron band at top */
.fm-layout-speakeasy::before{
    content:'';position:absolute;top:0;left:0;right:0;height:5px;
    background:
        linear-gradient(90deg,
            transparent 0, transparent 10px,
            var(--fm-sp-gold) 10px, var(--fm-sp-gold) 12px,
            transparent 12px, transparent 22px,
            var(--fm-sp-gold-2) 22px, var(--fm-sp-gold-2) 24px,
            transparent 24px),
        linear-gradient(180deg, var(--fm-sp-gold), var(--fm-sp-gold-2));
    background-size:34px 100%, 100% 100%;
    opacity:.65;pointer-events:none;
}
.fm-layout-speakeasy .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px 14px;
    padding:8px 2px;
}
.fm-layout-speakeasy .fm-section{margin-bottom:40px;position:relative}

/* Section head: gold arched plate with stepped fan corners */
.fm-layout-speakeasy .fm-section-head{
    background:transparent!important;
    border:none!important;border-radius:0!important;
    padding:14px 0 18px;margin-bottom:22px;
    text-align:center;position:relative;
}
.fm-layout-speakeasy .fm-section-head::before{
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:min(80%,320px);height:56px;
    border:1px solid var(--fm-sp-gold);
    border-radius:28px 28px 2px 2px;
    background:
        linear-gradient(180deg, rgba(240,213,130,.06), rgba(139,106,32,.12));
    box-shadow:
        inset 0 0 0 3px rgba(14,42,38,.5),
        inset 0 0 0 4px rgba(201,162,74,.5),
        0 0 0 3px transparent,
        0 4px 0 -2px rgba(201,162,74,.35);
    z-index:0;
}
.fm-layout-speakeasy .fm-section-head::after{
    content:'';position:absolute;top:-2px;left:50%;transform:translateX(-50%);
    width:16px;height:16px;
    background:
        conic-gradient(from 180deg at 50% 100%,
            transparent 0deg 30deg,
            var(--fm-sp-gold) 30deg 60deg,
            transparent 60deg 90deg,
            var(--fm-sp-gold) 90deg 120deg,
            transparent 120deg 150deg,
            var(--fm-sp-gold) 150deg 180deg,
            transparent 180deg);
    z-index:1;opacity:.9;
}
.fm-layout-speakeasy .fm-section-title{
    font-family:'Playfair Display','Cinzel','Didot',serif;
    font-size:22px;font-weight:700;color:var(--fm-sp-gold);
    letter-spacing:8px;margin:0;line-height:1;
    text-transform:uppercase;
    position:relative;z-index:2;
    padding:0 24px;
    text-shadow:0 1px 0 rgba(0,0,0,.6), 0 0 10px rgba(201,162,74,.3);
}
.fm-layout-speakeasy .fm-section-title::before,
.fm-layout-speakeasy .fm-section-title::after{
    content:'◆';color:var(--fm-sp-gold);font-size:10px;
    vertical-align:middle;margin:0 12px;opacity:.85;
}
.fm-layout-speakeasy .fm-section-line{display:none}

/* Card: stepped-frame with Art Deco fan corner */
.fm-layout-speakeasy .fm-card{
    background:linear-gradient(180deg, #12332e 0%, #0a201c 100%);
    border:none;
    border-radius:0;
    padding:10px 12px 14px;
    box-shadow:
        inset 0 0 0 1px var(--fm-sp-gold),
        inset 0 0 0 3px rgba(14,42,38,.5),
        inset 0 0 0 4px rgba(201,162,74,.3),
        0 6px 22px rgba(0,0,0,.45);
    transition:transform .45s cubic-bezier(.25,.46,.45,.94), box-shadow .45s ease;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    opacity:0;
    animation:fmSpeakeasyStep 1s cubic-bezier(.25,.46,.45,.94) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.09s);
    /* stepped clip-path at top */
    clip-path:polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.fm-layout-speakeasy .fm-card:hover{
    transform:translateY(-4px);
    box-shadow:
        inset 0 0 0 1px #f0d582,
        inset 0 0 0 3px rgba(14,42,38,.5),
        inset 0 0 0 4px rgba(240,213,130,.5),
        0 14px 30px rgba(0,0,0,.55),
        0 0 22px rgba(201,162,74,.2);
}
/* fan at top-right corner */
.fm-layout-speakeasy .fm-card::before{
    content:'';position:absolute;top:-6px;right:-6px;
    width:28px;height:28px;
    background:
        repeating-conic-gradient(from 180deg at 0% 100%,
            var(--fm-sp-gold) 0deg 8deg,
            transparent 8deg 18deg);
    opacity:.55;z-index:2;pointer-events:none;
}
/* vertical gold zigzag on left */
.fm-layout-speakeasy .fm-card::after{
    content:'';position:absolute;top:10px;bottom:10px;left:4px;width:3px;
    background:
        linear-gradient(180deg,
            var(--fm-sp-gold) 0 8px, transparent 8px 16px,
            var(--fm-sp-gold) 16px 24px, transparent 24px 32px,
            var(--fm-sp-gold) 32px 40px, transparent 40px 48px);
    background-size:100% 48px;opacity:.7;
}
.fm-layout-speakeasy .fm-card > *{position:relative;z-index:1}

.fm-layout-speakeasy .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:0 0 0 8px}
.fm-layout-speakeasy .fm-card .fm-card-img-wrap{
    width:100%!important;height:125px!important;max-height:125px!important;
    border-radius:0!important;margin:2px 0 10px;
    border:1px solid var(--fm-sp-gold);
    box-shadow:inset 0 0 0 2px #0a201c, 0 2px 6px rgba(0,0,0,.45);
    filter:contrast(1.05) saturate(.95);
    clip-path:polygon(0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px));
}
.fm-layout-speakeasy .fm-card .fm-card-body{padding:0 2px 0 6px;flex:1;display:flex;flex-direction:column}
.fm-layout-speakeasy .fm-card .fm-card-title{
    font-family:'Playfair Display','Cinzel','Didot',serif;
    font-size:16px;font-weight:700;color:#f0e2b9;
    margin:0 0 4px;line-height:1.15;
    letter-spacing:2px;text-transform:uppercase;
}
.fm-layout-speakeasy .fm-card .fm-card-desc{
    font-family:'Playfair Display','Georgia',serif;
    font-size:12px;color:rgba(240,226,185,.68);line-height:1.5;
    margin:0 0 10px;font-style:italic;letter-spacing:.3px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-speakeasy .fm-card .fm-card-price{
    font-family:'Playfair Display','Cinzel',serif;
    font-size:17px;font-weight:700;color:var(--fm-sp-gold);
    background:transparent;padding:4px 0 0;
    display:block;align-self:stretch;
    letter-spacing:2.5px;text-align:center;
    border-top:1px solid rgba(201,162,74,.4);
    position:relative;margin-top:auto;
    text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.fm-layout-speakeasy .fm-card .fm-card-price::before{
    content:'◆';position:absolute;left:50%;top:-.6em;transform:translateX(-50%);
    background:linear-gradient(180deg, #12332e 0%, #0a201c 100%);
    color:var(--fm-sp-gold);font-size:9px;padding:0 5px;
}
.fm-layout-speakeasy .fm-card .fm-card-bottom-row{
    margin-top:8px;padding-top:8px;
    border-top:1px dashed rgba(201,162,74,.28);
}
.fm-layout-speakeasy .fm-card .fm-card-metas{gap:6px}
.fm-layout-speakeasy .fm-card .fm-meta{
    background:transparent;color:rgba(240,226,185,.8);
    border:1px solid rgba(201,162,74,.45);border-radius:0;
    font-family:'Playfair Display',serif;font-size:11px;
    padding:1px 7px;letter-spacing:1.2px;text-transform:uppercase;
}
.fm-layout-speakeasy .fm-badge{
    background:linear-gradient(180deg, var(--fm-sp-gold) 0%, var(--fm-sp-gold-2) 100%)!important;
    color:var(--fm-sp-dark)!important;
    border:none!important;
    border-radius:0!important;
    font-family:'Cinzel','Playfair Display',serif!important;
    font-weight:700!important;font-size:10px!important;
    letter-spacing:2px;text-transform:uppercase;
    clip-path:polygon(3px 0, calc(100% - 3px) 0, 100% 50%, calc(100% - 3px) 100%, 3px 100%, 0 50%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.45);
}
/* CATBAR: gilded nameplate rail with stepped edges */
.fm-layout-speakeasy .fm-catbar{
    background:
        linear-gradient(180deg, rgba(14,42,38,.7) 0%, rgba(10,32,28,.85) 100%)!important;
    border:1px solid var(--fm-sp-gold)!important;
    border-radius:0!important;
    padding:8px 12px!important;
    box-shadow:
        inset 0 0 0 3px rgba(14,42,38,.6),
        inset 0 0 0 4px rgba(201,162,74,.4),
        0 4px 14px rgba(0,0,0,.35);
    position:relative;
    clip-path:polygon(
        0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px,
        100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px)
    );
}
.fm-layout-speakeasy .fm-cat-item{
    font-family:'Playfair Display','Cinzel',serif;
    font-size:13px;font-weight:700;color:#e8d59f;
    background:transparent;
    border:1px solid rgba(201,162,74,.35);border-radius:0;
    padding:5px 14px;letter-spacing:2.5px;
    text-transform:uppercase;
    transition:all .3s ease;
}
.fm-layout-speakeasy .fm-cat-item:hover{
    border-color:rgba(201,162,74,.7);background:rgba(201,162,74,.08);
}
.fm-layout-speakeasy .fm-cat-item.active{
    background:linear-gradient(180deg, var(--fm-sp-gold), var(--fm-sp-gold-2))!important;
    color:var(--fm-sp-dark)!important;
    border-color:#f0d582!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.4);
    text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.fm-layout-speakeasy .fm-cat-icon-svg,
.fm-layout-speakeasy .fm-cat-item:not(.active) svg{stroke:#e8d59f}
.fm-layout-speakeasy .fm-cat-item.active svg{stroke:var(--fm-sp-dark)}
/* TOOLBAR: polished brass rail with chevron trim */
.fm-layout-speakeasy .fm-bottom-toolbar{
    background:
        linear-gradient(180deg, rgba(14,42,38,.92) 0%, rgba(7,26,23,.97) 100%)!important;
    border-top:3px solid var(--fm-sp-gold)!important;
    box-shadow:
        inset 0 3px 0 rgba(201,162,74,.25),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 -6px 20px rgba(0,0,0,.45);
    position:relative;
}
.fm-layout-speakeasy .fm-bottom-toolbar::before{
    content:'';position:absolute;top:-3px;left:0;right:0;height:3px;
    background:
        linear-gradient(90deg,
            transparent 0, transparent 8px,
            var(--fm-sp-gold-2) 8px, var(--fm-sp-gold-2) 10px,
            transparent 10px, transparent 18px);
    background-size:24px 100%;
    opacity:.8;pointer-events:none;
}
.fm-layout-speakeasy .fm-bottom-toolbar .fm-toolbar-item{
    background:
        linear-gradient(180deg, rgba(14,42,38,.5), rgba(7,26,23,.8))!important;
    border:1px solid rgba(201,162,74,.35)!important;
    border-radius:0!important;
    color:#e8d59f!important;
    box-shadow:inset 0 1px 0 rgba(201,162,74,.15);
    clip-path:polygon(4px 0, calc(100% - 4px) 0, 100% 50%, calc(100% - 4px) 100%, 4px 100%, 0 50%);
    transition:all .3s ease;
}
.fm-layout-speakeasy .fm-bottom-toolbar .fm-toolbar-item:hover,
.fm-layout-speakeasy .fm-bottom-toolbar .fm-toolbar-item:active{
    background:linear-gradient(180deg, var(--fm-sp-gold), var(--fm-sp-gold-2))!important;
    color:var(--fm-sp-dark)!important;
    border-color:#f0d582!important;
}
@keyframes fmSpeakeasyStep{
    0%{opacity:0;transform:translateY(22px) scale(.97);filter:brightness(.55)}
    45%{opacity:.6;filter:brightness(.9)}
    75%{transform:translateY(-2px) scale(1.005);filter:brightness(1.08)}
    100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}
}
@media(max-width:560px){
    .fm-layout-speakeasy .fm-cards{grid-template-columns:repeat(2,1fr);gap:18px 0}
    .fm-layout-speakeasy .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
    .fm-layout-speakeasy .fm-section-title{font-size:18px;letter-spacing:5px}
}


/* ============================================================
   LAYOUT 30 — GREENHOUSE (fm-layout-greenhouse)
   Botanical greenhouse / plant café. Pale sage-tinted glass-pane
   grid background, cast-iron forest-green frames, hanging plant-
   nursery sign section-heads with chain detail, terrarium-style
   rounded cards with soft leaf watermarks and a green tag-badge.
   Catbar as pastel seed-packet tabs; toolbar as wooden-plank tray.
   Entry: unfurl — a gentle scale-up that grows from the bottom as
   if the card is sprouting.
   Design language: organic, artisan, airy, botanical, fresh.
   ============================================================ */
.fm-layout-greenhouse{
    --fm-gh-green:var(--fm-catbar-active-border,#3e7a3c);
    --fm-gh-green-2:var(--fm-sh-color,#2a4a26);
    --fm-gh-leaf:#6fa96b;
    --fm-gh-pale:#e3eee3;
    --fm-gh-paper:var(--fm-card-bg,#fff);
    background:
        /* glass pane grid */
        linear-gradient(rgba(180,205,176,.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180,205,176,.35) 1px, transparent 1px),
        /* sun-warmed wash */
        radial-gradient(ellipse at 50% 0%, rgba(255,245,210,.45), transparent 55%),
        linear-gradient(180deg, #eef6ed 0%, #e3eee3 100%);
    background-size:48px 48px, 48px 48px, 100% 100%, 100% 100%;
    padding:16px 10px 22px;
    position:relative;
}
/* cast-iron top beam */
.fm-layout-greenhouse::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:
        linear-gradient(180deg, var(--fm-gh-green-2), var(--fm-gh-green));
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
    pointer-events:none;
}
.fm-layout-greenhouse .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px 14px;
    padding:14px 2px 6px;
}
.fm-layout-greenhouse .fm-section{margin-bottom:40px;position:relative;padding-top:14px}

/* Section head: hanging plant-nursery sign with chain */
.fm-layout-greenhouse .fm-section-head{
    background:transparent!important;
    border:none!important;border-radius:0!important;
    padding:8px 0 14px;margin-bottom:22px;
    text-align:center;position:relative;
}
.fm-layout-greenhouse .fm-section-head::before{
    content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    width:2px;height:22px;
    background:
        repeating-linear-gradient(180deg,
            var(--fm-gh-green-2) 0 3px,
            transparent 3px 5px);
    opacity:.75;
}
.fm-layout-greenhouse .fm-section-title{
    font-family:'Playfair Display','Georgia',serif;
    font-size:18px;font-weight:700;color:var(--fm-gh-green-2);
    letter-spacing:.5px;margin:0;line-height:1.2;
    font-style:italic;
    display:inline-block;
    background:var(--fm-gh-paper);
    border:1.5px solid var(--fm-gh-green);
    border-radius:4px 4px 10px 10px / 4px 4px 22px 22px;
    padding:10px 22px 14px;position:relative;
    box-shadow:
        inset 0 0 0 3px var(--fm-gh-paper),
        inset 0 0 0 4px rgba(111,169,107,.35),
        0 4px 10px rgba(46,76,44,.15),
        0 0 0 6px transparent;
    text-align:center;
}
/* leaf decorations flanking title */
.fm-layout-greenhouse .fm-section-title::before,
.fm-layout-greenhouse .fm-section-title::after{
    content:'';position:absolute;top:50%;width:12px;height:8px;
    background:
        radial-gradient(ellipse at 100% 50%, var(--fm-gh-leaf) 0, var(--fm-gh-leaf) 60%, transparent 65%);
    transform:translateY(-50%) rotate(-20deg);
    opacity:.55;
}
.fm-layout-greenhouse .fm-section-title::before{left:-14px;transform:translateY(-50%) rotate(160deg)}
.fm-layout-greenhouse .fm-section-title::after{right:-14px}
.fm-layout-greenhouse .fm-section-line{display:none}

/* Card: terrarium paper with leaf tag */
.fm-layout-greenhouse .fm-card{
    background:
        /* subtle leaf watermark */
        radial-gradient(ellipse 30% 20% at 85% 90%, rgba(111,169,107,.1), transparent 70%),
        linear-gradient(180deg, var(--fm-gh-paper) 0%, #f7fbf6 100%);
    border:1.5px solid var(--fm-gh-green);
    border-radius:6px 14px 14px 14px;
    padding:10px 12px 14px;
    box-shadow:
        inset 0 0 0 3px var(--fm-gh-paper),
        inset 0 0 0 4px rgba(111,169,107,.22),
        0 4px 16px rgba(46,76,44,.12);
    transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    opacity:0;
    transform-origin:center bottom;
    animation:fmGreenhouseUnfurl 1s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.09s);
}
.fm-layout-greenhouse .fm-card:hover{
    transform:translateY(-3px) rotate(-.4deg);
    box-shadow:
        inset 0 0 0 3px var(--fm-gh-paper),
        inset 0 0 0 4px rgba(111,169,107,.4),
        0 10px 24px rgba(46,76,44,.22);
}
/* leaf tag in top-right corner */
.fm-layout-greenhouse .fm-card::before{
    content:'';position:absolute;top:-6px;right:14px;
    width:20px;height:24px;z-index:3;
    background:
        radial-gradient(ellipse 90% 100% at 100% 0%, var(--fm-gh-leaf) 0, var(--fm-gh-leaf) 85%, transparent 90%);
    border-radius:0 0 20px 2px;
    transform:rotate(-8deg);
    box-shadow:-2px 2px 4px rgba(46,76,44,.25);
}
/* tag hole */
.fm-layout-greenhouse .fm-card::after{
    content:'';position:absolute;top:-1px;right:20px;
    width:4px;height:4px;background:var(--fm-gh-paper);
    border-radius:50%;z-index:4;
    box-shadow:inset 0 0 0 1px var(--fm-gh-green-2);
}
.fm-layout-greenhouse .fm-card > *{position:relative;z-index:1}

.fm-layout-greenhouse .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:0}
.fm-layout-greenhouse .fm-card .fm-card-img-wrap{
    width:100%!important;height:130px!important;max-height:130px!important;
    border-radius:4px 12px 12px 12px!important;margin:0 0 12px;
    border:1px solid rgba(111,169,107,.4);
    box-shadow:inset 0 0 0 3px var(--fm-gh-paper), 0 2px 5px rgba(46,76,44,.12);
    filter:saturate(1.05) contrast(1.02);
}
.fm-layout-greenhouse .fm-card .fm-card-body{padding:0 2px;flex:1;display:flex;flex-direction:column}
.fm-layout-greenhouse .fm-card .fm-card-title{
    font-family:'Playfair Display','Georgia',serif;
    font-size:17px;font-weight:700;color:var(--fm-gh-green-2);
    margin:0 0 4px;line-height:1.25;letter-spacing:.2px;
    font-style:italic;
}
.fm-layout-greenhouse .fm-card .fm-card-desc{
    font-family:'Georgia','Playfair Display',serif;
    font-size:12.5px;color:#557a52;line-height:1.55;
    margin:0 0 10px;font-style:italic;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-greenhouse .fm-card .fm-card-price{
    font-family:'Playfair Display','Georgia',serif;
    font-size:19px;font-weight:700;color:var(--fm-gh-green-2);
    background:transparent;padding:6px 0 0;
    display:block;align-self:stretch;
    border-top:1.5px dashed rgba(111,169,107,.45);
    margin-top:auto;letter-spacing:.3px;
}
.fm-layout-greenhouse .fm-card .fm-card-bottom-row{
    margin-top:10px;padding-top:2px;
}
.fm-layout-greenhouse .fm-card .fm-card-metas{gap:5px;flex-wrap:wrap}
.fm-layout-greenhouse .fm-card .fm-meta{
    background:#eef6ed;color:var(--fm-gh-green-2);
    border:1px solid rgba(111,169,107,.45);border-radius:10px;
    font-family:'Georgia',serif;font-size:11px;font-style:italic;
    padding:2px 9px;letter-spacing:.2px;
}
.fm-layout-greenhouse .fm-badge{
    background:linear-gradient(180deg, var(--fm-gh-leaf), var(--fm-gh-green-2))!important;
    color:#fff!important;
    border:none!important;
    border-radius:3px 10px 10px 10px!important;
    font-family:'Georgia',serif!important;font-style:italic;
    font-weight:700!important;font-size:11px!important;
    letter-spacing:.5px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 5px rgba(46,76,44,.25);
}
/* CATBAR: seed-packet tabs */
.fm-layout-greenhouse .fm-catbar{
    background:
        linear-gradient(180deg, #f7fbf6 0%, #eef6ed 100%)!important;
    border:1.5px solid var(--fm-gh-green)!important;
    border-radius:4px!important;
    padding:8px 10px!important;
    box-shadow:
        inset 0 0 0 3px #fff,
        inset 0 0 0 4px rgba(111,169,107,.3),
        0 3px 10px rgba(46,76,44,.1);
}
.fm-layout-greenhouse .fm-cat-item{
    font-family:'Georgia','Playfair Display',serif;
    font-size:13px;font-weight:600;font-style:italic;
    color:var(--fm-gh-green-2);
    background:#fff;
    border:1px solid rgba(111,169,107,.45);
    border-top:4px solid var(--fm-gh-leaf);
    border-radius:3px;
    padding:5px 12px 5px 12px;letter-spacing:.3px;
    box-shadow:0 2px 4px rgba(46,76,44,.08);
    transition:all .3s ease;
}
.fm-layout-greenhouse .fm-cat-item:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 8px rgba(46,76,44,.15);
}
.fm-layout-greenhouse .fm-cat-item.active{
    background:linear-gradient(180deg, var(--fm-gh-leaf), var(--fm-gh-green-2))!important;
    color:#fff!important;
    border-color:var(--fm-gh-green-2)!important;
    border-top-color:#f2d7a7!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(46,76,44,.3);
}
.fm-layout-greenhouse .fm-cat-icon-svg,
.fm-layout-greenhouse .fm-cat-item:not(.active) svg{stroke:var(--fm-gh-green-2)}
.fm-layout-greenhouse .fm-cat-item.active svg{stroke:#fff}
/* TOOLBAR: wooden-plank tray */
.fm-layout-greenhouse .fm-bottom-toolbar{
    background:
        repeating-linear-gradient(90deg,
            rgba(139,106,62,.08) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #e8d9bf 0%, #d4c09c 100%)!important;
    border-top:2px solid #8b6a3e!important;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.4),
        inset 0 -1px 0 rgba(0,0,0,.2),
        0 -4px 14px rgba(74,56,30,.2);
}
.fm-layout-greenhouse .fm-bottom-toolbar .fm-toolbar-item{
    background:rgba(255,255,255,.7)!important;
    border:1px solid rgba(111,169,107,.4)!important;
    border-radius:10px!important;
    color:var(--fm-gh-green-2)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
    transition:all .3s ease;
}
.fm-layout-greenhouse .fm-bottom-toolbar .fm-toolbar-item:hover,
.fm-layout-greenhouse .fm-bottom-toolbar .fm-toolbar-item:active{
    background:linear-gradient(180deg, var(--fm-gh-leaf), var(--fm-gh-green-2))!important;
    color:#fff!important;
    border-color:var(--fm-gh-green-2)!important;
}
@keyframes fmGreenhouseUnfurl{
    0%{opacity:0;transform:translateY(16px) scale(.9) rotate(-2deg);filter:blur(1px)}
    55%{opacity:1;transform:translateY(-2px) scale(1.015) rotate(.3deg);filter:blur(0)}
    100%{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0)}
}
@media(max-width:560px){
    .fm-layout-greenhouse .fm-cards{grid-template-columns:repeat(2,1fr);gap:22px 0}
    .fm-layout-greenhouse .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
    .fm-layout-greenhouse .fm-section-title{font-size:16px;padding:10px 16px 14px}
}


/* ============================================================
   LAYOUT 31 — KAWAII (fm-layout-kawaii)
   Pastel Japanese kawaii / bubble-tea café. Soft pink-mint-cream
   dreamy gradient background, sparkle & star scatter, cloud-
   speech-bubble section heads, blobby super-rounded cards with
   gradient accent strokes, candy-pill catbar in alternating
   pastel gradients, lollipop toolbar. No hard edges anywhere.
   Entry: bouncy pop-in with spring overshoot.
   Design language: cute, bubbly, playful, pastel, youthful.
   ============================================================ */
.fm-layout-kawaii{
    --fm-kw-pink:#ff8fbd;
    --fm-kw-pink-2:#ffaed1;
    --fm-kw-mint:#9ad4c2;
    --fm-kw-blue:#7eb5ee;
    --fm-kw-yellow:#f7d56f;
    --fm-kw-accent:var(--fm-catbar-active-border,#ff8fbd);
    --fm-kw-dark:var(--fm-sh-color,#c84482);
    --fm-kw-paper:var(--fm-card-bg,#fff);
    background:
        radial-gradient(circle at 10% 10%, rgba(255,199,221,.55), transparent 45%),
        radial-gradient(circle at 85% 20%, rgba(207,230,255,.55), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(255,225,201,.55), transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(209,232,214,.55), transparent 45%),
        linear-gradient(135deg, #ffe7f2 0%, #fff4e3 50%, #e0f0ff 100%);
    padding:16px 10px 22px;
    position:relative;
}
/* floating sparkles/stars */
.fm-layout-kawaii::before{
    content:'✦  ★  ✿  ♡  ✦  ★  ♡  ✿  ✦';
    position:absolute;top:0;left:0;right:0;
    font-size:12px;letter-spacing:34px;
    color:rgba(255,143,189,.25);
    line-height:2;padding:4px 16px;white-space:nowrap;overflow:hidden;
    pointer-events:none;font-family:sans-serif;
}
.fm-layout-kawaii .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px 14px;
    padding:12px 2px 6px;
}
.fm-layout-kawaii .fm-section{margin-bottom:38px;position:relative}

/* Section head: cloud speech bubble */
.fm-layout-kawaii .fm-section-head{
    background:transparent!important;
    border:none!important;border-radius:0!important;
    padding:8px 0 16px;margin-bottom:18px;
    text-align:center;position:relative;
}
.fm-layout-kawaii .fm-section-title{
    font-family:'Quicksand','Nunito','Comic Sans MS','Varela Round',sans-serif;
    font-size:19px;font-weight:700;color:var(--fm-kw-dark);
    letter-spacing:.3px;margin:0;line-height:1.2;
    background:var(--fm-kw-paper);
    border:2.5px solid var(--fm-kw-accent);
    border-radius:30px 30px 30px 6px;
    padding:10px 22px;display:inline-block;position:relative;
    box-shadow:
        0 6px 0 rgba(255,143,189,.18),
        0 10px 20px rgba(255,143,189,.15);
}
/* sparkle decorations around title */
.fm-layout-kawaii .fm-section-title::before{
    content:'✦';position:absolute;top:-6px;left:-12px;
    font-size:18px;color:var(--fm-kw-yellow);
    text-shadow:0 2px 0 rgba(247,213,111,.4);
    animation:fmKawaiiTwinkle 2s ease-in-out infinite;
}
.fm-layout-kawaii .fm-section-title::after{
    content:'♡';position:absolute;bottom:-4px;right:-10px;
    font-size:16px;color:var(--fm-kw-pink);
    animation:fmKawaiiTwinkle 2s ease-in-out .7s infinite;
}
.fm-layout-kawaii .fm-section-line{display:none}

/* Card: blob with gradient trim & sparkle */
.fm-layout-kawaii .fm-card{
    background:var(--fm-kw-paper);
    border:2.5px solid var(--fm-kw-pink-2);
    border-radius:22px;
    padding:10px 12px 14px;
    box-shadow:
        0 6px 0 rgba(255,174,209,.25),
        0 12px 24px rgba(255,143,189,.18);
    transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    opacity:0;
    animation:fmKawaiiPop .95s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.08s);
}
.fm-layout-kawaii .fm-card:nth-child(2n){border-color:#cfe6ff}
.fm-layout-kawaii .fm-card:nth-child(3n){border-color:#d1e8d6}
.fm-layout-kawaii .fm-card:nth-child(4n){border-color:#f7d56f}
.fm-layout-kawaii .fm-card:hover{
    transform:translateY(-4px) rotate(-.5deg);
    box-shadow:
        0 8px 0 rgba(255,174,209,.3),
        0 18px 32px rgba(255,143,189,.28);
}
/* sparkle in corner */
.fm-layout-kawaii .fm-card::before{
    content:'✦';position:absolute;top:8px;right:10px;z-index:3;
    font-size:16px;color:var(--fm-kw-yellow);line-height:1;
    filter:drop-shadow(0 2px 0 rgba(247,213,111,.5));
}
/* wave accent at bottom */
.fm-layout-kawaii .fm-card::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:18px;z-index:0;
    background:
        radial-gradient(circle 10px at 10% 100%, var(--fm-kw-pink-2) 98%, transparent 100%),
        radial-gradient(circle 10px at 30% 100%, var(--fm-kw-pink-2) 98%, transparent 100%),
        radial-gradient(circle 10px at 50% 100%, var(--fm-kw-pink-2) 98%, transparent 100%),
        radial-gradient(circle 10px at 70% 100%, var(--fm-kw-pink-2) 98%, transparent 100%),
        radial-gradient(circle 10px at 90% 100%, var(--fm-kw-pink-2) 98%, transparent 100%);
    opacity:.22;pointer-events:none;
}
.fm-layout-kawaii .fm-card:nth-child(2n)::after{
    background:
        radial-gradient(circle 10px at 10% 100%, #cfe6ff 98%, transparent 100%),
        radial-gradient(circle 10px at 30% 100%, #cfe6ff 98%, transparent 100%),
        radial-gradient(circle 10px at 50% 100%, #cfe6ff 98%, transparent 100%),
        radial-gradient(circle 10px at 70% 100%, #cfe6ff 98%, transparent 100%),
        radial-gradient(circle 10px at 90% 100%, #cfe6ff 98%, transparent 100%);
}
.fm-layout-kawaii .fm-card > *{position:relative;z-index:1}

.fm-layout-kawaii .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:0}
.fm-layout-kawaii .fm-card .fm-card-img-wrap{
    width:100%!important;height:130px!important;max-height:130px!important;
    border-radius:16px!important;margin:0 0 12px;
    border:2px dashed rgba(255,174,209,.5);
    box-shadow:0 3px 8px rgba(255,143,189,.15);
    filter:saturate(1.08) brightness(1.02);
    background:#fff5fa;
}
.fm-layout-kawaii .fm-card .fm-card-body{padding:0 4px;flex:1;display:flex;flex-direction:column}
.fm-layout-kawaii .fm-card .fm-card-title{
    font-family:'Quicksand','Nunito','Varela Round',sans-serif;
    font-size:16px;font-weight:700;color:var(--fm-kw-dark);
    margin:0 0 4px;line-height:1.3;letter-spacing:.2px;
}
.fm-layout-kawaii .fm-card .fm-card-desc{
    font-family:'Nunito','Quicksand',sans-serif;
    font-size:12.5px;color:#a88596;line-height:1.55;
    margin:0 0 10px;font-style:italic;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-kawaii .fm-card .fm-card-price{
    font-family:'Quicksand','Nunito',sans-serif;
    font-size:15px;font-weight:800;color:#fff;
    background:linear-gradient(135deg, var(--fm-kw-pink), var(--fm-kw-pink-2));
    padding:4px 14px;display:inline-block;align-self:flex-start;
    border-radius:20px;letter-spacing:.3px;margin-top:auto;
    box-shadow:0 3px 0 rgba(255,143,189,.3), 0 5px 10px rgba(255,143,189,.2);
    border:1.5px solid #fff;
}
.fm-layout-kawaii .fm-card:nth-child(2n) .fm-card-price{
    background:linear-gradient(135deg, var(--fm-kw-blue), #b5d9ff);
    box-shadow:0 3px 0 rgba(126,181,238,.3), 0 5px 10px rgba(126,181,238,.2);
}
.fm-layout-kawaii .fm-card:nth-child(3n) .fm-card-price{
    background:linear-gradient(135deg, var(--fm-kw-mint), #b5e3d4);
    box-shadow:0 3px 0 rgba(154,212,194,.3), 0 5px 10px rgba(154,212,194,.2);
}
.fm-layout-kawaii .fm-card:nth-child(4n) .fm-card-price{
    background:linear-gradient(135deg, #f2ba3e, var(--fm-kw-yellow));
    box-shadow:0 3px 0 rgba(247,213,111,.4), 0 5px 10px rgba(247,213,111,.25);
    color:#8b5600;
}
.fm-layout-kawaii .fm-card .fm-card-bottom-row{
    margin-top:10px;padding-top:8px;
    border-top:2px dotted rgba(255,174,209,.45);
}
.fm-layout-kawaii .fm-card .fm-card-metas{gap:6px;flex-wrap:wrap}
.fm-layout-kawaii .fm-card .fm-meta{
    background:#fff5fa;color:var(--fm-kw-dark);
    border:1.5px solid rgba(255,174,209,.5);border-radius:14px;
    font-family:'Nunito',sans-serif;font-size:11px;font-weight:600;
    padding:2px 9px;letter-spacing:.2px;
}
.fm-layout-kawaii .fm-badge{
    background:linear-gradient(135deg, var(--fm-kw-pink), var(--fm-kw-yellow))!important;
    color:#fff!important;
    border:1.5px solid #fff!important;
    border-radius:20px!important;
    font-family:'Quicksand','Nunito',sans-serif!important;
    font-weight:700!important;font-size:10px!important;
    padding:2px 10px!important;
    letter-spacing:.5px;
    box-shadow:0 3px 6px rgba(255,143,189,.3);
}
/* CATBAR: candy-pill bar */
.fm-layout-kawaii .fm-catbar{
    background:
        linear-gradient(180deg, #fff 0%, #fff5fa 100%)!important;
    border:2.5px solid var(--fm-kw-pink-2)!important;
    border-radius:30px!important;
    padding:8px 12px!important;
    box-shadow:
        0 4px 0 rgba(255,174,209,.22),
        0 8px 18px rgba(255,143,189,.15);
}
.fm-layout-kawaii .fm-cat-item{
    font-family:'Quicksand','Nunito',sans-serif;
    font-size:13px;font-weight:700;color:var(--fm-kw-dark);
    background:#fff5fa;
    border:2px solid rgba(255,174,209,.5);
    border-radius:22px;
    padding:4px 14px;letter-spacing:.2px;
    box-shadow:0 3px 0 rgba(255,174,209,.22);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.fm-layout-kawaii .fm-cat-item:hover{transform:translateY(-2px)}
.fm-layout-kawaii .fm-cat-item.active{
    background:linear-gradient(135deg, var(--fm-kw-pink), var(--fm-kw-pink-2))!important;
    color:#fff!important;
    border-color:#fff!important;
    box-shadow:0 3px 0 rgba(255,143,189,.4), 0 6px 14px rgba(255,143,189,.25), inset 0 1px 0 rgba(255,255,255,.3);
    text-shadow:0 1px 1px rgba(200,78,131,.3);
}
.fm-layout-kawaii .fm-cat-item:nth-child(3n).active{
    background:linear-gradient(135deg, var(--fm-kw-mint), #7fc0aa)!important;
    box-shadow:0 3px 0 rgba(154,212,194,.4), 0 6px 14px rgba(154,212,194,.25);
}
.fm-layout-kawaii .fm-cat-item:nth-child(3n+1).active{
    background:linear-gradient(135deg, var(--fm-kw-blue), #a9cff2)!important;
    box-shadow:0 3px 0 rgba(126,181,238,.4), 0 6px 14px rgba(126,181,238,.25);
}
.fm-layout-kawaii .fm-cat-icon-svg,
.fm-layout-kawaii .fm-cat-item:not(.active) svg{stroke:var(--fm-kw-dark)}
.fm-layout-kawaii .fm-cat-item.active svg{stroke:#fff}
/* TOOLBAR: lollipop bar */
.fm-layout-kawaii .fm-bottom-toolbar{
    background:
        linear-gradient(180deg, #fff 0%, #fff5fa 100%)!important;
    border-top:3px solid var(--fm-kw-pink-2)!important;
    box-shadow:
        inset 0 3px 0 rgba(255,255,255,.6),
        0 -6px 18px rgba(255,143,189,.18);
}
.fm-layout-kawaii .fm-bottom-toolbar .fm-toolbar-item{
    background:linear-gradient(135deg, var(--fm-kw-pink-2), #ffd0e3)!important;
    border:2px solid #fff!important;
    border-radius:20px!important;
    color:var(--fm-kw-dark)!important;
    box-shadow:0 3px 0 rgba(255,174,209,.35), 0 5px 10px rgba(255,143,189,.2);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.fm-layout-kawaii .fm-bottom-toolbar .fm-toolbar-item:nth-child(2){
    background:linear-gradient(135deg, var(--fm-kw-blue), #b5d9ff)!important;
    box-shadow:0 3px 0 rgba(126,181,238,.35), 0 5px 10px rgba(126,181,238,.2);
    color:#3d6ba3!important;
}
.fm-layout-kawaii .fm-bottom-toolbar .fm-toolbar-item:nth-child(3){
    background:linear-gradient(135deg, var(--fm-kw-mint), #b5e3d4)!important;
    box-shadow:0 3px 0 rgba(154,212,194,.35), 0 5px 10px rgba(154,212,194,.2);
    color:#3d8879!important;
}
.fm-layout-kawaii .fm-bottom-toolbar .fm-toolbar-item:nth-child(4){
    background:linear-gradient(135deg, var(--fm-kw-yellow), #f2ba3e)!important;
    box-shadow:0 3px 0 rgba(247,213,111,.4), 0 5px 10px rgba(247,213,111,.25);
    color:#8b5600!important;
}
.fm-layout-kawaii .fm-bottom-toolbar .fm-toolbar-item:hover,
.fm-layout-kawaii .fm-bottom-toolbar .fm-toolbar-item:active{
    transform:translateY(-2px);
}
@keyframes fmKawaiiPop{
    0%{opacity:0;transform:translateY(16px) scale(.6)}
    50%{opacity:1;transform:translateY(-4px) scale(1.05)}
    75%{transform:translateY(2px) scale(.98)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fmKawaiiTwinkle{
    0%,100%{opacity:.6;transform:scale(1) rotate(0)}
    50%{opacity:1;transform:scale(1.25) rotate(15deg)}
}
@media(max-width:560px){
    .fm-layout-kawaii .fm-cards{grid-template-columns:repeat(2,1fr);gap:18px 0}
    .fm-layout-kawaii .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
    .fm-layout-kawaii .fm-section-title{font-size:17px;padding:9px 18px}
}


/* ============================================================
   LAYOUT 32 — TRATTORIA (fm-layout-trattoria)
   Italian trattoria with red-and-white checkered tablecloth
   feel. Gingham background, ivory scissor-cut paper section
   banners with Italian script, cards as napkin squares with
   dashed scissors-trim edges and slightly skewed price tags
   torn on one side. Catbar as hand-written menu clipboard tabs
   with black clip; toolbar as wood cutting-board grain.
   Entry: drop-down with a slight pendulum sway.
   Design language: rustic, handcrafted, warm, convivial, nonna.
   ============================================================ */
.fm-layout-trattoria{
    --fm-tr-red:var(--fm-catbar-active-border,#c83a3a);
    --fm-tr-red-2:var(--fm-sh-color,#8b2e2e);
    --fm-tr-cream:var(--fm-card-bg,#fffdf6);
    --fm-tr-ivory:#f8f0d8;
    --fm-tr-ink:#3a1f1f;
    --fm-tr-green:#4a8b4a;
    background:
        /* red-white gingham check */
        repeating-linear-gradient(0deg,
            rgba(200,58,58,.16) 0 12px,
            transparent 12px 24px),
        repeating-linear-gradient(90deg,
            rgba(200,58,58,.16) 0 12px,
            transparent 12px 24px),
        linear-gradient(135deg, #fff6e8 0%, #fbe8dc 100%);
    padding:14px 10px 22px;
    position:relative;
}
/* torn edge header */
.fm-layout-trattoria::before{
    content:'';position:absolute;top:0;left:0;right:0;height:16px;
    background:linear-gradient(180deg, var(--fm-tr-cream) 50%, transparent 50%);
    -webkit-mask:
        radial-gradient(circle 4px at 8px 16px, transparent 98%, #000 100%) 0 0/16px 16px;
    mask:
        radial-gradient(circle 4px at 8px 16px, transparent 98%, #000 100%) 0 0/16px 16px;
    pointer-events:none;opacity:.85;
}
.fm-layout-trattoria .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px 14px;
    padding:8px 2px 6px;
}
.fm-layout-trattoria .fm-section{margin-bottom:38px;position:relative}

/* Section head: scissor-cut paper banner with Italian script */
.fm-layout-trattoria .fm-section-head{
    background:transparent!important;
    border:none!important;border-radius:0!important;
    padding:10px 0 16px;margin-bottom:18px;
    text-align:center;position:relative;
}
.fm-layout-trattoria .fm-section-title{
    font-family:'Great Vibes','Dancing Script','Brush Script MT','Playfair Display',cursive;
    font-size:26px;font-weight:700;color:var(--fm-tr-red-2);
    letter-spacing:.3px;margin:0;line-height:1;
    font-style:italic;
    background:var(--fm-tr-cream);
    padding:10px 28px 12px;display:inline-block;position:relative;
    border:1.5px dashed var(--fm-tr-red-2);
    box-shadow:
        0 4px 10px rgba(139,46,46,.18),
        inset 0 0 0 3px var(--fm-tr-cream),
        inset 0 0 0 4px rgba(200,58,58,.15);
    transform:rotate(-1.5deg);
}
.fm-layout-trattoria .fm-section-title::before{
    content:'~';position:absolute;left:8px;top:50%;transform:translateY(-50%);
    font-family:'Great Vibes',cursive;font-size:20px;color:var(--fm-tr-red);opacity:.8;
}
.fm-layout-trattoria .fm-section-title::after{
    content:'~';position:absolute;right:8px;top:50%;transform:translateY(-50%);
    font-family:'Great Vibes',cursive;font-size:20px;color:var(--fm-tr-red);opacity:.8;
}
.fm-layout-trattoria .fm-section-line{display:none}

/* Card: napkin square with scissors edge */
.fm-layout-trattoria .fm-card{
    background:
        linear-gradient(135deg, var(--fm-tr-cream) 0%, var(--fm-tr-ivory) 100%);
    border:none;
    border-radius:2px;
    padding:10px 12px 14px;
    box-shadow:
        0 0 0 1.5px rgba(139,46,46,.3),
        0 1px 0 rgba(255,255,255,.6) inset,
        0 5px 14px rgba(139,46,46,.2);
    transition:transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s ease;
    display:flex;flex-direction:column;
    position:relative;overflow:visible;
    opacity:0;
    animation:fmTrattoriaDrop .95s cubic-bezier(.36,.07,.19,.97) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.1s);
    transform-origin:top center;
}
.fm-layout-trattoria .fm-card:nth-child(2n){transform-origin:top right}
.fm-layout-trattoria .fm-card:hover{
    transform:translateY(-3px) rotate(-.3deg);
    box-shadow:
        0 0 0 1.5px rgba(139,46,46,.45),
        0 12px 26px rgba(139,46,46,.3);
}
/* scissor-cut dashed border */
.fm-layout-trattoria .fm-card::before{
    content:'';position:absolute;inset:3px;
    border:1.5px dashed rgba(139,46,46,.5);border-radius:1px;
    pointer-events:none;z-index:0;
}
/* tomato/basil decoration in corner */
.fm-layout-trattoria .fm-card::after{
    content:'🍅';position:absolute;top:-6px;right:10px;z-index:3;
    font-size:16px;line-height:1;
    filter:drop-shadow(0 2px 3px rgba(139,46,46,.3));
    transform:rotate(-15deg);
}
.fm-layout-trattoria .fm-card:nth-child(2n)::after{content:'🌿'}
.fm-layout-trattoria .fm-card:nth-child(3n)::after{content:'🧄'}
.fm-layout-trattoria .fm-card:nth-child(4n)::after{content:'🍷'}
.fm-layout-trattoria .fm-card > *{position:relative;z-index:1}

.fm-layout-trattoria .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:0}
.fm-layout-trattoria .fm-card .fm-card-img-wrap{
    width:100%!important;height:125px!important;max-height:125px!important;
    border-radius:0!important;margin:0 0 10px;
    border:2px solid var(--fm-tr-cream);
    box-shadow:0 0 0 1px rgba(139,46,46,.35), 0 2px 5px rgba(139,46,46,.15);
    filter:sepia(.05) saturate(1.08);
}
.fm-layout-trattoria .fm-card .fm-card-body{padding:2px 4px;flex:1;display:flex;flex-direction:column;position:relative}
.fm-layout-trattoria .fm-card .fm-card-title{
    font-family:'Great Vibes','Dancing Script',cursive;
    font-size:22px;font-weight:700;color:var(--fm-tr-ink);
    margin:0 0 2px;line-height:1.05;letter-spacing:.3px;
    font-style:italic;
}
.fm-layout-trattoria .fm-card .fm-card-desc{
    font-family:'Georgia','Playfair Display',serif;
    font-size:12px;color:var(--fm-tr-red-2);line-height:1.5;
    margin:0 0 10px;font-style:italic;letter-spacing:.2px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* hand-torn price tag */
.fm-layout-trattoria .fm-card .fm-card-price{
    font-family:'Georgia','Playfair Display',serif;
    font-size:16px;font-weight:700;color:var(--fm-tr-red-2);
    background:#fbe6b8;
    padding:3px 14px 3px 20px;
    display:inline-block;align-self:flex-start;margin-top:auto;
    border:1px solid var(--fm-tr-red-2);
    border-radius:0 2px 2px 0;
    letter-spacing:.5px;position:relative;
    transform:rotate(-2deg);
    box-shadow:2px 3px 6px rgba(139,46,46,.2);
    clip-path:polygon(
        6% 0%, 100% 0%, 100% 100%, 6% 100%,
        2% 85%, 5% 70%, 0% 55%, 4% 40%, 2% 25%, 5% 15%
    );
}
.fm-layout-trattoria .fm-card .fm-card-bottom-row{
    margin-top:12px;padding-top:8px;
    border-top:1.5px dashed rgba(139,46,46,.35);
}
.fm-layout-trattoria .fm-card .fm-card-metas{gap:5px;flex-wrap:wrap}
.fm-layout-trattoria .fm-card .fm-meta{
    background:rgba(251,230,184,.5);color:var(--fm-tr-ink);
    border:1px solid rgba(139,46,46,.35);border-radius:2px;
    font-family:'Georgia',serif;font-size:11px;font-style:italic;
    padding:1px 8px;letter-spacing:.2px;
}
.fm-layout-trattoria .fm-badge{
    background:var(--fm-tr-red)!important;
    color:#fff!important;
    border:1.5px solid var(--fm-tr-cream)!important;
    border-radius:2px!important;
    font-family:'Great Vibes','Dancing Script',cursive!important;
    font-weight:700!important;font-size:13px!important;
    font-style:italic;
    padding:2px 10px!important;
    letter-spacing:.3px;
    transform:rotate(-3deg);
    box-shadow:0 0 0 1.5px var(--fm-tr-red), 0 3px 6px rgba(139,46,46,.3);
}
/* CATBAR: wooden clipboard */
.fm-layout-trattoria .fm-catbar{
    background:
        repeating-linear-gradient(90deg,
            rgba(139,105,56,.05) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #f0d8a6 0%, #d9b778 100%)!important;
    border:1.5px solid #8b6a3e!important;
    border-radius:3px 3px 6px 6px!important;
    padding:10px 10px 8px!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -1px 0 rgba(0,0,0,.15),
        0 4px 10px rgba(74,56,30,.2);
    position:relative;
}
/* clip detail */
.fm-layout-trattoria .fm-catbar::before{
    content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
    width:38px;height:14px;
    background:linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
    border:1px solid #1a1a1a;border-radius:3px 3px 2px 2px;
    box-shadow:0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.fm-layout-trattoria .fm-cat-item{
    font-family:'Great Vibes','Dancing Script',cursive;
    font-size:17px;font-weight:700;color:var(--fm-tr-ink);
    background:var(--fm-tr-cream);
    border:1px dashed var(--fm-tr-red-2);border-radius:1px;
    padding:3px 14px;letter-spacing:.3px;font-style:italic;
    box-shadow:0 2px 4px rgba(139,46,46,.15);
    transition:transform .3s ease;
    line-height:1.1;
}
.fm-layout-trattoria .fm-cat-item:hover{transform:translateY(-1px) rotate(-1deg)}
.fm-layout-trattoria .fm-cat-item.active{
    background:var(--fm-tr-red)!important;
    color:#fff!important;
    border-color:var(--fm-tr-cream)!important;
    border-style:solid!important;
    box-shadow:0 0 0 1.5px var(--fm-tr-red-2), 0 3px 6px rgba(139,46,46,.3);
    text-shadow:0 1px 0 rgba(0,0,0,.2);
}
.fm-layout-trattoria .fm-cat-icon-svg,
.fm-layout-trattoria .fm-cat-item:not(.active) svg{stroke:var(--fm-tr-ink)}
.fm-layout-trattoria .fm-cat-item.active svg{stroke:#fff}
.fm-layout-trattoria .fm-cat-label{font-size:15px;font-weight:700}
/* TOOLBAR: wood cutting board */
.fm-layout-trattoria .fm-bottom-toolbar{
    background:
        repeating-linear-gradient(90deg,
            rgba(139,105,56,.09) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #d9b778 0%, #b8935a 100%)!important;
    border-top:3px solid #8b6a3e!important;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(0,0,0,.25),
        0 -4px 14px rgba(74,56,30,.25);
}
.fm-layout-trattoria .fm-bottom-toolbar .fm-toolbar-item{
    background:var(--fm-tr-cream)!important;
    border:1px dashed var(--fm-tr-red-2)!important;
    border-radius:2px!important;
    color:var(--fm-tr-ink)!important;
    box-shadow:0 2px 4px rgba(139,46,46,.15);
}
.fm-layout-trattoria .fm-bottom-toolbar .fm-toolbar-item:hover,
.fm-layout-trattoria .fm-bottom-toolbar .fm-toolbar-item:active{
    background:var(--fm-tr-red)!important;
    color:#fff!important;
    border-style:solid!important;border-color:var(--fm-tr-cream)!important;
    box-shadow:0 0 0 1.5px var(--fm-tr-red-2), 0 3px 6px rgba(139,46,46,.3);
}
@keyframes fmTrattoriaDrop{
    0%{opacity:0;transform:translateY(-22px) rotate(-3deg)}
    55%{opacity:1;transform:translateY(4px) rotate(1.5deg)}
    75%{transform:translateY(-2px) rotate(-.8deg)}
    100%{opacity:1;transform:translateY(0) rotate(0)}
}
@media(max-width:560px){
    .fm-layout-trattoria .fm-cards{grid-template-columns:repeat(2,1fr);gap:20px 0}
    .fm-layout-trattoria .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
    .fm-layout-trattoria .fm-section-title{font-size:22px;padding:8px 20px 10px}
    .fm-layout-trattoria .fm-card .fm-card-title{font-size:20px}
}


/* ============================================================
   LAYOUT 33 — SUSHIBAR (fm-layout-sushibar)
   Japanese kaitenzushi (conveyor-belt sushi). Warm beige
   counter-wood background with faint grain, black lacquered
   conveyor belt running under each section head with running
   dashed motion line. Cards are compact horizontal "plates":
   circular colored saucer-disk above the image acts as the
   plate/tier indicator; kanji accent watermark. Catbar as
   chopstick-style bamboo pills; toolbar as a deep-lacquered
   counter slab with amber accent line.
   Entry: belt slide-in alternating left/right.
   Design language: precise, tactile, culinary, understated.
   ============================================================ */
.fm-layout-sushibar{
    --fm-sb-wood:#8b5a28;
    --fm-sb-wood-dark:#4a3218;
    --fm-sb-belt:#222;
    --fm-sb-red:var(--fm-catbar-active-border,#c84e4e);
    --fm-sb-amber:var(--fm-sh-color,#e8a849);
    --fm-sb-paper:var(--fm-card-bg,#fff);
    background:
        /* faint wood grain */
        repeating-linear-gradient(180deg,
            rgba(139,90,40,.05) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(180deg,
            rgba(139,90,40,.08) 0 1px, transparent 1px 60px),
        linear-gradient(180deg, #f5ede0 0%, #e8dcc4 100%);
    padding:14px 10px 22px;
    position:relative;
}
.fm-layout-sushibar .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 12px;
    padding:10px 2px 4px;
}
.fm-layout-sushibar .fm-section{margin-bottom:38px;position:relative}

/* Section head: black lacquered belt strip with running dash */
.fm-layout-sushibar .fm-section-head{
    background:
        linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%)!important;
    border:none!important;
    border-top:1px solid #4a4a4a!important;
    border-bottom:1px solid #000!important;
    border-radius:2px!important;
    padding:10px 18px!important;margin-bottom:20px;
    text-align:left;position:relative;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 4px 12px rgba(0,0,0,.35);
    overflow:hidden;
}
/* running dashed belt line */
.fm-layout-sushibar .fm-section-head::before{
    content:'';position:absolute;top:50%;left:-8px;right:-8px;height:2px;
    background:
        repeating-linear-gradient(90deg,
            var(--fm-sb-amber) 0 8px,
            transparent 8px 16px);
    transform:translateY(50%);opacity:.55;
    animation:fmSushibarBelt 3s linear infinite;
}
[dir="rtl"] .fm-layout-sushibar .fm-section-head{text-align:right}
.fm-layout-sushibar .fm-section-title{
    font-family:'Shippori Mincho','Noto Serif JP','Playfair Display',serif;
    font-size:19px;font-weight:700;color:#fff;
    letter-spacing:3px;margin:0;line-height:1.1;
    text-transform:uppercase;position:relative;z-index:1;
    display:inline-block;
    padding:0 10px;background:#0a0a0a;
}
.fm-layout-sushibar .fm-section-title::before{
    content:'寿';font-family:'Shippori Mincho',serif;
    color:var(--fm-sb-red);font-size:15px;
    margin-right:10px;vertical-align:baseline;
    background:#fff;padding:1px 5px;border-radius:1px;
    box-shadow:0 2px 4px rgba(200,78,78,.4);
}
[dir="rtl"] .fm-layout-sushibar .fm-section-title::before{
    margin-right:0;margin-left:10px;
}
.fm-layout-sushibar .fm-section-line{display:none}

/* Card: sushi plate with colored saucer disk */
.fm-layout-sushibar .fm-card{
    background:
        linear-gradient(180deg, var(--fm-sb-paper) 0%, #fbf5e6 100%);
    border:1px solid rgba(139,90,40,.3);
    border-radius:4px;
    padding:10px 12px 14px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        0 3px 12px rgba(74,50,24,.2);
    transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    opacity:0;
    animation:fmSushibarSlide 1s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.1s);
}
.fm-layout-sushibar .fm-card:nth-child(2n){animation-name:fmSushibarSlideAlt}
.fm-layout-sushibar .fm-card:hover{
    transform:translateY(-2px) scale(1.01);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        0 10px 22px rgba(74,50,24,.3);
}
/* saucer disk (plate-color tier indicator) at top-right */
.fm-layout-sushibar .fm-card::before{
    content:'';position:absolute;top:8px;right:10px;
    width:24px;height:24px;z-index:3;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 45%),
        radial-gradient(circle at 50% 50%, var(--fm-sb-red) 0%, var(--fm-sb-red) 72%, rgba(0,0,0,.25) 72%, rgba(0,0,0,.25) 80%, transparent 80%);
    border-radius:50%;
    box-shadow:0 2px 4px rgba(0,0,0,.25);
    transform:rotate(-8deg);
}
.fm-layout-sushibar .fm-card:nth-child(2n)::before{
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 45%),
        radial-gradient(circle at 50% 50%, var(--fm-sb-amber) 0%, var(--fm-sb-amber) 72%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.22) 80%, transparent 80%);
}
.fm-layout-sushibar .fm-card:nth-child(3n)::before{
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 45%),
        radial-gradient(circle at 50% 50%, #3a7a3a 0%, #3a7a3a 72%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.22) 80%, transparent 80%);
}
.fm-layout-sushibar .fm-card:nth-child(4n)::before{
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 45%),
        radial-gradient(circle at 50% 50%, #1a1a1a 0%, #1a1a1a 72%, rgba(0,0,0,.3) 72%, rgba(0,0,0,.3) 80%, transparent 80%);
}
/* kanji watermark */
.fm-layout-sushibar .fm-card::after{
    content:'寿';position:absolute;bottom:-14px;right:-8px;
    font-family:'Shippori Mincho','Noto Serif JP',serif;
    font-size:90px;font-weight:700;line-height:1;
    color:rgba(139,90,40,.06);pointer-events:none;
    z-index:0;
}
.fm-layout-sushibar .fm-card > *{position:relative;z-index:1}

.fm-layout-sushibar .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:0}
.fm-layout-sushibar .fm-card .fm-card-img-wrap{
    width:100%!important;height:125px!important;max-height:125px!important;
    border-radius:3px!important;margin:0 0 10px;
    border:1px solid rgba(139,90,40,.35);
    box-shadow:inset 0 0 0 2px var(--fm-sb-paper), 0 2px 4px rgba(74,50,24,.15);
    filter:saturate(1.05);
}
.fm-layout-sushibar .fm-card .fm-card-body{padding:2px 4px;flex:1;display:flex;flex-direction:column}
.fm-layout-sushibar .fm-card .fm-card-title{
    font-family:'Shippori Mincho','Noto Serif JP','Playfair Display',serif;
    font-size:16px;font-weight:700;color:var(--fm-sb-wood-dark);
    margin:0 0 3px;line-height:1.15;letter-spacing:1px;
    text-transform:uppercase;
}
.fm-layout-sushibar .fm-card .fm-card-desc{
    font-family:'Georgia','Shippori Mincho',serif;
    font-size:12px;color:#8a6d3a;line-height:1.5;
    margin:0 0 10px;font-style:italic;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-sushibar .fm-card .fm-card-price{
    font-family:'Shippori Mincho','Noto Serif JP',serif;
    font-size:16px;font-weight:700;color:#fff;
    background:var(--fm-sb-wood-dark);
    padding:3px 14px;display:inline-block;align-self:flex-start;
    border-radius:2px;letter-spacing:1.5px;margin-top:auto;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.25);
    border-left:3px solid var(--fm-sb-amber);
}
[dir="rtl"] .fm-layout-sushibar .fm-card .fm-card-price{
    border-left:none;border-right:3px solid var(--fm-sb-amber);
}
.fm-layout-sushibar .fm-card .fm-card-bottom-row{
    margin-top:10px;padding-top:8px;
    border-top:1px solid rgba(139,90,40,.22);
}
.fm-layout-sushibar .fm-card .fm-card-metas{gap:5px;flex-wrap:wrap}
.fm-layout-sushibar .fm-card .fm-meta{
    background:rgba(139,90,40,.08);color:var(--fm-sb-wood-dark);
    border:1px solid rgba(139,90,40,.3);border-radius:2px;
    font-family:'Shippori Mincho',serif;font-size:11px;font-weight:600;
    padding:1px 8px;letter-spacing:.5px;text-transform:uppercase;
}
.fm-layout-sushibar .fm-badge{
    background:var(--fm-sb-red)!important;
    color:#fff!important;
    border:1.5px solid var(--fm-sb-paper)!important;
    border-radius:50%!important;
    font-family:'Shippori Mincho','Noto Serif JP',serif!important;
    font-weight:700!important;font-size:10px!important;
    padding:4px 8px!important;
    letter-spacing:.3px;
    box-shadow:0 0 0 1px var(--fm-sb-red), 0 2px 4px rgba(200,78,78,.4);
}
/* CATBAR: bamboo chopstick pills */
.fm-layout-sushibar .fm-catbar{
    background:
        repeating-linear-gradient(90deg,
            rgba(139,90,40,.08) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #f0e4d0 0%, #e0d0b0 100%)!important;
    border:1px solid var(--fm-sb-wood)!important;
    border-radius:4px!important;
    padding:8px 10px!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.4),
        inset 0 -1px 0 rgba(0,0,0,.15),
        0 3px 10px rgba(74,50,24,.2);
}
.fm-layout-sushibar .fm-cat-item{
    font-family:'Shippori Mincho','Noto Serif JP',serif;
    font-size:12.5px;font-weight:700;color:var(--fm-sb-wood-dark);
    background:
        linear-gradient(180deg, #fbf5e6 0%, #f0e4d0 100%);
    border:1px solid rgba(139,90,40,.45);
    border-left:3px solid var(--fm-sb-wood);
    border-radius:2px 12px 12px 2px;
    padding:4px 14px 4px 10px;letter-spacing:2px;
    text-transform:uppercase;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(74,50,24,.15);
    transition:all .3s ease;
}
[dir="rtl"] .fm-layout-sushibar .fm-cat-item{
    border-left:1px solid rgba(139,90,40,.45);
    border-right:3px solid var(--fm-sb-wood);
    border-radius:12px 2px 2px 12px;
    padding:4px 10px 4px 14px;
}
.fm-layout-sushibar .fm-cat-item:hover{transform:translateY(-1px)}
.fm-layout-sushibar .fm-cat-item.active{
    background:linear-gradient(180deg, var(--fm-sb-wood-dark) 0%, #281808 100%)!important;
    color:#fff!important;
    border-color:var(--fm-sb-amber)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.3);
}
.fm-layout-sushibar .fm-cat-icon-svg,
.fm-layout-sushibar .fm-cat-item:not(.active) svg{stroke:var(--fm-sb-wood-dark)}
.fm-layout-sushibar .fm-cat-item.active svg{stroke:#fff}
/* TOOLBAR: sushi counter wood slab */
.fm-layout-sushibar .fm-bottom-toolbar{
    background:
        repeating-linear-gradient(90deg,
            rgba(0,0,0,.04) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, #6a4320 0%, #3a2212 100%)!important;
    border-top:2px solid var(--fm-sb-amber)!important;
    box-shadow:
        inset 0 2px 0 rgba(232,168,73,.15),
        inset 0 -1px 0 rgba(0,0,0,.4),
        0 -5px 16px rgba(0,0,0,.3);
}
.fm-layout-sushibar .fm-bottom-toolbar .fm-toolbar-item{
    background:rgba(0,0,0,.28)!important;
    border:1px solid rgba(232,168,73,.3)!important;
    border-radius:2px!important;
    color:#f0dcb4!important;
    box-shadow:inset 0 1px 0 rgba(232,168,73,.12);
}
.fm-layout-sushibar .fm-bottom-toolbar .fm-toolbar-item:hover,
.fm-layout-sushibar .fm-bottom-toolbar .fm-toolbar-item:active{
    background:linear-gradient(180deg, var(--fm-sb-amber), #b7832f)!important;
    color:var(--fm-sb-wood-dark)!important;
    border-color:#f0dcb4!important;
}
@keyframes fmSushibarSlide{
    0%{opacity:0;transform:translateX(-28px)}
    60%{opacity:1;transform:translateX(3px)}
    100%{opacity:1;transform:translateX(0)}
}
@keyframes fmSushibarSlideAlt{
    0%{opacity:0;transform:translateX(28px)}
    60%{opacity:1;transform:translateX(-3px)}
    100%{opacity:1;transform:translateX(0)}
}
@keyframes fmSushibarBelt{
    0%{background-position:0 0}
    100%{background-position:16px 0}
}
@media(max-width:560px){
    .fm-layout-sushibar .fm-cards{grid-template-columns:repeat(2,1fr);gap:16px 0}
    .fm-layout-sushibar .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
    .fm-layout-sushibar .fm-section-title{font-size:17px;letter-spacing:2px}
}


/* ============================================================
   LAYOUT 34 — ICECREAM (fm-layout-icecream)
   Gelateria / ice-cream parlour. Soft cream background with
   pastel sprinkle scatter, candy-stripe scalloped awning header
   above each section, paper-cup style cards with scalloped wavy
   bottoms & sprinkle accents, ice-cream-scoop circular catbar
   buttons, pastel countertop toolbar with confetti sprinkles.
   Entry: squash-melt — cards land with a slight squash bounce.
   Design language: sweet, festive, whimsical, summer, cheerful.
   ============================================================ */
.fm-layout-icecream{
    --fm-ic-peach:#ffa88a;
    --fm-ic-pink:var(--fm-catbar-active-border,#ff8fa1);
    --fm-ic-mint:#9ad4c2;
    --fm-ic-yellow:#f2c34c;
    --fm-ic-lav:#b49ad9;
    --fm-ic-cream:var(--fm-card-bg,#fff6ea);
    --fm-ic-dark:var(--fm-sh-color,#c84e6d);
    background:
        /* sprinkle dots scatter */
        radial-gradient(circle 1.5px at 18% 22%, var(--fm-ic-pink) 98%, transparent 100%),
        radial-gradient(circle 1.5px at 72% 38%, var(--fm-ic-mint) 98%, transparent 100%),
        radial-gradient(circle 1.5px at 28% 68%, var(--fm-ic-yellow) 98%, transparent 100%),
        radial-gradient(circle 1.5px at 82% 82%, var(--fm-ic-lav) 98%, transparent 100%),
        radial-gradient(circle 1.5px at 48% 48%, var(--fm-ic-peach) 98%, transparent 100%),
        linear-gradient(180deg, #fff1ec 0%, #ffe8e2 100%);
    background-size:120px 120px, 140px 140px, 110px 110px, 130px 130px, 100px 100px, 100% 100%;
    padding:14px 10px 22px;
    position:relative;
}
.fm-layout-icecream .fm-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px 14px;
    padding:6px 2px;
}
.fm-layout-icecream .fm-section{margin-bottom:38px;position:relative;padding-top:24px}

/* Section head: candy-stripe scalloped awning */
.fm-layout-icecream .fm-section-head{
    background:
        repeating-linear-gradient(0deg,
            var(--fm-ic-pink) 0 10px,
            #fff6ea 10px 20px)!important;
    border:1.5px solid var(--fm-ic-dark)!important;
    border-radius:6px 6px 0 0!important;
    padding:10px 18px 12px!important;margin-bottom:26px;
    text-align:center;position:relative;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 4px 10px rgba(200,78,109,.2);
}
/* scalloped bottom edge of awning */
.fm-layout-icecream .fm-section-head::after{
    content:'';position:absolute;bottom:-12px;left:-1px;right:-1px;height:12px;
    background:
        radial-gradient(circle 7px at 10% 0%, var(--fm-ic-pink) 98%, transparent 100%),
        radial-gradient(circle 7px at 30% 0%, var(--fm-ic-pink) 98%, transparent 100%),
        radial-gradient(circle 7px at 50% 0%, var(--fm-ic-pink) 98%, transparent 100%),
        radial-gradient(circle 7px at 70% 0%, var(--fm-ic-pink) 98%, transparent 100%),
        radial-gradient(circle 7px at 90% 0%, var(--fm-ic-pink) 98%, transparent 100%);
    filter:drop-shadow(0 2px 2px rgba(200,78,109,.25));
}
.fm-layout-icecream .fm-section-title{
    font-family:'Pacifico','Great Vibes','Dancing Script','Brush Script MT',cursive;
    font-size:22px;font-weight:700;color:#fff;
    letter-spacing:.3px;margin:0;line-height:1.15;
    text-shadow:0 2px 0 rgba(200,78,109,.6), 0 3px 6px rgba(200,78,109,.3);
    position:relative;
}
.fm-layout-icecream .fm-section-title::before{
    content:'❊';margin-right:10px;color:var(--fm-ic-yellow);font-size:16px;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.fm-layout-icecream .fm-section-title::after{
    content:'❊';margin-left:10px;color:var(--fm-ic-yellow);font-size:16px;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.fm-layout-icecream .fm-section-line{display:none}

/* Card: paper cup with wavy drips */
.fm-layout-icecream .fm-card{
    background:var(--fm-ic-cream);
    border:2px solid var(--fm-ic-pink);
    border-radius:10px 10px 6px 6px;
    padding:10px 12px 14px;
    box-shadow:
        0 6px 0 rgba(255,143,161,.18),
        0 10px 22px rgba(200,78,109,.15);
    transition:transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
    display:flex;flex-direction:column;
    position:relative;
    opacity:0;
    animation:fmIcecreamMelt 1s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:calc(var(--fm-card-idx,0) * 0.08s);
}
.fm-layout-icecream .fm-card:nth-child(2n){border-color:var(--fm-ic-mint)}
.fm-layout-icecream .fm-card:nth-child(3n){border-color:var(--fm-ic-yellow)}
.fm-layout-icecream .fm-card:nth-child(4n){border-color:var(--fm-ic-lav)}
.fm-layout-icecream .fm-card:hover{
    transform:translateY(-3px);
    box-shadow:
        0 8px 0 rgba(255,143,161,.25),
        0 16px 30px rgba(200,78,109,.22);
}
/* wavy drip bottom */
.fm-layout-icecream .fm-card::after{
    content:'';position:absolute;bottom:-8px;left:4px;right:4px;height:10px;z-index:0;
    background:
        radial-gradient(circle 6px at 10% 0%, var(--fm-ic-pink) 98%, transparent 100%),
        radial-gradient(circle 6px at 30% 0%, var(--fm-ic-pink) 98%, transparent 100%),
        radial-gradient(circle 6px at 50% 0%, var(--fm-ic-pink) 98%, transparent 100%),
        radial-gradient(circle 6px at 70% 0%, var(--fm-ic-pink) 98%, transparent 100%),
        radial-gradient(circle 6px at 90% 0%, var(--fm-ic-pink) 98%, transparent 100%);
    opacity:.4;filter:blur(.3px);
}
.fm-layout-icecream .fm-card:nth-child(2n)::after{
    background:
        radial-gradient(circle 6px at 10% 0%, var(--fm-ic-mint) 98%, transparent 100%),
        radial-gradient(circle 6px at 30% 0%, var(--fm-ic-mint) 98%, transparent 100%),
        radial-gradient(circle 6px at 50% 0%, var(--fm-ic-mint) 98%, transparent 100%),
        radial-gradient(circle 6px at 70% 0%, var(--fm-ic-mint) 98%, transparent 100%),
        radial-gradient(circle 6px at 90% 0%, var(--fm-ic-mint) 98%, transparent 100%);
}
.fm-layout-icecream .fm-card:nth-child(3n)::after{
    background:
        radial-gradient(circle 6px at 10% 0%, var(--fm-ic-yellow) 98%, transparent 100%),
        radial-gradient(circle 6px at 30% 0%, var(--fm-ic-yellow) 98%, transparent 100%),
        radial-gradient(circle 6px at 50% 0%, var(--fm-ic-yellow) 98%, transparent 100%),
        radial-gradient(circle 6px at 70% 0%, var(--fm-ic-yellow) 98%, transparent 100%),
        radial-gradient(circle 6px at 90% 0%, var(--fm-ic-yellow) 98%, transparent 100%);
}
.fm-layout-icecream .fm-card:nth-child(4n)::after{
    background:
        radial-gradient(circle 6px at 10% 0%, var(--fm-ic-lav) 98%, transparent 100%),
        radial-gradient(circle 6px at 30% 0%, var(--fm-ic-lav) 98%, transparent 100%),
        radial-gradient(circle 6px at 50% 0%, var(--fm-ic-lav) 98%, transparent 100%),
        radial-gradient(circle 6px at 70% 0%, var(--fm-ic-lav) 98%, transparent 100%),
        radial-gradient(circle 6px at 90% 0%, var(--fm-ic-lav) 98%, transparent 100%);
}
/* sprinkles in corner */
.fm-layout-icecream .fm-card::before{
    content:'';position:absolute;top:6px;right:8px;
    width:24px;height:16px;z-index:3;
    background:
        linear-gradient(30deg, var(--fm-ic-pink) 0%, var(--fm-ic-pink) 80%, transparent 81%) no-repeat 0 0/3px 1.5px,
        linear-gradient(30deg, var(--fm-ic-mint) 0%, var(--fm-ic-mint) 80%, transparent 81%) no-repeat 8px 4px/3px 1.5px,
        linear-gradient(30deg, var(--fm-ic-yellow) 0%, var(--fm-ic-yellow) 80%, transparent 81%) no-repeat 16px 2px/3px 1.5px,
        linear-gradient(30deg, var(--fm-ic-lav) 0%, var(--fm-ic-lav) 80%, transparent 81%) no-repeat 4px 10px/3px 1.5px,
        linear-gradient(30deg, var(--fm-ic-peach) 0%, var(--fm-ic-peach) 80%, transparent 81%) no-repeat 14px 12px/3px 1.5px;
    pointer-events:none;
}
.fm-layout-icecream .fm-card > *{position:relative;z-index:1}

.fm-layout-icecream .fm-card .fm-card-top-row{flex-direction:column;gap:0;padding:0}
.fm-layout-icecream .fm-card .fm-card-img-wrap{
    width:100%!important;height:128px!important;max-height:128px!important;
    border-radius:8px!important;margin:0 0 12px;
    border:1.5px solid rgba(255,143,161,.45);
    box-shadow:0 2px 6px rgba(200,78,109,.15);
    filter:saturate(1.08) brightness(1.03);
    background:#fff;
}
.fm-layout-icecream .fm-card .fm-card-body{padding:0 4px;flex:1;display:flex;flex-direction:column}
.fm-layout-icecream .fm-card .fm-card-title{
    font-family:'Pacifico','Great Vibes','Dancing Script',cursive;
    font-size:20px;font-weight:400;color:var(--fm-ic-dark);
    margin:0 0 2px;line-height:1.1;letter-spacing:.2px;
}
.fm-layout-icecream .fm-card:nth-child(2n) .fm-card-title{color:#3d8879}
.fm-layout-icecream .fm-card:nth-child(3n) .fm-card-title{color:#a87a15}
.fm-layout-icecream .fm-card:nth-child(4n) .fm-card-title{color:#6a4d95}
.fm-layout-icecream .fm-card .fm-card-desc{
    font-family:'Quicksand','Nunito',sans-serif;
    font-size:12px;color:#a07585;line-height:1.5;
    margin:0 0 10px;font-style:italic;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm-layout-icecream .fm-card .fm-card-price{
    font-family:'Quicksand','Nunito',sans-serif;
    font-size:15px;font-weight:800;color:#fff;
    background:var(--fm-ic-pink);
    padding:4px 14px;display:inline-block;align-self:flex-start;
    border-radius:14px;letter-spacing:.3px;margin-top:auto;
    box-shadow:0 3px 0 rgba(200,78,109,.3), 0 5px 10px rgba(255,143,161,.25);
    border:1.5px solid #fff;
}
.fm-layout-icecream .fm-card:nth-child(2n) .fm-card-price{
    background:var(--fm-ic-mint);
    box-shadow:0 3px 0 rgba(61,136,121,.25), 0 5px 10px rgba(154,212,194,.3);
}
.fm-layout-icecream .fm-card:nth-child(3n) .fm-card-price{
    background:var(--fm-ic-yellow);color:#7a5200;
    box-shadow:0 3px 0 rgba(168,122,21,.3), 0 5px 10px rgba(242,195,76,.3);
}
.fm-layout-icecream .fm-card:nth-child(4n) .fm-card-price{
    background:var(--fm-ic-lav);
    box-shadow:0 3px 0 rgba(106,77,149,.25), 0 5px 10px rgba(180,154,217,.3);
}
.fm-layout-icecream .fm-card .fm-card-bottom-row{
    margin-top:10px;padding-top:8px;
    border-top:1.5px dotted rgba(255,143,161,.4);
}
.fm-layout-icecream .fm-card .fm-card-metas{gap:6px;flex-wrap:wrap}
.fm-layout-icecream .fm-card .fm-meta{
    background:#fff5fa;color:var(--fm-ic-dark);
    border:1px dashed rgba(255,143,161,.5);border-radius:10px;
    font-family:'Nunito','Quicksand',sans-serif;
    font-size:11px;font-weight:600;
    padding:2px 9px;letter-spacing:.2px;
}
.fm-layout-icecream .fm-badge{
    background:linear-gradient(135deg, var(--fm-ic-peach), var(--fm-ic-pink))!important;
    color:#fff!important;
    border:1.5px solid #fff!important;
    border-radius:50px!important;
    font-family:'Pacifico','Quicksand',cursive!important;
    font-weight:400!important;font-size:11px!important;
    padding:2px 10px!important;
    letter-spacing:.3px;
    box-shadow:0 3px 6px rgba(200,78,109,.3);
}
/* CATBAR: ice-cream scoop pills */
.fm-layout-icecream .fm-catbar{
    background:
        linear-gradient(180deg, #fff6ea 0%, #ffe8e2 100%)!important;
    border:2px solid var(--fm-ic-pink)!important;
    border-radius:26px!important;
    padding:8px 12px!important;
    box-shadow:
        0 4px 0 rgba(255,143,161,.2),
        0 8px 18px rgba(200,78,109,.15);
}
.fm-layout-icecream .fm-cat-item{
    font-family:'Quicksand','Nunito',sans-serif;
    font-size:13px;font-weight:700;color:var(--fm-ic-dark);
    background:#fff;
    border:1.5px solid rgba(255,143,161,.5);
    border-top:4px solid var(--fm-ic-pink);
    border-radius:14px 14px 22px 22px;
    padding:3px 14px 4px;letter-spacing:.2px;
    box-shadow:0 3px 0 rgba(255,143,161,.22), inset 0 1px 0 rgba(255,255,255,.8);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.fm-layout-icecream .fm-cat-item:nth-child(2n){border-top-color:var(--fm-ic-mint)}
.fm-layout-icecream .fm-cat-item:nth-child(3n){border-top-color:var(--fm-ic-yellow)}
.fm-layout-icecream .fm-cat-item:nth-child(4n){border-top-color:var(--fm-ic-lav)}
.fm-layout-icecream .fm-cat-item:hover{transform:translateY(-2px)}
.fm-layout-icecream .fm-cat-item.active{
    background:var(--fm-ic-pink)!important;
    color:#fff!important;
    border-color:#fff!important;
    border-top-color:var(--fm-ic-yellow)!important;
    box-shadow:0 3px 0 rgba(200,78,109,.4), 0 6px 14px rgba(255,143,161,.3);
    text-shadow:0 1px 1px rgba(200,78,109,.4);
}
.fm-layout-icecream .fm-cat-item:nth-child(2n).active{
    background:var(--fm-ic-mint)!important;color:#fff!important;
    box-shadow:0 3px 0 rgba(61,136,121,.4), 0 6px 14px rgba(154,212,194,.35);
}
.fm-layout-icecream .fm-cat-item:nth-child(3n).active{
    background:var(--fm-ic-yellow)!important;color:#7a5200!important;
    border-top-color:var(--fm-ic-pink)!important;
    box-shadow:0 3px 0 rgba(168,122,21,.4), 0 6px 14px rgba(242,195,76,.35);
}
.fm-layout-icecream .fm-cat-item:nth-child(4n).active{
    background:var(--fm-ic-lav)!important;color:#fff!important;
    box-shadow:0 3px 0 rgba(106,77,149,.4), 0 6px 14px rgba(180,154,217,.35);
}
.fm-layout-icecream .fm-cat-icon-svg,
.fm-layout-icecream .fm-cat-item:not(.active) svg{stroke:var(--fm-ic-dark)}
.fm-layout-icecream .fm-cat-item.active svg{stroke:#fff}
.fm-layout-icecream .fm-cat-item:nth-child(3n).active svg{stroke:#7a5200}
/* TOOLBAR: pastel sprinkled countertop */
.fm-layout-icecream .fm-bottom-toolbar{
    background:
        radial-gradient(circle 1.5px at 15% 60%, var(--fm-ic-pink) 98%, transparent 100%),
        radial-gradient(circle 1.5px at 35% 30%, var(--fm-ic-mint) 98%, transparent 100%),
        radial-gradient(circle 1.5px at 55% 70%, var(--fm-ic-yellow) 98%, transparent 100%),
        radial-gradient(circle 1.5px at 75% 40%, var(--fm-ic-lav) 98%, transparent 100%),
        linear-gradient(180deg, #fff 0%, #fff6ea 100%)!important;
    background-size:40px 40px, 45px 45px, 50px 50px, 42px 42px, 100% 100%;
    border-top:3px solid var(--fm-ic-pink)!important;
    box-shadow:
        inset 0 3px 0 rgba(255,255,255,.6),
        0 -5px 16px rgba(200,78,109,.15);
}
.fm-layout-icecream .fm-bottom-toolbar .fm-toolbar-item{
    background:var(--fm-ic-pink)!important;
    border:2px solid #fff!important;
    border-radius:16px!important;
    color:#fff!important;
    box-shadow:0 3px 0 rgba(200,78,109,.35), 0 5px 10px rgba(255,143,161,.2);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.fm-layout-icecream .fm-bottom-toolbar .fm-toolbar-item:nth-child(2){
    background:var(--fm-ic-mint)!important;
    box-shadow:0 3px 0 rgba(61,136,121,.35), 0 5px 10px rgba(154,212,194,.25);
}
.fm-layout-icecream .fm-bottom-toolbar .fm-toolbar-item:nth-child(3){
    background:var(--fm-ic-yellow)!important;color:#7a5200!important;
    box-shadow:0 3px 0 rgba(168,122,21,.4), 0 5px 10px rgba(242,195,76,.3);
}
.fm-layout-icecream .fm-bottom-toolbar .fm-toolbar-item:nth-child(4){
    background:var(--fm-ic-lav)!important;
    box-shadow:0 3px 0 rgba(106,77,149,.35), 0 5px 10px rgba(180,154,217,.25);
}
.fm-layout-icecream .fm-bottom-toolbar .fm-toolbar-item:hover,
.fm-layout-icecream .fm-bottom-toolbar .fm-toolbar-item:active{
    transform:translateY(-2px);
}
@keyframes fmIcecreamMelt{
    0%{opacity:0;transform:translateY(-14px) scale(1.08,.85)}
    50%{opacity:1;transform:translateY(4px) scale(.95,1.06)}
    75%{transform:translateY(-2px) scale(1.02,.98)}
    100%{opacity:1;transform:translateY(0) scale(1,1)}
}
@media(max-width:560px){
    .fm-layout-icecream .fm-cards{grid-template-columns:repeat(2,1fr);gap:20px 0}
    .fm-layout-icecream .fm-card .fm-card-img-wrap{height:180px!important;max-height:180px!important}
    .fm-layout-icecream .fm-section-title{font-size:20px}
    .fm-layout-icecream .fm-card .fm-card-title{font-size:18px}
}



/* ============================================================
   v11.15.0 — LAYOUT FIX (extends v11.14.0)
   Force column stacking (image on top, body below) on ALL 12
   restaurant/cafe layouts (6 original + 6 new). Without this,
   the global rules [dir="rtl"] .fm-card.fm-card-img-left
   .fm-card-top-row (specificity 0,3,1) would beat layout-scoped
   rules (specificity 0,3,0) and force row-reverse → image fills
   width. These overrides use attribute selectors to match or
   exceed that specificity and use !important as a final
   guarantee.
   ============================================================ */
[dir] .fm-layout-menuboard .fm-card .fm-card-top-row,
[dir] .fm-layout-bistrot .fm-card .fm-card-top-row,
[dir] .fm-layout-streetfood .fm-card .fm-card-top-row,
[dir] .fm-layout-patisserie .fm-card .fm-card-top-row,
[dir] .fm-layout-steakhouse .fm-card .fm-card-top-row,
[dir] .fm-layout-izakaya .fm-card .fm-card-top-row,
[dir] .fm-layout-speakeasy .fm-card .fm-card-top-row,
[dir] .fm-layout-greenhouse .fm-card .fm-card-top-row,
[dir] .fm-layout-kawaii .fm-card .fm-card-top-row,
[dir] .fm-layout-trattoria .fm-card .fm-card-top-row,
[dir] .fm-layout-sushibar .fm-card .fm-card-top-row,
[dir] .fm-layout-icecream .fm-card .fm-card-top-row{
    flex-direction:column!important;
    gap:0!important;
}
/* Force card-body to be a full-width block beneath the image */
.fm-layout-menuboard .fm-card .fm-card-body,
.fm-layout-bistrot .fm-card .fm-card-body,
.fm-layout-streetfood .fm-card .fm-card-body,
.fm-layout-patisserie .fm-card .fm-card-body,
.fm-layout-steakhouse .fm-card .fm-card-body,
.fm-layout-izakaya .fm-card .fm-card-body,
.fm-layout-speakeasy .fm-card .fm-card-body,
.fm-layout-greenhouse .fm-card .fm-card-body,
.fm-layout-kawaii .fm-card .fm-card-body,
.fm-layout-trattoria .fm-card .fm-card-body,
.fm-layout-sushibar .fm-card .fm-card-body,
.fm-layout-icecream .fm-card .fm-card-body{
    width:100%;min-width:0;flex:1 1 auto;
}
/* Guarantee the image wrapper stays the declared height and
   doesn't get overridden by user img_width/img_height or border
   options. */
[dir] .fm-layout-menuboard .fm-card .fm-card-img-wrap{width:auto!important;height:130px!important;max-height:130px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-bistrot .fm-card .fm-card-img-wrap{width:auto!important;height:125px!important;max-height:125px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-streetfood .fm-card .fm-card-img-wrap{width:auto!important;height:125px!important;max-height:125px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-patisserie .fm-card .fm-card-img-wrap{width:auto!important;height:130px!important;max-height:130px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-steakhouse .fm-card .fm-card-img-wrap{width:auto!important;height:125px!important;max-height:125px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-izakaya .fm-card .fm-card-img-wrap{width:auto!important;height:125px!important;max-height:125px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-speakeasy .fm-card .fm-card-img-wrap{width:auto!important;height:125px!important;max-height:125px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-greenhouse .fm-card .fm-card-img-wrap{width:auto!important;height:130px!important;max-height:130px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-kawaii .fm-card .fm-card-img-wrap{width:auto!important;height:130px!important;max-height:130px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-trattoria .fm-card .fm-card-img-wrap{width:auto!important;height:125px!important;max-height:125px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-sushibar .fm-card .fm-card-img-wrap{width:auto!important;height:125px!important;max-height:125px!important;min-width:0;align-self:stretch}
[dir] .fm-layout-icecream .fm-card .fm-card-img-wrap{width:auto!important;height:128px!important;max-height:128px!important;min-width:0;align-self:stretch}
/* Mobile overrides — also beat the global @media(max-width:500px) rule */
@media(max-width:560px){
    [dir] .fm-layout-menuboard .fm-card .fm-card-img-wrap,
    [dir] .fm-layout-patisserie .fm-card .fm-card-img-wrap,
    [dir] .fm-layout-greenhouse .fm-card .fm-card-img-wrap,
    [dir] .fm-layout-kawaii .fm-card .fm-card-img-wrap{width:auto!important;height:180px!important;max-height:180px!important}
    [dir] .fm-layout-streetfood .fm-card .fm-card-img-wrap,
    [dir] .fm-layout-icecream .fm-card .fm-card-img-wrap{width:auto!important;height:180px!important;max-height:180px!important}
    [dir] .fm-layout-bistrot .fm-card .fm-card-img-wrap,
    [dir] .fm-layout-steakhouse .fm-card .fm-card-img-wrap,
    [dir] .fm-layout-izakaya .fm-card .fm-card-img-wrap,
    [dir] .fm-layout-speakeasy .fm-card .fm-card-img-wrap,
    [dir] .fm-layout-trattoria .fm-card .fm-card-img-wrap,
    [dir] .fm-layout-sushibar .fm-card .fm-card-img-wrap{width:auto!important;height:180px!important;max-height:180px!important}
}
/* Ensure the card itself is a column flex so top-row sits above bottom-row */
.fm-layout-menuboard .fm-card,
.fm-layout-bistrot .fm-card,
.fm-layout-streetfood .fm-card,
.fm-layout-patisserie .fm-card,
.fm-layout-steakhouse .fm-card,
.fm-layout-izakaya .fm-card,
.fm-layout-speakeasy .fm-card,
.fm-layout-greenhouse .fm-card,
.fm-layout-kawaii .fm-card,
.fm-layout-trattoria .fm-card,
.fm-layout-sushibar .fm-card,
.fm-layout-icecream .fm-card{
    flex-direction:column!important;
}

/* ============================================================
   v11.17.0 — MOBILE 2-COLUMN UNIFICATION
   Originally many themed layouts collapsed to a single column on
   real phones (≤560px). v11.17.0 keeps them at 2 columns to match
   the customizer preview. This block tunes gaps, padding and image
   heights so 2-col fits on real phones without horizontal scroll.
   ============================================================ */
@media(max-width:560px){
    /* Tighter horizontal gap, comfortable vertical gap */
    .fm-layout-blueprint .fm-cards,
    .fm-layout-polaroid .fm-cards,
    .fm-layout-brutalist .fm-cards,
    .fm-layout-cinema .fm-cards,
    .fm-layout-kraft .fm-cards,
    .fm-layout-cyberpunk .fm-cards,
    .fm-layout-botanical .fm-cards,
    .fm-layout-comic .fm-cards,
    .fm-layout-menuboard .fm-cards,
    .fm-layout-bistrot .fm-cards,
    .fm-layout-streetfood .fm-cards,
    .fm-layout-patisserie .fm-cards,
    .fm-layout-steakhouse .fm-cards,
    .fm-layout-izakaya .fm-cards,
    .fm-layout-speakeasy .fm-cards,
    .fm-layout-greenhouse .fm-cards,
    .fm-layout-kawaii .fm-cards,
    .fm-layout-trattoria .fm-cards,
    .fm-layout-sushibar .fm-cards,
    .fm-layout-icecream .fm-cards{
        gap:14px 8px!important;
    }
    /* Compact card sizing for 2-col mobile */
    .fm-layout-blueprint .fm-card,
    .fm-layout-polaroid .fm-card,
    .fm-layout-brutalist .fm-card,
    .fm-layout-cinema .fm-card,
    .fm-layout-kraft .fm-card,
    .fm-layout-cyberpunk .fm-card,
    .fm-layout-botanical .fm-card,
    .fm-layout-comic .fm-card,
    .fm-layout-menuboard .fm-card,
    .fm-layout-bistrot .fm-card,
    .fm-layout-streetfood .fm-card,
    .fm-layout-patisserie .fm-card,
    .fm-layout-steakhouse .fm-card,
    .fm-layout-izakaya .fm-card,
    .fm-layout-speakeasy .fm-card,
    .fm-layout-greenhouse .fm-card,
    .fm-layout-kawaii .fm-card,
    .fm-layout-trattoria .fm-card,
    .fm-layout-sushibar .fm-card,
    .fm-layout-icecream .fm-card{
        min-width:0;
    }
    /* Ensure card images scale to column width and don't overflow */
    .fm-layout-blueprint .fm-card-img-wrap,
    .fm-layout-polaroid .fm-card-img-wrap,
    .fm-layout-brutalist .fm-card-img-wrap,
    .fm-layout-cinema .fm-card-img-wrap,
    .fm-layout-kraft .fm-card-img-wrap,
    .fm-layout-cyberpunk .fm-card-img-wrap,
    .fm-layout-botanical .fm-card-img-wrap,
    .fm-layout-comic .fm-card-img-wrap,
    .fm-layout-menuboard .fm-card-img-wrap,
    .fm-layout-bistrot .fm-card-img-wrap,
    .fm-layout-streetfood .fm-card-img-wrap,
    .fm-layout-patisserie .fm-card-img-wrap,
    .fm-layout-steakhouse .fm-card-img-wrap,
    .fm-layout-izakaya .fm-card-img-wrap,
    .fm-layout-speakeasy .fm-card-img-wrap,
    .fm-layout-greenhouse .fm-card-img-wrap,
    .fm-layout-kawaii .fm-card-img-wrap,
    .fm-layout-trattoria .fm-card-img-wrap,
    .fm-layout-sushibar .fm-card-img-wrap,
    .fm-layout-icecream .fm-card-img-wrap{
        width:100%!important;
        max-width:100%!important;
        height:auto;
        aspect-ratio:1/1;
    }
    /* Slightly smaller text on 2-col mobile */
    .fm-layout-blueprint .fm-card-title,
    .fm-layout-cinema .fm-card-title,
    .fm-layout-cyberpunk .fm-card-title,
    .fm-layout-botanical .fm-card-title,
    .fm-layout-streetfood .fm-card-title,
    .fm-layout-patisserie .fm-card-title,
    .fm-layout-steakhouse .fm-card-title,
    .fm-layout-izakaya .fm-card-title,
    .fm-layout-greenhouse .fm-card-title,
    .fm-layout-kawaii .fm-card-title,
    .fm-layout-trattoria .fm-card-title,
    .fm-layout-sushibar .fm-card-title,
    .fm-layout-icecream .fm-card-title{
        font-size:14px!important;
    }
}

/* On very narrow phones (≤360px), some dense layouts truly
   benefit from 1-col fallback so titles aren't unreadable. */
@media(max-width:360px){
    .fm-layout-cyberpunk .fm-cards,
    .fm-layout-blueprint .fm-cards{
        grid-template-columns:1fr!important;
        gap:18px 0!important;
    }
}

/* ============================================================
   v11.17.1 — LAYOUT FIXES (HOTFIX OVERRIDES)
   This block is appended at the end so it wins specificity over
   the layout sections above. It addresses user-reported issues:
   • Showcase: smaller cards, sharper desc, smaller add-button,
     hint of partial third card to invite horizontal scroll.
   • Catalog: tame the live-frontend image bloat (cap aspect-ratio
     so width never exceeds card minus padding and never grows
     taller than ~150px on phones).
   • Timeline: simplified vertical-line layout that works in both
     preview and live (single column with side connectors).
   • Blueprint: shrink add-button, restore image fit, ensure title/
     desc/price visible with stronger specificity.
   • Polaroid: kill the empty colored space below image, smaller
     add-button, proper image fit.
   • Terminal: keep CRT phosphor but ensure layout actually works.
   • Ticket: rebuild simpler so something actually renders.
   • Brutalist, Cinema, Kraft, Cyberpunk, Botanical, Comic,
     Menuboard, Bistrot, Streetfood, Izakaya, Speakeasy,
     Greenhouse, Kawaii, Trattoria, Sushibar, Icecream:
     fix add-button size, image overflow, blank space below image.
   • All add-buttons in 2-column grid layouts shrink to fit.
   ============================================================ */

/* ---------- Universal add-button shrink in special layouts ---------- */
/* The Flavor-Cart-Pro add button gets too large for narrow grid cells.
   Shrink it across all dense / 2-column custom layouts. */
.fm-layout-showcase .fm-card .fcp-btn,
.fm-layout-showcase .fm-card-sc-area .fcp-btn,
.fm-layout-catalog .fm-card .fcp-btn,
.fm-layout-blueprint .fm-card .fcp-btn,
.fm-layout-polaroid .fm-card .fcp-btn,
.fm-layout-cinema .fm-card .fcp-btn,
.fm-layout-cyberpunk .fm-card .fcp-btn,
.fm-layout-botanical .fm-card .fcp-btn,
.fm-layout-comic .fm-card .fcp-btn,
.fm-layout-kraft .fm-card .fcp-btn,
.fm-layout-menuboard .fm-card .fcp-btn,
.fm-layout-bistrot .fm-card .fcp-btn,
.fm-layout-streetfood .fm-card .fcp-btn,
.fm-layout-patisserie .fm-card .fcp-btn,
.fm-layout-steakhouse .fm-card .fcp-btn,
.fm-layout-izakaya .fm-card .fcp-btn,
.fm-layout-speakeasy .fm-card .fcp-btn,
.fm-layout-greenhouse .fm-card .fcp-btn,
.fm-layout-kawaii .fm-card .fcp-btn,
.fm-layout-trattoria .fm-card .fcp-btn,
.fm-layout-sushibar .fm-card .fcp-btn,
.fm-layout-icecream .fm-card .fcp-btn,
.fm-layout-brutalist .fm-card .fcp-btn,
.fm-layout-ticket .fm-card .fcp-btn,
.fm-layout-timeline .fm-card .fcp-btn{
    font-size:11px!important;
    padding:5px 10px!important;
    min-height:28px!important;
    height:auto!important;
    line-height:1.2!important;
    border-radius:8px!important;
}
.fm-layout-showcase .fm-card .fcp-btn svg,
.fm-layout-catalog .fm-card .fcp-btn svg,
.fm-layout-blueprint .fm-card .fcp-btn svg,
.fm-layout-polaroid .fm-card .fcp-btn svg,
.fm-layout-cinema .fm-card .fcp-btn svg,
.fm-layout-cyberpunk .fm-card .fcp-btn svg,
.fm-layout-botanical .fm-card .fcp-btn svg,
.fm-layout-comic .fm-card .fcp-btn svg,
.fm-layout-kraft .fm-card .fcp-btn svg,
.fm-layout-menuboard .fm-card .fcp-btn svg,
.fm-layout-bistrot .fm-card .fcp-btn svg,
.fm-layout-streetfood .fm-card .fcp-btn svg,
.fm-layout-patisserie .fm-card .fcp-btn svg,
.fm-layout-steakhouse .fm-card .fcp-btn svg,
.fm-layout-izakaya .fm-card .fcp-btn svg,
.fm-layout-speakeasy .fm-card .fcp-btn svg,
.fm-layout-greenhouse .fm-card .fcp-btn svg,
.fm-layout-kawaii .fm-card .fcp-btn svg,
.fm-layout-trattoria .fm-card .fcp-btn svg,
.fm-layout-sushibar .fm-card .fcp-btn svg,
.fm-layout-icecream .fm-card .fcp-btn svg,
.fm-layout-brutalist .fm-card .fcp-btn svg,
.fm-layout-ticket .fm-card .fcp-btn svg,
.fm-layout-timeline .fm-card .fcp-btn svg{
    width:14px!important;height:14px!important;
}

/* ---------- Universal image-fit fix for all custom layouts ---------- */
/* Force images to fully cover their wrapper without overflowing the
   card and without leaving empty colored gaps below them. */
.fm-layout-showcase .fm-card .fm-card-img,
.fm-layout-catalog  .fm-card .fm-card-img,
.fm-layout-blueprint .fm-card .fm-card-img,
.fm-layout-polaroid .fm-card .fm-card-img,
.fm-layout-cinema   .fm-card .fm-card-img,
.fm-layout-kraft    .fm-card .fm-card-img,
.fm-layout-cyberpunk .fm-card .fm-card-img,
.fm-layout-botanical .fm-card .fm-card-img,
.fm-layout-comic    .fm-card .fm-card-img,
.fm-layout-menuboard .fm-card .fm-card-img,
.fm-layout-bistrot  .fm-card .fm-card-img,
.fm-layout-streetfood .fm-card .fm-card-img,
.fm-layout-patisserie .fm-card .fm-card-img,
.fm-layout-steakhouse .fm-card .fm-card-img,
.fm-layout-izakaya  .fm-card .fm-card-img,
.fm-layout-speakeasy .fm-card .fm-card-img,
.fm-layout-greenhouse .fm-card .fm-card-img,
.fm-layout-kawaii   .fm-card .fm-card-img,
.fm-layout-trattoria .fm-card .fm-card-img,
.fm-layout-sushibar .fm-card .fm-card-img,
.fm-layout-icecream .fm-card .fm-card-img,
.fm-layout-brutalist .fm-card .fm-card-img,
.fm-layout-ticket   .fm-card .fm-card-img,
.fm-layout-timeline .fm-card .fm-card-img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
}
/* Image wrapper must be positioned relative so the absolute image
   covers the wrapper bounds exactly (no blank colored space). */
.fm-layout-catalog  .fm-card .fm-card-img-wrap,
.fm-layout-blueprint .fm-card .fm-card-img-wrap,
.fm-layout-polaroid .fm-card .fm-card-img-wrap,
.fm-layout-cinema   .fm-card .fm-card-img-wrap,
.fm-layout-kraft    .fm-card .fm-card-img-wrap,
.fm-layout-cyberpunk .fm-card .fm-card-img-wrap,
.fm-layout-botanical .fm-card .fm-card-img-wrap,
.fm-layout-comic    .fm-card .fm-card-img-wrap,
.fm-layout-menuboard .fm-card .fm-card-img-wrap,
.fm-layout-bistrot  .fm-card .fm-card-img-wrap,
.fm-layout-streetfood .fm-card .fm-card-img-wrap,
.fm-layout-patisserie .fm-card .fm-card-img-wrap,
.fm-layout-steakhouse .fm-card .fm-card-img-wrap,
.fm-layout-izakaya  .fm-card .fm-card-img-wrap,
.fm-layout-speakeasy .fm-card .fm-card-img-wrap,
.fm-layout-greenhouse .fm-card .fm-card-img-wrap,
.fm-layout-kawaii   .fm-card .fm-card-img-wrap,
.fm-layout-trattoria .fm-card .fm-card-img-wrap,
.fm-layout-sushibar .fm-card .fm-card-img-wrap,
.fm-layout-icecream .fm-card .fm-card-img-wrap,
.fm-layout-brutalist .fm-card .fm-card-img-wrap,
.fm-layout-timeline .fm-card .fm-card-img-wrap{
    position:relative!important;
    overflow:hidden!important;
}

/* ============================================================
   SHOWCASE — smaller card so a 3rd card peeks at the edge,
   plus more readable description.
   ============================================================ */
.fm-layout-showcase .fm-card{
    width:148px!important;
    height:218px!important;
}
.fm-layout-showcase .fm-card .fm-card-title{
    font-size:13px!important;
    -webkit-line-clamp:2!important;
    margin-bottom:3px!important;
}
.fm-layout-showcase .fm-card .fm-card-desc{
    font-size:11.5px!important;
    color:rgba(255,255,255,.95)!important;
    -webkit-line-clamp:2!important;
    line-height:1.35!important;
    text-shadow:0 1px 4px rgba(0,0,0,.85)!important;
    margin-bottom:4px!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}
.fm-layout-showcase .fm-card .fm-card-price{
    font-size:12px!important;
    padding:2px 8px!important;
}
.fm-layout-showcase .fm-card .fm-card-body{
    padding:8px 10px 10px!important;
}
/* Add a stronger gradient at bottom so desc is always readable */
.fm-layout-showcase .fm-card .fm-card-img-wrap::after{
    background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.94) 100%)!important;
}
/* Add right padding so the partial 3rd card peeks */
.fm-layout-showcase .fm-cards{
    padding-inline-end:50px!important;
    scroll-padding-inline-end:50px!important;
}
.flavor-preview.fm-layout-showcase .fm-card{
    width:120px!important;
    height:178px!important;
}
.flavor-preview.fm-layout-showcase .fm-card .fm-card-title{font-size:11px!important}
.flavor-preview.fm-layout-showcase .fm-card .fm-card-desc{font-size:10px!important;-webkit-line-clamp:2!important}
.flavor-preview.fm-layout-showcase .fm-card .fm-card-price{font-size:10px!important;padding:2px 6px!important}
.flavor-preview.fm-layout-showcase .fm-cards{padding-inline-end:42px!important}

/* ============================================================
   CATALOG — fix the live-frontend image bloat. The original used
   aspect-ratio:1/1 with width:calc(100% - 20px), which on real
   phones becomes huge. Cap the height so cards stay reasonable.
   ============================================================ */
.fm-layout-catalog .fm-card .fm-card-img-wrap{
    width:calc(100% - 20px)!important;
    height:140px!important;
    max-height:140px!important;
    aspect-ratio:auto!important;
    margin:10px 10px 0!important;
}
@media(max-width:420px){
    .fm-layout-catalog .fm-card .fm-card-img-wrap{
        height:120px!important;
        max-height:120px!important;
    }
}
.flavor-preview.fm-layout-catalog .fm-card .fm-card-img-wrap{
    height:90px!important;
    max-height:90px!important;
}

/* ============================================================
   TIMELINE — full rebuild as a single-column vertical list with
   a side rail (works in both preview and live). The original
   2-column alternating design relied on data-card-idx selectors
   that fall apart when only 1-3 items are in a section.
   ============================================================ */
.fm-layout-timeline .fm-cards{
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
    padding:8px 12px 8px 36px!important;
    position:relative!important;
}
[dir="rtl"] .fm-layout-timeline .fm-cards{
    padding:8px 36px 8px 12px!important;
}
.fm-layout-timeline .fm-cards::before{
    left:18px!important;
    right:auto!important;
    transform:none!important;
    border-left-style:dashed!important;
    border-left-width:2px!important;
}
[dir="rtl"] .fm-layout-timeline .fm-cards::before{
    left:auto!important;
    right:18px!important;
    border-left:none!important;
    border-right:2px dashed var(--fm-tl-line)!important;
}
.fm-layout-timeline .fm-card{
    width:100%!important;
    align-self:auto!important;
    margin:0!important;
    overflow:hidden!important;
    position:relative!important;
}
/* Reset ALL the data-card-idx::before/::after rules, then apply
   one consistent set on the side rail. */
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx]::before,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx]::before,
.fm-layout-timeline .fm-card::before{
    content:''!important;
    position:absolute!important;
    top:24px!important;
    left:auto!important;
    right:auto!important;
    inset-inline-start:-26px!important;
    width:14px!important;height:14px!important;
    border-radius:50%!important;
    background:var(--fm-tl-node)!important;
    border:3px solid var(--fm-bg, #fafafa)!important;
    box-shadow:0 0 0 2px var(--fm-tl-node)!important;
    z-index:3!important;
    transform:none!important;
}
.fm-layout-timeline[dir="rtl"] .fm-card[data-card-idx]::after,
.fm-layout-timeline[dir="ltr"] .fm-card[data-card-idx]::after,
.fm-layout-timeline .fm-card::after{
    content:''!important;
    position:absolute!important;
    top:30px!important;
    left:auto!important;
    right:auto!important;
    inset-inline-start:-12px!important;
    height:2px!important;
    width:12px!important;
    background:var(--fm-tl-arm)!important;
    z-index:2!important;
}
.fm-layout-timeline .fm-card .fm-card-img-wrap{
    width:100%!important;
    height:130px!important;
    max-height:130px!important;
    border-radius:14px 14px 0 0!important;
    margin:0!important;
}
.flavor-preview.fm-layout-timeline .fm-card .fm-card-img-wrap{
    height:90px!important;
    max-height:90px!important;
}
.fm-layout-timeline .fm-card .fm-card-bottom-row{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
}
@media(max-width:480px){
    .fm-layout-timeline .fm-card{
        width:100%!important;
        align-self:auto!important;
        margin-inline-start:0!important;
        margin-inline-end:0!important;
    }
}

/* ============================================================
   BLUEPRINT — shrink add-button, restore image, force visibility
   of title / desc / price.
   ============================================================ */
.fm-layout-blueprint .fm-cards{
    grid-template-columns:repeat(2,1fr)!important;
    gap:14px!important;
    padding:6px 10px!important;
}
.fm-layout-blueprint .fm-card{
    padding:10px!important;
    overflow:hidden!important;
}
.fm-layout-blueprint .fm-card .fm-card-img-wrap{
    width:100%!important;
    height:110px!important;
    max-height:110px!important;
    margin-bottom:8px!important;
}
.fm-layout-blueprint .fm-card .fm-card-title{
    font-size:12.5px!important;
    color:#fff!important;
    margin-bottom:3px!important;
    padding-bottom:3px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}
.fm-layout-blueprint .fm-card .fm-card-desc{
    font-size:10.5px!important;
    color:#9ec0e0!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    margin-bottom:4px!important;
}
.fm-layout-blueprint .fm-card .fm-card-price{
    font-size:12px!important;
    padding:2px 6px!important;
}
.fm-layout-blueprint .fm-card .fm-card-bottom-row{
    margin-top:4px!important;
    padding-top:6px!important;
}
.fm-layout-blueprint .fm-card > .fm-card-bottom-row::after{
    display:none!important;
}
.flavor-preview.fm-layout-blueprint .fm-card .fm-card-img-wrap{
    height:80px!important;
    max-height:80px!important;
}

/* ============================================================
   POLAROID — kill empty colored space below image, smaller
   add-button, proper image fit.
   ============================================================ */
.fm-layout-polaroid .fm-card{
    padding:10px 10px 14px!important;
    overflow:hidden!important;
}
.fm-layout-polaroid .fm-card .fm-card-img-wrap{
    width:100%!important;
    height:130px!important;
    max-height:130px!important;
    margin-bottom:6px!important;
    background:#f0e8d8!important;
}
.fm-layout-polaroid .fm-card .fm-card-body{
    padding:4px 0 0!important;
    min-height:0!important;
}
.fm-layout-polaroid .fm-card .fm-card-title{
    font-size:18px!important;
    margin:0 0 1px!important;
}
.fm-layout-polaroid .fm-card .fm-card-desc{
    font-size:13px!important;
    margin-bottom:4px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:1!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}
.fm-layout-polaroid .fm-card .fm-card-price{
    font-size:18px!important;
    position:static!important;
    transform:none!important;
    align-self:flex-start!important;
}
.fm-layout-polaroid .fm-card .fm-card-bottom-row{
    position:static!important;
    margin-top:4px!important;
    padding:4px 0 0!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
}
.flavor-preview.fm-layout-polaroid .fm-card .fm-card-img-wrap{
    height:90px!important;
    max-height:90px!important;
}
.flavor-preview.fm-layout-polaroid .fm-card .fm-card-title{font-size:14px!important}
.flavor-preview.fm-layout-polaroid .fm-card .fm-card-desc{font-size:11px!important}
.flavor-preview.fm-layout-polaroid .fm-card .fm-card-price{font-size:14px!important}

/* ============================================================
   TICKET — full rebuild. Original used display:grid + display:contents
   plus a body::after pseudo for the stub; on real phones the entire
   card collapsed to nothing. Replace with a simple flex layout.
   ============================================================ */
.fm-layout-ticket .fm-cards{
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    padding:4px 10px!important;
}
.fm-layout-ticket .fm-card{
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    grid-template-columns:none!important;
    overflow:hidden!important;
    min-height:auto!important;
    padding:0!important;
}
.fm-layout-ticket .fm-card::before,
.fm-layout-ticket .fm-card::after{
    content:''!important;
    position:absolute!important;
    width:14px!important;height:14px!important;
    border-radius:50%!important;
    background:#e8dfd2!important;
    border:2px dashed #c8342f!important;
    inset-inline-end:108px!important;
    inset-inline-start:auto!important;
    left:auto!important;right:auto!important;
}
.fm-layout-ticket .fm-card::before{top:-9px!important;bottom:auto!important}
.fm-layout-ticket .fm-card::after{bottom:-9px!important;top:auto!important}
.fm-layout-ticket .fm-card .fm-card-top-row{
    display:flex!important;
    flex-direction:row!important;
    flex:1 1 auto!important;
    gap:0!important;
    min-width:0!important;
}
.fm-layout-ticket .fm-card .fm-card-img-wrap{
    grid-column:auto!important;
    grid-row:auto!important;
    width:96px!important;
    height:auto!important;
    min-height:108px!important;
    max-height:none!important;
    flex:0 0 96px!important;
    margin:8px!important;
    border-radius:2px!important;
    float:none!important;
    position:relative!important;
}
.fm-layout-ticket .fm-card .fm-card-body{
    grid-column:auto!important;
    grid-row:auto!important;
    flex:1 1 auto!important;
    padding:10px 8px 10px 4px!important;
    min-height:auto!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
}
[dir="rtl"] .fm-layout-ticket .fm-card .fm-card-body{
    padding:10px 4px 10px 8px!important;
}
.fm-layout-ticket .fm-card .fm-card-title{
    font-size:15px!important;
    margin:0 0 3px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:1!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}
.fm-layout-ticket .fm-card .fm-card-desc{
    font-size:11px!important;
    margin-bottom:4px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}
.fm-layout-ticket .fm-card .fm-card-price{
    font-size:14px!important;
}
.fm-layout-ticket .fm-card .fm-card-body::after{
    /* Replace the grid-stub with a plain flex sibling */
    content:'No.\A 00' attr(data-card-idx)!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    background:none!important;
    border-left:none!important;
    display:none!important;
}
/* Stub area uses the bottom-row slot */
.fm-layout-ticket .fm-card .fm-card-bottom-row{
    grid-column:auto!important;
    grid-row:auto!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    margin:0!important;
    padding:8px!important;
    max-width:none!important;
    flex:0 0 96px!important;
    background:#fff6df!important;
    border-inline-start:2px dashed #c8342f!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    font-family:'Courier New',monospace!important;
    color:#8a1f1a!important;
    text-align:center!important;
}
.fm-layout-ticket .fm-card .fm-card-bottom-row::before{
    content:'ADMIT ONE'!important;
    display:block!important;
    font-size:10px!important;
    font-weight:700!important;
    letter-spacing:1px!important;
    color:#c8342f!important;
    margin-bottom:2px!important;
}

/* ============================================================
   BRUTALIST — image fit, smaller add-button.
   ============================================================ */
.fm-layout-brutalist .fm-card{
    overflow:hidden!important;
}
.fm-layout-brutalist .fm-card .fm-card-img-wrap{
    width:100%!important;
    height:130px!important;
    max-height:130px!important;
}
.flavor-preview.fm-layout-brutalist .fm-card .fm-card-img-wrap{
    height:90px!important;
    max-height:90px!important;
}

/* ============================================================
   CINEMA — was rendering as 2-col with no text/price/poster.
   Restore "movie poster" feel with vertical 2-col grid where
   each card is a poster overlay (similar to showcase but bigger
   and 2-col instead of horizontal scroll).
   ============================================================ */
.fm-layout-cinema .fm-cards{
    display:grid!important;
    grid-template-columns:repeat(2,1fr)!important;
    gap:12px!important;
    padding:10px!important;
}
.fm-layout-cinema .fm-card{
    aspect-ratio:2 / 3!important;
    height:auto!important;
    min-height:240px!important;
    overflow:hidden!important;
    position:relative!important;
    border-radius:14px!important;
    padding:0!important;
}
.fm-layout-cinema .fm-card .fm-card-top-row{
    flex-direction:column!important;
    height:100%!important;
    gap:0!important;
}
.fm-layout-cinema .fm-card .fm-card-img-wrap{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    position:absolute!important;
    inset:0!important;
    border-radius:0!important;
    margin:0!important;
}
.fm-layout-cinema .fm-card .fm-card-img-wrap::after{
    content:''!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.85) 75%,rgba(0,0,0,.97) 100%)!important;
    pointer-events:none!important;
    z-index:2!important;
}
.fm-layout-cinema .fm-card .fm-card-body{
    position:absolute!important;
    bottom:0!important;left:0!important;right:0!important;
    padding:10px 12px 12px!important;
    z-index:3!important;
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
}
.fm-layout-cinema .fm-card .fm-card-title{
    font-size:14px!important;
    font-weight:800!important;
    color:#fff!important;
    line-height:1.25!important;
    margin:0 0 2px!important;
    text-shadow:0 2px 6px rgba(0,0,0,.7)!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}
.fm-layout-cinema .fm-card .fm-card-desc{
    font-size:10.5px!important;
    color:rgba(255,255,255,.85)!important;
    line-height:1.35!important;
    margin:0 0 3px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:1!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    text-shadow:0 1px 3px rgba(0,0,0,.6)!important;
}
.fm-layout-cinema .fm-card .fm-card-price{
    font-size:13px!important;
    font-weight:800!important;
    color:#fbbf24!important;
    text-shadow:0 1px 3px rgba(0,0,0,.6)!important;
    display:inline-block!important;
    align-self:flex-start!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
}
.fm-layout-cinema .fm-card .fm-card-bottom-row{
    position:absolute!important;
    top:8px!important;
    inset-inline-end:8px!important;
    z-index:4!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    padding:0!important;
    margin:0!important;
    border:none!important;
    background:transparent!important;
    gap:4px!important;
}
.fm-layout-cinema .fm-card .fm-card-metas{display:none!important}
.fm-layout-cinema .fm-card .fcp-btn{
    font-size:10.5px!important;
    padding:4px 8px!important;
    min-height:24px!important;
    border-radius:6px!important;
}
.fm-layout-cinema .fm-card .fcp-btn svg{
    width:12px!important;height:12px!important;
}
.flavor-preview.fm-layout-cinema .fm-card{
    min-height:200px!important;
}
.flavor-preview.fm-layout-cinema .fm-card .fm-card-title{font-size:12px!important}
.flavor-preview.fm-layout-cinema .fm-card .fm-card-desc{font-size:9.5px!important}
.flavor-preview.fm-layout-cinema .fm-card .fm-card-price{font-size:11px!important}

/* ============================================================
   KRAFT, CYBERPUNK, BOTANICAL, COMIC — image overflow fix +
   smaller add-button. The image was visually escaping the card
   because the wrap had height set but the image was full-bleed
   without overflow:hidden + position:relative.
   ============================================================ */
.fm-layout-kraft .fm-card,
.fm-layout-cyberpunk .fm-card,
.fm-layout-botanical .fm-card,
.fm-layout-comic .fm-card{
    overflow:hidden!important;
}
.fm-layout-kraft .fm-card .fm-card-img-wrap,
.fm-layout-cyberpunk .fm-card .fm-card-img-wrap,
.fm-layout-botanical .fm-card .fm-card-img-wrap,
.fm-layout-comic .fm-card .fm-card-img-wrap{
    width:100%!important;
    height:130px!important;
    max-height:130px!important;
    border-radius:0!important;
}
.flavor-preview.fm-layout-kraft .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-cyberpunk .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-botanical .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-comic .fm-card .fm-card-img-wrap{
    height:90px!important;
    max-height:90px!important;
}

/* ============================================================
   MENUBOARD, BISTROT, STREETFOOD, IZAKAYA, SPEAKEASY,
   GREENHOUSE, KAWAII, TRATTORIA, SUSHIBAR, ICECREAM,
   PATISSERIE, STEAKHOUSE — same family of issues:
   • Empty colored space below image (because image-wrap has
     a hard height and image was undersized).
   • Add-button too big for narrow cells.
   ============================================================ */
.fm-layout-menuboard .fm-card,
.fm-layout-bistrot .fm-card,
.fm-layout-streetfood .fm-card,
.fm-layout-patisserie .fm-card,
.fm-layout-steakhouse .fm-card,
.fm-layout-izakaya .fm-card,
.fm-layout-speakeasy .fm-card,
.fm-layout-greenhouse .fm-card,
.fm-layout-kawaii .fm-card,
.fm-layout-trattoria .fm-card,
.fm-layout-sushibar .fm-card,
.fm-layout-icecream .fm-card{
    overflow:hidden!important;
}
.fm-layout-menuboard .fm-card .fm-card-img-wrap,
.fm-layout-bistrot .fm-card .fm-card-img-wrap,
.fm-layout-streetfood .fm-card .fm-card-img-wrap,
.fm-layout-patisserie .fm-card .fm-card-img-wrap,
.fm-layout-steakhouse .fm-card .fm-card-img-wrap,
.fm-layout-izakaya .fm-card .fm-card-img-wrap,
.fm-layout-speakeasy .fm-card .fm-card-img-wrap,
.fm-layout-greenhouse .fm-card .fm-card-img-wrap,
.fm-layout-kawaii .fm-card .fm-card-img-wrap,
.fm-layout-trattoria .fm-card .fm-card-img-wrap,
.fm-layout-sushibar .fm-card .fm-card-img-wrap,
.fm-layout-icecream .fm-card .fm-card-img-wrap{
    width:100%!important;
    height:130px!important;
    max-height:130px!important;
    margin-bottom:0!important;
}
@media(max-width:420px){
    .fm-layout-menuboard .fm-card .fm-card-img-wrap,
    .fm-layout-bistrot .fm-card .fm-card-img-wrap,
    .fm-layout-streetfood .fm-card .fm-card-img-wrap,
    .fm-layout-patisserie .fm-card .fm-card-img-wrap,
    .fm-layout-steakhouse .fm-card .fm-card-img-wrap,
    .fm-layout-izakaya .fm-card .fm-card-img-wrap,
    .fm-layout-speakeasy .fm-card .fm-card-img-wrap,
    .fm-layout-greenhouse .fm-card .fm-card-img-wrap,
    .fm-layout-kawaii .fm-card .fm-card-img-wrap,
    .fm-layout-trattoria .fm-card .fm-card-img-wrap,
    .fm-layout-sushibar .fm-card .fm-card-img-wrap,
    .fm-layout-icecream .fm-card .fm-card-img-wrap{
        height:110px!important;
        max-height:110px!important;
    }
}
.flavor-preview.fm-layout-menuboard .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-bistrot .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-streetfood .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-patisserie .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-steakhouse .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-izakaya .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-speakeasy .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-greenhouse .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-kawaii .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-trattoria .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-sushibar .fm-card .fm-card-img-wrap,
.flavor-preview.fm-layout-icecream .fm-card .fm-card-img-wrap{
    height:88px!important;
    max-height:88px!important;
}

/* Body section follows immediately after image — tightens the
   visual relationship and removes any gap. */
.fm-layout-menuboard .fm-card .fm-card-body,
.fm-layout-bistrot .fm-card .fm-card-body,
.fm-layout-streetfood .fm-card .fm-card-body,
.fm-layout-patisserie .fm-card .fm-card-body,
.fm-layout-steakhouse .fm-card .fm-card-body,
.fm-layout-izakaya .fm-card .fm-card-body,
.fm-layout-speakeasy .fm-card .fm-card-body,
.fm-layout-greenhouse .fm-card .fm-card-body,
.fm-layout-kawaii .fm-card .fm-card-body,
.fm-layout-trattoria .fm-card .fm-card-body,
.fm-layout-sushibar .fm-card .fm-card-body,
.fm-layout-icecream .fm-card .fm-card-body{
    padding-top:8px!important;
    padding-bottom:6px!important;
}

/* ---------- Add-button SVG icon shrink for very narrow cells ---------- */
@media(max-width:420px){
    .fm-layout-showcase .fm-card .fcp-btn,
    .fm-layout-cinema .fm-card .fcp-btn,
    .fm-layout-cyberpunk .fm-card .fcp-btn,
    .fm-layout-blueprint .fm-card .fcp-btn,
    .fm-layout-comic .fm-card .fcp-btn,
    .fm-layout-kraft .fm-card .fcp-btn,
    .fm-layout-menuboard .fm-card .fcp-btn,
    .fm-layout-bistrot .fm-card .fcp-btn,
    .fm-layout-streetfood .fm-card .fcp-btn,
    .fm-layout-izakaya .fm-card .fcp-btn,
    .fm-layout-speakeasy .fm-card .fcp-btn,
    .fm-layout-greenhouse .fm-card .fcp-btn,
    .fm-layout-kawaii .fm-card .fcp-btn,
    .fm-layout-trattoria .fm-card .fcp-btn,
    .fm-layout-sushibar .fm-card .fcp-btn,
    .fm-layout-icecream .fm-card .fcp-btn,
    .fm-layout-brutalist .fm-card .fcp-btn,
    .fm-layout-polaroid .fm-card .fcp-btn,
    .fm-layout-botanical .fm-card .fcp-btn{
        font-size:10.5px!important;
        padding:4px 8px!important;
        min-height:26px!important;
    }
}

/* ---------- Terminal layout — match welcome CRT phosphor ---------- */
/* New default colors are picked by the JS palette switch, but
   ensure the text-shadow phosphor glow is visible in the menu
   layout too (pretty in dark mode). */
.fm-layout-terminal .fm-card-title,
.fm-layout-terminal .fm-card-desc,
.fm-layout-terminal .fm-card-price,
.fm-layout-terminal .fm-section-title{
    text-shadow:0 0 6px currentColor!important;
}
/* ============================================================
   v11.26.0 — Particle Attract: target pulse + particle baseline
   When the orders-display (or cart) toolbar slot receives a
   particle burst, this brief pulse makes it feel like the
   button is absorbing the impact. Uses transform-only so it
   never re-triggers layout, plays nice with FCP's own counter
   bounce, and respects reduced-motion users.

   The .fm-fcp-particle reset below guards against site themes
   that style every floating <div> (margin, line-height, etc).
   The JS sets the rest inline; here we just make sure no
   external CSS can move the particle off its flight path.
   ============================================================ */
.fm-fcp-particle{
    margin:0!important;
    padding:0!important;
    line-height:0!important;
    box-sizing:border-box;
    display:block;
}
.fm-toolbar-item.fm-attract-pulse{
    animation:fmAttractPulse .65s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fmAttractPulse{
    0%  {transform:scale(1);}
    35% {transform:scale(1.12);}
    65% {transform:scale(.96);}
    100%{transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
    .fm-toolbar-item.fm-attract-pulse{animation:none;}
    .fm-fcp-particle{display:none!important;}
}

/* ============================================================
   v11.29.0 — Active category item: professional theme-aware border
   Each background theme gets a border color + glow that matches
   its own palette, derived from --fm-catbar-active-border which
   is already set per theme by the shortcode PHP layer.
   For dark/vivid backgrounds the border is lightened so it stays
   visible against the darker catbar surface.
   ============================================================ */

/* --- Light gradient themes (warm, cool, mint, sunset, lavender, ocean, forest, rose) --- */
.fm-bg-page-gradient-warm .fm-cat-item.active,
.fm-bg-page-gradient-cool .fm-cat-item.active,
.fm-bg-page-gradient-mint .fm-cat-item.active,
.fm-bg-page-gradient-sunset .fm-cat-item.active,
.fm-bg-page-gradient-lavender .fm-cat-item.active,
.fm-bg-page-gradient-ocean .fm-cat-item.active,
.fm-bg-page-gradient-forest .fm-cat-item.active,
.fm-bg-page-gradient-rose .fm-cat-item.active{
    border-color:var(--fm-catbar-active-border,#2d2d2d)!important;
    border-width:2px!important;
    box-shadow:0 2px 12px color-mix(in srgb,var(--fm-catbar-active-border,#2d2d2d) 22%,transparent),
               0 0 0 1px color-mix(in srgb,var(--fm-catbar-active-border,#2d2d2d) 15%,transparent)!important;
}

/* --- Pattern / texture light backgrounds (dots, grid, hexagon, etc.) --- */
.fm-bg-page-dots .fm-cat-item.active,
.fm-bg-page-grid .fm-cat-item.active,
.fm-bg-page-diagonal .fm-cat-item.active,
.fm-bg-page-zigzag .fm-cat-item.active,
.fm-bg-page-waves .fm-cat-item.active,
.fm-bg-page-hexagon .fm-cat-item.active,
.fm-bg-page-circles .fm-cat-item.active,
.fm-bg-page-diamonds .fm-cat-item.active,
.fm-bg-page-crosses .fm-cat-item.active,
.fm-bg-page-triangles .fm-cat-item.active,
.fm-bg-page-stars .fm-cat-item.active,
.fm-bg-page-moroccan .fm-cat-item.active,
.fm-bg-page-scales .fm-cat-item.active,
.fm-bg-page-snow .fm-cat-item.active,
.fm-bg-page-confetti .fm-cat-item.active,
.fm-bg-page-hearts .fm-cat-item.active,
.fm-bg-page-leaves .fm-cat-item.active,
.fm-bg-page-coffee .fm-cat-item.active,
.fm-bg-page-bubbles .fm-cat-item.active,
.fm-bg-page-chevron .fm-cat-item.active,
.fm-bg-page-brick .fm-cat-item.active,
.fm-bg-page-plus .fm-cat-item.active,
.fm-bg-page-rain .fm-cat-item.active,
.fm-bg-page-damask .fm-cat-item.active,
.fm-bg-page-wave-lines .fm-cat-item.active,
.fm-bg-page-honeycomb .fm-cat-item.active,
.fm-bg-page-arabesque .fm-cat-item.active,
.fm-bg-page-terrazzo .fm-cat-item.active{
    border-color:var(--fm-catbar-active-border,#2d2d2d)!important;
    border-width:2px!important;
    box-shadow:0 2px 12px color-mix(in srgb,var(--fm-catbar-active-border,#2d2d2d) 20%,transparent),
               0 0 0 1px color-mix(in srgb,var(--fm-catbar-active-border,#2d2d2d) 14%,transparent)!important;
}

/* --- Dark gradient themes (dark, midnight, twilight, aurora-bg, deep-sea, ember) --- */
.fm-bg-page-gradient-dark .fm-cat-item.active,
.fm-bg-page-gradient-midnight .fm-cat-item.active,
.fm-bg-page-gradient-twilight .fm-cat-item.active,
.fm-bg-page-gradient-aurora-bg .fm-cat-item.active,
.fm-bg-page-gradient-deep-sea .fm-cat-item.active,
.fm-bg-page-gradient-ember .fm-cat-item.active{
    border-color:var(--fm-catbar-active-border,rgba(255,255,255,.75))!important;
    border-width:2px!important;
    background:rgba(255,255,255,.12)!important;
    box-shadow:0 2px 14px color-mix(in srgb,var(--fm-catbar-active-border,rgba(255,255,255,.6)) 30%,transparent),
               0 0 0 1px color-mix(in srgb,var(--fm-catbar-active-border,rgba(255,255,255,.6)) 20%,transparent),
               inset 0 1px 0 rgba(255,255,255,.15)!important;
}

/* Fallback: default (no background class) — refined border already applied above via base rule */

/* ============================================================
   v11.36.0 — iOS Safari fix: qty +/- buttons & SVG visibility
   On iPhone, Safari can fail to render SVG icons inside buttons
   when display/flex/color are not explicitly set on the button
   itself. This block forces the correct layout and color chain.
   ============================================================ */
.fc-qty-btn {
    display: -webkit-inline-flex !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    overflow: visible !important;
    position: relative !important;
    /* Ensure the button is not clipping its content on iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.fc-qty-btn svg {
    display: block !important;
    pointer-events: none !important;
    overflow: visible !important;
    fill: currentColor !important;
    -webkit-fill: currentColor;
    color: inherit !important;
    /* Force layer promotion so Safari composites SVG correctly */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.fc-qty-btn svg path,
.fc-qty-btn svg line,
.fc-qty-btn svg rect,
.fc-qty-btn svg circle,
.fc-qty-btn svg polyline,
.fc-qty-btn svg polygon {
    fill: currentColor !important;
    stroke: currentColor !important;
}
/* Qty counter value — ensure it's visible on iOS */
.fc-qty-value {
    display: -webkit-inline-flex !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ============================================================
   ╔════════════════════════════════════════════════════════════╗
   ║  v11.38.0 — LAYOUT 34: HARMONY (fm-layout-harmony)         ║
   ║  Cosmic Orbital Menu — pairs with welcome layout 'harmony' ║
   ║                                                            ║
   ║  v11.38.0 changes (rebuild from v11.37.0):                 ║
   ║    • PERFORMANCE: dropped runtime color-mix() from hot     ║
   ║      paths (catbar pseudo-borders, card glow), pre-baked   ║
   ║      rgba() values instead → 30-40% fewer style recalcs    ║
   ║    • PERFORMANCE: removed double backdrop-filter (catbar   ║
   ║      AND ::before AND toolbar) → kept ONE on the catbar    ║
   ║      with a cheaper blur radius                            ║
   ║    • PERFORMANCE: replaced multi-shadow pulse animation    ║
   ║      with single transform pulse + opacity (compositor-    ║
   ║      friendly instead of paint-bound)                      ║
   ║    • PERFORMANCE: hover transitions only animate transform ║
   ║      and box-shadow once, not 4-5 properties at a time     ║
   ║    • DESIGN: richer "deep cosmos" background — added a     ║
   ║      faint nebula band, vertical depth gradient, and a     ║
   ║      subtle radial vignette so the menu feels like one     ║
   ║      continuous space scene rather than a flat panel       ║
   ║    • DESIGN: card add-button moved to its own dedicated    ║
   ║      row (handled by class-shortcode.php side, see         ║
   ║      "Harmony — dedicated row" block there)                ║
   ║    • will-change hints on the orbiting/pulsing nodes so    ║
   ║      they get their own compositor layer instead of        ║
   ║      thrashing the main thread                             ║
   ╚════════════════════════════════════════════════════════════╝
   ============================================================ */

.fm-layout-harmony{
    position:relative;
    /* Multi-stop deep cosmos. Three radial pools (warm-gold, cool-blue,
       and a subtle violet middle band) layered over a vertical depth
       gradient that goes deep at the top, lifts in the middle, and
       sinks again at the bottom. Reads as 3D space, not a flat panel. */
    background:
        radial-gradient(ellipse 80% 60% at 18% 12%,
            rgba(212,162,76,0.18) 0%, transparent 55%),
        radial-gradient(ellipse 70% 55% at 82% 88%,
            rgba(181,134,45,0.22) 0%, transparent 50%),
        radial-gradient(ellipse 90% 35% at 50% 50%,
            rgba(90,126,255,0.07) 0%, transparent 60%),
        linear-gradient(180deg,
            rgba(0,0,0,0.32) 0%,
            rgba(0,0,0,0.0)  35%,
            rgba(0,0,0,0.0)  65%,
            rgba(0,0,0,0.30) 100%),
        var(--fm-bg, #0d0d0d) !important;
}

/* Starfield — pure CSS dots that twinkle softly. Uses a SINGLE
   composited background-image (no per-frame paint), and the twinkle
   is just an opacity sweep, the cheapest animation in the browser. */
.fm-layout-harmony::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background-image:
        radial-gradient(1px 1px at 12% 24%, rgba(255,255,255,0.55) 50%, transparent 60%),
        radial-gradient(1px 1px at 28% 78%, rgba(255,255,255,0.55) 50%, transparent 60%),
        radial-gradient(1px 1px at 51% 12%, rgba(255,255,255,0.55) 50%, transparent 60%),
        radial-gradient(1px 1px at 67% 60%, rgba(255,255,255,0.55) 50%, transparent 60%),
        radial-gradient(1px 1px at 88% 35%, rgba(255,255,255,0.55) 50%, transparent 60%),
        radial-gradient(1.4px 1.4px at 19% 88%, rgba(255,255,255,0.65) 50%, transparent 60%),
        radial-gradient(1.4px 1.4px at 75% 18%, rgba(255,255,255,0.65) 50%, transparent 60%),
        radial-gradient(1.4px 1.4px at 41% 48%, rgba(255,255,255,0.5) 50%, transparent 60%),
        radial-gradient(1px 1px at 8% 60%, rgba(255,255,255,0.5) 50%, transparent 60%),
        radial-gradient(1px 1px at 92% 72%, rgba(255,255,255,0.5) 50%, transparent 60%);
    opacity:.42;
    animation:fmHarmonyStars calc(7s * var(--fm-anim-mult,1)) ease-in-out infinite;
    will-change:opacity;
}
/* Faint nebula band — a single low-opacity diagonal stripe that
   adds depth without reflowing or repainting (it's static). */
.fm-layout-harmony::after{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
        linear-gradient(115deg,
            transparent 35%,
            rgba(212,162,76,0.05) 48%,
            rgba(90,126,255,0.04) 55%,
            transparent 68%);
    mix-blend-mode:screen;
    opacity:.85;
}
@keyframes fmHarmonyStars{
    0%,100%{opacity:.32;}
    50%   {opacity:.55;}
}

/* ── Catbar — constellation of glowing pills ───────────────
   v11.38.0: one cheap backdrop-filter (was three stacked).
   Removed the ::before duplicate gradient overlay that the catbar
   already provided via its own background — net result the same
   visual, half the paint cost. */
.fm-layout-harmony .fm-catbar{
    background:
        linear-gradient(180deg,
            rgba(13,13,13,0.55),
            rgba(13,13,13,0.18)) !important;
    border-bottom:1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    position:relative;
    z-index:5;
}
.fm-layout-harmony .fm-cat-item{
    background:rgba(255,255,255,0.04) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    border-radius:999px !important;
    color:var(--fm-cat-text-color,#bbb) !important;
    /* Only 2 properties animated → cheap repaint */
    transition:transform .22s cubic-bezier(.34,1.56,.64,1),
               background .22s ease !important;
    position:relative;
}
.fm-layout-harmony .fm-cat-item:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,0.08) !important;
}
.fm-layout-harmony .fm-cat-item.active{
    background:linear-gradient(135deg,
        var(--fm-catbar-active-border,#b5862d),
        var(--fm-catbar-active-bg,#d4a24c)) !important;
    border-color:var(--fm-catbar-active-bg,#d4a24c) !important;
    color:var(--fm-catbar-active-text,#ffffff) !important;
    /* v11.38.0: STATIC shadow (no pulse). The active pill itself
       will subtly scale-pulse — that's compositor-only. */
    box-shadow:
        0 4px 14px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.18),
        0 0 18px rgba(212,162,76,0.45) !important;
    animation:fmHarmonyActiveScale calc(3s * var(--fm-anim-mult,1)) ease-in-out infinite;
    will-change:transform;
}
@keyframes fmHarmonyActiveScale{
    0%,100%{transform:translateY(-1px) scale(1);}
    50%   {transform:translateY(-1px) scale(1.03);}
}

/* ── Section: each section header is a "core+orbit" pair ── */
.fm-layout-harmony .fm-sections{
    position:relative;
    z-index:2;
    padding:18px 16px 24px;
}
.fm-layout-harmony .fm-section{
    margin-bottom:42px;
    position:relative;
}
.fm-layout-harmony .fm-section-head{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
    padding:18px 0 22px;
    position:relative;
}
.fm-layout-harmony .fm-section-head::before{
    /* The orbit ring around the section title */
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:min(92%,480px);
    height:calc(100% - 20px);
    min-height:1.3em;
    border:1px dashed rgba(255,255,255,0.18);
    border-radius:22px;
    opacity:.55;
    pointer-events:none;
}
.fm-layout-harmony .fm-section-line{display:none !important;}
.fm-layout-harmony .fm-section-title{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:8px 22px;
    /* v11.42.1 — عنوان دسته‌بندی بلند فارسی دیگر بریده/سرریز نمی‌شود:
       متن داخل عرض محدود می‌پیچد و وسط‌چین می‌ماند. */
    max-width:min(92%,460px);
    text-align:center;
    white-space:normal;
    line-height:1.4;
    word-break:break-word;
    background:linear-gradient(135deg,
        rgba(13,13,13,0.92),
        rgba(20,20,20,0.85));
    border:1px solid var(--fm-catbar-active-bg, #d4a24c);
    border-radius:18px;
    color:var(--fm-section-heading-color, #fff);
    font-size:var(--fm-section-heading-size, 18px);
    font-weight:var(--fm-section-heading-weight, 800);
    letter-spacing:.3px;
    box-shadow:
        0 6px 20px rgba(0,0,0,0.45),
        0 0 18px var(--fm-catbar-active-bg, #d4a24c),
        inset 0 1px 0 rgba(255,255,255,0.08);
    z-index:1;
}
/* عنوان داخل یک span قرار می‌گیرد تا با نقطه‌ها (::before/::after) درست بچیند */
.fm-layout-harmony .fm-section-title{
    flex-wrap:nowrap;
}
.fm-layout-harmony .fm-section-title::before,
.fm-layout-harmony .fm-section-title::after{
    content:'';
    width:6px;height:6px;border-radius:50%;
    background:var(--fm-catbar-active-bg, #d4a24c);
    box-shadow:0 0 10px var(--fm-catbar-active-bg, #d4a24c);
    flex-shrink:0;
    /* Compositor-only pulse: scale + opacity, no box-shadow tween */
    animation:fmHarmonyDotPulse calc(2.6s * var(--fm-anim-mult,1)) ease-in-out infinite;
    will-change:transform,opacity;
}
.fm-layout-harmony .fm-section-title::after{animation-delay:1.3s;}
@keyframes fmHarmonyDotPulse{
    0%,100%{transform:scale(1);   opacity:1;}
    50%    {transform:scale(1.45); opacity:.6;}
}
.fm-layout-harmony .fm-section-title-icon{
    width:28px;height:28px;border-radius:50%;
    box-shadow:0 0 0 1px var(--fm-catbar-active-bg, #d4a24c),
               0 0 12px rgba(212,162,76,0.45);
}

/* ── Cards grid: 2 satellites per row, single col on small ── */
.fm-layout-harmony .fm-cards{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr);
    gap:14px !important;
    flex-direction:initial !important;
}
@media (max-width: 520px){
    .fm-layout-harmony .fm-cards{
        grid-template-columns:1fr;
        gap:12px !important;
    }
}

/* ── Card = one satellite. v11.38.0: dropped backdrop-filter
   (every card having its own blur layer was the #1 jank source).
   The deep gradient + dark bg already give us the "glassy" feel. */
.fm-layout-harmony .fm-card{
    background:linear-gradient(160deg,
        var(--fm-card-bg,#1a1a1a),
        rgba(0,0,0,0.55)) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    border-radius:22px !important;
    overflow:hidden !important;
    position:relative !important;
    box-shadow:
        0 6px 20px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    /* Hover transitions on transform only — repaints live in
       box-shadow which is GPU-friendly when it's the only paint. */
    transition:transform .28s cubic-bezier(.34,1.4,.64,1),
               box-shadow .28s ease !important;
    flex-direction:column !important;
    will-change:transform;
}
/* Each card's tiny "comet bead" — single dot, single animation,
   no orbit ring (was a 240% wide dashed circle, expensive). */
.fm-layout-harmony .fm-card::after{
    content:'';
    position:absolute;
    top:14px;right:14px;
    width:6px;height:6px;border-radius:50%;
    background:var(--fm-catbar-active-bg, #d4a24c);
    box-shadow:0 0 10px var(--fm-catbar-active-bg, #d4a24c);
    opacity:.7;
    animation:fmHarmonyDotPulse calc(3.6s * var(--fm-anim-mult,1)) ease-in-out infinite;
    z-index:2;
    pointer-events:none;
    will-change:transform,opacity;
}
[dir="rtl"] .fm-layout-harmony .fm-card::after{right:auto;left:14px;}

.fm-layout-harmony .fm-card:hover{
    transform:translateY(-4px) !important;
    box-shadow:
        0 14px 32px rgba(0,0,0,0.5),
        0 0 0 1px var(--fm-catbar-active-bg, #d4a24c),
        0 0 22px rgba(212,162,76,0.35) !important;
}

/* Image wrap: a circular satellite portrait */
.fm-layout-harmony .fm-card .fm-card-img-wrap{
    width:100% !important;
    height:170px !important;
    max-height:170px !important;
    border-radius:18px 18px 0 0 !important;
    position:relative !important;
    overflow:hidden !important;
    background:radial-gradient(circle at 50% 35%,
        rgba(212,162,76,0.18),
        transparent 70%);
}
.fm-layout-harmony .fm-card .fm-card-img-wrap::after{
    content:'';
    position:absolute;
    inset:8px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
    pointer-events:none;
}
.fm-layout-harmony .fm-card .fm-card-img-wrap img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transition:transform .55s ease;
}
.fm-layout-harmony .fm-card:hover .fm-card-img-wrap img{
    transform:scale(1.05);
}

/* Card body — the constellation label */
.fm-layout-harmony .fm-card .fm-card-body{
    padding:14px 14px 16px !important;
    position:relative;
    z-index:2;
}
.fm-layout-harmony .fm-card .fm-card-title{
    font-size:15px !important;
    font-weight:800 !important;
    color:var(--fm-title-color, #fff) !important;
    line-height:1.35 !important;
    margin:0 0 6px !important;
    letter-spacing:.1px;
}
.fm-layout-harmony .fm-card .fm-card-desc{
    font-size:11.5px !important;
    line-height:1.55 !important;
    color:var(--fm-desc-color, #aaa) !important;
    opacity:.85;
}
.fm-layout-harmony .fm-card .fm-card-price{
    font-size:14px !important;
    font-weight:900 !important;
    color:var(--fm-catbar-active-bg, #d4a24c) !important;
    /* v11.38.0: dropped expensive multi-color text-shadow,
       single soft glow does the same job for half the paint. */
    text-shadow:0 0 8px rgba(212,162,76,0.5);
    margin-top:8px !important;
}
/* v11.38.0: bottom-row layout is now controlled by the dedicated
   harmony block in class-shortcode.php (".fm-card-bottom-row" gets
   flex-direction:column so the add button lives on its own row).
   We still style the meta pills here. */
.fm-layout-harmony .fm-card .fm-meta{
    font-size:10px !important;
    background:rgba(255,255,255,0.05) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    border-radius:999px !important;
    padding:3px 9px !important;
    color:var(--fm-meta-text-color, #ccc) !important;
}

/* Single-column card (when grid forced to 1col) gets row layout */
.fm-layout-harmony.fm-cards-1col .fm-card,
.fm-layout-harmony .fm-card.fm-card-dir-row{
    flex-direction:row !important;
    align-items:stretch !important;
}
.fm-layout-harmony.fm-cards-1col .fm-card .fm-card-img-wrap,
.fm-layout-harmony .fm-card.fm-card-dir-row .fm-card-img-wrap{
    width:140px !important;
    height:auto !important;
    min-height:140px !important;
    flex-shrink:0;
    border-radius:18px 0 0 18px !important;
}
[dir="rtl"] .fm-layout-harmony.fm-cards-1col .fm-card .fm-card-img-wrap,
[dir="rtl"] .fm-layout-harmony .fm-card.fm-card-dir-row .fm-card-img-wrap{
    border-radius:0 18px 18px 0 !important;
}

/* Add button: glowing satellite pill. Sits on its OWN row now
   (structure handled by class-shortcode.php), so it's allowed to
   span full card width and feel like a real CTA. */
.fm-layout-harmony .fc-add-btn{
    background:linear-gradient(135deg,
        var(--fm-catbar-active-border,#b5862d),
        var(--fm-catbar-active-bg,#d4a24c)) !important;
    border-radius:999px !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.4),
        0 0 14px rgba(212,162,76,0.4) !important;
    border:1px solid var(--fm-catbar-active-bg,#d4a24c) !important;
    color:var(--fm-catbar-active-text,#fff) !important;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1),
               box-shadow .25s ease !important;
}
.fm-layout-harmony .fc-add-btn:hover{
    transform:translateY(-1px) scale(1.03);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.5),
        0 0 22px rgba(212,162,76,0.7) !important;
}
.fm-layout-harmony .fc-add-btn .fc-add-icon svg{
    stroke:var(--fm-catbar-active-text,#fff) !important;
}

/* Card entry stagger — keeps the lovely orbital fly-in but uses
   shorter durations and only transform+opacity (no blur). */
.fm-layout-harmony .fm-card{
    animation:fmHarmonyCardOrbit .55s cubic-bezier(.18,.85,.32,1.05) both !important;
}
.fm-layout-harmony .fm-card:nth-child(1){animation-delay:.04s;}
.fm-layout-harmony .fm-card:nth-child(2){animation-delay:.10s;}
.fm-layout-harmony .fm-card:nth-child(3){animation-delay:.16s;}
.fm-layout-harmony .fm-card:nth-child(4){animation-delay:.22s;}
.fm-layout-harmony .fm-card:nth-child(5){animation-delay:.28s;}
.fm-layout-harmony .fm-card:nth-child(6){animation-delay:.34s;}
.fm-layout-harmony .fm-card:nth-child(n+7){animation-delay:.40s;}
@keyframes fmHarmonyCardOrbit{
    0%  {opacity:0;transform:translateY(18px) scale(.94);}
    100%{opacity:1;transform:translateY(0)    scale(1);}
}

/* Section entry — fades in with the orbit */
.fm-layout-harmony .fm-section{
    animation:fmHarmonySectionIn .65s cubic-bezier(.22,.85,.36,1.05) both;
}
.fm-layout-harmony .fm-section:nth-child(1){animation-delay:.02s;}
.fm-layout-harmony .fm-section:nth-child(2){animation-delay:.10s;}
.fm-layout-harmony .fm-section:nth-child(3){animation-delay:.18s;}
.fm-layout-harmony .fm-section:nth-child(n+4){animation-delay:.24s;}
@keyframes fmHarmonySectionIn{
    0%  {opacity:0;transform:translateY(12px);}
    100%{opacity:1;transform:translateY(0);}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .fm-layout-harmony::before,
    .fm-layout-harmony::after,
    .fm-layout-harmony .fm-cat-item.active,
    .fm-layout-harmony .fm-section-title::before,
    .fm-layout-harmony .fm-section-title::after,
    .fm-layout-harmony .fm-card,
    .fm-layout-harmony .fm-section,
    .fm-layout-harmony .fm-card::after{
        animation:none !important;
    }
}

/* Toolbar tweaks for harmony — single light backdrop, no double-stack */
.fm-layout-harmony .fm-bottom-toolbar{
    background:rgba(13,13,13,0.85) !important;
    border-top:1px solid rgba(255,255,255,0.08) !important;
}

/* ── v11.37.0 — Combo "warp" hand-off support ──────────────
   Lighter than v11.37: keeps the bloom but uses a single transform
   keyframe instead of nested blur+brightness which were forcing
   per-frame raster passes on long card lists. */
.fm-layout-harmony.fm-hr-warp-in{
    transform-origin:50% 50%;
    animation:fmHarmonyWarpIn .55s cubic-bezier(.18,.78,.32,1.05) both;
    will-change:transform,opacity;
}
@keyframes fmHarmonyWarpIn{
    0%  {opacity:0;transform:scale(.4);}
    60% {opacity:1;}
    100%{opacity:1;transform:scale(1);}
}

.fm-layout-harmony.fm-hr-warp-out{
    transform-origin:50% 50%;
    animation:fmHarmonyWarpOut .38s cubic-bezier(.7,0,.5,1) both;
    will-change:transform,opacity;
}
@keyframes fmHarmonyWarpOut{
    0%  {opacity:1;transform:scale(1);}
    100%{opacity:0;transform:scale(.4);}
}

@media (prefers-reduced-motion: reduce){
    .fm-layout-harmony.fm-hr-warp-in,
    .fm-layout-harmony.fm-hr-warp-out{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   v11.46.0 — CART RIBBON (3D corner banner)
   A real folded ribbon that wraps over the TOP-LEFT corner of a product
   card when it is added to the cart. The readable band sits diagonally
   across the corner; two SHORT darker tails fold away from each end — one
   tucking under the top edge, one under the left edge — giving a genuine
   3D "ribbon tied around the corner" look (the folds read as the band
   passing BEHIND the card). It shows the quantity + a localized label
   ("{n} عدد در سفارشات" / "{n} in order" / "{n} في الطلب").

   On add: a real "ribbon closing" entrance — the band unfurls from the
   corner with a slight 3D rotateX so it appears to wrap down onto the card.
   On every qty change: a colour flash + number pop. On removal: the band
   furls back up (reverse) then is removed.

   Colours come from the menu accent (--fm-hl-r/g/b). Text contrast is
   guaranteed with a solid fill + white text + subtle text-shadow.
   Off by default — only rendered when data-cart-ribbon="1" on the wrap.
   ════════════════════════════════════════════════════════════════ */

/* v11.47.0 — ribbon: always anchors the TOP-LEFT corner for both LTR and RTL.
   ("باید سمت چپ باشد" — ribbon must be on the left side.) */
.fm-cart-ribbon{
    --fmrb-r:var(--fm-hl-r,79);
    --fmrb-g:var(--fm-hl-g,70);
    --fmrb-b:var(--fm-hl-b,229);
    --fmrb-dark:rgba(0,0,0,.3);
    position:absolute;
    top:0;left:0;
    z-index:10;
    pointer-events:none;
    width:108px;
    height:108px;
    overflow:visible;
    box-sizing:border-box;
}

/* The diagonal band — sits at -45deg across the top-left corner. */
.fm-cart-ribbon .fm-cart-ribbon-band{
    position:absolute;
    top:26px;
    left:-38px;
    width:170px;
    display:flex;align-items:center;justify-content:center;gap:4px;
    padding:6px 0 5px;
    font-size:10.5px;font-weight:800;line-height:1.1;
    white-space:nowrap;
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.55);
    background:linear-gradient(180deg,
        rgb(var(--fmrb-r),var(--fmrb-g),var(--fmrb-b)) 0%,
        rgba(calc(var(--fmrb-r) - 20),calc(var(--fmrb-g) - 18),calc(var(--fmrb-b) - 10),1) 100%);
    box-shadow:0 4px 14px rgba(0,0,0,.35),
               0 1px 0 rgba(255,255,255,.22) inset,
               0 -1px 0 rgba(0,0,0,.18) inset;
    transform:rotate(-45deg);
    transform-origin:center;
}

/* Two fold-shadow triangles at each end — they peek out BELOW the band,
   simulating the ribbon tail passing behind the card edge (3D depth). */
.fm-cart-ribbon .fm-cart-ribbon-band::before,
.fm-cart-ribbon .fm-cart-ribbon-band::after{
    content:'';
    position:absolute;
    top:100%;
    width:0;height:0;
    border-style:solid;
    z-index:-1;
}
/* fold shadow at the left end (tucks behind the left card edge) */
.fm-cart-ribbon .fm-cart-ribbon-band::before{
    left:6px;
    border-width:9px 8px 0 0;
    border-color:var(--fmrb-dark) transparent transparent transparent;
}
/* fold shadow at the right end (tucks behind the top card edge) */
.fm-cart-ribbon .fm-cart-ribbon-band::after{
    right:6px;
    border-width:9px 0 0 8px;
    border-color:var(--fmrb-dark) transparent transparent transparent;
}

.fm-cart-ribbon .fm-cart-ribbon-qty{
    font-size:12px;font-weight:900;
    display:inline-flex;align-items:center;justify-content:center;
    min-width:13px;
}
.fm-cart-ribbon .fm-cart-ribbon-text{font-weight:700;opacity:.95;letter-spacing:.1px}
.fm-cart-ribbon-ico{width:10px;height:10px;flex-shrink:0;display:inline-flex}
.fm-cart-ribbon-ico svg{width:100%;height:100%;display:block;stroke:#fff;fill:none;stroke-width:3}

/* v11.47.0 — RTL: ribbon stays on top-LEFT corner (same as LTR).
   The band still rotates -45deg. No mirror needed. */

/* ── ANIMATION: "ribbon tying" entrance / "roll-off" exit ──────── */
.fm-cart-ribbon .fm-cart-ribbon-band{
    opacity:0;
    transition:
        background .28s ease,
        box-shadow .3s ease,
        transform .55s cubic-bezier(.22,1.3,.4,1),
        opacity .3s ease;
    will-change:transform, opacity;
}
/* Closed: furled tight — band rolls up from corner */
.fm-card:not(.fm-ribbon-on) .fm-cart-ribbon .fm-cart-ribbon-band{
    opacity:0;
    transform:rotate(-45deg) translateY(-36px) scaleX(.25) scaleY(.4);
}
/* Open: unfurled onto corner */
.fm-card.fm-ribbon-on .fm-cart-ribbon .fm-cart-ribbon-band{
    opacity:1;
    transform:rotate(-45deg) translateY(0) scaleX(1) scaleY(1);
}
/* Leaving: rolls back off */
.fm-card.fm-ribbon-off .fm-cart-ribbon .fm-cart-ribbon-band{
    opacity:0;
    transform:rotate(-45deg) translateY(-36px) scaleX(.25) scaleY(.4);
    transition:
        transform .48s cubic-bezier(.55,0,.7,.4),
        opacity .28s ease;
}

/* ── Colour flash on quantity change ──────────────────────────────── */
.fm-cart-ribbon.fm-cart-ribbon-flash .fm-cart-ribbon-band{
    animation:fmRibbonFlash .55s ease;
}
@keyframes fmRibbonFlash{
    0%{ filter:none; }
    35%{ filter:brightness(1.55) saturate(1.45); }
    100%{ filter:none; }
}
.fm-cart-ribbon-qty.fm-cart-ribbon-qty-bump{
    animation:fmRibbonQtyBump .44s cubic-bezier(.22,1,.36,1);
}
@keyframes fmRibbonQtyBump{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.55); }
    100%{ transform:scale(1); }
}

/* Reduced motion: skip slide/scale, just fade. */
@media (prefers-reduced-motion: reduce){
    .fm-cart-ribbon .fm-cart-ribbon-band{
        transition:opacity .2s ease, background .2s ease !important;
    }
    .fm-card:not(.fm-ribbon-on) .fm-cart-ribbon .fm-cart-ribbon-band{ transform:rotate(-45deg) !important; opacity:0; }
    .fm-card.fm-ribbon-on   .fm-cart-ribbon .fm-cart-ribbon-band{ transform:rotate(-45deg) !important; opacity:1; }
    .fm-card.fm-ribbon-off  .fm-cart-ribbon .fm-cart-ribbon-band{ transform:rotate(-45deg) !important; opacity:0; transition:opacity .15s ease !important; }
    .fm-cart-ribbon.fm-cart-ribbon-flash .fm-cart-ribbon-band{ animation:none; }
    .fm-cart-ribbon-qty.fm-cart-ribbon-qty-bump{ animation:none; }
}