/* Custom_MegaMenu: desktop only. Mobile keeps the theme's slide-out menu.
   Colours, font and sizes are variables just below: edit them here to restyle. */
.nav-sections .cmm {
    display: none !important;
}

/* ---- Shared palette and font (used by the menu and by tiles anywhere on the site) ---- */
/* Oswald, hosted with the module. Put the font files in view/frontend/web/fonts/ (see README there). */
@font-face {
    font-family: 'Oswald';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Oswald-Regular.woff2') format('woff2'),
         url('../fonts/Oswald-Regular.ttf') format('truetype');
}

:root {
    --cmm-font: 'Oswald', pathway, 'Pathway Gothic One', 'Arial Narrow', sans-serif;
    --cmm-pink: #f6d5d1;
    --cmm-peach: #f8e0cc;
    --cmm-yellow: #f8ebc6;
    --cmm-green: #dfe8ce;
    --cmm-blue: #d6e6ee;
    --cmm-lavender: #e3dcef;
    --cmm-mint: #d5ede0;
    --cmm-tile-ratio: 16 / 10;   /* image shape inside tiles, e.g. 400 / 322 */
    --cmm-ink: #2d2326;          /* dark text inside tiles */
    --cmm-accent: #7a2f7e;       /* links / hover text in the brand list */
    --cmm-line: #eadfe6;         /* thin divider lines */
    --cmm-row: 52px;             /* mosaic row height */
    --cmm-gap: 14px;             /* mosaic gap */
}

/* ---- Picture tiles (use inside a megamenu_full_<id> or megamenu_<id> CMS block) ----
   <div class="cmm-tiles">
     <a class="cmm-tile cmm-tile--pink cmm-tile--third" href="...">
       <img src="..." alt="..." width="640" height="400" loading="lazy">
       <span class="cmm-tile__label">Rag Dolls</span>
     </a>
   </div> */
.cmm-tiles {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cmm-tile {
    background: var(--cmm-pink);
    border-radius: 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    color: #333333;
    display: flex;
    flex-direction: column;
    grid-column: span 3;            /* default: 4 tiles per row */
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cmm-tile--third { grid-column: span 4; }   /* 3 per row */
.cmm-tile--half { grid-column: span 6; }    /* 2 per row */
.cmm-tile--full { grid-column: span 12; }   /* full row */

.cmm-tile:hover,
.cmm-tile:focus {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
    color: #333333;
    text-decoration: none;
    transform: translateY(-3px);
}

.cmm-tile img {
    aspect-ratio: var(--cmm-tile-ratio, 16 / 10);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.cmm-tile__label {
    font-family: var(--cmm-font);
    font-size: 20px;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 12px 10px 14px;
    text-align: center;
    text-transform: uppercase;
}

.cmm-tile--pink { background: var(--cmm-pink); }
.cmm-tile--peach { background: var(--cmm-peach); }
.cmm-tile--yellow { background: var(--cmm-yellow); }
.cmm-tile--green { background: var(--cmm-green); }
.cmm-tile--blue { background: var(--cmm-blue); }
.cmm-tile--lavender { background: var(--cmm-lavender); }
.cmm-tile--mint { background: var(--cmm-mint); }

/* Tiles on smaller screens: two per row (a --full tile stays on its own row) */
@media (max-width: 767px) {
    .cmm-tile,
    .cmm-tile--third,
    .cmm-tile--half {
        grid-column: span 6;
    }

    .cmm-tile--full {
        grid-column: span 12;
    }

    .cmm-tile__label {
        font-size: 18px;
        padding: 10px 8px 12px;
    }
}


/* ==========================================================================
   Mosaic ("bento") tiles   -  use inside a megamenu_full_<id> CMS block, or on any page
   <div class="cmm-bento">
     <a class="cmm-b cmm-b--pink cmm-b--c4 cmm-b--r6 cmm-b--lg" href="...">
       <span class="cmm-b__text"><span class="cmm-b__title">Rag<br>Dolls</span>
         <span class="cmm-b__sub">A friend to treasure</span><span class="cmm-b__go" aria-hidden="true"></span></span>
       <img class="cmm-b__img" src="..." alt="..." width="..." height="..." loading="lazy">
     </a>
     <span class="cmm-b cmm-b--deco cmm-b--yellow cmm-b--rainbow cmm-b--c1 cmm-b--r3" aria-hidden="true"></span>
   </div>
   Width  classes: cmm-b--c1 ... cmm-b--c12   (columns out of 12)
   Height classes: cmm-b--r1 ... cmm-b--r10  (rows)
   Colours: pink peach yellow green blue lavender mint
   Image:   cmm-b--photo (photo fills the tile), cmm-b--shade (dark fade + white text on photos)
   Decor:   cmm-b--deco + cmm-b--rainbow / --star / --heart / --heart-pink
   Size:    cmm-b--lg (bigger title), cmm-bento--compact (smaller rows/titles)
   ========================================================================== */
.cmm-bento {
    display: grid;
    gap: var(--cmm-gap);
    grid-auto-flow: dense;
    grid-auto-rows: var(--cmm-row);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cmm-bento--compact {
    --cmm-row: 46px;
    --cmm-gap: 12px;
}

.cmm-b {
    align-items: center;
    background-color: var(--cmm-pink);
    border-radius: 22px;
    color: var(--cmm-ink);
    display: flex;
    grid-column: span 4;
    grid-row: span 3;
    overflow: hidden;
    padding: 20px 22px;
    position: relative;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.cmm-b:visited {
    color: var(--cmm-ink);
}

a.cmm-b:hover,
a.cmm-b:focus-visible {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
    color: var(--cmm-ink);
    text-decoration: none;
    transform: translateY(-3px);
}

.cmm-b--c1 { grid-column: span 1; }
.cmm-b--c2 { grid-column: span 2; }
.cmm-b--c3 { grid-column: span 3; }
.cmm-b--c4 { grid-column: span 4; }
.cmm-b--c5 { grid-column: span 5; }
.cmm-b--c6 { grid-column: span 6; }
.cmm-b--c7 { grid-column: span 7; }
.cmm-b--c8 { grid-column: span 8; }
.cmm-b--c9 { grid-column: span 9; }
.cmm-b--c10 { grid-column: span 10; }
.cmm-b--c11 { grid-column: span 11; }
.cmm-b--c12 { grid-column: span 12; }
.cmm-b--r1 { grid-row: span 1; }
.cmm-b--r2 { grid-row: span 2; }
.cmm-b--r3 { grid-row: span 3; }
.cmm-b--r4 { grid-row: span 4; }
.cmm-b--r5 { grid-row: span 5; }
.cmm-b--r6 { grid-row: span 6; }
.cmm-b--r7 { grid-row: span 7; }
.cmm-b--r8 { grid-row: span 8; }
.cmm-b--r9 { grid-row: span 9; }
.cmm-b--r10 { grid-row: span 10; }

.cmm-b--pink { background-color: var(--cmm-pink); }
.cmm-b--peach { background-color: var(--cmm-peach); }
.cmm-b--yellow { background-color: var(--cmm-yellow); }
.cmm-b--green { background-color: var(--cmm-green); }
.cmm-b--blue { background-color: var(--cmm-blue); }
.cmm-b--lavender { background-color: var(--cmm-lavender); }
.cmm-b--mint { background-color: var(--cmm-mint); }

.cmm-b__text {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 58%;
    position: relative;
    z-index: 2;
}

.cmm-b__title {
    font-family: var(--cmm-font);
    font-size: 34px;
    line-height: 0.98;
}

.cmm-b--lg .cmm-b__title {
    font-size: 50px;
}

.cmm-bento--compact .cmm-b__title {
    font-size: 27px;
}

.cmm-bento--compact .cmm-b--lg .cmm-b__title {
    font-size: 38px;
}

.cmm-b__sub {
    font-family: var(--cmm-font);
    font-size: 17px;
    line-height: 1.1;
}

.cmm-b__go {
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    font-size: 18px;
    height: 38px;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s ease, transform 0.2s ease;
    width: 38px;
}

.cmm-b__go::before {
    content: '\2192';
}

a.cmm-b:hover .cmm-b__go,
a.cmm-b:focus-visible .cmm-b__go {
    background: #ffffff;
    transform: translateX(3px);
}

.cmm-b__img {
    bottom: 0;
    height: auto;
    max-height: 100%;
    max-width: 62%;
    object-fit: contain;
    object-position: right bottom;
    position: absolute;
    right: 0;
    transform-origin: right bottom;
    transition: transform 0.3s ease;
    width: auto;
    z-index: 1;
}

a.cmm-b:hover .cmm-b__img {
    transform: scale(1.04);
}

/* photo fills the whole tile */
.cmm-b--photo .cmm-b__img {
    height: 100%;
    inset: 0;
    max-height: none;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform-origin: center;
    width: 100%;
}

/* dark fade + white text so titles stay readable on photos */
.cmm-b--shade,
a.cmm-b--shade:visited,
a.cmm-b--shade:hover,
a.cmm-b--shade:focus-visible {
    color: #333; /** color: #ffffff; **/
}

.cmm-b--shade::after {
/**    background: linear-gradient(90deg, rgba(30, 20, 25, 0.55), rgba(30, 20, 25, 0) 70%);  */
    content: '';
    inset: 0;
    position: absolute;
    z-index: 1;
}

/* decorative colour blocks (not links) */
.cmm-b--deco {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 58%;
    padding: 0;
}

.cmm-b--rainbow { background-image: url("/pub/media/wysiwyg/menu/rainbow.svg"); }
.cmm-b--star { background-image: url("/pub/media/wysiwyg/menu/star.svg"); }
.cmm-b--heart { background-image: url("/pub/media/wysiwyg/menu/heart.svg"); }
.cmm-b--heart-pink { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 84C20 62 12 44 12 32A19 19 0 0 1 50 26A19 19 0 0 1 88 32C88 44 80 62 50 84Z' stroke='rgb(244,160,170)' stroke-width='5'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Split panel: brand list on the left, mosaic on the right (use class cmm-split)
   ========================================================================== */
.cmm-split {
    align-items: start;
    display: grid;
    gap: 36px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.cmm-split__art {
    border-left: 1px solid var(--cmm-line);
    padding-left: 36px;
}

.cmm-split__head {
    align-items: center;
    border-bottom: 1px solid var(--cmm-line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 14px;
}

.cmm-split__title {
    align-items: center;
    color: var(--cmm-ink);
    display: flex;
    font-family: var(--cmm-font);
    font-size: 36px;
    font-weight: normal;
    gap: 12px;
    line-height: 1;
    margin: 0;
}

.cmm-split__title::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 84C20 62 12 44 12 32A19 19 0 0 1 50 26A19 19 0 0 1 88 32C88 44 80 62 50 84Z' stroke='rgb(244,160,170)' stroke-width='5'/%3E%3C/svg%3E") center / contain no-repeat;
    content: '';
    height: 36px;
    width: 36px;
}

.cmm-split__all,
.cmm-split__all:visited {
    color: var(--cmm-accent);
    font-family: var(--cmm-font);
    font-size: 19px;
    text-decoration: none;
    white-space: nowrap;
}

.cmm-split__all::after {
    content: '\2192';
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.cmm-split__all:hover,
.cmm-split__all:focus-visible {
    color: var(--cmm-accent);
    text-decoration: none;
}

.cmm-split__all:hover::after,
.cmm-split__all:focus-visible::after {
    transform: translateX(4px);
}

.cmm-brands {
    column-count: 3;
    column-gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmm-brands li {
    break-inside: avoid;
    margin: 0;
}

.cmm-brands a,
.cmm-brands a:visited {
    align-items: center;
    border-bottom: 1px solid var(--cmm-line);
    border-radius: 0;
    color: var(--cmm-ink);
    display: flex;
    font-family: var(--cmm-font);
    font-size: 19px;
    justify-content: space-between;
    line-height: 1.2;
    padding: 12px 10px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cmm-brands a::after {
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: '';
    flex: 0 0 auto;
    height: 7px;
    margin-left: 10px;
    transform: rotate(45deg);
    width: 7px;
}

.cmm-brands a:hover,
.cmm-brands a:focus-visible {
    background: #f1eaf7;
    border-bottom-color: transparent;
    border-radius: 12px;
    color: var(--cmm-accent);
    text-decoration: none;
}

/* the split panel has its own "View All" link, so hide the bottom pill there */
.cmm__panel-inner:has(.cmm-split) > .cmm__view-all {
    display: none;
}

/* Smaller screens (for homepage use): mosaic becomes a simple two-column grid */
@media (max-width: 767px) {
    .cmm-bento {
        grid-auto-rows: minmax(150px, auto);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cmm-bento > .cmm-b {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .cmm-b--deco {
        display: none;
    }

    .cmm-b__text {
        max-width: 100%;
    }

    .cmm-b__title,
    .cmm-b--lg .cmm-b__title {
        font-size: 24px;
    }

    .cmm-split {
        grid-template-columns: 1fr;
    }

    .cmm-split__art {
        border-left: 0;
        padding-left: 0;
    }

    .cmm-brands {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .nav-sections:has(.cmm__item) .navigation {
        display: none !important;
    }

    .nav-sections .cmm {
        /* ---- Bar ---- */
        --cmm-bar-bg: #333333;
        --cmm-link: #ffffff;
        --cmm-hover-text: #333333;
        --cmm-divider: transparent;
        --cmm-size: 18px;
        --cmm-btn-bg: #333333;        /* "Shop All" button, same as the menu bar */
        --cmm-btn-hover-bg: #1f1f1f;  /* button on hover (slightly darker) */
        --cmm-btn-weight: 700;        /* button text weight, same in every state */

        /* ---- Hover colours (from the Funstra logo); they cycle across the top-level items.
               Set all six to the same colour for a single hover colour. ---- */
        --cmm-hover-1: #fbd9bf;   /* peach  */
        --cmm-hover-2: #f7c9c4;   /* coral pink */
        --cmm-hover-3: #d3e2bf;   /* sage   */
        --cmm-hover-4: #c9e0ec;   /* sky    */
        --cmm-hover-5: #ddd3ee;   /* lavender */
        --cmm-hover-6: #f9e6b0;   /* butter */
        --cmm-hover-bg: #fbd9bf;  /* fallback */

        /* ---- Dropdown ---- */
        --cmm-panel-bg: #fffcf8;
        --cmm-heading: #333333;
        --cmm-text: #575757;


        display: block !important;
        position: relative;
        background: var(--cmm-bar-bg);
    }

    .cmm__list {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0 auto;
        max-width: 1280px;
        padding: 0 20px;
    }

    .cmm__item {
        border-left: 1px solid var(--cmm-divider);
        margin: 0;
    }

    .cmm__link {
        border-radius: 14px;
        color: var(--cmm-link);
        display: block;
        font-family: var(--cmm-font);
        font-size: var(--cmm-size);
        font-weight: normal;
        letter-spacing: 0;
        line-height: 1.2;
        margin: 6px 2px;
        padding: 8px 14px;
        text-decoration: none;
        text-transform: uppercase;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .cmm__link:visited {
        color: var(--cmm-link);
    }

    .cmm__item:hover > .cmm__link,
    .cmm__item:focus-within > .cmm__link {
        background: var(--cmm-hover-bg);
        color: var(--cmm-hover-text);
        text-decoration: none;
    }

    .cmm__item:nth-child(6n+1):hover > .cmm__link,
    .cmm__item:nth-child(6n+1):focus-within > .cmm__link {
        background: var(--cmm-hover-1);
    }

    .cmm__item:nth-child(6n+2):hover > .cmm__link,
    .cmm__item:nth-child(6n+2):focus-within > .cmm__link {
        background: var(--cmm-hover-2);
    }

    .cmm__item:nth-child(6n+3):hover > .cmm__link,
    .cmm__item:nth-child(6n+3):focus-within > .cmm__link {
        background: var(--cmm-hover-3);
    }

    .cmm__item:nth-child(6n+4):hover > .cmm__link,
    .cmm__item:nth-child(6n+4):focus-within > .cmm__link {
        background: var(--cmm-hover-4);
    }

    .cmm__item:nth-child(6n+5):hover > .cmm__link,
    .cmm__item:nth-child(6n+5):focus-within > .cmm__link {
        background: var(--cmm-hover-5);
    }

    .cmm__item:nth-child(6n+6):hover > .cmm__link,
    .cmm__item:nth-child(6n+6):focus-within > .cmm__link {
        background: var(--cmm-hover-6);
    }

    /* arrow on items that open a dropdown; flips up when open */
    .cmm__item--has-panel > .cmm__link > span::after {
        border-bottom: 2px solid currentColor;
        border-right: 2px solid currentColor;
        content: '';
        display: inline-block;
        height: 6px;
        margin: 0 0 3px 10px;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        vertical-align: middle;
        width: 6px;
    }

    .cmm__item--has-panel:hover > .cmm__link > span::after,
    .cmm__item--has-panel:focus-within > .cmm__link > span::after {
        margin-bottom: -1px;
        transform: rotate(225deg);
    }

    /* ---- Dropdown panel: a floating rounded card under the bar ---- */
    .cmm__panel {
        display: none;
        left: 0;
        padding: 0 20px;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 100;
    }

    .cmm__item:hover > .cmm__panel,
    .cmm__item:focus-within > .cmm__panel {
        animation: cmm-in 0.18s ease-out;
        display: block;
    }

    @keyframes cmm-in {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .cmm__panel-inner {
        background: var(--cmm-panel-bg);
        border-radius: 0 0 22px 22px;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
        margin: 0 auto;
        max-width: 1240px;
        padding: 24px;
        pointer-events: auto;
    }

    .cmm__panel-body {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
    }

    .cmm__grid {
        display: grid;
        flex: 1 1 0;
        gap: 24px;
        min-width: 0;
    }

    .cmm__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmm__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cmm__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cmm__grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .cmm__grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    .cmm__promo {
        flex: 0 0 32%;
        max-width: 32%;
    }

    /* Tiles (or a block with no columns beside it) use the full panel width */
    .cmm__promo:has(.cmm-tiles),
    .cmm__promo:only-child {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .cmm__promo img,
    .cmm__full img {
        height: auto;
        max-width: 100%;
    }

    .cmm__col-title {
        color: var(--cmm-heading);
        display: block;
        font-weight: 700;
        margin-bottom: 8px;
        text-decoration: none;
    }

    .cmm__sublist {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cmm__sublist li {
        margin: 0 0 6px;
    }

    .cmm__sublist a {
        color: var(--cmm-text);
        text-decoration: none;
    }

    .cmm__sublist a:hover,
    .cmm__col-title:hover {
        text-decoration: underline;
    }

    /* "Shop All ..." pill button */
    .cmm__view-all,
    .cmm__view-all:visited {
        align-items: center;
        background: var(--cmm-btn-bg);
        border-radius: 999px;
        color: #ffffff;
        display: inline-flex;
        font-size: 15px;
        font-weight: var(--cmm-btn-weight);
        gap: 8px;
        line-height: 1;
        margin-top: 22px;
        padding: 13px 22px;
        text-decoration: none;
        transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .cmm__view-all::after {
        content: '\2192';
        display: inline-block;
        font-size: 16px;
        transition: transform 0.2s ease;
    }

    .cmm__view-all:hover,
    .cmm__view-all:focus,
    .cmm__view-all:focus-visible,
    .cmm__view-all:active {
        background: var(--cmm-btn-hover-bg);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-1px);
    }

    .cmm__view-all,
    .cmm__view-all:visited,
    .cmm__view-all:hover,
    .cmm__view-all:focus,
    .cmm__view-all:focus-visible,
    .cmm__view-all:active {
        font-weight: var(--cmm-btn-weight) !important;
    }

    .cmm__view-all:hover::after,
    .cmm__view-all:focus-visible::after {
        transform: translateX(4px);
    }

    .cmm__view-all:focus-visible {
        outline: 3px solid #e17366;
        outline-offset: 2px;
    }

}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    .cmm__item:hover > .cmm__panel,
    .cmm__item:focus-within > .cmm__panel {
        animation: none;
    }

    .cmm__link,
    .cmm-tile,
    .cmm__view-all,
    .cmm__view-all::after,
    .cmm__item--has-panel > .cmm__link > span::after {
        transition: none;
    }
}