/* Order form page — light background */
    body { background: #F5F5F5; }
    
        :root {
            --magenta: #E91E8C;
            --magenta-dark: #C2185B;
            --magenta-soft: #FDE4EF;
            --turquoise: #00BCD4;
            --turquoise-dark: #0097A7;
            --turquoise-soft: #E0F7FA;
            --bg: #F5F5F5;
            --white: #FFFFFF;
            --text-dark: #1A1A1A;
            --text-mid: #4A4A4A;
            --text-light: #999999;
            --border: #DCDCDC;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Urbanist', sans-serif;
            font-weight: 400;
            background: var(--bg);
            color: var(--text-dark);
            min-height: 100vh;
            font-size: 16px;
        }

        /* ── HEADER ── */
        .form-header {
            background: #FFFFFF;
            padding: 1.5rem 2rem 1.25rem;
            text-align: center;
            border-bottom: 3px solid var(--magenta);
        }
        .form-header img {
            max-width: 380px;
            width: 75%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        .form-header .subtitle {
            color: var(--text-mid);
            font-size: 1rem;
            margin-top: .6rem;
            font-weight: 400;
            letter-spacing: .03em;
        }
        .form-header .form-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--magenta);
            margin-top: .3rem;
            letter-spacing: .06em;
            text-transform: uppercase;
        }
        .required-note {
            font-size: .75rem; color: var(--text-light);
            margin-top: .35rem;
        }
        .required-note span { color: var(--magenta); font-weight: 600; }

        /* Language — inline below logo, not absolute */
        .lang-toggle {
            display: flex; gap: 6px; justify-content: center;
            margin-top: .75rem;
        }
        .lang-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-light);
            padding: .3rem .75rem;
            font-size: .8rem; font-family: 'Urbanist', sans-serif; font-weight: 600;
            cursor: pointer; border-radius: 4px; transition: all .2s;
        }
        .lang-btn.active {
            background: var(--magenta); color: #fff; border-color: var(--magenta);
        }

        /* Container — wider */
        .form-container { max-width: 1080px; margin: 2rem auto; padding: 0 1.5rem 3rem; }

        /* Sections */
        .form-section {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 2rem;
            margin-top: 1.5rem;
            animation: fadeUp .35s ease-out both;
        }
        .form-section:nth-child(1){animation-delay:.04s}
        .form-section:nth-child(2){animation-delay:.08s}
        .form-section:nth-child(3){animation-delay:.12s}
        .form-section:nth-child(4){animation-delay:.16s}
        .form-section:nth-child(5){animation-delay:.2s}
        .form-section:nth-child(6){animation-delay:.24s}
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .section-title {
            font-size: 1.1rem; font-weight: 700;
            color: var(--magenta);
            margin-bottom: 1.5rem; padding-bottom: .75rem;
            border-bottom: 2px solid var(--magenta-soft);
            display: flex; align-items: center; gap: .5rem;
            letter-spacing: .02em;
        }

        /* Fields — larger */
        .field-group { margin-bottom: 1.35rem; }
        .field-group:last-child { margin-bottom: 0; }
        label {
            display: block; font-size: .95rem; font-weight: 500;
            color: var(--text-mid); margin-bottom: .45rem;
        }
        label .req { color: var(--magenta); margin-left: 2px; }

        input[type=text], input[type=email], input[type=tel],
        input[type=date], input[type=time], input[type=number],
        select, textarea {
            width: 100%; padding: .8rem 1rem;
            border: 1px solid var(--border); border-radius: 10px;
            font-family: 'Urbanist', sans-serif; font-weight: 400;
            font-size: 1rem; color: var(--text-dark);
            background: var(--white);
            transition: border-color .2s, box-shadow .2s;
            height: 52px;
        }
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--turquoise);
            box-shadow: 0 0 0 3px rgba(0,188,212,.12);
        }
        textarea {
            resize: vertical; min-height: 100px; height: auto;
        }
        input[type=file] {
            font-family: 'Urbanist', sans-serif;
            font-size: .95rem; color: var(--text-mid);
            height: auto; padding: .7rem 1rem;
        }
        select { cursor: pointer; }
        .field-hint { font-size: .82rem; color: var(--text-light); margin-top: .3rem; }

        /* Flavor tooltip image on hover — desktop */
        .flavor-grid label { position: relative; }
        .flavor-img {
            display: none;
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%; transform: translateX(-50%);
            width: 240px; height: 150px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 4px 16px rgba(0,0,0,.18);
            z-index: 100;
            pointer-events: none;
            border: 2px solid var(--turquoise);
        }
        .flavor-grid label:hover .flavor-img { display: block; }

        /* Mobile: show as inline thumbnail, no hover needed */
        @media (max-width: 560px) {
            .flavor-img {
                display: block !important;
                position: static !important;
                transform: none !important;
                width: 52px !important; height: 52px !important;
                border-radius: 8px !important;
                flex-shrink: 0;
                box-shadow: none !important;
                border: 1px solid var(--turquoise) !important;
            }
            .flavor-grid label { align-items: center; gap: .6rem; }
            .flavor-grid { grid-template-columns: 1fr; }
        }
        .flavor-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: .4rem;
        }
        .flavor-grid label {
            display: flex; align-items: flex-start; gap: .4rem;
            font-weight: 400; font-size: .88rem; cursor: pointer;
            background: var(--turquoise-soft); padding: .45rem .7rem;
            border-radius: 10px; border: 1px solid transparent; transition: all .2s;
            color: var(--text-dark); line-height: 1.25;
        }
        .flavor-grid label:hover { border-color: var(--turquoise); background: #c9f0f7; }
        .flavor-grid label input[type=checkbox] { accent-color: var(--turquoise); width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; }
        .flavor-grid label span strong {
            display: block; font-size: .88rem;
            padding-bottom: .2rem;
            margin-bottom: 0;
            border-bottom: 1px solid var(--magenta);
        }
        .flavor-grid label span small { font-size: .72rem; color: var(--text-mid); font-weight: 300; line-height: 1.25; display: block; margin-top: 0; }

        /* Checkbox group */
        .check-group { display: flex; flex-wrap: wrap; gap: .55rem; }
        .check-group label {
            display: flex; align-items: center; gap: .4rem;
            font-weight: 400; font-size: .95rem; cursor: pointer;
            background: var(--magenta-soft); padding: .6rem .85rem;
            border-radius: 10px; border: 1px solid transparent; transition: all .2s;
            color: var(--text-dark);
        }
        .check-group label:hover { border-color: var(--magenta); }
        .check-group input { accent-color: var(--magenta); width: 17px; height: 17px; }

        /* Layout */
        .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        @media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }

        /* Conditional */
        .conditional { display: none; }
        .conditional.visible { display: block; margin-top: 1rem; }

        /* Pickup label */
        .pickup-label {
            font-size: 1rem; font-weight: 700;
            color: var(--turquoise-dark);
            margin-bottom: .75rem;
            display: flex; align-items: center; gap: .4rem;
        }

        /* Submit */
        .submit-section { margin-top: 2rem; text-align: center; }
        .submit-btn {
            background: var(--magenta);
            color: #fff; border: none;
            padding: 1rem 3.5rem;
            font-family: 'Urbanist', sans-serif;
            font-size: 1.05rem; font-weight: 700;
            border-radius: 50px; cursor: pointer;
            transition: all .3s;
            box-shadow: 0 4px 18px rgba(233,30,140,.2);
            letter-spacing: .06em;
            text-transform: uppercase;
        }
        .submit-btn:hover {
            background: var(--magenta-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(233,30,140,.3);
        }
        .submit-btn:active { transform: translateY(0); }
        .submit-btn.loading { pointer-events: none; opacity: .7; }

        .privacy-note {
            text-align: center; font-size: .82rem;
            color: var(--text-light); margin-top: 1rem; line-height: 1.6;
        }
        .privacy-note a { color: var(--turquoise-dark); text-decoration: none; }
        .privacy-note a:hover { text-decoration: underline; }

        .form-footer {
            text-align: center; padding: 1.5rem;
            font-size: .78rem; color: var(--text-light);
        }
        .form-footer a { color: var(--turquoise-dark); text-decoration: none; }
        .footer-home {
            display: inline-block;
            font-size: .88rem; font-weight: 600;
            color: var(--magenta) !important;
            margin-bottom: .5rem;
        }
        .footer-home:hover { text-decoration: underline !important; }
        .footer-sep { margin: 0 .4rem; }

        /* ── CONFIRMATION MODAL ── */
        .modal-overlay {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,.45); z-index: 1000;
            align-items: center; justify-content: center; padding: 1.5rem;
        }
        .modal-overlay.open { display: flex; }
        .modal {
            background: #fff; border-radius: 16px;
            padding: 2rem 2rem 1.5rem;
            max-width: 400px; width: 100%;
            text-align: center;
            box-shadow: 0 8px 40px rgba(0,0,0,.18);
            animation: modalIn .25s ease-out;
        }
        @keyframes modalIn {
            from { opacity: 0; transform: scale(.94); }
            to   { opacity: 1; transform: scale(1); }
        }
        .modal-icon { font-size: 2.2rem; margin-bottom: .5rem; }
        .modal h3 {
            font-family: 'Urbanist', sans-serif; font-weight: 700;
            font-size: 1.2rem; color: var(--text-dark); margin-bottom: .5rem;
        }
        .modal p {
            font-size: .92rem; color: var(--text-mid);
            margin-bottom: 1.5rem; line-height: 1.6;
        }
        .modal-buttons { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
        .modal-confirm {
            background: var(--magenta); color: #fff; border: none;
            padding: .75rem 2rem; border-radius: 50px;
            font-family: 'Urbanist', sans-serif; font-weight: 700;
            font-size: .95rem; cursor: pointer; transition: background .2s;
        }
        .modal-confirm:hover { background: var(--magenta-dark); }
        .modal-cancel {
            background: transparent; color: var(--text-mid);
            border: 1px solid var(--border);
            padding: .75rem 2rem; border-radius: 50px;
            font-family: 'Urbanist', sans-serif; font-weight: 500;
            font-size: .95rem; cursor: pointer; transition: all .2s;
        }
        .modal-cancel:hover { border-color: var(--turquoise); color: var(--turquoise-dark); }

        /* Divider line below header — solid turquoise, no gradient */
        .header-accent {
            height: 4px;
            background: var(--turquoise);
        }
    
    /* Override: form-header is replaced by site nav */
    .form-header { display: none !important; }
    .header-accent { display: none !important; }
    /* Page hero bar */
    .order-hero {
        background: linear-gradient(135deg, var(--pink-soft) 0%, var(--teal-soft) 100%);
        text-align: center; padding: 4.5rem 1.5rem 4.5rem;
    }
    .order-hero h1 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        font-weight: 600; color: var(--dark);
        margin-bottom: .5rem;
    }
    .order-hero p {
        font-size: 1rem; color: var(--mid); max-width: 500px; margin: 0 auto;
    }
    /* Wider form: two-col for more fields */
    .form-container { max-width: 1080px; margin: 2rem auto; padding: 0 1.5rem 3rem; }
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

    @media (max-width: 680px) {
        .two-col, .three-col { grid-template-columns: 1fr; }
    }

    

    /* ── TILE BUTTONS (anlass, shape) ── */
    .tile-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; }
    .tile {
        padding: .55rem 1rem; border-radius: 50px;
        border: 1.5px solid var(--border); background: #fff;
        font-family: inherit; font-size: .85rem; color: var(--text-mid);
        cursor: pointer; transition: all .15s; line-height: 1;
    }
    .tile:hover { border-color: var(--magenta); color: var(--magenta); }
    .tile.sel { background: #fde4ef; border-color: var(--magenta); color: #c2185b; font-weight: 600; }
    .shape-tile {
        display: flex; flex-direction: column; align-items: center;
        padding: .75rem .6rem; border-radius: 12px; min-width: 72px;
        border: 1.5px solid var(--border); background: #fff;
        font-family: inherit; font-size: .72rem; color: var(--text-mid);
        cursor: pointer; transition: all .15s; gap: 4px;
    }
    .shape-tile span { display: block; text-align: center; }
    .shape-tile:hover { border-color: var(--magenta); color: var(--magenta); }
    .shape-tile.sel { background: #fde4ef; border-color: var(--magenta); color: #c2185b; font-weight: 600; }

    /* ── SIZE TILES ── */
    .size-tiles {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 10px; margin-bottom: .5rem;
    }
    .size-tile {
        border: 1.5px solid var(--border); border-radius: 12px;
        padding: 1rem .75rem; cursor: pointer; text-align: center;
        background: #fff; font-family: inherit; transition: all .15s;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    .size-tile:hover { border-color: var(--magenta); }
    .size-tile.sel { border-color: var(--magenta); background: #fde4ef; }
    .size-tile.size-custom { border-style: dashed; }
    .st-cm { font-size: 1.2rem; font-weight: 700; color: var(--dark); display: block; }
    .st-lbl { font-size: .78rem; font-weight: 600; color: var(--text-mid); display: block; }
    .st-srv { font-size: .68rem; color: var(--text-light); display: block; }
    .size-tile.sel .st-cm, .size-tile.sel .st-lbl { color: #c2185b; }
    @media (max-width: 540px) { .size-tiles { grid-template-columns: repeat(2, 1fr); } }

    /* ── CALENDAR ── */
    .cal-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    @media (max-width: 640px) { .cal-time-row { grid-template-columns: 1fr; } }
    .field-lbl { display: block; font-size: .85rem; color: var(--text-mid); margin-bottom: .5rem; font-weight: 500; }
    .cal-nav-row {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: .6rem;
    }
    .cal-arrow {
        border: none; background: none; cursor: pointer; font-size: 1.4rem;
        color: var(--text-mid); padding: 2px 8px; border-radius: 6px;
        transition: background .2s;
    }
    .cal-arrow:hover { background: #f0f0f0; }
    .cal-month-lbl { font-size: .88rem; font-weight: 600; color: var(--dark); }
    .cal-grid {
        display: grid; grid-template-columns: repeat(7, 1fr);
        gap: 2px; font-size: .75rem;
    }
    .cal-head { text-align: center; padding: 4px 0; font-weight: 600; color: var(--text-mid); font-size: .68rem; }
    .cal-head-red { color: var(--magenta); }
    .cal-head-gray { color: var(--text-light); }
    .cal-day {
        text-align: center; padding: 6px 2px; border-radius: 6px;
        cursor: pointer; color: var(--text-mid); font-size: .78rem;
        transition: all .15s; border: 1px solid transparent;
    }
    .cal-day:hover { background: #f5f5f5; }
    .cal-day.today { border-color: var(--magenta); color: var(--magenta); }
    .cal-day.sel { background: var(--magenta); color: #fff; font-weight: 600; border-color: var(--magenta); }
    .cal-day.past { color: #ccc; cursor: default; pointer-events: none; }
    .cal-day.empty { pointer-events: none; }

    /* ── TIME CHIPS ── */
    .time-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .time-chip {
        font-size: .78rem; padding: .45rem .85rem; border-radius: 50px;
        border: 1.5px solid var(--border); cursor: pointer;
        background: #fff; color: var(--text-mid); font-family: inherit;
        transition: all .15s;
    }
    .time-chip:hover { border-color: var(--turquoise); color: var(--turquoise); }
    .time-chip.sel { background: #e0f7fa; border-color: var(--turquoise); color: #0097a7; font-weight: 600; }

    .hint-text { font-size: .75rem; color: var(--text-light); margin-top: .3rem; }
    .sec-icon { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 6px; opacity: .7; }
    .sec-icon svg { stroke: currentColor; }
    .st-num { font-size: 1.25rem; font-weight: 700; color: var(--dark); display: block; }
    .size-tile.sel .st-num { color: #c2185b; }
    .form-section-wrapper > .form-section:first-child { }
    .submit-section { text-align: center; padding: 1.5rem 0; }
    .agb-hint { font-size: .75rem; color: var(--text-light); margin-top: .75rem; }
    .agb-hint a { color: var(--magenta); }

    
        /* ── FORM WIDTH ── */
        .form-container { max-width: 1080px !important; }

        /* ── OPT-TILES (anlass, allergie — single/multi select) ── */
        .opt-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .25rem; }
        .opt-tile {
            padding: .55rem 1.1rem; border-radius: 50px;
            border: 1.5px solid var(--border); background: #fff;
            font-family: 'Urbanist', sans-serif; font-size: .88rem;
            color: var(--text-mid); cursor: pointer; transition: color .15s, background .15s;
            line-height: 1; white-space: nowrap; box-sizing: border-box;
        }
        .opt-tile:hover { border-color: var(--magenta); color: var(--magenta); }
        .opt-tile.sel {
            background: #fde4ef; border-color: var(--magenta);
            color: var(--magenta); font-weight: 600;
        }

        /* ── SHAPE TILES ── */
        .shape-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: .25rem; }
        .shape-tile {
            display: flex; flex-direction: column; align-items: center;
            gap: 5px; padding: .75rem .9rem; min-width: 76px;
            border: 1.5px solid var(--border); border-radius: 12px;
            background: #fff; font-family: 'Urbanist', sans-serif;
            font-size: .78rem; color: var(--text-mid); cursor: pointer;
            transition: all .15s;
        }
        .shape-tile:hover { border-color: var(--magenta); color: var(--magenta); }
        .shape-tile.sel {
            background: #fde4ef; border-color: var(--magenta);
            color: var(--magenta); font-weight: 600;
        }
        .shape-tile svg { flex-shrink: 0; }

        /* ── CALENDAR ── */
        .cal-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: .5rem; }
        @media(max-width:640px){ .cal-time-row { grid-template-columns: 1fr; } }
        .cal-nav-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
        .cal-arrow { border:none; background:none; cursor:pointer; font-size:1.5rem; color:var(--text-mid); padding:2px 8px; border-radius:6px; transition:background .2s; }
        .cal-arrow:hover { background:#f0f0f0; }
        .cal-month-lbl { font-size:.9rem; font-weight:600; color:var(--dark); }
        .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
        .cal-head { text-align:center; padding:4px 0; font-weight:600; font-size:.7rem; color:var(--text-mid); }
        .cal-day {
            text-align:center; padding:7px 2px; border-radius:6px;
            cursor:pointer; color:var(--text-mid); font-size:.8rem;
            transition:all .15s; border:1px solid transparent;
        }
        .cal-day:hover { background:#f5f5f5; }
        .cal-day.today { border-color:var(--magenta); color:var(--magenta); }
        .cal-day.sel { background:var(--magenta); color:#fff; font-weight:600; }
        .cal-day.disabled { color:#ccc; cursor:default; pointer-events:none; }
        .cal-day.empty { pointer-events:none; }

        /* ── TIME CHIPS ── */
        .time-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:.25rem; }
        .time-chip {
            padding:.45rem .9rem; border-radius:50px;
            border:1.5px solid var(--border); background:#fff;
            font-family:'Urbanist',sans-serif; font-size:.82rem;
            color:var(--text-mid); cursor:pointer; transition:all .15s;
        }
        .time-chip:hover { border-color:var(--turquoise); color:var(--turquoise); }
        .time-chip.sel { background:#e0f7fa; border-color:var(--turquoise); color:#0097a7; font-weight:600; }

        /* ── FLAVOR TILES ── */
        .flavor-tiles {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 10px; margin-top: .25rem;
        }
        .flavor-tile {
            border: 1.5px solid var(--border); border-radius: 12px;
            overflow: hidden; cursor: pointer; background: #fff;
            font-family: 'Urbanist', sans-serif; transition: all .15s;
            display: flex; flex-direction: column; text-align: left;
        }
        .flavor-tile img {
            width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
        }
        .flavor-tile span { padding: .5rem .65rem; display: block; }
        .flavor-tile strong { font-size: .82rem; color: var(--dark); display: block; }
        .flavor-tile small { font-size: .72rem; color: var(--text-mid); display: block; margin-top: 2px; line-height: 1.4; }
        .flavor-tile:hover { border-color: var(--magenta); }
        .flavor-tile.sel {
            border: 2px solid var(--magenta); background: #fff9fb;
        }
        .flavor-tile.sel strong { color: var(--magenta); }
        .flavor-counter { font-size:.78rem; color:var(--text-light); margin-top:.5rem; }
        .flavor-counter span { font-weight:700; color:var(--magenta); }

        /* ── ICONS ON ALL PAGES 20×20 MAGENTA ── */
        .sec-icon svg, .icon svg { width:20px !important; height:20px !important; stroke:var(--magenta) !important; }
        .contact-detail .icon svg { width:20px !important; height:20px !important; }

        /* ── FORM WIDTH ── */
        .form-container { max-width: 1080px !important; margin: 2rem auto !important; padding: 0 1.5rem 3rem !important; }

        /* ── OPT-TILES ── */
        .opt-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .25rem; }
        .opt-tile {
            padding: .55rem 1.1rem; border-radius: 50px;
            border: 1.5px solid var(--border); background: #fff;
            font-family: 'Urbanist', sans-serif; font-size: .88rem;
            color: var(--text-mid); cursor: pointer;
            transition: color .15s, background .15s;
            line-height: 1; white-space: nowrap;
        }
        .opt-tile:hover { border-color: var(--magenta); color: var(--magenta); }
        .opt-tile.sel { background: #fde4ef; border-color: var(--magenta); color: var(--magenta); font-weight: 600; }

        /* ── SHAPE TILES ── */
        .shape-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .25rem; }
        .shape-tile {
            display: flex; flex-direction: column; align-items: center;
            gap: 4px; padding: .65rem .75rem; min-width: 70px;
            border: 1.5px solid var(--border); border-radius: 12px;
            background: #fff; font-family: 'Urbanist', sans-serif;
            font-size: .72rem; color: var(--text-mid); cursor: pointer;
            transition: color .15s, background .15s;
        }
        .shape-tile:hover { border-color: var(--magenta); color: var(--magenta); }
        .shape-tile.sel { background: #fde4ef; border-color: var(--magenta); color: var(--magenta); font-weight: 600; }

        /* ── SIZE TILES ── */
        .size-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: .25rem; }
        .size-tile { border: 1.5px solid var(--border); border-radius: 10px; padding:.75rem .5rem; cursor:pointer; text-align:center; background:#fff; font-family:inherit; transition:color .15s, background .15s; }
        .size-tile:hover { border-color: var(--magenta); }
        .size-tile.sel { border-color: var(--magenta); background: #fde4ef; }
        .size-tile.size-custom { border-style: dashed; }
        .st-num { font-size:1.1rem; font-weight:700; color:var(--dark); display:block; }
        .st-lbl { font-size:.72rem; color:var(--text-mid); display:block; }
        .size-tile.sel .st-num, .size-tile.sel .st-lbl { color: var(--magenta); }
        @media(max-width:560px){ .size-tiles { grid-template-columns: repeat(2,1fr); } }

        /* ── CALENDAR ── */
        .cal-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top:.5rem; }
        @media(max-width:640px){ .cal-time-row { grid-template-columns: 1fr; } }
        .cal-nav-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
        .cal-arrow { border:none; background:none; cursor:pointer; font-size:1.5rem; color:var(--text-mid); padding:2px 8px; border-radius:6px; }
        .cal-arrow:hover { background:#f0f0f0; }
        .cal-month-lbl { font-size:.9rem; font-weight:600; color:var(--dark); }
        .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
        .cal-head { text-align:center; padding:4px 0; font-weight:600; font-size:.7rem; color:var(--text-mid); }
        .cal-day { text-align:center; padding:7px 2px; border-radius:6px; cursor:pointer; color:var(--text-mid); font-size:.8rem; transition:all .15s; border:1px solid transparent; }
        .cal-day:hover { background:#f5f5f5; }
        .cal-day.sel { background:var(--magenta); color:#fff; font-weight:600; }
        .cal-day.disabled { color:#ccc; cursor:default; pointer-events:none; }
        .cal-day.empty { pointer-events:none; }

        /* ── TIME CHIPS ── */
        .time-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:.25rem; }
        .time-chip { padding:.45rem .9rem; border-radius:50px; border:1.5px solid var(--border); background:#fff; font-family:'Urbanist',sans-serif; font-size:.82rem; color:var(--text-mid); cursor:pointer; transition:all .15s; }
        .time-chip:hover { border-color:var(--turquoise); color:var(--turquoise); }
        .time-chip.sel { background:#e0f7fa; border-color:var(--turquoise); color:#0097a7; font-weight:600; }

        /* ── FLAVOR TILES ── */
        .flavor-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:.25rem; }
        .flavor-tile { border:1.5px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; background:#fff; font-family:'Urbanist',sans-serif; transition:border-color .15s; display:flex; flex-direction:column; }
        .flavor-tile img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
        .flavor-tile span { padding:.5rem .65rem; display:block; }
        .flavor-tile strong { font-size:.82rem; color:var(--dark); display:block; }
        .flavor-tile small { font-size:.7rem; color:var(--text-mid); display:block; margin-top:2px; line-height:1.4; }
        .flavor-tile:hover { border-color:var(--magenta); }
        .flavor-tile.sel { border:2px solid var(--magenta); background:#fff9fb; }
        .flavor-tile.sel strong { color:var(--magenta); }

        /* ── AGB CHECKBOX ── */
        .agb-checkbox { display:flex; align-items:flex-start; gap:.75rem; padding:1rem 1.25rem; margin-bottom:1rem; background:var(--teal-soft); border:1px solid var(--teal); border-radius:12px; cursor:pointer; font-size:.88rem; }
        .agb-checkbox input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--teal); cursor:pointer; }
        .agb-checkbox span { color:var(--mid); line-height:1.6; }
        .agb-checkbox a { color:var(--teal-dark); text-decoration:underline; }
        .req { color:var(--magenta); margin-left:2px; }
        .field-lbl { display:block; font-size:.85rem; color:var(--text-mid); margin-bottom:.5rem; font-weight:500; }
        .pickup-label { font-size:.95rem; font-weight:600; color:var(--dark); margin:1rem 0 .75rem; }
    
        /* ── FLAVOR TILE HOVER ZOOM ── */
        .flavor-tile { position: relative; }
        .flavor-tile img { transition: transform .3s cubic-bezier(.2,0,.2,1); transform-origin: center bottom; }
        .flavor-tile:hover img { transform: scale(1.08); }
        .flavor-tile:hover { box-shadow: 0 6px 24px rgba(233,30,140,.15); }


.form-error-summary {
  color: #B00020;
  font-weight: 700;
  margin: .75rem 0 0;
  min-height: 1.2em;
}
.input-error {
  outline: 2px solid #B00020 !important;
  outline-offset: 3px;
}