/* =====================================================
   HAMBURGER BASE (UNIFIED SYSTEM)
===================================================== */

.hamburger {

    position: relative;
    z-index: 1000;

    /* =====================================================
       SIZE SYSTEM
    ===================================================== */

    --size: var(--hamburger-icon-size, 32px);
    width: var(--size);
    height: var(--size);

    /* proportions */
    --thickness-scale: 0.08;
    --gap-scale: 0.22;
    --width-scale: 0.7;
    --dot-scale: 1;

    /* computed */
    --line-thickness: calc(var(--size) * var(--thickness-scale));
    --line-gap: calc(var(--size) * var(--gap-scale));
    --line-width: calc(var(--size) * var(--width-scale));
    --dot-size: calc(var(--line-thickness) * var(--dot-scale));


    /* =====================================================
       COLORS
    ===================================================== */
color: var(--hamburger-icon-color);
    background-color: var(--hamburger-bg);
    background-image: var(--hamburger-bg);
aspect-ratio:1;

    /* =====================================================
       BOX MODEL
    ===================================================== */

    padding: var(--hamburger-padding);
    margin: var(--hamburger-margin);


    box-sizing: border-box;


    /* =====================================================
       BORDER
    ===================================================== */

    border-style: solid;
    border-width: var(--hamburger-border-width);
    border-color: var(--hamburger-border-color);
    border-radius: var(--hamburger-border-radius);


    /* =====================================================
       LAYOUT
    ===================================================== */

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

/* =====================================================
   STATES
===================================================== */

.hamburger:hover {
    background-color: var(--hamburger-bg-hover);
    background-image: var(--hamburger-bg-hover);
}

.hamburger:hover .line {
    background: var(--hamburger-icon-color-hover);
}

.hamburger.is-active {
    background-color: var(--hamburger-bg-active);
    background-image: var(--hamburger-bg-active);
}

.hamburger.is-active .line {
    background: var(--hamburger-icon-color-active);
}


/* =====================================================
   INNER (ADAPTIVE)
===================================================== */

.hamburger .inner {
    position: relative;
}

/* line variants */
.hamburger[data-variant="hamburger"] .inner,
.hamburger[data-variant="hotdog"] .inner,
.hamburger[data-variant="fries"] .inner, .hamburger[data-variant="strawberry"] .inner {
    width: var(--line-width);
    height: calc(var(--line-gap) * 2 + var(--line-thickness));
}

/* dot variant */
.hamburger[data-variant="kebab"] .inner {
    width: var(--dot-size);
    height: calc(var(--line-gap) * 2 + var(--dot-size));
}


/* =====================================================
   LINES BASE
===================================================== */

.hamburger .line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    width: var(--line-width);
    height: var(--line-thickness);

    background: var(--hamburger-icon-color);
    border-radius: 0;

    transition:
        transform 260ms cubic-bezier(.4,0,.2,1),
        opacity 200ms ease,
        top 260ms cubic-bezier(.4,0,.2,1);
}

/* posizioni */
.hamburger .line:nth-child(1) { top: 0; }
.hamburger .line:nth-child(2) { top: var(--line-gap); }
.hamburger .line:nth-child(3) { top: calc(var(--line-gap) * 2); }


/* =====================================================
   HAMBURGER VARIANT
===================================================== */

.hamburger[data-variant="hamburger"].is-active .line:nth-child(1) {
    top: var(--line-gap);
    transform: translateX(-50%) rotate(45deg);
}

.hamburger[data-variant="hamburger"].is-active .line:nth-child(2) {
    opacity: 0;
}

.hamburger[data-variant="hamburger"].is-active .line:nth-child(3) {
    top: var(--line-gap);
    transform: translateX(-50%) rotate(-45deg);
}


/* =====================================================
   HOTDOG VARIANT
===================================================== */

.hamburger[data-variant="hotdog"] {
    --hotdog-scale: 0.6;
}

.hamburger[data-variant="hotdog"] .line:nth-child(1),
.hamburger[data-variant="hotdog"] .line:nth-child(3) {
    width: calc(var(--line-width) * var(--hotdog-scale));
}

.hamburger[data-variant="hotdog"].is-active .line:nth-child(1),
.hamburger[data-variant="hotdog"].is-active .line:nth-child(3) {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.3);
}

.hamburger[data-variant="hotdog"].is-active .line:nth-child(2) {
    transform: translateX(-50%) scaleX(1.1);
}


/* =====================================================
   FRIES VARIANT
===================================================== */


.hamburger[data-variant="fries"] {

    /* scala della linea centrale */
    --fries-scale: 0.65;
}



/* linea centrale più corta e allineata a destra */
.hamburger[data-variant="fries"] .line:nth-child(2) {

    width: calc(var(--line-width) * var(--fries-scale));

    left: auto;
    right: 0;

    transform: none;
}



/* top e bottom si allineano al centro */
.hamburger[data-variant="fries"].is-active .line:nth-child(1),
.hamburger[data-variant="fries"].is-active .line:nth-child(3) {
    top: var(--line-gap);
    width: var(--line-width);
}

/* rotazioni */
.hamburger[data-variant="fries"].is-active .line:nth-child(1) {
    transform: translateX(-50%) rotate(45deg);
}

.hamburger[data-variant="fries"].is-active .line:nth-child(3) {
    transform: translateX(-50%) rotate(-45deg);
}


/* linea centrale sparisce e torna centrata */
.hamburger[data-variant="fries"].is-active .line:nth-child(2) {

    opacity: 0;

    /* reset per evitare glitch */
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

/* =====================================================
   KEBAB VARIANT
===================================================== */

.hamburger[data-variant="kebab"] {

    /* 👇 QUI controlli la dimensione dei dots */
    --dot-scale: 1.5;
}


/* dots */
.hamburger[data-variant="kebab"] .dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    width: var(--dot-size);
    height: var(--dot-size);

    background: var(--hamburger-icon-color);
    border-radius: 50%;

    transition:
        transform 260ms cubic-bezier(.4,0,.2,1),
        opacity 200ms ease,
        top 260ms cubic-bezier(.4,0,.2,1),
        width 260ms ease,
        border-radius 260ms ease;
}

/* posizione */
.hamburger[data-variant="kebab"] .dot:nth-child(1) { top: 0; }
.hamburger[data-variant="kebab"] .dot:nth-child(2) { top: var(--line-gap); }
.hamburger[data-variant="kebab"] .dot:nth-child(3) { top: calc(var(--line-gap) * 2); }

/* hover / active colore */
.hamburger[data-variant="kebab"]:hover .dot {
    background: var(--hamburger-icon-color-hover);
}
.hamburger[data-variant="kebab"].is-active .dot {
    background: var(--hamburger-icon-color-active);
}

/* animazione */
.hamburger[data-variant="kebab"].is-active .dot:nth-child(1),
.hamburger[data-variant="kebab"].is-active .dot:nth-child(3) {
    top: var(--line-gap);
    opacity: 0;
    transform: translateX(-50%) scale(0.3);
}

.hamburger[data-variant="kebab"].is-active .dot:nth-child(2) {
    width: var(--line-width);
    border-radius: 999px;
}



/* =====================================================
   STRAWBERRY VARIANT
===================================================== */

.hamburger[data-variant="strawberry"] {

    /* scale diverse per ogni linea */
    --strawberry-scale-2: 0.8;
    --strawberry-scale-3: 0.6;
}


/* linea 2 più corta */
.hamburger[data-variant="strawberry"] .line:nth-child(2) {
    width: calc(var(--line-width) * var(--strawberry-scale-2));
}

/* linea 3 ancora più corta */
.hamburger[data-variant="strawberry"] .line:nth-child(3) {
    width: calc(var(--line-width) * var(--strawberry-scale-3));
}


/* top e bottom si allineano */
.hamburger[data-variant="strawberry"].is-active .line:nth-child(1),
.hamburger[data-variant="strawberry"].is-active .line:nth-child(3) {
    top: var(--line-gap);
    width: var(--line-width);
}

/* rotazioni */
.hamburger[data-variant="strawberry"].is-active .line:nth-child(1) {
    transform: translateX(-50%) rotate(45deg);
}

.hamburger[data-variant="strawberry"].is-active .line:nth-child(3) {
    transform: translateX(-50%) rotate(-45deg);
}

/* linea centrale sparisce */
.hamburger[data-variant="strawberry"].is-active .line:nth-child(2) {
    opacity: 0;
}


/* =====================================================
   CHOCOLATE VARIANT
===================================================== */

.hamburger[data-variant="chocolate"] {
    --choco-gap-scale: 0.12;
}


/* wrapper */
.hamburger[data-variant="chocolate"] .inner {
    position: relative;
    width: var(--line-width);
    height: var(--line-width);
}


/* grid */
.hamburger[data-variant="chocolate"] .grid-9 {
    display: grid;
    width: 100%;
    height: 100%;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);

    gap: calc(var(--line-width) * var(--choco-gap-scale));
}


/* celle */
.hamburger[data-variant="chocolate"] .grid-9 span {
    display: block;
    width: 100%;
    height: 100%;

    background: var(--hamburger-icon-color);
    border-radius: 4px;
    opacity: 1;

    transition: transform 200ms ease, opacity 200ms ease;
}




/* nascondi croce centrale */
.hamburger[data-variant="chocolate"].is-active .grid-9 span:nth-child(2),
.hamburger[data-variant="chocolate"].is-active .grid-9 span:nth-child(4),
.hamburger[data-variant="chocolate"].is-active .grid-9 span:nth-child(6),
.hamburger[data-variant="chocolate"].is-active .grid-9 span:nth-child(8) {
    opacity: 0;
}


/* diagonale principale */
.hamburger[data-variant="chocolate"].is-active .grid-9 span:nth-child(1),
.hamburger[data-variant="chocolate"].is-active .grid-9 span:nth-child(5),
.hamburger[data-variant="chocolate"].is-active .grid-9 span:nth-child(9) {
    transform: rotate(45deg) scale(1.2);
}


/* diagonale opposta */
.hamburger[data-variant="chocolate"].is-active .grid-9 span:nth-child(3),
.hamburger[data-variant="chocolate"].is-active .grid-9 span:nth-child(7) {
    transform: rotate(-45deg) scale(1.2);
}
/* =====================================================
   MINIMAL VARIANT (SMOOTH & CLEAN)
===================================================== */

.hamburger[data-variant="minimal"] {

    --minimal-gap: calc(var(--line-gap) * 0.8);
    --minimal-scale: 0.7;

    /* quanto spostare a sinistra la linea corta */
    --minimal-offset: 15%;
}



.hamburger[data-variant="minimal"] .inner {
    width: var(--line-width);
    height: calc(var(--minimal-gap) + var(--line-thickness));
}




/* linea sopra (centrata) */
.hamburger[data-variant="minimal"] .line:nth-child(1) {
    top: 0;
    width: var(--line-width);

    left: 50%;
    transform: translateX(-50%);
}


/* linea sotto (più corta + shift a sinistra via transform) */
.hamburger[data-variant="minimal"] .line:nth-child(2) {
    top: var(--minimal-gap);

    width: calc(var(--line-width) * var(--minimal-scale));

    left: 50%;
    transform: translateX(-50%) translateX(calc(var(--minimal-offset) * -1));
}


/* nascondiamo eventuale terza linea */
.hamburger[data-variant="minimal"] .line:nth-child(3) {
    opacity: 0;
}




/* entrambe tornano centrate */
.hamburger[data-variant="minimal"].is-active .line:nth-child(1),
.hamburger[data-variant="minimal"].is-active .line:nth-child(2) {
    top: calc(var(--minimal-gap) / 2);
    width: var(--line-width);

    left: 50%;
    transform: translateX(-50%);
}


/* rotazioni */
.hamburger[data-variant="minimal"].is-active .line:nth-child(1) {
    transform: translateX(-50%) rotate(45deg);
}

.hamburger[data-variant="minimal"].is-active .line:nth-child(2) {
    transform: translateX(-50%) rotate(-45deg);
}

/* =====================================================
   ACCESSIBILITY
===================================================== */

.hamburger:focus-visible {
    outline: 2px solid #ffb347;
    outline-offset: 4px;
    border-radius: 6px;
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {
    .hamburger,
    .hamburger * {
        transition: none !important;
    }
}


/* =====================================================
   FIX PER CUSTOMIZER
===================================================== */


    .customize-control .hamburger:not(.hsp-hb-mini) {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        min-height: 36px;
    }

    .customize-control .hamburger:not(.hsp-hb-mini) .inner {
        width: 100%;
        position: relative;
    }

.customize-control .hamburger:not(.hsp-hb-mini) .grid-9 {
    width:70%;
    margin:auto;
}

    /* forza visibilità linee */
    .customize-control .hamburger:not(.hsp-hb-mini) .line,
    .customize-control .hamburger:not(.hsp-hb-mini) .dot,
    .customize-control .hamburger:not(.hsp-hb-mini) .grid-9 span {
        background: #333 !important;
    }



.customize-control .hamburger[data-variant="fries"] .line:nth-child(2) {
right: 5px;
}