/* 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) ---- */
:root {
    --cmm-font: 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 */
}

/* ---- 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: 24px;
    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: 20px;
        padding: 10px 8px 12px;
    }
}

@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: 20px;
        --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 {
        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: 12px 12px 0 0;
        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;
        padding: 14px 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;
    }
}