.elementor-6706 .elementor-element.elementor-element-9f38152{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:0px 0px 0px 0px;}.elementor-6706 .elementor-element.elementor-element-4042e5e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 1px 1px 1px;--border-top-width:0px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E8E4DE;--border-color:#E8E4DE;--border-radius:0px 0px 0px 0px;}.elementor-6706 .elementor-element.elementor-element-b32c0ec{--display:flex;--min-height:43px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6706 .elementor-element.elementor-element-b32c0ec.e-con{--align-self:flex-start;}.elementor-6706 .elementor-element.elementor-element-db46a7d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;border-style:none;--border-style:none;--border-radius:0px 0px 0px 0px;}.elementor-6706 .elementor-element.elementor-element-2fb5db8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6706 .elementor-element.elementor-element-c4861a4{--display:flex;--min-height:20px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6706 .elementor-element.elementor-element-fd8413b{width:100%;max-width:100%;}.elementor-6706 .elementor-element.elementor-element-49278cd{--display:flex;--min-height:20px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6706 .elementor-element.elementor-element-da81ae4{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:0px 0px 0px 0px;}.elementor-6706 .elementor-element.elementor-element-7d52120{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-6706 .elementor-element.elementor-element-ac91a66{width:100%;max-width:100%;}.elementor-6706 .elementor-element.elementor-element-873df86{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6706 .elementor-element.elementor-element-b9429ba{--display:flex;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-6706 .elementor-element.elementor-element-4042e5e{border-width:0px 1px 0px 1px;--border-top-width:0px;--border-right-width:1px;--border-bottom-width:0px;--border-left-width:1px;}.elementor-6706 .elementor-element.elementor-element-b32c0ec{--padding-top:10px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-6706 .elementor-element.elementor-element-4042e5e{--width:100%;}.elementor-6706 .elementor-element.elementor-element-b32c0ec{--width:100%;}.elementor-6706 .elementor-element.elementor-element-db46a7d{--width:100%;}.elementor-6706 .elementor-element.elementor-element-c4861a4{--width:100%;}.elementor-6706 .elementor-element.elementor-element-49278cd{--width:100%;}.elementor-6706 .elementor-element.elementor-element-7d52120{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-db46a7d *//* =========================================================
   CANVAS AREA
   ========================================================= */

.elementor-6706 .elementor-element.elementor-element-db46a7d.canvas-area {

    position: relative;

    flex: 1 1 auto;

    width: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: transparent !important;

    container-type: size;
}


/* =========================================================
   OUTFIT CANVAS
   REFERENCE: 575 × 745
   ========================================================= */

.elementor-6706 .elementor-element.elementor-element-db46a7d.canvas-area > .outfit-canvas {

    --canvas-safe-space: 40px;

    --canvas-width:
        min(
            575px,

            calc(
                100cqw - var(--canvas-safe-space)
            ),

            calc(
                100cqh * 575 / 745
            )
        );

    width: var(--canvas-width);

    height:
        calc(
            var(--canvas-width)
            * 745
            / 575
        );

    aspect-ratio: 575 / 745;

    max-width: none;
    max-height: none;

    min-width: 0;
    min-height: 0;

    flex: 0 0 auto;

    align-self: center;

    background: transparent !important;

    border:
        1px solid
        rgba(120, 120, 120, 0.55);

    box-sizing: border-box;

    margin: 0;
    padding: 0;

    position: relative;

    overflow: hidden;
}


/* =========================================================
   CANVAS STAGE
   15PX LEFT / RIGHT ONLY
   ========================================================= */

.elementor-6706 .elementor-element.elementor-element-db46a7d.canvas-area > .outfit-canvas > .canvas-stage {

    position: absolute;

    top: 0;
    bottom: 0;

    /*
     * 15px / 575px = 2.60869565%
     */

    left: 2.60869565%;
    right: 2.60869565%;

    width: auto;
    height: 100%;

    background: transparent !important;

    border:
        1px solid
        rgba(180, 180, 180, 0.65);

    box-sizing: border-box;

    overflow: hidden;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49278cd *//* =========================================================
   LULLA — STATE 3 / LEFT
   LIQUID GLASS MARKERS
   SMOOTH GALLERY / RETURN ANIMATION
========================================================= */


/* =========================================================
   ELEMENTOR CONTAINER
========================================================= */

.elementor-6706 .elementor-element.elementor-element-49278cd{
    position:static !important;
    height:0 !important;
    min-height:0 !important;
    flex:0 0 auto !important;
    overflow:visible !important;
    transform:none !important;
    animation:none !important;
}

.elementor-6706 .elementor-element.elementor-element-49278cd > .elementor-widget-html{
    position:static !important;
    height:0 !important;
    min-height:0 !important;
    overflow:visible !important;
    transform:none !important;
    animation:none !important;
}

.elementor-6706 .elementor-element.elementor-element-49278cd .elementor-widget-container{
    position:static !important;
    height:0 !important;
    min-height:0 !important;
    overflow:visible !important;
    transform:none !important;
    animation:none !important;
}


/* =========================================================
   ROOT
========================================================= */

.lulla-item-info{
    --ink:#1D1D1B;
    --green:#6D8358;

    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    z-index:210 !important;
    pointer-events:none !important;
    background:transparent !important;
    overflow:hidden !important;
    visibility:hidden;
    opacity:0;
    transform:none !important;
    animation:none !important;

    transition:
        opacity .32s ease,
        visibility 0s linear .32s !important;
}

.lulla-item-info:not(.is-visible),
.lulla-item-info[aria-hidden="true"]{
    pointer-events:none !important;
}

.lulla-item-info:not(.is-visible) *,
.lulla-item-info[aria-hidden="true"] *{
    pointer-events:none;
}

.lulla-item-info.is-entering,
.lulla-item-info.is-visible{
    visibility:visible;
    pointer-events:none !important;
    opacity:1;

    transition:
        opacity .32s ease,
        visibility 0s !important;
}


/*
 * RETURN PHASE:
 * The stage stays fully visible while the pills shrink.
 * Only AFTER that does JS switch to .is-leaving.
 */

.lulla-item-info.is-returning{
    visibility:visible;
    pointer-events:none !important;
    opacity:1;

    transition:none !important;
}

.lulla-item-info.is-leaving{
    visibility:visible;
    pointer-events:none !important;
    opacity:0;

    transition:
        opacity .32s ease,
        visibility 0s linear .32s !important;
}


/* =========================================================
   STAGE / MARKER LAYER
========================================================= */

.lulla-item-stage{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
    pointer-events:none !important;
}

.lulla-s3-marker-layer{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
    pointer-events:none !important;
    z-index:80 !important;
}


/* =========================================================
   MARKER
========================================================= */

.lulla-s3-marker{
    position:absolute !important;
    left:0;
    top:0;
    width:auto !important;
    min-width:0 !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    margin:0 !important;
    padding:0 !important;

    display:block !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;

    box-shadow:none !important;
    background:transparent !important;
    color:#1D1D1B !important;

    cursor:pointer !important;
    pointer-events:auto !important;

    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important;
    -webkit-touch-callout:none !important;

    z-index:81 !important;
    overflow:visible !important;

    transform:none !important;
    transition:none !important;

    will-change:opacity !important;
}


/* =========================================================
   PILL
========================================================= */

.lulla-s3-marker-pill{
    position:absolute !important;
    top:0 !important;
    left:0;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;

    margin:0 !important;
    padding:0 6px 0 11px !important;

    box-sizing:border-box !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    gap:8px !important;

    border:1px solid transparent !important;
    border-radius:999px !important;

    background:
        linear-gradient(
            rgba(255,255,255,.76),
            rgba(255,255,255,.62)
        ) padding-box,

        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,255,255,.65),
            rgba(255,255,255,.94)
        ) border-box !important;

    backdrop-filter:
        blur(16px)
        saturate(145%) !important;

    -webkit-backdrop-filter:
        blur(16px)
        saturate(145%) !important;

    box-shadow:
        0 8px 22px rgba(29,29,27,.09),
        0 2px 6px rgba(29,29,27,.055),
        inset 0 1px 0 rgba(255,255,255,.74) !important;

    font-family:
        "Inter Tight",
        Arial,
        sans-serif !important;

    color:#1D1D1B !important;

    white-space:nowrap !important;

    transform:scale(1);
    transform-origin:center center !important;

    z-index:3 !important;

    will-change:
        transform,
        opacity !important;

    transition:
        box-shadow .20s ease !important;
}


/* =========================================================
   LABEL
========================================================= */

.lulla-s3-marker-label{
    display:block !important;
    width:auto !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    color:#1D1D1B !important;

    font-size:9px !important;
    font-weight:500 !important;
    line-height:1 !important;

    letter-spacing:.02em !important;
    text-transform:uppercase !important;

    white-space:nowrap !important;
    pointer-events:none !important;
}


/* =========================================================
   PLUS / CHECK
========================================================= */

.lulla-s3-marker-plus{
    width:18px !important;
    height:18px !important;

    min-width:18px !important;
    min-height:18px !important;

    max-width:18px !important;
    max-height:18px !important;

    flex:0 0 18px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

    background:
        rgba(29,29,27,.92) !important;

    color:#FFFFFF !important;

    font-size:11px !important;
    font-weight:400 !important;
    line-height:1 !important;

    pointer-events:none !important;
}


/* =========================================================
   CONNECTOR
========================================================= */

.lulla-s3-marker-connector{
    position:absolute !important;

    top:16px !important;

    height:1px !important;
    min-height:1px !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    background:
        rgba(255,255,255,.92) !important;

    box-shadow:
        0 0 5px rgba(255,255,255,.38) !important;

    pointer-events:none !important;

    transform:
        translateY(-50%) !important;

    z-index:1 !important;
}

.lulla-s3-marker-pill{
    position:absolute !important;
    z-index:4 !important;
}


/* =========================================================
   DOT
========================================================= */

.lulla-s3-marker-dot{
    position:absolute !important;

    width:7px !important;
    height:7px !important;

    min-width:7px !important;
    min-height:7px !important;

    max-width:7px !important;
    max-height:7px !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    border-radius:50% !important;

    background:
        rgba(255,255,255,.98) !important;

    box-shadow:
        0 2px 7px rgba(29,29,27,.15),
        0 0 8px rgba(255,255,255,.48) !important;

    pointer-events:none !important;

    transform:
        translate(-50%,-50%) !important;

    z-index:2 !important;

    position:absolute !important;
    isolation:isolate !important;
}

.lulla-s3-marker-dot::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:19px !important;
    height:19px !important;
    transform:translate(-50%,-50%) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.28) !important;
    border:1px solid rgba(29,29,27,.08) !important;
    box-shadow:0 1px 7px rgba(29,29,27,.05), inset 0 0 0 1px rgba(255,255,255,.12) !important;
    pointer-events:none !important;
    z-index:-1 !important;
}

.lulla-s3-marker.is-confirmed .lulla-s3-marker-dot::before{
    background:rgba(168,190,139,.24) !important;
    border-color:rgba(109,131,88,.20) !important;
    box-shadow:0 1px 8px rgba(109,131,88,.11), inset 0 0 0 1px rgba(255,255,255,.10) !important;
}


/* =========================================================
   SIDES
========================================================= */

.lulla-s3-marker.side-left{
    text-align:left;
}

.lulla-s3-marker.side-right{
    text-align:right;
}


/* =========================================================
   CONFIRMED
========================================================= */

.lulla-s3-marker-plus img{
    display:block !important;
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    min-height:8px !important;
    max-width:8px !important;
    max-height:8px !important;
    object-fit:contain !important;
    filter:brightness(0) invert(1) !important;
    pointer-events:none !important;
}

.lulla-s3-marker.is-confirmed .lulla-s3-marker-pill{
    padding:0 10px 0 12px !important;
    gap:7px !important;

    background:
        linear-gradient(
            rgba(255,255,255,.82),
            rgba(255,255,255,.70)
        ) padding-box,

        linear-gradient(
            135deg,
            #78905F,
            #92AA73,
            #688052
        ) border-box !important;

    box-shadow:
        0 9px 24px rgba(102,117,83,.15),
        0 3px 8px rgba(29,29,27,.055),
        inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.lulla-s3-marker.is-confirmed .lulla-s3-marker-label{
    font-weight:500 !important;
}

.lulla-s3-marker.is-confirmed .lulla-s3-marker-plus{
    background:#6D8358 !important;

    width:17px !important;
    height:17px !important;

    min-width:17px !important;
    min-height:17px !important;

    max-width:17px !important;
    max-height:17px !important;

    flex-basis:17px !important;
}

.lulla-s3-marker.is-confirmed .lulla-s3-marker-connector{
    background:#6D8358 !important;

    box-shadow:
        0 0 4px rgba(109,131,88,.20) !important;
}

.lulla-s3-marker.is-confirmed .lulla-s3-marker-dot{
    background:#6D8358 !important;

    box-shadow:
        0 2px 7px rgba(29,29,27,.12),
        0 0 7px rgba(109,131,88,.20) !important;
}


/* =========================================================
   HOVER
========================================================= */

.lulla-s3-marker:hover .lulla-s3-marker-pill{
    box-shadow:
        0 14px 34px rgba(29,29,27,.20),
        0 5px 12px rgba(29,29,27,.10),
        inset 0 1px 0 rgba(255,255,255,.76) !important;
}

.lulla-s3-marker.is-confirmed:hover .lulla-s3-marker-pill{
    background:
        linear-gradient(
            rgba(255,255,255,.82),
            rgba(255,255,255,.70)
        ) padding-box,

        linear-gradient(
            135deg,
            #78905F,
            #92AA73,
            #688052
        ) border-box !important;

    box-shadow:
        0 14px 34px rgba(102,117,83,.26),
        0 5px 12px rgba(29,29,27,.10),
        inset 0 1px 0 rgba(255,255,255,.82) !important;
}


/* =========================================================
   TOUCH / ACTIVE / FOCUS
========================================================= */

.lulla-s3-marker,
.lulla-s3-marker *{
    -webkit-tap-highlight-color:transparent !important;
}

.lulla-s3-marker:active{
    background:transparent !important;
}

.lulla-s3-marker:focus,
.lulla-s3-marker:focus-visible{
    outline:none !important;
    box-shadow:none !important;
}


/* =========================================================
   REMOVING
========================================================= */

.lulla-s3-marker.is-removing{
    pointer-events:none !important;
}

.lulla-s3-marker.is-removing .lulla-s3-marker-pill{
    pointer-events:none !important;
}


/* =========================================================
   GALLERY
========================================================= */

.lulla-item-gallery{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    z-index:100 !important;

    pointer-events:none !important;
}

.lulla-item-gallery-main{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;

    visibility:hidden;
    opacity:0;

    pointer-events:none !important;

    background:#EBE7DF !important;

    z-index:100 !important;

    /*
     * IMPORTANT:
     * No CSS opacity transition here.
     * JS controls the transition after the first image
     * has been loaded and decoded.
     */

    transition:none !important;
}

.lulla-item-info.is-gallery-open
.lulla-item-gallery-main.is-ready{

    visibility:visible;

    pointer-events:auto !important;
}


/* =========================================================
   VIEWPORT
========================================================= */

.lulla-item-gallery-viewport{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;
}

.lulla-item-gallery-main,
.lulla-item-gallery-viewport{
    touch-action:none !important;
    -webkit-user-select:none !important;
    user-select:none !important;
}

.lulla-item-gallery-close{
    position:absolute !important;
    top:14px !important;
    right:14px !important;
    width:30px !important;
    height:30px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    color:#1D1D1B !important;
    cursor:pointer !important;
    z-index:40 !important;
    -webkit-tap-highlight-color:transparent !important;
    touch-action:manipulation !important;
}

.lulla-item-gallery-close span,
.lulla-item-gallery-close span::after{
    position:absolute !important;
    display:block !important;
    width:16px !important;
    height:1px !important;
    background:#1D1D1B !important;
    content:"" !important;
    transform-origin:center !important;
}

.lulla-item-gallery-close span{
    transform:rotate(45deg) !important;
}

.lulla-item-gallery-close span::after{
    transform:rotate(90deg) !important;
}

.lulla-item-gallery-close:hover,
.lulla-item-gallery-close:focus,
.lulla-item-gallery-close:focus-visible,
.lulla-item-gallery-close:active{
    background:transparent !important;
    outline:none !important;
    box-shadow:none !important;
}



/* =========================================================
   TRACK
========================================================= */

.lulla-item-gallery-track{
    display:flex !important;

    width:100% !important;
    height:100% !important;

    transform:
        translate3d(0,0,0);

    transition:
        transform .50s cubic-bezier(.22,.61,.36,1);

    will-change:
        transform;
}


/* =========================================================
   SLIDE
========================================================= */

.lulla-item-gallery-slide{
    position:relative !important;

    flex:0 0 100% !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;
}


/* =========================================================
   IMAGE
========================================================= */

.lulla-item-gallery-slide img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    min-width:100% !important;
    min-height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:cover !important;
    object-position:center center !important;

    user-select:none !important;
    -webkit-user-drag:none !important;

    pointer-events:none !important;

    /*
     * Keeps browser from trying to synchronously decode
     * every image at layout time.
     */

    image-rendering:auto;
}


/* =========================================================
   NAV
========================================================= */

.lulla-item-gallery-nav{
    position:absolute !important;

    top:50% !important;

    width:38px !important;
    height:38px !important;

    min-width:38px !important;
    min-height:38px !important;

    max-width:38px !important;
    max-height:38px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    border:1px solid #1D1D1B !important;
    border-radius:50% !important;

    background:transparent !important;
    color:#1D1D1B !important;

    font-family:Arial,sans-serif !important;
    font-size:25px !important;
    font-weight:300 !important;
    line-height:1 !important;

    cursor:pointer !important;

    z-index:30 !important;

    opacity:0;
    pointer-events:none;

    transform:
        translateY(-50%) !important;

    transition:
        opacity .20s ease !important;
}

.lulla-item-gallery-nav[hidden]{
    display:none !important;
}

.lulla-item-info.is-gallery-open
.lulla-item-gallery-main.is-ready
.lulla-item-gallery-nav{
    opacity:1;
    pointer-events:auto !important;
}

.lulla-item-gallery-prev{
    left:16px !important;
}

.lulla-item-gallery-next{
    right:16px !important;
}

.lulla-item-gallery-nav span{
    display:flex !important;

    width:100% !important;
    height:100% !important;

    align-items:center !important;
    justify-content:center !important;

    line-height:1 !important;

    transform:
        translateY(-1px);

    pointer-events:none !important;
}


/* =========================================================
   DOTS
========================================================= */

.lulla-item-gallery-dots{
    position:absolute !important;

    left:50% !important;
    bottom:14px !important;

    transform:
        translateX(-50%) !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;

    z-index:30 !important;

    opacity:0;

    transition:
        opacity .20s ease !important;
}

.lulla-item-info.is-gallery-open
.lulla-item-gallery-main.is-ready
.lulla-item-gallery-dots{
    opacity:1;
}

.lulla-item-gallery-dot{
    width:6px !important;
    height:6px !important;

    min-width:6px !important;

    margin:0 !important;
    padding:0 !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    border:0 !important;
    border-radius:50% !important;

    background:#FCF7F1 !important;

    opacity:.5;

    cursor:pointer;

    pointer-events:auto !important;

    transition:
        opacity .20s ease,
        transform .20s ease !important;
}

.lulla-item-gallery-dot.is-active{
    opacity:1;

    transform:
        scale(1.2);
}


/* =========================================================
   SIZE GUIDE
========================================================= */

.lulla-size-guide-modal{
    position:fixed !important;
    inset:0 !important;

    z-index:999999 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    padding:20px !important;

    box-sizing:border-box !important;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility 0s linear .25s;
}

.lulla-size-guide-modal.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.lulla-size-guide-modal[hidden]{
    display:none !important;
}

.lulla-size-guide-backdrop{
    position:absolute;
    inset:0;

    background:
        rgba(29,29,27,.58);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}

.lulla-size-guide-box{
    position:relative;

    z-index:1;

    width:min(520px,92vw);
    max-height:88vh;

    padding:10px;

    box-sizing:border-box;

    background:#FFFFFF;

    border-radius:10px;

    opacity:0;

    transform:
        scale(.95);

    transition:
        opacity .30s ease,
        transform .35s cubic-bezier(.22,.61,.36,1);
}

.lulla-size-guide-modal.is-visible
.lulla-size-guide-box{
    opacity:1;

    transform:
        scale(1);
}

.lulla-size-guide-img{
    display:block;

    width:100%;
    max-height:80vh;

    object-fit:contain;
}

.lulla-size-guide-close{
    position:absolute;

    top:-12px;
    right:-12px;

    width:28px !important;
    height:28px !important;

    min-width:28px !important;
    min-height:28px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background:#1D1D1B !important;
    color:#FFFFFF !important;

    font-size:17px !important;

    cursor:pointer !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:850px){
    .lulla-item-gallery-close{
        top:10px !important;
        right:10px !important;
    }
}
@media(max-width:850px){

    .lulla-s3-marker-pill{
        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;

        padding:0 6px 0 11px !important;
        gap:7px !important;
    }

    .lulla-s3-marker-plus{
        width:19px !important;
        height:19px !important;

        min-width:19px !important;
        min-height:19px !important;

        max-width:19px !important;
        max-height:19px !important;

        flex-basis:19px !important;
    }

    .lulla-s3-marker.is-confirmed
    .lulla-s3-marker-pill{
        padding:0 9px 0 11px !important;
        gap:7px !important;
    }

    .lulla-s3-marker.is-confirmed
    .lulla-s3-marker-plus{
        width:18px !important;
        height:18px !important;

        min-width:18px !important;
        min-height:18px !important;

        max-width:18px !important;
        max-height:18px !important;

        flex-basis:18px !important;
    }

    .lulla-s3-marker-label{
        font-size:9px !important;
    }

    .lulla-item-gallery-nav{
        width:30px !important;
        height:30px !important;

        min-width:30px !important;
        min-height:30px !important;

        max-width:30px !important;
        max-height:30px !important;

        font-size:21px !important;
    }

    .lulla-item-gallery-prev{
        left:9px !important;
    }

    .lulla-item-gallery-next{
        right:9px !important;
    }

    .lulla-item-gallery-dots{
        bottom:9px !important;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media(max-width:420px){

    .lulla-s3-marker-pill{
        height:32px !important;
        min-height:32px !important;
        max-height:32px !important;

        padding:0 5px 0 10px !important;
        gap:6px !important;
    }

    .lulla-s3-marker-label{
        font-size:8.5px !important;
    }

    .lulla-s3-marker-plus{
        width:18px !important;
        height:18px !important;

        min-width:18px !important;
        min-height:18px !important;

        max-width:18px !important;
        max-height:18px !important;

        flex-basis:18px !important;
    }

    .lulla-s3-marker.is-confirmed
    .lulla-s3-marker-pill{
        padding:0 8px 0 10px !important;
        gap:6px !important;
    }

    .lulla-s3-marker.is-confirmed
    .lulla-s3-marker-plus{
        width:17px !important;
        height:17px !important;

        min-width:17px !important;
        min-height:17px !important;

        max-width:17px !important;
        max-height:17px !important;

        flex-basis:17px !important;
    }
}


/* =========================================================
   LANDSCAPE
========================================================= */

@media(orientation:landscape) and (max-height:500px){

    .lulla-s3-marker-pill{
        height:29px !important;
        min-height:29px !important;
        max-height:29px !important;

        padding:0 5px 0 9px !important;
        gap:5px !important;
    }

    .lulla-s3-marker-label{
        font-size:8px !important;
    }

    .lulla-s3-marker-plus{
        width:16px !important;
        height:16px !important;

        min-width:16px !important;
        min-height:16px !important;

        max-width:16px !important;
        max-height:16px !important;

        flex-basis:16px !important;
    }

    .lulla-s3-marker.is-confirmed
    .lulla-s3-marker-pill{
        padding:0 4px 0 7px !important;
        gap:3px !important;
    }

    .lulla-s3-marker.is-confirmed
    .lulla-s3-marker-plus{
        width:15px !important;
        height:15px !important;

        min-width:15px !important;
        min-height:15px !important;

        max-width:15px !important;
        max-height:15px !important;

        flex-basis:15px !important;
    }
}


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

@media(prefers-reduced-motion:reduce){

    .lulla-item-info,
    .lulla-item-gallery-main,
    .lulla-item-gallery-track,
    .lulla-item-gallery-nav,
    .lulla-item-gallery-dots,
    .lulla-item-gallery-close,
    .lulla-s3-marker,
    .lulla-s3-marker-pill,
    .lulla-s3-marker-connector,
    .lulla-s3-marker-dot,
    .lulla-size-guide-modal,
    .lulla-size-guide-box{
        transition:none !important;
        animation:none !important;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4042e5e *//* =========================================
   OUTFIT PANEL — INTERNAL LAYOUT
   ========================================= */

.elementor-6706 .elementor-element.elementor-element-4042e5e.outfit-panel {

    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    /* =====================================
       FULL LEFT PANEL BACKGROUND
       ===================================== */

    background-image:
        url("https://lullastudio.com/wp-content/uploads/2026/08/mixmatchbg.webp");

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;
}


/* =========================================
   HEADER
   ========================================= */

.elementor-6706 .elementor-element.elementor-element-4042e5e.outfit-panel > .outfit-header {

    flex: 0 0 auto;

    width: 100%;

    min-height: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    display: flex;
    flex-direction: row;

    align-items: flex-end;
    justify-content: center;

    gap: 0;

    background: transparent !important;
}


/* =========================================
   CANVAS AREA
   ========================================= */

.elementor-6706 .elementor-element.elementor-element-4042e5e.outfit-panel > .canvas-area {

    flex: 1 1 auto;

    width: 100%;

    min-height: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: transparent !important;
}


/* =========================================
   FOOTER
   ========================================= */

.elementor-6706 .elementor-element.elementor-element-4042e5e.outfit-panel > .outfit-footer {

    flex: 0 0 auto;

    width: 100%;

    min-height: 0;

    margin: 0;

    padding: 16px 20px;

    box-sizing: border-box;

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: space-between;

    gap: 0;

    background: transparent !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-873df86 */.elementor-6706 .elementor-element.elementor-element-873df86{
width:100%;
height:100%;

min-width:0;
min-height:0;

margin:0;
padding:0;

box-sizing:border-box;

position:relative;

overflow:hidden;

container-type:size;
}

.elementor-6706 .elementor-element.elementor-element-873df86 > .elementor-widget-html{
width:100%;
height:100%;

min-width:0;
min-height:0;

margin:0;
padding:0;

box-sizing:border-box;

overflow:hidden;
}

.elementor-6706 .elementor-element.elementor-element-873df86 > .elementor-widget-html > .elementor-widget-container{
width:100%;
height:100%;

min-width:0;
min-height:0;

margin:0;
padding:0;

box-sizing:border-box;

overflow:hidden;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9429ba *//* =========================================================
   LULLA — STATE 3 / SIZE BUILDER
   RIGHT SIDE — COMPLETE CSS
========================================================= */

/* =========================================================
   ELEMENTOR RESET
========================================================= */

.elementor-6706 .elementor-element.elementor-element-b9429ba {

    position: static !important;
    height: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}


.elementor-6706 .elementor-element.elementor-element-b9429ba > .elementor-widget-html {
    position: static !important;
    height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}


.elementor-6706 .elementor-element.elementor-element-b9429ba .elementor-widget-container {
    position: static !important;
    height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}


/* =========================================================
   SCREEN
========================================================= */

.lulla-size-screen {
    --ink: #1D1D1B;
    --cream: #FCF7F1;
    --confirm: #000000;
    --border: rgba(29,29,27,.14);
    --remove: #8A5147;
    --badge: #FCF7F1;
    --check: #6B7557;

    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    z-index: 200;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    background: var(--cream);
    font-family: "Inter Tight", Arial, sans-serif !important;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .34s ease, visibility 0s linear .34s !important;
}

.lulla-size-screen.is-entering,
.lulla-size-screen.is-visible {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity .34s ease, visibility 0s !important;
}

.lulla-size-screen.is-leaving {
    visibility: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity .28s ease, visibility 0s linear .28s !important;
}

.lulla-size-screen.is-empty-closing {
    visibility: visible !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.lulla-size-screen.is-empty-closing-active {
    opacity: 0 !important;
    transform: none !important;
    transition: opacity .36s cubic-bezier(.22,.61,.36,1) !important;
}


/* The title gets its own fade when the final card is removed. */

.lulla-size-screen.is-empty-closing .lulla-size-header {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: none !important;
}

.lulla-size-screen.is-empty-closing-active .lulla-size-header {
    opacity: 0 !important;
    transition: opacity .26s cubic-bezier(.22,.61,.36,1) !important;
}


/* =========================================================
   HEADER
========================================================= */

.lulla-size-header {
    --lulla-size-header-height: 60px;
    display: flex;
    flex: 0 0 var(--lulla-size-header-height);
    width: 100%;
    height: var(--lulla-size-header-height);
    min-height: var(--lulla-size-header-height);
    max-height: var(--lulla-size-header-height);
    box-sizing: border-box;
    padding: 0 20px;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    border-top: 1px solid rgba(29,29,27,.08);
    border-bottom: 1px solid rgba(29,29,27,.08);
    background: rgba(252,247,241,.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        opacity .24s ease,
        height .22s ease,
        min-height .22s ease,
        max-height .22s ease,
        padding .22s ease;
}

.lulla-size-header-text {
    display: block;
    margin: 0;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: left;
}


/* =========================================================
   BUILDER
========================================================= */

.lulla-size-builder {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   LIST
========================================================= */

.lulla-size-list {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px 10px 12px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.lulla-size-list::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   CARD
========================================================= */

.lulla-size-card {
    position: relative !important;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    opacity: 1;
    transform: none;
    transition: border-color .24s ease, box-shadow .28s ease, opacity .26s ease;
}

.lulla-size-card.is-active {
    border-color: rgba(29,29,27,.32);
    box-shadow: 0 7px 24px rgba(29,29,27,.055);
    z-index: 20;
}


/* =========================================================
   MAIN ROW
========================================================= */

.lulla-size-card-main-row {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 96px;
    min-height: 96px;
    padding: 10px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: height .36s cubic-bezier(.22,.61,.36,1), min-height .36s cubic-bezier(.22,.61,.36,1), padding .36s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   IMAGE
========================================================= */

.lulla-size-card-thumb {
    flex: 0 0 76px;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    object-fit: cover;
    display: block;
    border-radius: 10px !important;
    background: rgba(29,29,27,.035);
    transition: width .36s cubic-bezier(.22,.61,.36,1), height .36s cubic-bezier(.22,.61,.36,1), flex-basis .36s cubic-bezier(.22,.61,.36,1), border-radius .36s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   INFO
========================================================= */

.lulla-size-card-info {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
}


/* =========================================================
   TITLE
========================================================= */

.lulla-size-card-title {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 12px;
    line-height: 1.18;
    font-weight: 400 !important;
    color: var(--ink);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lulla-size-card-title strong,
.lulla-size-card-title b {
    font-weight: 500;
}

.lulla-size-card-title em,
.lulla-size-card-title i {
    font-style: italic;
}


/* =========================================================
   PRICE
========================================================= */

.lulla-size-card-price {
    margin-top: 3px;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
    color: rgba(29,29,27,.62);
}


/* =========================================================
   REMOVE
========================================================= */

.lulla-size-card-remove {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: max-content !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--remove) !important;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 500;
    letter-spacing: .045em;
    text-align: left !important;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: opacity .18s ease, max-height .18s ease;
}

.lulla-size-card.is-active .lulla-size-card-remove {
    opacity: 1;
    pointer-events: auto;
    max-height: 14px;
}

.lulla-size-card-remove:hover,
.lulla-size-card-remove:focus,
.lulla-size-card-remove:active {
    background: transparent !important;
    color: var(--remove) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.lulla-size-card-remove svg {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    margin: 0 1px 0 0;
    transform: translateY(-1px);
}


/* =========================================================
   STATUS
========================================================= */

.lulla-size-card-status {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 24px;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px !important;
    position: relative !important;
    opacity: 1;
    pointer-events: auto;
    transform: none !important;
    white-space: nowrap;
    z-index: 1;
    transition: opacity .18s ease;
}

.lulla-size-card.is-active .lulla-size-card-status {
    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   CONFIRMED PILL
========================================================= */

.lulla-size-card-status-pill {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 24px;
    padding: 0 6px 0 10px;
    box-sizing: border-box;
    border-radius: 14px;
    background: var(--badge);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.lulla-size-card-status.is-confirmed .lulla-size-card-status-pill {
    opacity: 1;
    pointer-events: auto;
}

.lulla-size-card-status-size {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 10px;
    line-height: 1 !important;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none !important;
    white-space: nowrap;
    transform: none !important;
}

.lulla-size-card-status-check {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;

    margin: 0 !important;
    padding: 0 !important;

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

    box-sizing: border-box;

    border-radius: 50%;
    background: var(--check);

    transform: none !important;
    position: relative;
    overflow: hidden;
}

.lulla-size-card-status-check img {
    display: block;
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    object-fit: contain;
    pointer-events: none;
}


/* =========================================================
   TOGGLE
========================================================= */

.lulla-size-card-toggle{
    position:relative !important;

    flex:
        0 0 30px !important;

    width:30px !important;
    height:30px !important;

    min-width:30px !important;
    min-height:30px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;

    background:transparent !important;
    color:var(--ink) !important;

    cursor:pointer;
    overflow:hidden !important;

    border-radius:999px !important;

    z-index:2;

    -webkit-tap-highlight-color:transparent !important;
    -webkit-touch-callout:none !important;
    -webkit-user-select:none !important;
    user-select:none !important;
    touch-action:manipulation !important;
    -webkit-focus-ring-color:transparent !important;

    transition:
        width .34s cubic-bezier(.22,.61,.36,1),
        min-width .34s cubic-bezier(.22,.61,.36,1),
        flex-basis .34s cubic-bezier(.22,.61,.36,1);
}

.lulla-size-card-toggle:hover,
.lulla-size-card-toggle:focus,
.lulla-size-card-toggle:focus-visible,
.lulla-size-card-toggle:active{
    background:transparent !important;
    color:var(--ink) !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    transform:none !important;
}

.lulla-size-card-toggle::-moz-focus-inner{
    border:0 !important;
    padding:0 !important;
}


/* =========================================================
   MORPH SURFACE
========================================================= */

.lulla-size-card-toggle::before{
    content:"";

    position:absolute;
    inset:0;

    border-radius:999px;

    background:var(--badge);

    opacity:0;
    transform:scale(.2);

    transform-origin:center;

    transition:
        transform .34s cubic-bezier(.22,.61,.36,1),
        opacity .20s ease;
}


/* =========================================================
   ADD SIZE LABEL
========================================================= */

.lulla-toggle-label{
    position:absolute;

    top:0;
    left:10px;
    right:25px;
    height:100%;

    display:flex;
    align-items:center;

    transform:translate(4px,0);

    font-family:
        "Inter Tight",
        Arial,
        sans-serif !important;

    font-size:8.5px;
    line-height:1;
    font-weight:600;

    letter-spacing:.055em;

    text-transform:uppercase;

    color:var(--ink);

    opacity:0;
    pointer-events:none;

    white-space:nowrap;

    z-index:3;

    transition:
        opacity .16s ease,
        transform .24s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   ICON LAYERS
========================================================= */

.lulla-toggle-icon{
    position:absolute;

    top:50%;
    left:50%;

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

    z-index:4;

    pointer-events:none;

    opacity:0;

    transform:
        translate(-50%,-50%)
        scale(.72);

    transition:
        opacity .14s ease,
        transform .22s cubic-bezier(.22,.61,.36,1);
}

.lulla-toggle-icon svg{
    display:block;

    width:15px !important;
    height:15px !important;

    min-width:15px !important;
    min-height:15px !important;

    margin:0 !important;
}


/* =========================================================
   ADD SIZE
   Width follows the label naturally.
   English keeps the original compact width; longer
   translations such as Latvian can expand without clipping.
========================================================= */

.lulla-size-card-toggle.is-add{
    flex:0 1 auto !important;
    width:max-content !important;
    min-width:78px !important;
    max-width:140px !important;

    height:26px !important;
    min-height:26px !important;

    padding:0 28px 0 10px !important;
    box-sizing:border-box !important;

    border-radius:13px !important;
}

.lulla-size-card-toggle.is-add::before{
    opacity:1;
    transform:scale(1);
}

.lulla-size-card-toggle.is-add
.lulla-toggle-label-add{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    height:100%;
    width:auto;
    max-width:none;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    transform:none;
    opacity:1;
    pointer-events:none;
    white-space:nowrap;
    z-index:3;
}

.lulla-size-card-toggle.is-add
.lulla-toggle-icon-add{
    opacity:1;
    left:auto;
    right:7px;
    transform:translate(0,-50%) scale(1);
}


/* ONLY THE PLUS — 12PX */

.lulla-toggle-icon-add svg{
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
    min-height:12px !important;
}

.lulla-size-card-toggle.is-add
.lulla-toggle-icon-expand,
.lulla-size-card-toggle.is-add
.lulla-toggle-icon-close{
    opacity:0;
}


/* =========================================================
   CONFIRMED CLOSED — DOWN CIRCLE
========================================================= */

.lulla-size-card-toggle.is-expand{
    flex:
        0 0 30px !important;

    width:30px !important;
    min-width:30px !important;

    height:30px !important;
    min-height:30px !important;

    border-radius:50% !important;
}

.lulla-size-card-toggle.is-expand::before{
    opacity:1;
    transform:scale(1);
    border-radius:50%;
}

.lulla-size-card-toggle.is-expand
.lulla-toggle-icon-expand{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    transition-delay:.10s;
}

.lulla-size-card-toggle.is-expand
.lulla-toggle-icon-add,
.lulla-size-card-toggle.is-expand
.lulla-toggle-icon-close{
    opacity:0;
    transform:translate(-50%,-50%) scale(.72);
    transition-delay:0s;
}


/* =========================================================
   OPEN — UP CIRCLE
========================================================= */

.lulla-size-card-toggle.is-close{
    flex:
        0 0 30px !important;

    width:30px !important;
    min-width:30px !important;

    height:30px !important;
    min-height:30px !important;

    border-radius:50% !important;

    background:transparent !important;
}

.lulla-size-card-toggle.is-close::before{
    opacity:0;
    transform:scale(.18);
}

.lulla-size-card-toggle.is-close
.lulla-toggle-icon-close{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    transition-delay:.10s;
}

.lulla-size-card-toggle.is-close
.lulla-toggle-icon-add,
.lulla-size-card-toggle.is-close
.lulla-toggle-icon-expand{
    opacity:0;
    transform:translate(-50%,-50%) scale(.72);
    transition-delay:0s;
}

.lulla-size-card-toggle.is-close
.lulla-toggle-label-add{
    opacity:0;
}

.lulla-size-card-toggle.is-close:hover,
.lulla-size-card-toggle.is-close:focus,
.lulla-size-card-toggle.is-close:active{
    background:transparent !important;
    border-radius:50% !important;
    box-shadow:none !important;
}


/* =========================================================
   CLEAN ADD SIZE MORPH
========================================================= */

.lulla-size-card-toggle.is-add
.lulla-toggle-icon-add,
.lulla-size-card-toggle.is-expand
.lulla-toggle-icon-expand,
.lulla-size-card-toggle.is-close
.lulla-toggle-icon-close{
    transition:
        opacity .14s ease .10s,
        transform .22s cubic-bezier(.22,.61,.36,1) .10s;
}

.lulla-size-card-toggle.is-add
.lulla-toggle-icon-expand,
.lulla-size-card-toggle.is-add
.lulla-toggle-icon-close,
.lulla-size-card-toggle.is-expand
.lulla-toggle-icon-add,
.lulla-size-card-toggle.is-expand
.lulla-toggle-icon-close,
.lulla-size-card-toggle.is-close
.lulla-toggle-icon-add,
.lulla-size-card-toggle.is-close
.lulla-toggle-icon-expand{
    transition:
        opacity .08s ease,
        transform .16s ease;
}


/* =========================================================
   BODY
========================================================= */

.lulla-size-card-body {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    opacity: 0;
    min-height: 0;
    overflow: hidden;
    transition: grid-template-rows .46s cubic-bezier(.32,.72,.30,1), opacity .26s ease;
}

.lulla-size-card.is-active .lulla-size-card-body {
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
}

.lulla-size-card-body-inner {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0 14px 14px;
    box-sizing: border-box;
    transition: padding .30s ease;
}

.lulla-size-card:not(.is-active) .lulla-size-card-body-inner {
    padding: 0 !important;
    min-height: 0 !important;
}


/* =========================================================
   TABS
========================================================= */

.lulla-size-card-tabs {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 22px !important;
    height: 30px !important;
    margin: 0 0 10px !important;
    padding: 0 0 0 2px !important;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    overflow: visible;
}

.lulla-size-card-tab {
    position: relative;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 0 5px !important;
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: center;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: rgba(29,29,27,.40) !important;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 450 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: color .18s ease;
}

.lulla-size-card-tab:hover,
.lulla-size-card-tab:focus,
.lulla-size-card-tab:focus-visible,
.lulla-size-card-tab:active {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.lulla-size-card-tab.is-active {
    color: var(--ink) !important;
    font-weight: 500 !important;
}

.lulla-size-card-tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1.5px;
    background: var(--ink);
    transition: width .22s cubic-bezier(.22,.61,.36,1);
}

.lulla-size-card-tab.is-active::after {
    width: 100%;
}


/* =========================================================
   PANELS
========================================================= */

.lulla-size-card-tab-panel {
    display: none;
    min-width: 0;
}

.lulla-size-card-tab-panel.is-active {
    display: block !important;
}


/* =========================================================
   SIZE OPTIONS
========================================================= */

.lulla-size-options {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 6px;
}

.lulla-size-option {
    width: 100%;
    min-width: 0;
    height: 35px;
    margin: 0;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px !important;
    appearance: none !important;
    -webkit-appearance: none !important;

    border: 1px solid var(--border) !important;
    border-radius: 4px !important;

    background: #fff !important;
    color: var(--ink) !important;

    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 400 !important;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation !important;

    transition:
        background-color .20s ease,
        border-color .20s ease,
        color .20s ease,
        opacity .20s ease;
}

.lulla-size-option:hover {
    background: #fff !important;
}

.lulla-size-option:focus,
.lulla-size-option:focus-visible,
.lulla-size-option:active {
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.lulla-size-option.is-selected {
    background: var(--check) !important;
    border-color: var(--check) !important;
    color: #fff !important;
    opacity: 1;
}


/* =========================================================
   ACTIONS
========================================================= */

.lulla-size-action-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 6px;
    margin-top: 8px;
}


/* =========================================================
   SIZE GUIDE BUTTON
========================================================= */

.lulla-size-card-size-guide {
    width: 100%;
    height: 34px;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    margin: 0;
    padding: 0 10px;

    appearance: none !important;
    -webkit-appearance: none !important;

    border: 1px solid rgba(29,29,27,.22) !important;
    border-radius: 4px !important;

    background: transparent !important;
    color: rgba(29,29,27,.68) !important;

    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 8px;
    font-weight: 400 !important;
    letter-spacing: .035em;
    text-transform: uppercase;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation !important;

    transition:
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.lulla-size-card-size-guide:hover {
    color: var(--ink) !important;
    border-color: rgba(29,29,27,.38) !important;
}

.lulla-size-card-size-guide:focus,
.lulla-size-card-size-guide:focus-visible,
.lulla-size-card-size-guide:active {
    background: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.lulla-size-guide-icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    display: block !important;
    flex: 0 0 12px !important;
    object-fit: contain;
    pointer-events: none !important;
}

.lulla-size-card-size-guide span {
    display: inline-block;
    line-height: 1;
    pointer-events: none;
}


/* =========================================================
   CONFIRM
========================================================= */

.lulla-size-confirm-button {
    position: relative;

    width: 100%;
    height: 34px;

    box-sizing: border-box;

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

    margin: 0;
    padding: 0 12px;

    appearance: none !important;
    -webkit-appearance: none !important;

    border: 0 !important;
    border-radius: 4px !important;

    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;

    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 8px;
    font-weight: 400 !important;
    letter-spacing: .035em;

    text-transform: uppercase;

    cursor: pointer;
    gap: 6px;

    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation !important;

    transition:
        opacity .20s ease;
}

.lulla-size-confirm-button:hover {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
}

.lulla-size-confirm-button:focus,
.lulla-size-confirm-button:focus-visible,
.lulla-size-confirm-button:active {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.lulla-size-confirm-button::after {
    content: "";
    width: 10px;
    height: 10px;
    margin: 0;
    background: url("https://lullastudio.com/wp-content/uploads/2026/09/action-check-checkmark-ok-icon-svgrepo-com.svg") center / contain no-repeat;
    opacity: .92;
    flex: 0 0 10px;
}

.lulla-size-confirm-button {
    opacity: .20;
    cursor: not-allowed;
}

.lulla-size-confirm-button.is-enabled,
.lulla-size-confirm-button:not(:disabled) {
    opacity: 1 !important;
    cursor: pointer !important;
}

.lulla-size-confirm-button:disabled {
    opacity: .20 !important;
    cursor: not-allowed !important;
}


/* =========================================================
   DESCRIPTION / CARE
========================================================= */

.lulla-size-card-text-viewport {
    width: 100%;
    max-width: 100%;
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.lulla-size-card-text-viewport::-webkit-scrollbar {
    display: none;
}

.lulla-size-card-text {
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 11px;
    line-height: 1.55;
    font-weight: 300;
    color: rgba(29,29,27,.74);
}


/* =========================================================
   FOOTER
========================================================= */

.lulla-size-footer {
    position: relative;
    flex: 0 0 auto;
    min-height: 61px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    box-sizing: border-box;
    border-top: 1px solid var(--border);
    background: var(--cream);
}

.lulla-size-footer-total {
    flex: 0 0 auto;
    min-width: 0;
}

.lulla-size-total-label {
    display: block;
    margin-bottom: 3px;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 7.5px;
    line-height: 1;
    letter-spacing: .055em;
    color: rgba(29,29,27,.40);
    text-transform: uppercase;
}

.lulla-size-total-price {
    display: block;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}

.lulla-size-cart-button {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 4px !important;
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 10.5px;
    font-weight: 400 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none !important;
}

.lulla-size-cart-button {
    background: #000 !important;
    background-color: #000 !important;
    opacity: .20 !important;
    cursor: not-allowed;
}


/* =========================================================
   ADD TO CART — ENABLED
========================================================= */

.lulla-size-cart-button.is-enabled,
.lulla-size-cart-button:not(:disabled) {
    opacity: 1 !important;
    cursor: pointer !important;
}

.lulla-size-cart-button:disabled {
    opacity: .20 !important;
    cursor: not-allowed !important;
}

.lulla-size-cart-button:hover,
.lulla-size-cart-button:focus,
.lulla-size-cart-button:focus-visible,
.lulla-size-cart-button:active {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   SUCCESS SCREEN
========================================================= */

.lulla-size-success-screen {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: var(--cream);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .42s cubic-bezier(.22,.61,.36,1), visibility 0s linear .35s;
}

.lulla-size-screen.is-success .lulla-size-success-screen {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.lulla-size-success-content {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lulla-size-success-check-wrap {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.lulla-size-success-check {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 20px;
    opacity: 0;
    transform: scale(.75);
}

.lulla-size-success-check img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    pointer-events: none;
}

.lulla-size-screen.is-success .lulla-size-success-check {
    animation: lullaSuccessCheck .45s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes lullaSuccessCheck {
    0% {
        opacity: 0;
        transform: scale(.75);
    }

    65% {
        opacity: 1;
        transform: scale(1.06);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.lulla-size-success-title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-style: italic;
    font-size: 23px;
    font-weight: 500;
    color: var(--ink);
    opacity: 0;
    transform: translateY(5px);
}

.lulla-size-screen.is-success .lulla-size-success-title {
    animation: lullaSuccessText .35s ease .16s forwards;
}

.lulla-size-success-text {
    margin-top: 8px;
    max-width: 260px;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 10px;
    line-height: 1.5;
    color: rgba(29,29,27,.55);
    opacity: 0;
    transform: translateY(5px);
}

.lulla-size-screen.is-success .lulla-size-success-text {
    animation: lullaSuccessText .35s ease .22s forwards;
}

.lulla-size-success-actions {
    width: min(100%, 280px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(5px);
}

.lulla-size-screen.is-success .lulla-size-success-actions {
    animation: lullaSuccessText .35s ease .29s forwards;
}

@keyframes lullaSuccessText {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lulla-size-another-button,
.lulla-size-home-button {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 12px;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 4px !important;
    font-family: "Inter Tight", Arial, sans-serif !important;
    font-size: 8px;
    font-weight: 400 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.lulla-size-another-button {
    border: 1px solid var(--ink) !important;
    background: var(--ink) !important;
    color: var(--cream) !important;
}

.lulla-size-home-button {
    border: 1px solid rgba(29,29,27,.22) !important;
    background: transparent !important;
    color: var(--ink) !important;
}


/* =========================================================
   MOBILE MEDIA QUERY
========================================================= */

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {

    .lulla-size-header {
        --lulla-size-header-height: 34px;
        flex: 0 0 var(--lulla-size-header-height);
        width: 100%;
        height: var(--lulla-size-header-height);
        min-height: var(--lulla-size-header-height);
        max-height: var(--lulla-size-header-height);
        padding: 0 20px;
        align-items: center;
        border-top: 1px solid rgba(29,29,27,.08);
        border-bottom: 1px solid rgba(29,29,27,.08);
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity .28s cubic-bezier(.22,.61,.36,1),
            transform .36s cubic-bezier(.22,.61,.36,1),
            height .22s ease,
            min-height .22s ease,
            max-height .22s ease,
            padding .22s ease,
            visibility 0s linear 0s !important;
    }

    .lulla-size-header-text {
        font-family: "Inter Tight", Arial, sans-serif !important;
        font-style: normal !important;
        font-weight: 400 !important;
        font-size: 11px;
        line-height: 1;
        letter-spacing: .03em;
        text-transform: uppercase;
        text-align: left;
    }

    .lulla-size-screen.is-card-open .lulla-size-header {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition:
            opacity .22s ease,
            transform .34s cubic-bezier(.4,0,.2,1),
            visibility 0s linear .34s !important;
    }


    .lulla-size-success-check {
        width: 44px;
        height: 44px;
    }

    .lulla-size-success-check img {
        width: 27px;
        height: 27px;
    }

    .lulla-size-success-actions {
        width: min(100%, 260px);
        margin-top: 18px;
    }

    .lulla-size-another-button,
    .lulla-size-home-button {
        height: 36px;
        font-size: 7.5px;
    }

    .lulla-size-builder {
        min-height: 0;
        flex: 1 1 auto;
    }

    .lulla-size-list {
        position: absolute;
        inset: 0;
        padding: 0 !important;
        gap: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .lulla-size-list::-webkit-scrollbar {
        display: none;
    }

    .lulla-size-screen.is-list-revealing .lulla-size-card:not(.is-active):not(.is-closing) {
        opacity: 0;
    }

    .lulla-size-card {
        width: 100%;
        height: 64px;
        min-height: 64px;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(29,29,27,.08) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff;
        overflow: hidden;
        transform: none !important;
        transition: height .42s cubic-bezier(.22,.61,.36,1), min-height .42s cubic-bezier(.22,.61,.36,1), opacity .26s ease;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-main-row {
        width: 100%;
        height: 64px;
        min-height: 64px;
        padding: 7px 9px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-thumb {
        flex: 0 0 40px;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 6px !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-info {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 40px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-title {
        width: 100%;
        font-size: 12px;
        line-height: 1.12;
        font-weight: 400 !important;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-price {
        display: block !important;
        margin-top: 3px;
        font-size: 9.5px;
        line-height: 1;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-remove {
        display: none !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 22px;
        margin: 0 0 0 auto !important;
        position: relative !important;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px !important;
        opacity: 1;
        transform: none !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status-pill {
        height: 22px;
        padding: 0 5px 0 8px;
        gap: 5px;
        border-radius: 12px;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status-size {
        font-size: 9.5px;
        line-height: 1 !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status-check {
        width: 13px;
        height: 13px;
        min-width: 13px;
        min-height: 13px;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status-check img {
        width: 8px;
        height: 8px;
        min-width: 8px;
        min-height: 8px;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-toggle {
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-toggle.is-add {
        flex:0 1 auto !important;
        width:max-content !important;
        min-width:78px !important;
        max-width:140px !important;
        height:22px !important;
        min-height:22px !important;
        padding:0 25px 0 9px !important;
        font-size:8px !important;
        border-radius:11px !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing)
    .lulla-size-card-toggle.is-expand {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        flex: 0 0 30px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .lulla-size-screen.is-mobile-card-open .lulla-size-card:not(.is-active):not(.is-closing) {
        display: none !important;
    }

    .lulla-size-screen.is-mobile-card-open .lulla-size-card.is-active {
        position: absolute !important;
        inset: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff;
        z-index: 100;
        overflow: hidden !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column;
    }

    .lulla-size-screen.is-mobile-card-open .lulla-size-card.is-closing {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;
        margin: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(29,29,27,.08) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff;
        z-index: 100;
        overflow: hidden !important;
        transform: none !important;
        display: block !important;
        opacity: 1;
    }

    .lulla-size-card.is-closing .lulla-size-card-main-row {
        width: 100%;
        height: 64px !important;
        min-height: 64px !important;
        padding: 7px 9px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .lulla-size-card.is-closing .lulla-size-card-thumb {
        flex: 0 0 40px;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 6px !important;
    }

    .lulla-size-card.is-closing .lulla-size-card-info {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 40px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .lulla-size-card.is-closing .lulla-size-card-title {
        width: 100%;
        font-size: 12px;
        line-height: 1.12;
        font-weight: 400 !important;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lulla-size-card.is-closing .lulla-size-card-price {
        display: block !important;
        margin-top: 3px;
        font-size: 9.5px;
        line-height: 1;
    }

    .lulla-size-card.is-closing .lulla-size-card-remove {
        display: none !important;
    }

    .lulla-size-card.is-closing .lulla-size-card-status {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 22px;
        margin: 0 0 0 auto !important;
        position: relative !important;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px !important;
        opacity: 1;
        transform: none !important;
    }

    .lulla-size-card.is-closing .lulla-size-card-toggle {
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    .lulla-size-card.is-active .lulla-size-card-main-row {
        flex: 0 0 74px;
        width: 100%;
        height: 74px;
        min-height: 74px;
        padding: 8px 9px;
        gap: 8px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .lulla-size-card.is-active .lulla-size-card-thumb {
        flex: 0 0 50px;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 6px !important;
    }

    .lulla-size-card.is-active .lulla-size-card-info {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 50px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .lulla-size-card.is-active .lulla-size-card-title {
        width: 100%;
        font-size: 12px;
        line-height: 1.15;
        font-weight: 400 !important;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lulla-size-card.is-active .lulla-size-card-price {
        display: block !important;
        margin-top: 3px;
        font-size: 9.5px;
        line-height: 1;
    }

    .lulla-size-card.is-active .lulla-size-card-remove {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
        opacity: 1;
        max-height: none;
        pointer-events: auto;
        font-size: 7px !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .lulla-size-card.is-active .lulla-size-card-status {
        display: flex;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        opacity: 0;
        pointer-events: none;
    }

    .lulla-size-card.is-active .lulla-size-card-toggle {
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
        background: transparent !important;
    }

    .lulla-size-card.is-active .lulla-size-card-toggle.is-close {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        background: transparent !important;
        border-radius: 50% !important;
    }

    .lulla-size-card.is-active .lulla-size-card-toggle svg,
    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-toggle.is-expand svg {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        min-height: 15px !important;
    }

    .lulla-size-card.is-active .lulla-size-card-body {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        opacity: 1;
        overflow: hidden;
    }

    .lulla-size-card.is-closing .lulla-size-card-body {
        display: grid;
        grid-template-rows: minmax(0, 0fr);
        opacity: 0;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden;
    }

    .lulla-size-card-body-inner {
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        padding: 0 9px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .lulla-size-card-tabs {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        display: flex;
        align-items: center !important;
        justify-content: flex-start;
        gap: 16px !important;
        height: 28px !important;
        margin: 0 0 10px !important;
        padding: 0;
        border-bottom: 1px solid var(--border);
        box-sizing: border-box;
        overflow: visible !important;
    }

    .lulla-size-card-tab {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 0 4px !important;
        display: inline-flex !important;
        align-items: flex-end !important;
        justify-content: flex-start;
        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 450 !important;
        letter-spacing: .03em !important;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .lulla-size-card-tab.is-active {
        font-weight: 500 !important;
    }

    .lulla-size-card.is-active .lulla-size-card-tab-panel.is-active {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .lulla-size-options {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(55px, 1fr));
        gap: 6px;
    }

    .lulla-size-option {
        width: 100%;
        height: 38px;
        min-width: 0;
        font-size: 9px;
    }

    .lulla-size-action-row {
        width: 100%;
        flex: 0 0 auto;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 6px;
        margin-top: 7px;
    }

    .lulla-size-card-size-guide,
    .lulla-size-confirm-button {
        height: 36px;
        font-size: 7.5px;
    }

    .lulla-size-confirm-button::after {
        width: 9px !important;
        height: 9px !important;
        flex-basis: 9px !important;
    }

    .lulla-size-confirm-button {
        opacity: .20 !important;
        cursor: not-allowed !important;
    }

    .lulla-size-confirm-button.is-enabled,
    .lulla-size-confirm-button:not(:disabled) {
        opacity: 1 !important;
        cursor: pointer !important;
    }

    .lulla-size-confirm-button:disabled {
        opacity: .20 !important;
        cursor: not-allowed !important;
    }

    .lulla-size-card.is-active
    .lulla-size-card-tab-panel.is-active
    .lulla-size-card-text-viewport {
        width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        box-sizing: border-box;
        padding: 0 0 12px;
    }

    .lulla-size-card.is-active
    .lulla-size-card-tab-panel.is-active
    .lulla-size-card-text-viewport::-webkit-scrollbar {
        display: none;
    }

    .lulla-size-card-text {
        width: 100%;
        min-width: 0;
        font-family: "Inter Tight", Arial, sans-serif !important;
        font-size: 11px;
        line-height: 1.55;
        font-weight: 300;
        color: rgba(29,29,27,.70);
    }

    .lulla-size-footer {
        display: none !important;
        width: 100%;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /*
     * HARD LOCK:
     * While a product card is open, the cart footer is never an
     * interactive hit target. This prevents the cart button from
     * receiving a touch through the active mobile card.
     */
    .lulla-size-screen.is-card-open .lulla-size-footer,
    .lulla-size-screen.is-mobile-card-open .lulla-size-footer,
    .lulla-size-screen.is-cart-locked .lulla-size-footer {
        pointer-events: none !important;
        visibility: hidden !important;
    }

    .lulla-size-screen.is-card-open .lulla-size-cart-button,
    .lulla-size-screen.is-mobile-card-open .lulla-size-cart-button,
    .lulla-size-screen.is-cart-locked .lulla-size-cart-button {
        pointer-events: none !important;
        touch-action: none !important;
    }

    .lulla-size-screen.is-mobile-footer-visible .lulla-size-footer {
        display: flex !important;
        width: 100%;
        height: 50px !important;
        min-height: 50px !important;
        flex: 0 0 50px;
        margin: 0 !important;
        padding: 6px 8px !important;
        box-sizing: border-box;
        border-top: 1px solid var(--border) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: var(--cream);
    }

    .lulla-size-screen.is-mobile-footer-visible .lulla-size-total-label {
        font-size: 6.5px;
    }

    .lulla-size-screen.is-mobile-footer-visible .lulla-size-total-price {
        font-size: 13px;
        font-weight: 600;
    }

    .lulla-size-screen.is-mobile-footer-visible .lulla-size-cart-button {
        display: flex !important;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 36px;
        padding: 0 8px;
        font-size: 9px;
        opacity: .20 !important;
        cursor: not-allowed !important;
    }

    .lulla-size-screen.is-mobile-footer-visible
    .lulla-size-cart-button.is-enabled,

    .lulla-size-screen.is-mobile-footer-visible
    .lulla-size-cart-button:not(:disabled) {

        opacity: 1 !important;
        cursor: pointer !important;
    }

    .lulla-size-screen.is-mobile-footer-visible
    .lulla-size-cart-button:disabled {
        opacity: .20 !important;
        cursor: not-allowed !important;
    }

    .lulla-size-screen.is-mobile-card-open .lulla-size-footer {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .lulla-size-option,
    .lulla-size-card-size-guide,
    .lulla-size-confirm-button {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        touch-action: manipulation !important;
    }

    .lulla-size-option:active,
    .lulla-size-card-size-guide:active,
    .lulla-size-confirm-button:active {
        outline: 0 !important;
        box-shadow: none !important;
    }

    .lulla-size-card-size-guide {
        justify-content: center;
        gap: 5px;
    }

    .lulla-size-guide-icon {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 601px) and (max-width: 1000px) {

    .lulla-size-header {
        --lulla-size-header-height: 60px;
        height: var(--lulla-size-header-height);
        min-height: var(--lulla-size-header-height);
        max-height: var(--lulla-size-header-height);
        padding: 0 20px;
    }

    .lulla-size-header-text {
        font-size: 12px;
    }

    .lulla-size-list {
        padding: 8px;
        gap: 7px;
    }

    .lulla-size-card {
        border-radius: 9px;
    }

    .lulla-size-card-main-row {
        height: 64px;
        min-height: 64px;
        padding: 6px 12px;
        gap: 10px;
    }

    .lulla-size-card-thumb {
        flex-basis: 48px;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    .lulla-size-card-title {
        font-size: 11px;
    }

    .lulla-size-card-price {
        font-size: 9.5px;
    }

    .lulla-size-card-tabs {
        gap: 18px !important;
        height: 28px !important;
        margin: 0 0 8px !important;
        align-items: center !important;
    }

    .lulla-size-card-tab {
        height: 100% !important;
        padding-bottom: 3px !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        font-weight: 450 !important;
    }

    .lulla-size-card-toggle {
        height: 26px !important;
        min-height: 26px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .lulla-size-header {
        padding: 10px 10px 6px;
    }

    .lulla-size-header-text {
        font-size: 18px;
    }

    .lulla-size-card,
    .lulla-size-card:not(.is-active):not(.is-closing) {
        height: 60px;
        min-height: 60px;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-main-row {
        height: 60px;
        min-height: 60px;
        padding: 6px 7px;
        gap: 6px;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-thumb {
        flex-basis: 36px;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-title {
        font-size: 11px;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-price {
        font-size: 9px;
        margin-top: 2px;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-right: 0 !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status-size {
        font-size: 9px;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-toggle {
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 7px !important;
        margin-left: 0 !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing)
    .lulla-size-card-toggle.is-expand {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        flex: 0 0 30px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .lulla-size-card.is-active .lulla-size-card-main-row,
    .lulla-size-card.is-closing .lulla-size-card-main-row {
        height: 72px;
        min-height: 72px;
        padding: 6px;
        gap: 6px;
    }

    .lulla-size-card.is-active .lulla-size-card-thumb,
    .lulla-size-card.is-closing .lulla-size-card-thumb {
        flex-basis: 46px;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }

    .lulla-size-card.is-active .lulla-size-card-title,
    .lulla-size-card.is-closing .lulla-size-card-title {
        font-size: 11px;
    }

    .lulla-size-card.is-active .lulla-size-card-price,
    .lulla-size-card.is-closing .lulla-size-card-price {
        font-size: 9px;
    }

    .lulla-size-card.is-active
    .lulla-size-card-tab-panel.is-active {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .lulla-size-card.is-active
    .lulla-size-card-tab-panel.is-active
    .lulla-size-card-text-viewport {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        scrollbar-width: none;
        padding: 0 0 10px;
        box-sizing: border-box;
    }

    .lulla-size-card.is-active
    .lulla-size-card-tab-panel.is-active
    .lulla-size-card-text-viewport::-webkit-scrollbar {
        display: none;
    }

    .lulla-size-card-tabs {
        gap: 12px !important;
        height: 26px !important;
        margin: 0 0 8px !important;
    }

    .lulla-size-card-tab {
        height: 100% !important;
        font-size: 9.5px !important;
        padding-bottom: 3px !important;
        line-height: 1.2 !important;
        font-weight: 450 !important;
    }

    .lulla-size-option {
        height: 36px;
        font-size: 8.5px;
    }

    .lulla-size-card-text {
        font-size: 10.5px;
        line-height: 1.5;
    }
}


/* =========================================================
   FINAL CONTROL TUNING
========================================================= */

/* Confirmed size: green outline, white check */

.lulla-size-card-status-pill{
    width:auto !important;
    min-width:0 !important;
    height:26px !important;
    min-height:26px !important;
    padding:0 7px 0 9px !important;
    gap:6px !important;
    border-radius:13px !important;
    background:transparent !important;
    border:1px solid var(--check) !important;
    white-space:nowrap;
}

.lulla-size-card-status-check img{
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    min-height:8px !important;
    filter:brightness(0) invert(1) !important;
}


/* Beige circle for both down and up arrows */

.lulla-size-card-toggle.is-expand::before,
.lulla-size-card-toggle.is-close::before{
    opacity:1 !important;
    transform:scale(1) !important;
    background:var(--badge) !important;
    border-radius:50% !important;
}

.lulla-size-card-toggle.is-expand .lulla-toggle-icon-expand svg,
.lulla-size-card-toggle.is-close .lulla-toggle-icon-close svg{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
}


@media (max-width:600px),(orientation:landscape) and (max-height:500px){

    /* Add Size — same width, slightly taller */

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-toggle.is-add{
        flex:0 1 auto !important;
        width:max-content !important;
        min-width:78px !important;
        max-width:140px !important;
        height:28px !important;
        min-height:28px !important;
        padding:0 25px 0 9px !important;
        border-radius:14px !important;
    }

    /* Confirmed — a little narrower than Add Size */

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status-pill{
        width:auto !important;
        min-width:0 !important;
        height:28px !important;
        min-height:28px !important;
        padding:0 6px 0 8px !important;
        border-radius:14px !important;
        white-space:nowrap;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status-check{
        width:16px !important;
        height:16px !important;
        min-width:16px !important;
        min-height:16px !important;
        flex:0 0 16px !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status-check img{
        width:8px !important;
        height:8px !important;
        min-width:8px !important;
        min-height:8px !important;
    }

    /* Keep the arrow circles perfectly round while closing */

    .lulla-size-card.is-closing .lulla-size-card-toggle,
    .lulla-size-card.is-active .lulla-size-card-toggle.is-close,
    .lulla-size-card.is-closing .lulla-size-card-toggle.is-expand{
        width:30px !important;
        min-width:30px !important;
        height:30px !important;
        min-height:30px !important;
        flex:0 0 30px !important;
        padding:0 !important;
        border-radius:50% !important;
    }

    .lulla-size-card.is-closing .lulla-size-card-toggle::before,
    .lulla-size-card.is-active .lulla-size-card-toggle.is-close::before,
    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-toggle.is-expand::before{
        width:100% !important;
        height:100% !important;
        border-radius:50% !important;
        transform:scale(1) !important;
    }
}

@media (max-width:380px){

    .lulla-size-header {
        --lulla-size-header-height: 34px;
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        padding: 0 14px;
    }

    .lulla-size-header-text {
        font-size: 10px;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status-pill{
        width:auto !important;
        min-width:0 !important;
    }
}


/* =========================================================
   ITEM REMOVAL — CENTERED PHYSICAL SHRINK
========================================================= */

.lulla-size-card.is-removing-item {
    pointer-events:none !important;
    transform-origin:50% 50% !important;
    transform:translate3d(0,0,0) scale(.035) !important;
    opacity:0 !important;
    transition:transform .34s cubic-bezier(.34,1.28,.64,1), opacity .20s ease !important;
    will-change:transform,opacity;
}

.lulla-size-screen.is-phone-empty-closing {
    visibility:visible !important;
    pointer-events:none !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
}

.lulla-size-screen.is-phone-empty-closing {
    opacity:0 !important;
    transition:opacity .36s cubic-bezier(.22,.61,.36,1) !important;
}


/* =========================================================
   MOBILE / TAP FEEDBACK RESET
========================================================= */

.lulla-size-screen .lulla-size-cart-button,
.lulla-size-screen .lulla-size-another-button,
.lulla-size-screen .lulla-size-home-button {
    -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
    -webkit-touch-callout:none !important;
    -webkit-user-select:none !important;
    user-select:none !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    background-image:none !important;
    outline:none !important;
    box-shadow:none !important;
    text-decoration:none !important;
}

.lulla-size-screen .lulla-size-cart-button:focus,
.lulla-size-screen .lulla-size-cart-button:focus-visible,
.lulla-size-screen .lulla-size-cart-button:active,
.lulla-size-screen .lulla-size-another-button:focus,
.lulla-size-screen .lulla-size-another-button:focus-visible,
.lulla-size-screen .lulla-size-another-button:active,
.lulla-size-screen .lulla-size-home-button:focus,
.lulla-size-screen .lulla-size-home-button:focus-visible,
.lulla-size-screen .lulla-size-home-button:active {
    -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
    background-image:none !important;
    outline:none !important;
    box-shadow:none !important;
    transform:none !important;
}


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

@media (prefers-reduced-motion: reduce) {

    .lulla-size-screen,
    .lulla-size-card,
    .lulla-size-card-main-row,
    .lulla-size-card-body,
    .lulla-size-card-tab::after,
    .lulla-size-card-tab,
    .lulla-size-card.is-next-arriving,
    .lulla-size-option,
    .lulla-size-option::after,
    .lulla-size-confirm-button,
    .lulla-size-confirm-button::after {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
    }
}


/* =========================================================
   IPAD PORTRAIT — LIMIT CARD COLUMN
   Keep the desktop horizontal-card layout, but prevent the
   cards from becoming excessively wide on portrait tablets.
   Phones and landscape tablets remain unchanged.
========================================================= */

@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){

    :root{
        --lulla-ipad-content-width:720px;
    }

    .lulla-size-header{
        width:100%;
        box-sizing:border-box;
        padding-left:max(18px, calc((100% - var(--lulla-ipad-content-width)) / 2));
        padding-right:max(18px, calc((100% - var(--lulla-ipad-content-width)) / 2));
    }

    .lulla-size-list{
        width:100%;
        max-width:var(--lulla-ipad-content-width);
        left:50% !important;
        right:auto !important;
        transform:translateX(-50%);
        box-sizing:border-box;
    }

    .lulla-size-card{
        width:100%;
        max-width:100%;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .lulla-size-footer{
        width:100%;
        box-sizing:border-box;
        padding-left:max(14px, calc((100% - var(--lulla-ipad-content-width)) / 2));
        padding-right:max(14px, calc((100% - var(--lulla-ipad-content-width)) / 2));
    }

}


/* =========================================================
   SIZE GUIDE — GLOBAL OVERLAY / NO BLUR
========================================================= */

.lulla-size-guide-modal{
    position:fixed !important;
    inset:0 !important;

    z-index:999999 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:20px !important;
    box-sizing:border-box !important;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .30s ease,
        visibility 0s linear .30s !important;
}

.lulla-size-guide-modal.is-visible{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;

    transition:
        opacity .30s ease,
        visibility 0s linear 0s !important;
}

.lulla-size-guide-modal[hidden]{
    display:none !important;
}


/* ---------------------------------------------------------
   BACKDROP
   No blur. Only a soft light overlay.
--------------------------------------------------------- */

.lulla-size-guide-backdrop{
    position:absolute !important;
    inset:0 !important;

    background:rgba(29,29,27,.46) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    opacity:0;

    transition:
        opacity .30s ease !important;
}

.lulla-size-guide-modal.is-visible
.lulla-size-guide-backdrop{
    opacity:1 !important;
}


/* ---------------------------------------------------------
   IMAGE FRAME
--------------------------------------------------------- */

.lulla-size-guide-box{
    position:relative !important;
    z-index:1 !important;

    width:min(520px,92vw) !important;
    max-height:88vh !important;

    padding:10px !important;
    box-sizing:border-box !important;

    background:#FCF7F1 !important;

    border-radius:10px !important;

    opacity:0;

    transform:
        translateY(8px)
        scale(.97);

    transition:
        opacity .30s ease,
        transform .30s cubic-bezier(.22,.61,.36,1) !important;
}

.lulla-size-guide-modal.is-visible
.lulla-size-guide-box{
    opacity:1 !important;

    transform:
        translateY(0)
        scale(1);
}


/* ---------------------------------------------------------
   IMAGE
--------------------------------------------------------- */

.lulla-size-guide-img{
    display:block !important;

    width:100% !important;
    height:auto !important;

    max-height:80vh !important;

    object-fit:contain !important;
}


/* ---------------------------------------------------------
   CLOSE
--------------------------------------------------------- */

.lulla-size-guide-close{
    position:absolute !important;

    top:-12px !important;
    right:-12px !important;

    width:28px !important;
    height:28px !important;

    min-width:28px !important;
    min-height:28px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:50% !important;

    background:#1D1D1B !important;
    color:#fff !important;

    font-size:17px !important;
    line-height:1 !important;

    cursor:pointer;
}


@media(max-width:850px){

    .lulla-size-guide-modal{
        padding:12px !important;
    }

    .lulla-size-guide-box{
        width:min(88vw,360px) !important;
        max-height:82vh !important;
        padding:7px !important;
        border-radius:9px !important;
    }

    .lulla-size-guide-img{
        width:100% !important;
        max-height:74vh !important;
        object-fit:contain !important;
    }

    .lulla-size-guide-close{
        top:-9px !important;
        right:-9px !important;

        width:27px !important;
        height:27px !important;

        min-width:27px !important;
        min-height:27px !important;

        font-size:16px !important;
    }
}

/* =========================================================
   FINAL STATE 3 POLISH — BUTTON SCALE / MOBILE FLOW / ICONS
   ========================================================= */

/* Match the Gender Tabs UI scale without changing card tabs. */
.lulla-size-option,
.lulla-size-card-size-guide,
.lulla-size-confirm-button,
.lulla-size-cart-button,
.lulla-size-another-button,
.lulla-size-home-button{
    font-family:"Inter Tight", Arial, sans-serif !important;
    font-weight:400 !important;
}

.lulla-size-option{
    font-size:10.5px !important;
    height:35px !important;
    border-radius:4px !important;
}

.lulla-size-option.is-selected{
    background:var(--check) !important;
    border-color:var(--check) !important;
    color:#fff !important;
}

.lulla-size-card-size-guide{
    height:34px !important;
    font-size:10px !important;
    font-weight:400 !important;
    letter-spacing:.035em !important;
    border-radius:4px !important;
}

.lulla-size-confirm-button{
    height:34px !important;
    font-size:10px !important;
    font-weight:400 !important;
    letter-spacing:.04em !important;
    border-radius:4px !important;
}

.lulla-size-cart-button{
    font-size:10px !important;
    font-weight:400 !important;
    letter-spacing:.045em !important;
}

.lulla-size-another-button,
.lulla-size-home-button{
    height:42px !important;
    font-size:10px !important;
    font-weight:400 !important;
    letter-spacing:.045em !important;
    border-radius:4px !important;
}

/* Success screen: the bag is standalone; the green status circle
   elsewhere in State 3 continues to use CHECK_ICON_URL. */
.lulla-size-success-check{
    width:52px !important;
    height:52px !important;
    background:transparent !important;
    border-radius:0 !important;
}

.lulla-size-success-check img{
    width:30px !important;
    height:30px !important;
}

/* =========================================================
   HEADER — EXACT GENDER TABS HEIGHT MODEL
   ========================================================= */

.lulla-size-header{
    --lulla-size-header-height:60px;
    width:100% !important;
    height:var(--lulla-size-header-height) !important;
    min-height:var(--lulla-size-header-height) !important;
    max-height:var(--lulla-size-header-height) !important;
    flex:0 0 var(--lulla-size-header-height) !important;
    padding:0 20px !important;
    box-sizing:border-box !important;
}

.lulla-size-header-text{
    font-family:"Inter Tight",sans-serif !important;
    font-size:11px !important;
    font-weight:400 !important;
    line-height:1 !important;
    letter-spacing:.03em !important;
    text-transform:uppercase !important;
}

/* =========================================================
   MOBILE — HEADER 34PX + CARD OWNS THE FULL SCREEN
   ========================================================= */

@media (max-width:600px), (orientation:landscape) and (max-height:500px){

    .lulla-size-header{
        --lulla-size-header-height:34px;
        width:100% !important;
        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;
        flex:0 0 34px !important;
        padding:0 20px !important;
    }

    .lulla-size-header-text{
        font-size:10px !important;
        font-weight:400 !important;
    }

    .lulla-size-screen.is-card-open .lulla-size-builder,
    .lulla-size-screen.is-mobile-card-open .lulla-size-builder{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-height:0 !important;
        flex:none !important;
        z-index:50 !important;
    }

    .lulla-size-screen.is-card-open .lulla-size-list,
    .lulla-size-screen.is-mobile-card-open .lulla-size-list{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        padding:0 !important;
    }

    .lulla-size-screen.is-mobile-card-open .lulla-size-card.is-active{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-height:100% !important;
        margin:0 !important;
    }

    .lulla-size-screen.is-card-open .lulla-size-header{
        transform:translateY(-100%) !important;
        opacity:0 !important;
        pointer-events:none !important;
        visibility:hidden !important;
    }

    /* Returning from an open card: header slides/fades down from above,
       while the builder is already back in normal flow. */
    .lulla-size-header{
        transition:
            opacity .24s ease !important;
    }

    .lulla-size-option{
        font-size:9.5px !important;
        height:38px !important;
        border-radius:4px !important;
    }

    .lulla-size-card-size-guide,
    .lulla-size-confirm-button{
        height:36px !important;
        font-size:9.5px !important;
        border-radius:4px !important;
    }

    .lulla-size-another-button,
    .lulla-size-home-button{
        height:40px !important;
        font-size:9.5px !important;
        border-radius:4px !important;
    }
}

/* Keep the existing green confirmation circle/check icon untouched. */
.lulla-size-card-status-check{
    background:var(--check) !important;
}

.lulla-size-card-status-check img{
    content:url("https://lullastudio.com/wp-content/uploads/2026/09/action-check-checkmark-ok-icon-svgrepo-com.svg") !important;
}


/* =========================================================
   STATE 3 — FINAL MICRO POLISH V6
   ========================================================= */
.lulla-size-header-text{
    font-family:"Inter Tight",sans-serif !important;
    font-size:12px !important;
    font-weight:500 !important;
    letter-spacing:.03em !important;
    text-transform:uppercase !important;
}
.lulla-size-option,
.lulla-size-card-size-guide,
.lulla-size-confirm-button,
.lulla-size-cart-button,
.lulla-size-another-button,
.lulla-size-home-button{
    font-family:"Inter Tight",sans-serif !important;
    font-weight:500 !important;
}
.lulla-size-option{
    font-size:11px !important;
    height:35px !important;
    min-height:35px !important;
    border-radius:4px !important;
}
.lulla-size-option.is-selected{
    background:var(--check) !important;
    border-color:var(--check) !important;
    color:#fff !important;
}
.lulla-size-card-size-guide,
.lulla-size-confirm-button{
    font-size:11px !important;
    height:34px !important;
    min-height:34px !important;
    border-radius:4px !important;
}
.lulla-size-another-button,
.lulla-size-home-button{
    font-size:11px !important;
    height:40px !important;
    min-height:40px !important;
    border-radius:4px !important;
    letter-spacing:.04em !important;
}
.lulla-size-success-check{
    width:52px !important;
    height:52px !important;
    background:transparent !important;
    border-radius:0 !important;
    color:var(--ink) !important;
}
.lulla-size-success-bag-icon{
    display:block !important;
    width:31px !important;
    height:31px !important;
}
.lulla-size-screen .lulla-size-header{
    transform:none !important;
    transition:opacity .24s ease !important;
}
.lulla-size-screen.is-card-open .lulla-size-header{
    opacity:0 !important;
    transform:none !important;
    pointer-events:none !important;
}
@media (max-width:600px), (orientation:landscape) and (max-height:500px){
    .lulla-size-card.is-closing-settle{
        transition:none !important;
        z-index:60 !important;
    }
    .lulla-size-card.is-closing-settle .lulla-size-card-main-row{
        transition:none !important;
    }
    .lulla-size-screen.is-mobile-card-open .lulla-size-card.is-closing-settle{
        position:absolute !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        bottom:auto !important;
        width:100% !important;
        height:64px !important;
        min-height:64px !important;
        margin:0 !important;
        transform-origin:top left !important;
    }
    .lulla-size-screen:not(.is-mobile-card-open) .lulla-size-card.is-closing-settle{
        opacity:1 !important;
    }
    .lulla-size-success-content{
        width:100% !important;
        max-width:320px !important;
    }
    .lulla-size-success-actions{
        width:100%;
    }
    .lulla-size-another-button,
    .lulla-size-home-button{
        width:100%;
    }
    .lulla-size-option{
        font-size:10px !important;
        height:38px !important;
        min-height:38px !important;
    }
    .lulla-size-card-size-guide,
    .lulla-size-confirm-button{
        font-size:10px !important;
        height:36px !important;
        min-height:36px !important;
    }
    .lulla-size-another-button,
    .lulla-size-home-button{
        font-size:10px !important;
        height:40px !important;
        min-height:40px !important;
    }
    .lulla-size-success-content{
        align-items:flex-start !important;
        text-align:left !important;
    }
    .lulla-size-success-check-wrap{
        width:31px !important;
        height:31px !important;
        margin:0 0 16px !important;
        justify-content:flex-start !important;
    }
    .lulla-size-success-check{
        width:31px !important;
        height:31px !important;
        justify-content:flex-start !important;
    }
    .lulla-size-success-bag-icon{
        width:28px !important;
        height:28px !important;
    }
    .lulla-size-success-title{
        text-align:left !important;
        margin-bottom:8px !important;
    }
    .lulla-size-success-text{
        text-align:left !important;
        margin-bottom:22px !important;
    }
}


/* =========================================================
   STATE 3 — MOBILE CARD GEOMETRY MORPH / SAFE PATCH
   Animation-only. Existing product/gallery/cart logic untouched.
   ========================================================= */
@media (max-width:600px), (orientation:landscape) and (max-height:500px){

    /* Keep the header's physical 34px space. It fades, but does not
       move the list's coordinate system. */
    .lulla-size-screen .lulla-size-header{
        position:relative !important;
        z-index:1 !important;
        transform:none !important;
        visibility:visible !important;
        transition:opacity .24s ease !important;
    }

    .lulla-size-screen.is-card-open .lulla-size-header,
    .lulla-size-screen.is-mobile-card-closing .lulla-size-header{
        opacity:0 !important;
        transform:none !important;
        visibility:visible !important;
        pointer-events:none !important;
    }

    /* Critical: the builder/list must NOT jump to inset:0 when the
       card opens. That old rule is what moves every sibling upward. */
    .lulla-size-screen.is-card-open .lulla-size-builder,
    .lulla-size-screen.is-mobile-card-open .lulla-size-builder{
        position:relative !important;
        z-index:20 !important;
        inset:auto !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        flex:1 1 auto !important;
        z-index:auto !important;
    }

    .lulla-size-screen.is-card-open .lulla-size-list,
    .lulla-size-screen.is-mobile-card-open .lulla-size-list{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
    }

    /* Reserve the original slot while the real card leaves normal flow. */
    .lulla-size-card-placeholder{
        display:block !important;
        width:100% !important;
        min-width:100% !important;
        box-sizing:border-box !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        overflow:hidden !important;
    }

    /* Never hide the sibling cards. They stay exactly where the list
       layout put them; the open card simply sits above them. */
    .lulla-size-screen.is-mobile-card-open
    .lulla-size-card:not(.is-active):not(.is-closing),
    .lulla-size-screen.is-card-open
    .lulla-size-card:not(.is-active):not(.is-closing){
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:none !important;
    }

    /* The active/closing card is positioned by JS using real bounds.
       No scale transform is used. */
    .lulla-size-screen.is-mobile-card-open
    .lulla-size-card.is-morph-card{
        position:absolute !important;
        inset:auto !important;
        right:auto !important;
        bottom:auto !important;
        margin:0 !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        z-index:1000 !important;
        overflow:hidden !important;
        transform:none !important;
    }

    .lulla-size-screen.is-mobile-card-open
    .lulla-size-card.is-morph-card.is-closing{
        position:absolute !important;
        inset:auto !important;
        right:auto !important;
        bottom:auto !important;
        z-index:1000 !important;
    }

    /* The actual morph is geometry only. */
    .lulla-size-card.is-morph-card{
        will-change:top,left,width,height,min-height !important;
    }

    /* The internals can still make the same compact/fullscreen transition
       they already use; the outer card now moves at the same time. */
    .lulla-size-card.is-morph-card .lulla-size-card-main-row,
    .lulla-size-card.is-morph-card .lulla-size-card-thumb,
    .lulla-size-card.is-morph-card .lulla-size-card-body{
        will-change:height,width,grid-template-rows,opacity !important;
    }

    /* Completely disable the old reveal animation system for this motion. */
    .lulla-size-screen.is-list-revealing
    .lulla-size-card:not(.is-active):not(.is-closing){
        opacity:1 !important;
        visibility:visible !important;
        display:block !important;
    }
}

/* Desktop: Choose Your Sizes stays visible. No desktop animation logic touched. */
@media (min-width:601px){
    .lulla-size-screen.is-card-open .lulla-size-header,
    .lulla-size-screen.is-mobile-card-closing .lulla-size-header{
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        pointer-events:auto !important;
    }
}


/* =========================================================
   STATE 3 — FINAL SAFE MICRO FIXES V11
   Only stacking + original catalog bag asset.
========================================================= */
.lulla-size-success-bag-icon{
    display:block !important;
    object-fit:contain !important;
}

@media (max-width:600px), (orientation:landscape) and (max-height:500px){
    .lulla-size-screen .lulla-size-header{
        position:relative !important;
        z-index:1 !important;
    }

    .lulla-size-screen.is-card-open .lulla-size-builder,
    .lulla-size-screen.is-mobile-card-open .lulla-size-builder{
        position:relative !important;
        z-index:20 !important;
    }

    .lulla-size-screen.is-mobile-card-open .lulla-size-card.is-morph-card{
        z-index:1000 !important;
    }
}


/* =========================================================
   STATE 3 — MOBILE ANIMATION / STACKING PATCH V12
   Final overrides only. Product, gallery and cart logic untouched.
========================================================= */
@media (max-width:600px), (orientation:landscape) and (max-height:500px){

    .lulla-size-screen.is-card-open .lulla-size-builder,
    .lulla-size-screen.is-mobile-card-open .lulla-size-builder{
        position:relative !important;
        z-index:20 !important;
        overflow:visible !important;
    }

    .lulla-size-screen.is-card-open .lulla-size-list,
    .lulla-size-screen.is-mobile-card-open .lulla-size-list{
        overflow:visible !important;
    }

    .lulla-size-screen .lulla-size-header{
        position:relative !important;
        z-index:1 !important;
        background:rgba(252,247,241,.96) !important;
        backdrop-filter:blur(10px) !important;
        -webkit-backdrop-filter:blur(10px) !important;
        opacity:1 !important;
        transform:none !important;
        visibility:visible !important;
        transition:opacity .24s ease !important;
    }

    .lulla-size-screen.is-card-open:not(.is-mobile-card-closing) .lulla-size-header,
    .lulla-size-screen.is-mobile-card-open:not(.is-mobile-card-closing) .lulla-size-header{
        opacity:0 !important;
        background:transparent !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        border-top-color:transparent !important;
        border-bottom-color:transparent !important;
        pointer-events:none !important;
    }

    .lulla-size-screen.is-mobile-card-closing .lulla-size-header{
        opacity:1 !important;
        background:rgba(252,247,241,.96) !important;
        backdrop-filter:blur(10px) !important;
        -webkit-backdrop-filter:blur(10px) !important;
        pointer-events:none !important;
    }

    .lulla-size-screen.is-mobile-card-open .lulla-size-card.is-morph-card,
    .lulla-size-screen.is-mobile-card-open .lulla-size-card.is-morph-card.is-closing{
        z-index:1000 !important;
    }

    .lulla-size-screen.is-mobile-card-open .lulla-size-card-status,
    .lulla-size-screen:not(.is-mobile-card-open) .lulla-size-card-status{
        transition:opacity .20s ease !important;
    }

    /* Stable mobile footer geometry: it is always mounted and only moves
       vertically. This prevents width/height/line jumps during the morph. */
    .lulla-size-screen .lulla-size-footer{
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        width:100% !important;
        height:50px !important;
        min-height:50px !important;
        flex:0 0 50px !important;
        display:flex !important;
        box-sizing:border-box !important;
        margin:0 !important;
        padding:6px 8px !important;
        border-top:1px solid var(--border) !important;
        background:var(--cream) !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:none !important;
        transform:translateY(100%) !important;
        will-change:transform !important;
        transition:transform .34s cubic-bezier(.22,.80,.36,1) !important;
        z-index:500 !important;
    }

    .lulla-size-screen.is-mobile-footer-visible .lulla-size-footer{
        transform:translateY(0) !important;
        pointer-events:auto !important;
    }

    .lulla-size-screen.is-mobile-footer-visible.is-mobile-footer-entering .lulla-size-footer{
        transform:translateY(100%) !important;
        pointer-events:none !important;
    }

    .lulla-size-screen.is-mobile-footer-visible.is-mobile-footer-leaving .lulla-size-footer,
    .lulla-size-screen.is-mobile-card-open.is-mobile-footer-leaving .lulla-size-footer{
        transform:translateY(100%) !important;
        pointer-events:none !important;
    }

    .lulla-size-screen.is-mobile-card-closing.is-mobile-footer-visible .lulla-size-footer{
        transform:translateY(0) !important;
        pointer-events:none !important;
    }

    .lulla-size-screen.is-mobile-card-closing.is-mobile-footer-visible.is-mobile-footer-entering .lulla-size-footer{
        transform:translateY(100%) !important;
    }

    .lulla-size-screen .lulla-size-footer .lulla-size-cart-button,
    .lulla-size-screen .lulla-size-footer .lulla-size-total-label,
    .lulla-size-screen .lulla-size-footer .lulla-size-total-price{
        transition:none !important;
    }

    .lulla-size-screen .lulla-size-card-status{
        transition:opacity .24s cubic-bezier(.22,.61,.36,1) !important;
    }

    .lulla-size-screen.is-mobile-card-open .lulla-size-card-status{
        transition:opacity .22s ease !important;
    }

    .lulla-size-card.is-closing .lulla-size-card-status{
        opacity:0 !important;
        pointer-events:none !important;
    }

    .lulla-size-card:not(.is-active):not(.is-closing) .lulla-size-card-status{
        opacity:1;
    }

    .lulla-size-card-size-guide,
    .lulla-size-confirm-button{
        min-width:0 !important;
        max-width:100% !important;
        width:100% !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .lulla-size-confirm-button{
        justify-content:center !important;
        text-align:center !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .lulla-size-confirm-button::after{
        position:absolute !important;
        right:10px !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        width:9px !important;
        height:9px !important;
    }

    .lulla-size-card-size-guide{
        gap:4px !important;
    }

    .lulla-size-guide-icon{
        flex:0 0 10px !important;
        width:10px !important;
        height:10px !important;
        min-width:10px !important;
        min-height:10px !important;
        max-width:10px !important;
        max-height:10px !important;
    }

    .lulla-size-card.is-active .lulla-size-card-title,
    .lulla-size-card.is-closing .lulla-size-card-title{
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }
}

/* =========================================================
   STATE 3 — V14 / FINAL MOBILE + SUCCESS POLISH
   Arrow states switch cleanly; success screen simplified.
   No product/gallery/cart logic changed.
========================================================= */

/* Keep ADD SIZE morph intact. Only the confirmed/open arrow pair is
   switched as a single visual state, with no crossfade/flicker. */
.lulla-size-card-toggle.is-expand .lulla-toggle-icon-expand,
.lulla-size-card-toggle.is-close .lulla-toggle-icon-close{
    opacity:1 !important;
    transform:translate(-50%,-50%) scale(1) !important;
    transition:none !important;
}

.lulla-size-card-toggle.is-expand .lulla-toggle-icon-add,
.lulla-size-card-toggle.is-expand .lulla-toggle-icon-close,
.lulla-size-card-toggle.is-close .lulla-toggle-icon-add,
.lulla-size-card-toggle.is-close .lulla-toggle-icon-expand{
    opacity:0 !important;
    transform:translate(-50%,-50%) scale(1) !important;
    transition:none !important;
}

.lulla-size-card-toggle.is-expand .lulla-toggle-icon-expand svg,
.lulla-size-card-toggle.is-close .lulla-toggle-icon-close svg{
    width:12px !important;
    height:12px !important;
}

/* =========================================================
   SUCCESS SCREEN — QUIETER, AIRIER COMPOSITION
========================================================= */
.lulla-size-success-screen{
    padding:32px 24px !important;
}

.lulla-size-success-content{
    width:min(100%, 340px) !important;
    max-width:340px !important;
    gap:0 !important;
}

.lulla-size-success-check-wrap{
    width:40px !important;
    height:40px !important;
    margin:0 0 18px !important;
}

.lulla-size-success-check{
    width:40px !important;
    height:40px !important;
    opacity:0;
    transform:scale(.96);
}

.lulla-size-success-check img,
.lulla-size-success-bag-icon{
    width:34px !important;
    height:34px !important;
    object-fit:contain !important;
}

@keyframes lullaSuccessCheck{
    from{
        opacity:0;
        transform:scale(.96);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

.lulla-size-success-title{
    font-size:24px !important;
    line-height:1.08 !important;
    opacity:0;
    transform:none !important;
}

.lulla-size-success-screen.is-success .lulla-size-success-title{
    animation:lullaSuccessFade .34s ease .08s forwards !important;
}

.lulla-size-success-text{
    margin-top:10px !important;
    max-width:280px !important;
    font-size:10px !important;
    line-height:1.45 !important;
    opacity:0;
    transform:none !important;
}

.lulla-size-success-screen.is-success .lulla-size-success-text{
    animation:lullaSuccessFade .34s ease .14s forwards !important;
}

.lulla-size-success-actions{
    width:min(100%, 300px) !important;
    margin-top:28px !important;
    gap:8px !important;
    opacity:0;
    transform:none !important;
}

.lulla-size-screen.is-success .lulla-size-success-actions{
    animation:lullaSuccessFade .34s ease .20s forwards !important;
}

.lulla-size-another-button,
.lulla-size-home-button{
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    border-radius:4px !important;
    font-size:10px !important;
    letter-spacing:.045em !important;
}

@keyframes lullaSuccessFade{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@media (max-width:600px), (orientation:landscape) and (max-height:500px){
    .lulla-size-success-screen{
        padding:28px 20px !important;
    }

    .lulla-size-success-content{
        width:min(100%, 300px) !important;
        max-width:300px !important;
    }

    .lulla-size-success-check-wrap{
        width:34px !important;
        height:34px !important;
        margin-bottom:14px !important;
    }

    .lulla-size-success-check{
        width:34px !important;
        height:34px !important;
    }

    .lulla-size-success-check img,
    .lulla-size-success-bag-icon{
        width:29px !important;
        height:29px !important;
    }

    .lulla-size-success-title{
        font-size:22px !important;
        line-height:1.06 !important;
        white-space:nowrap !important;
    }

    .lulla-size-success-text{
        max-width:250px !important;
        margin-top:9px !important;
        font-size:9px !important;
    }

    .lulla-size-success-actions{
        width:100% !important;
        max-width:270px !important;
        margin-top:22px !important;
        gap:7px !important;
    }

    .lulla-size-another-button,
    .lulla-size-home-button{
        height:38px !important;
        min-height:38px !important;
        font-size:9px !important;
    }
}

/* =========================================================
   STATE 3 — V15 / SUCCESS SCREEN + MOBILE FOOTER CLEANUP
   Animation-only. Product/gallery/cart request logic untouched.
========================================================= */

/* The cart footer must hand over cleanly to the success screen.
   On mobile it leaves downward instead of remaining underneath the overlay. */
@media (max-width:600px), (orientation: landscape) and (max-height:500px){
    .lulla-size-screen.is-success .lulla-size-footer{
        display:flex !important;
        visibility:visible !important;
        pointer-events:none !important;
        transform:translateY(100%) !important;
        transition:transform .26s cubic-bezier(.22,.80,.36,1) !important;
    }

    .lulla-size-screen.is-success .lulla-size-cart-button{
        pointer-events:none !important;
    }
}

/* =========================================================
   SUCCESS SCREEN — DESKTOP
   Calm, simple, centered composition.
========================================================= */
.lulla-size-success-screen{
    z-index:600 !important;
    opacity:0;
    transform:none !important;
    transition:opacity .28s ease, visibility 0s linear .28s !important;
}

.lulla-size-screen.is-success .lulla-size-success-screen{
    opacity:1;
    transform:none !important;
    transition:opacity .28s ease, visibility 0s !important;
}

.lulla-size-success-content{
    width:min(100%, 360px) !important;
    max-width:360px !important;
}

.lulla-size-success-check-wrap{
    width:88px !important;
    height:88px !important;
    margin:0 0 20px !important;
}

.lulla-size-success-check{
    width:88px !important;
    height:88px !important;
    opacity:0 !important;
    transform:none !important;
    animation:none !important;
}

.lulla-size-screen.is-success .lulla-size-success-check{
    animation:lullaSuccessIconFade .26s ease forwards !important;
}

.lulla-size-success-check img,
.lulla-size-success-bag-icon{
    width:72px !important;
    height:72px !important;
    object-fit:contain !important;
}

.lulla-size-success-title,
.lulla-size-success-text,
.lulla-size-success-actions{
    transform:none !important;
    animation:none !important;
}

.lulla-size-success-title{
    opacity:0 !important;
}

.lulla-size-screen.is-success .lulla-size-success-title{
    animation:lullaSuccessFadeV15 .24s ease .04s forwards !important;
}

.lulla-size-success-text{
    opacity:0 !important;
}

.lulla-size-screen.is-success .lulla-size-success-text{
    animation:lullaSuccessFadeV15 .24s ease .09s forwards !important;
}

.lulla-size-success-actions{
    opacity:0 !important;
}

.lulla-size-screen.is-success .lulla-size-success-actions{
    animation:lullaSuccessFadeV15 .24s ease .14s forwards !important;
}

.lulla-size-another-button,
.lulla-size-home-button{
    transition:none !important;
}

@keyframes lullaSuccessIconFade{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes lullaSuccessFadeV15{
    from{ opacity:0; }
    to{ opacity:1; }
}

/* =========================================================
   SUCCESS SCREEN — MOBILE
   Compact first row: bag icon left, message right.
   Buttons remain underneath with comfortable spacing.
========================================================= */
@media (max-width:600px), (orientation: landscape) and (max-height:500px){
    .lulla-size-success-screen{
        align-items:center !important;
        justify-content:center !important;
        padding:22px 18px !important;
    }

    .lulla-size-success-content{
        width:100% !important;
        max-width:320px !important;
        display:grid !important;
        grid-template-columns:34px minmax(0,1fr) !important;
        column-gap:12px !important;
        row-gap:0 !important;
        align-items:center !important;
        text-align:left !important;
    }

    .lulla-size-success-check-wrap{
        grid-column:1 !important;
        grid-row:1 / span 2 !important;
        width:34px !important;
        height:34px !important;
        margin:0 !important;
        justify-content:flex-start !important;
    }

    .lulla-size-success-check{
        width:34px !important;
        height:34px !important;
        justify-content:flex-start !important;
    }

    .lulla-size-success-check img,
    .lulla-size-success-bag-icon{
        width:29px !important;
        height:29px !important;
    }

    .lulla-size-success-title{
        grid-column:2 !important;
        grid-row:1 !important;
        margin:0 !important;
        font-size:21px !important;
        line-height:1.05 !important;
        white-space:nowrap !important;
        text-align:left !important;
    }

    .lulla-size-success-text{
        grid-column:2 !important;
        grid-row:2 !important;
        margin:5px 0 0 !important;
        max-width:none !important;
        font-size:9px !important;
        line-height:1.35 !important;
        text-align:left !important;
    }

    .lulla-size-success-actions{
        grid-column:1 / -1 !important;
        grid-row:3 !important;
        width:100% !important;
        max-width:none !important;
        margin:22px 0 0 !important;
        gap:7px !important;
    }

    .lulla-size-another-button,
    .lulla-size-home-button{
        width:100% !important;
        height:38px !important;
        min-height:38px !important;
        font-size:9px !important;
        border-radius:4px !important;
    }
}

/* =========================================================
   STATE 3 — V16 / SUCCESS SCREEN VISIBILITY FIX
   The previous V15 .elementor-6706 .elementor-element.elementor-element-b9429bas targeted .lulla-size-success-screen.is-success,
   but the is-success class actually lives on .lulla-size-screen.
   Keep the success screen as one simple, lightweight fade.
========================================================= */

.lulla-size-screen .lulla-size-success-screen{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
    transition:opacity .24s ease, visibility 0s linear .24s !important;
}

.lulla-size-screen.is-success .lulla-size-success-screen{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    transition:opacity .24s ease, visibility 0s !important;
}

.lulla-size-screen .lulla-size-success-check,
.lulla-size-screen .lulla-size-success-title,
.lulla-size-screen .lulla-size-success-text,
.lulla-size-screen .lulla-size-success-actions{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
}

/* The success icon is static; the screen itself does the fade. */
.lulla-size-screen .lulla-size-success-check{
    transition:none !important;
}

/* Keep the finished cart footer out of the success composition. */
@media (max-width:600px), (orientation:landscape) and (max-height:500px){
    .lulla-size-screen.is-success .lulla-size-footer{
        transform:translateY(100%) !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:transform .24s cubic-bezier(.22,.80,.36,1), visibility 0s linear .24s !important;
    }

    /* Mobile success composition: compact icon + copy row, buttons below. */
    .lulla-size-screen .lulla-size-success-content{
        grid-template-columns:34px minmax(0,1fr) !important;
        column-gap:12px !important;
        text-align:left !important;
    }

    .lulla-size-screen .lulla-size-success-check-wrap{
        grid-column:1 !important;
        grid-row:1 / span 2 !important;
        width:34px !important;
        height:34px !important;
        margin:0 !important;
    }

    .lulla-size-screen .lulla-size-success-check,
    .lulla-size-screen .lulla-size-success-check img,
    .lulla-size-screen .lulla-size-success-bag-icon{
        width:30px !important;
        height:30px !important;
    }

    .lulla-size-screen .lulla-size-success-title{
        grid-column:2 !important;
        grid-row:1 !important;
        margin:0 !important;
        white-space:nowrap !important;
        text-align:left !important;
    }

    .lulla-size-screen .lulla-size-success-text{
        grid-column:2 !important;
        grid-row:2 !important;
        margin:5px 0 0 !important;
        text-align:left !important;
    }

    .lulla-size-screen .lulla-size-success-actions{
        grid-column:1 / -1 !important;
        grid-row:3 !important;
        width:100% !important;
        margin:22px 0 0 !important;
    }
}


/* =========================================================
   STATE 3 — V17 / FINAL SMALL UI POLISH
   Keep all existing logic and morph geometry unchanged.
   Only final copy, mobile success composition, landscape title,
   size-guide breathing room, and button text centering.
========================================================= */

/* Final success copy: the screen itself communicates the action. */
.lulla-size-screen .lulla-size-success-text{
    display:none !important;
}

/* Keep success action labels optically centered inside their buttons. */
.lulla-size-screen .lulla-size-another-button,
.lulla-size-screen .lulla-size-home-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* Mobile success: icon + title form one centered unit. */
@media (max-width:600px), (orientation: landscape) and (max-height:500px){
    .lulla-size-screen .lulla-size-success-content{
        width:auto !important;
        max-width:calc(100% - 28px) !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
    }

    .lulla-size-screen .lulla-size-success-check-wrap{
        width:auto !important;
        height:auto !important;
        margin:0 0 8px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .lulla-size-screen .lulla-size-success-check{
        width:38px !important;
        height:38px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .lulla-size-screen .lulla-size-success-check img,
    .lulla-size-screen .lulla-size-success-bag-icon{
        width:35px !important;
        height:35px !important;
    }

    .lulla-size-screen .lulla-size-success-title{
        width:auto !important;
        max-width:100% !important;
        margin:0 !important;
        font-size:24px !important;
        line-height:1 !important;
        white-space:nowrap !important;
        text-align:center !important;
    }

    .lulla-size-screen .lulla-size-success-actions{
        width:100% !important;
        max-width:270px !important;
        margin:20px 0 0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:7px !important;
    }

    .lulla-size-screen .lulla-size-another-button,
    .lulla-size-screen .lulla-size-home-button{
        width:100% !important;
        min-width:0 !important;
        height:38px !important;
        min-height:38px !important;
        padding-left:10px !important;
        padding-right:10px !important;
        font-size:9px !important;
        line-height:1 !important;
        text-align:center !important;
    }

    /* Landscape: never let the product title reflow into several lines. */
    .lulla-size-card.is-active .lulla-size-card-title,
    .lulla-size-card.is-closing .lulla-size-card-title{
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
    }

    /* Size Guide gets a little more breathing room without changing its box. */
    .lulla-size-card-size-guide{
        padding-left:8px !important;
        padding-right:8px !important;
        gap:6px !important;
        white-space:nowrap !important;
    }

    .lulla-size-guide-icon{
        width:12px !important;
        height:12px !important;
        min-width:12px !important;
        min-height:12px !important;
        flex:0 0 12px !important;
    }
}


/* =========================================================
   STATE 3 — V18 / MOBILE SUCCESS + LIGHT PREWARM
   No change to cart, gallery, selection, or morph logic.
========================================================= */
@media (max-width:600px) and (orientation:portrait){
    .lulla-size-screen .lulla-size-success-content{
        width:100% !important;
        max-width:340px !important;
        padding:0 10px !important;
        box-sizing:border-box !important;
    }

    .lulla-size-screen .lulla-size-success-check-wrap{
        margin-bottom:6px !important;
    }

    .lulla-size-screen .lulla-size-success-check,
    .lulla-size-screen .lulla-size-success-check img,
    .lulla-size-screen .lulla-size-success-bag-icon{
        width:42px !important;
        height:42px !important;
    }

    .lulla-size-screen .lulla-size-success-title{
        font-size:25px !important;
        line-height:1 !important;
        letter-spacing:-.01em !important;
    }

    .lulla-size-screen .lulla-size-success-actions{
        width:100% !important;
        max-width:300px !important;
        margin-top:22px !important;
        gap:8px !important;
    }

    .lulla-size-screen .lulla-size-another-button,
    .lulla-size-screen .lulla-size-home-button{
        width:100% !important;
        height:40px !important;
        min-height:40px !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }
}

/* Avoid stale animation-layer promotion outside the real morph. */
.lulla-size-card.is-morph-card{
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
}

/* =========================================================
   SIZE OPTIONS — THINNER TYPE + SOLD OUT STATE
   ========================================================= */
.lulla-size-option,
.lulla-size-option.is-selected{
    font-weight:400 !important;
}

.lulla-size-option:disabled,
.lulla-size-option[disabled]{
    position:relative !important;
    overflow:hidden !important;
    background:rgba(29,29,27,.055) !important;
    background-color:rgba(29,29,27,.055) !important;
    border-color:rgba(29,29,27,.12) !important;
    color:rgba(29,29,27,.38) !important;
    opacity:1 !important;
    cursor:not-allowed !important;
    pointer-events:none !important;
}

.lulla-size-option:disabled::after,
.lulla-size-option[disabled]::after{
    content:"";
    position:absolute;
    left:-18%;
    top:50%;
    width:136%;
    height:1px;
    background:rgba(138,81,71,.78);
    transform:rotate(-38deg);
    transform-origin:center center;
    pointer-events:none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-da81ae4 */:.elementor-6706 .elementor-element.elementor-element-da81ae4{
--builder-side-pad:12px;

position:relative;

width:100%;
height:100%;
min-width:0;
min-height:0;
max-height:100%;

margin:0;
padding:0;

box-sizing:border-box;

display:flex;
flex-direction:column;
align-items:stretch;

overflow:hidden;
}

.elementor-6706 .elementor-element.elementor-element-da81ae4 > .gender-tabs{
width:100%;
min-width:0;
min-height:0;

flex:0 0 auto;

margin:0;
padding:0;

box-sizing:border-box;
}

.elementor-6706 .elementor-element.elementor-element-da81ae4 > .products-scroll{
width:100%;
height:auto;

min-width:0;
min-height:0;

flex:1 1 auto;
align-self:stretch;

margin:0;
padding:0;

box-sizing:border-box;

overflow:hidden;
}

@media(max-width:850px){
.elementor-6706 .elementor-element.elementor-element-da81ae4{
--builder-side-pad:8px;
}
}

@media(max-width:420px){
.elementor-6706 .elementor-element.elementor-element-da81ae4{
--builder-side-pad:7px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f38152 *//* =========================================
   BUILD THE OUTFIT — TRUE APP GEOMETRY
   ========================================= */

.elementor-6706 .elementor-element.elementor-element-9f38152.build-outfit {

    /* -----------------------------------------
       MAXIMUM BUILDER WIDTH
       ----------------------------------------- */

    --builder-max-width: 1440px;


    /* -----------------------------------------
       BUILDER RATIO
       ----------------------------------------- */

    --builder-ratio: 1440 / 875;


    /* -----------------------------------------
       PAGE OFFSET
       ----------------------------------------- */

    --page-top-offset: 0px;


    /* -----------------------------------------
       HEIGHT
       ----------------------------------------- */

    height: calc(
        100dvh - var(--page-top-offset)
    );

    min-height: 0;


    /* -----------------------------------------
       WIDTH
       ----------------------------------------- */

    width: min(
        100%,
        var(--builder-max-width),
        calc(
            (100dvh - var(--page-top-offset))
            * 1440 / 875
        )
    );

    max-width: var(--builder-max-width);


    /* -----------------------------------------
       POSITION
       ----------------------------------------- */

    margin-inline: auto;
    margin-top: 0;
    margin-bottom: 0;

    padding: 0;

    box-sizing: border-box;


    /* -----------------------------------------
       LAYOUT
       ----------------------------------------- */

    display: flex;

    flex-direction: row;

    gap: 0;

    overflow: hidden;
}


/* =========================================
   OUTFIT PANEL
   ========================================= */

.elementor-6706 .elementor-element.elementor-element-9f38152.build-outfit > .outfit-panel {

    flex: 0 0 55%;

    width: 55%;
    max-width: 55%;

    height: 100%;

    min-width: 0;
    min-height: 0;

    padding: 0;
    margin: 0;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================
   PRODUCTS PANEL
   ========================================= */

.elementor-6706 .elementor-element.elementor-element-9f38152.build-outfit > .products-panel {

    flex: 0 0 45%;

    width: 45%;
    max-width: 45%;

    height: 100%;

    min-width: 0;
    min-height: 0;

    padding: 0;
    margin: 0;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================
   WIDE DESKTOP
   50 / 50
   ========================================= */

@media (min-width: 1200px) {

    .elementor-6706 .elementor-element.elementor-element-9f38152.build-outfit > .outfit-panel {

        flex-basis: 50%;

        width: 50%;
        max-width: 50%;
    }


    .elementor-6706 .elementor-element.elementor-element-9f38152.build-outfit > .products-panel {

        flex-basis: 50%;

        width: 50%;
        max-width: 50%;
    }
}


/* =========================================
   PORTRAIT
   65 / 35
   ========================================= */

@media (max-aspect-ratio: 9/10) {

    .elementor-6706 .elementor-element.elementor-element-9f38152.build-outfit {

        width: 100%;
        max-width: none;

        height: calc(
            100dvh - var(--page-top-offset)
        );

        flex-direction: column;
    }


    /* -----------------------------------------
       OUTFIT — 65%
       ----------------------------------------- */

    .elementor-6706 .elementor-element.elementor-element-9f38152.build-outfit > .outfit-panel {

        flex: 0 0 65%;

        width: 100%;
        max-width: 100%;

        height: 65%;
    }


    /* -----------------------------------------
       PRODUCTS — 35%
       ----------------------------------------- */

    .elementor-6706 .elementor-element.elementor-element-9f38152.build-outfit > .products-panel {

        flex: 0 0 35%;

        width: 100%;
        max-width: 100%;

        height: 35%;
    }
}/* End custom CSS */