/*
 * Mariblue — widget Catalogo (shop, categorie, ricerca) e pannello dettagli.
 * Regole dal mockup approvato, annidate in .mb-pg (contenitore "site"):
 * battono gli stili del tema senza !important.
 */
@keyframes cg-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }


.mb-pg {
    /* =========================================================
       MARIBLUE CATALOG (shop, categorie, ricerca)
       ========================================================= */
    .cg-hero { background: var(--mb-notte); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
    .cg-hero::after { content: ""; position: absolute; left: -120px; bottom: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(0,71,171,.6), transparent 65%); z-index: -1; }
    .cg-hero .wrap { padding-block: 110px 40px; display: grid; gap: 14px; }
    .cg-hero .eyebrow { color: var(--mb-giallo); }
    .cg-hero h1 { font: 900 clamp(38px, 5.4cqw, 64px)/1 var(--mb-font-titoli); }
    .cg-hero p { font: 600 18px/1.5 var(--mb-font-titoli); color: #DCE7F5; max-width: 60ch; }
    .cg-search { display: flex; align-items: center; gap: 10px; max-width: 620px; height: 56px; margin-top: 8px; padding: 0 8px 0 18px; border-radius: 16px; background: #fff; color: var(--mb-tenue); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
    .cg-search svg { width: 20px; height: 20px; flex: 0 0 auto; }
    .cg-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: 600 16px var(--mb-font-testo); color: var(--mb-testo); }
    .cg-search button { border: 0; background: var(--mb-mare); color: var(--mb-blu); border-radius: 10px; padding: 8px 12px; font: 800 13px var(--mb-font-titoli); cursor: pointer; }
    .cg-search:focus-within { box-shadow: 0 0 0 3px var(--mb-oro), 0 18px 40px -20px rgba(0,0,0,.6); }
    @container site (max-width: 699px) { .cg-hero .wrap { padding-block: 86px 28px; } .cg-hero h1 { font-size: 38px; } .cg-hero p { font-size: 16px; } }

    .cg { padding-block: 28px 80px; }
    .cg-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .cg-cats :is(a, button), .cg-subs :is(a, button) { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--mb-linea); background: #fff; color: var(--mb-testo); padding: 10px 16px; border-radius: 999px; font: 800 15px var(--mb-font-titoli); cursor: pointer; transition: .18s; }
    .cg-cats :is(a, button) small, .cg-subs :is(a, button) small { font: 800 12px var(--mb-font-testo); color: var(--mb-tenue); background: var(--mb-mare); border-radius: 999px; padding: 1px 8px; }
    .cg-cats :is(a, button):hover, .cg-subs :is(a, button):hover { border-color: var(--mb-blu); color: var(--mb-blu); }
    .cg-cats :is(a, button)[aria-pressed="true"] { background: var(--mb-blu); border-color: var(--mb-blu); color: #fff; }
    .cg-cats :is(a, button)[aria-pressed="true"] small { background: rgba(255,255,255,.2); color: #fff; }
    .cg-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .cg-subs :is(a, button) { padding: 7px 13px; font-size: 14px; }
    .cg-subs :is(a, button)[aria-pressed="true"] { background: var(--mb-mare); border-color: var(--mb-blu); color: var(--mb-blu); }
    .cg-cats :is(a, button):focus-visible, .cg-subs :is(a, button):focus-visible { outline: 3px solid var(--mb-oro); outline-offset: 2px; }

    .cg-layout { display: grid; grid-template-columns: 240px 1fr; gap: 34px; margin-top: 26px; align-items: start; }
    .cg-filters { position: sticky; top: calc(var(--mb-hdr-h, 80px) + 20px); display: grid; gap: 22px; }
    .cg-fg h3 { font: 800 12px var(--mb-font-testo); letter-spacing: .14em; text-transform: uppercase; color: var(--mb-tenue); margin-bottom: 10px; }
    .cg-fg label { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 15px; cursor: pointer; border-radius: 8px; }
    .cg-fg label:hover { background: var(--mb-mare); }
    .cg-fg input { width: 18px; height: 18px; accent-color: var(--mb-blu); margin: 0; flex: 0 0 auto; }
    .cg-fg label span { flex: 1; }
    .cg-fg label small { color: #8FA2B9; font: 700 12.5px var(--mb-font-testo); font-variant-numeric: tabular-nums; }
    .cg-fg label.is-zero { opacity: .4; cursor: default; }
    .cg-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
    .g-classiche { background: #2C6FD6; } .g-al-peperoncino { background: #D33A2C; } .g-al-prezzemolo { background: #2E9B4F; }
    .cg-sheet-head, .cg-sheet-foot { display: none; }

    .cg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
    .cg-count { font: 800 15px var(--mb-font-titoli); color: var(--mb-testo); }
    .cg-active { display: flex; flex-wrap: wrap; gap: 6px; }
    .cg-active button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--mb-mare); color: var(--mb-blu); padding: 6px 10px; border-radius: 999px; font: 700 13px var(--mb-font-testo); cursor: pointer; }
    .cg-active button::after { content: "✕"; font-size: 11px; }
    .cg-active .reset { background: none; text-decoration: underline; text-underline-offset: 3px; }
    .cg-active .reset::after { content: ""; }
    .cg-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mb-tenue); }
    .cg-sort select { height: 40px; border-radius: 10px; border: 1px solid var(--mb-linea); padding: 0 10px; font: 700 14px var(--mb-font-testo); color: var(--mb-testo); background: #fff; }
    .cg-fbtn { display: none; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--mb-blu); background: #fff; color: var(--mb-blu); font: 800 14px var(--mb-font-titoli); cursor: pointer; }
    .cg-fbtn svg { width: 18px; height: 18px; }

    .cg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .cg-grid .mb-card { position: relative; cursor: pointer; text-align: left; font: inherit; padding: 0; }
    .mb-card__badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--mb-notte); color: #fff; font: 800 11px var(--mb-font-testo); letter-spacing: .06em; text-transform: uppercase; }
    .mb-card__dots { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--mb-tenue); margin-top: 2px; }
    .mb-card__price { margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: #FFF6DB; color: #7A5A00; font: 800 13px var(--mb-font-titoli); width: max-content; }
    .cg-empty { padding: 40px; border-radius: 22px; background: var(--mb-mare); text-align: center; display: grid; gap: 10px; justify-items: center; }
    .cg-empty h3 { font: 800 22px var(--mb-font-titoli); color: var(--mb-blu); }
    .cg-more { display: flex; justify-content: center; margin-top: 22px; }

    .cg-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 60px; }
    .cg-tiles a { display: grid; gap: 4px; padding: 20px; border-radius: 20px; background: var(--mb-mare); text-decoration: none; transition: background .2s; }
    .cg-tiles a:hover { background: #E1ECF9; }
    .cg-tiles b { font: 900 20px var(--mb-font-titoli); color: var(--mb-blu); }
    .cg-tiles span { font-size: 14px; color: var(--mb-tenue); }
    .cg-tiles a.is-here { background: var(--mb-blu); } .cg-tiles a.is-here b, .cg-tiles a.is-here span { color: #fff; }

    @container site (max-width: 1100px) { .cg-grid { grid-template-columns: repeat(2, 1fr); } }
    @container site (max-width: 980px) {
        .cg-layout { grid-template-columns: 1fr; }
        .cg-fbtn { display: inline-flex; }
        .cg-filters { position: absolute; left: 0; right: 0; top: auto; z-index: 55; display: none; padding: 0 20px 20px; background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -20px 50px rgba(10,46,82,.3); overflow: auto; gap: 18px; }
        .cg-filters.is-open { display: grid; }
        .cg-sheet-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: #fff; padding: 18px 0 10px; z-index: 1; }
        .cg-sheet-head b { font: 900 20px var(--mb-font-titoli); color: var(--mb-blu); }
        .cg-sheet-head button { border: 0; background: var(--mb-mare); width: 38px; height: 38px; border-radius: 50%; color: var(--mb-blu); cursor: pointer; font-size: 16px; }
        .cg-sheet-foot { display: flex; gap: 10px; position: sticky; bottom: 0; background: #fff; padding-top: 10px; }
        .cg-sheet-foot .btn { flex: 1; justify-content: center; }
        .cg-tiles { grid-template-columns: repeat(2, 1fr); }
        .cg-sort span { display: none; }
    }
    @container site (max-width: 699px) {
        .cg { padding-block: 20px 56px; }
        .cg-grid { gap: 12px; }
        .cg-grid .mb-card__body { padding: 12px 12px 14px; }
        .cg-grid .mb-card__name { font-size: 15px; }
        .cg-grid .mb-card__go { display: none; }
        .cg-sort { margin-left: 0; }
        .cg-bar .cg-count { flex-basis: 100%; order: -1; }
        .cg-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
    }
    .cg-scrim { position: absolute; left: 0; right: 0; z-index: 54; background: rgba(8,30,58,.35); }

    /* pannello dettaglio */
    .cg-panel { position: absolute; right: 0; z-index: 60; width: min(860px, 94%); box-sizing: border-box; font-family: var(--mb-font-testo); color: var(--mb-testo); background: #fff; box-shadow: -30px 0 60px -20px rgba(10,46,82,.45); overflow: auto; overscroll-behavior: contain; animation: cg-in .35s cubic-bezier(.32,.72,0,1); }
    .cg-panel__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--mb-linea); }
    .cg-panel .x { flex: 0 0 40px; border: 0; background: var(--mb-mare); width: 40px; height: 40px; border-radius: 50%; color: var(--mb-blu); font-size: 16px; cursor: pointer; }
    .cg-panel .x:focus-visible { outline: 3px solid var(--mb-oro); }
    .cg-panel__body { display: grid; grid-template-columns: 300px 1fr; gap: 26px; padding: 22px 22px 28px; align-items: start; }
    .cg-panel__img { position: sticky; top: 86px; aspect-ratio: 1; border-radius: 18px; background: #F5F8FC; display: grid; place-items: center; }
    .cg-panel__img img { max-width: 86%; max-height: 86%; object-fit: contain; }
    .cg-panel__txt { display: grid; gap: 14px; min-width: 0; }
    @container site (max-width: 699px) {
        .cg-panel { width: 100%; border-radius: 24px 24px 0 0; box-shadow: 0 -20px 50px rgba(10,46,82,.35); }
        .cg-panel__head { border-radius: 24px 24px 0 0; }
        .cg-panel__body { grid-template-columns: 1fr; gap: 16px; padding: 16px 18px 24px; }
        .cg-panel__img { position: static; aspect-ratio: auto; height: 190px; }
    }
    .cg-panel .pcat { font: 800 12px var(--mb-font-testo); letter-spacing: .1em; text-transform: uppercase; color: var(--mb-oro); }
    .cg-panel h2 { font: 900 24px/1.15 var(--mb-font-titoli); color: var(--mb-blu); margin: 0; }
    .cg-panel .meta { display: flex; flex-wrap: wrap; gap: 6px; }
    .cg-panel .meta span { padding: 4px 10px; border-radius: 999px; background: var(--mb-mare); font: 700 13px var(--mb-font-testo); color: var(--mb-blu-scuro); }
    .cg-gusti { display: flex; flex-wrap: wrap; gap: 6px; }
    .cg-gusti button { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--mb-linea); background: #fff; border-radius: 999px; padding: 7px 12px; font: 700 14px var(--mb-font-titoli); cursor: pointer; color: var(--mb-testo); }
    .cg-gusti button[aria-pressed="true"] { border-color: var(--mb-blu); background: var(--mb-mare); color: var(--mb-blu); }
    .cg-info { display: grid; gap: 0; border-radius: 16px; border: 1px solid var(--mb-linea); overflow: hidden; }
    .cg-info div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 11px 14px; font-size: 14.5px; }
    .cg-info div + div { border-top: 1px solid var(--mb-linea); }
    .cg-info dt, .cg-info b { font-weight: 800; color: var(--mb-tenue); font-size: 13px; }
    .cg-info .tbd { color: #8FA2B9; font-style: italic; }
    .cg-lock { padding: 14px; border-radius: 16px; background: var(--mb-mare); font-size: 14px; display: grid; gap: 8px; }
    .cg-lock b { font: 800 15px var(--mb-font-titoli); color: var(--mb-blu); }
    .cg-lock span a { color: var(--mb-blu); font-weight: 800; }
    .cg-panel__btns { display: flex; flex-wrap: wrap; gap: 10px; }
    .cg-panel__btns > * { flex: 1; justify-content: center; }
    .cg-dashed { border: 1.5px dashed #A9BAD0 !important; background: #fff !important; color: var(--mb-tenue) !important; box-shadow: none !important; }
    @container site (max-width: 699px) { }


    /* catalogo: immagini di categoria */
    .cg-hero.has-img { background-size: cover; background-position: center; }
    .cg-tiles a { position: relative; overflow: hidden; isolation: isolate; min-height: 150px; align-content: end; color: #fff; }
    .cg-tiles a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s; }
    .cg-tiles a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,30,64,.85), rgba(5,30,64,.15)); }
    .cg-tiles a:hover img { transform: scale(1.05); }
    .cg-tiles a b, .cg-tiles a span { color: #fff !important; }
    .cg-tiles a.is-here { outline: 3px solid var(--mb-oro); outline-offset: -3px; }
    .cg-tiles a.is-here::after { background: linear-gradient(0deg, rgba(0,71,171,.9), rgba(0,71,171,.3)); }
    /* strato fisso in <body> per pannello e foglio dei filtri: è anch'esso .mb-pg,
       così le regole qui sopra valgono e le @container guardano la finestra */
    &.cg-layer { position: fixed; inset: 0; z-index: 100000; }
    &.cg-layer .cg-scrim { position: absolute; inset: 0; }
    &.cg-layer .cg-panel { top: 0; bottom: 0; height: auto; }
    @container site (max-width: 699px) { &.cg-layer .cg-panel { top: 12%; } }
    &.cg-layer .cg-filters { top: 18%; bottom: 0; max-height: none; }
    .cg-dot.g-classiche { background: var(--mb-gusto-classiche); } .cg-dot.g-al-peperoncino { background: var(--mb-gusto-al-peperoncino); } .cg-dot.g-al-prezzemolo { background: var(--mb-gusto-al-prezzemolo); }
    .cg-grid > .mb-card { min-width: 0; }
    .cg-noscript { display: contents; }
}