.order-hero {
    padding-bottom:40px;
}

.order-section {
    padding-top:35px;
}

.order-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    gap:55px;
    align-items:start;
}

.order-products {
    display:grid;
    gap:18px;
}

.order-cookie {
    display:grid;
    grid-template-columns:150px minmax(0,1fr) auto;
    gap:22px;
    align-items:center;
    padding:18px;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:#fff;
}

.order-cookie img {
    height:135px;
    object-fit:cover;
    border-radius:16px;
}

.order-cookie h2 {
    font:600 30px/1 var(--serif);
    margin:0 0 8px;
}

.order-cookie p {
    color:var(--muted);
    margin:0 0 10px;
}

.order-cookie strong {
    color:var(--green);
}

.qty-control {
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    border-radius:999px;
    overflow:hidden;
}

.qty-control button {
    border:0;
    background:transparent;
    width:42px;
    height:42px;
    font-size:22px;
    color:var(--green);
    cursor:pointer;
}

.qty-control input {
    border:0;
    width:38px;
    text-align:center;
    background:transparent;
    font-weight:700;
    -moz-appearance:textfield;
}

.qty-control input::-webkit-inner-spin-button {
    display:none;
}

.order-summary {
    position:sticky;
    top:135px;
}

.order-summary-inner {
    background:var(--cream);
    border-radius:30px;
    padding:30px;
    box-shadow:var(--shadow);
}

.order-summary h2 {
    font:600 35px/1 var(--serif);
    margin:0 0 22px;
}

.minimum-row>span {
    display:block;
    font-weight:700;
}

.minimum-row>div {
    height:5px;
    background:rgba(0,76,84,.12);
    border-radius:99px;
    overflow:hidden;
    margin:8px 0;
}

.minimum-row i {
    display:block;
    height:100%;
    width:0;
    background:var(--green);
    transition:.2s;
}

.minimum-row small,.secure-note {
    color:var(--muted);
}

.fulfillment {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:25px 0;
}

.fulfillment label {
    display:flex;
    gap:8px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
    cursor:pointer;
}

.fulfillment span {
    display:flex;
    flex-direction:column;
}

.fulfillment small {
    font-size:11px;
    color:var(--muted);
}

.order-summary label:not(.fulfillment label) {
    display:grid;
    gap:6px;
    font-size:13px;
    font-weight:700;
    margin:18px 0;
}

.order-summary input[type=email], .order-summary textarea, .order-summary input[type=text] {
    width:100%;
    border:1px solid var(--line);
    background:#fff;
    border-radius:12px;
    padding:12px;
}

.order-summary h3 {
    font-size:14px;
    margin:22px 0 10px;
}

.pickup-line,.totals p {
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin:6px 0;
}

.pickup-line {
    font-size:13px;
}

.pickup-line span {
    color:var(--muted);
}

.totals {
    border-top:1px solid var(--line);
    margin-top:22px;
    padding-top:16px;
}

.grand-total {
    font-size:20px;
    border-top:1px solid var(--line);
    padding-top:14px!important;
    margin-top:14px!important;
}

.order-pay {
    width:100%;
    border:0;
    cursor:pointer;
    margin-top:12px;
}

.order-pay:disabled {
    opacity:.6;
}

.secure-note {
    display:block;
    text-align:center;
    margin-top:10px;
    font-size:11px;
}

.order-error,.order-alert {
    background:#fff2ef;
    border:1px solid #e5b7ae;
    color:#7b2f23;
    padding:14px 16px;
    border-radius:12px;
    margin:15px 0;
}

.order-alert {
    max-width:760px;
    margin:0 auto;
}

.order-summary [hidden] {
    display:none!important;
}

@media(max-width:900px) {
    .order-layout {
        grid-template-columns:1fr;
    }

    .order-summary {
        position:static;
    }

    .order-cookie {
        grid-template-columns:110px 1fr;
    }

    .qty-control {
        grid-column:2;
        justify-self:start;
    }

    .order-cookie img {
        height:105px;
    }

}

@media(max-width:580px) {
    .order-cookie {
        grid-template-columns:80px 1fr;
        gap:14px;
        padding:12px;
    }

    .order-cookie img {
        height:80px;
    }

    .order-cookie h2 {
        font-size:25px;
    }

    .order-cookie p {
        font-size:13px;
    }

    .order-summary-inner {
        padding:22px;
    }

    .fulfillment {
        grid-template-columns:1fr;
    }

}

.order-cookie-placeholder {
    height:135px;
    aspect-ratio:1/1;
    border-radius:16px;
    background:var(--cream);
    display:grid;
    place-items:center;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

@media(max-width:1100px) and (min-width:901px) {
    .order-cookie {
        grid-template-columns:150px minmax(0,1fr);
    }

    .qty-control {
        grid-column:2;
        justify-self:start;
    }

    .order-cookie img,.order-cookie-placeholder {
        grid-row:1 / span 2;
    }

}

@media(max-width:900px) {
    .order-cookie-placeholder {
        height:105px;
    }

}

@media(max-width:580px) {
    .order-cookie-placeholder {
        height:80px;
    }

}

.order-cookie .cookie-allergens {
    margin:8px 0 0;
    font-size:11.5px;
    line-height:1.4;
    color:#657774;
}

.order-cookie .cookie-allergens b {
    color:#29484b;
}

.order-cookie .cookie-allergens a {
    color:#004C54;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:2px;
}

.cgv-check {
    display:flex!important;
    align-items:flex-start;
    gap:10px;
    margin:14px 0 12px;
    padding:12px 13px;
    border:1px solid rgba(0,76,84,.16);
    border-radius:10px;
    background:#f8faf9;
    font-size:12px;
    line-height:1.45;
    color:#536663;
    cursor:pointer;
}

.cgv-check input {
    width:16px!important;
    height:16px!important;
    min-width:16px;
    margin:1px 0 0!important;
    accent-color:#004C54;
}

.cgv-check a {
    text-decoration:underline;
    text-underline-offset:2px;
    font-weight:700;
    color:#004C54;
}

.order-cookie img {
    display: block;
    width: 150px;
    height: 150px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.order-cookie-placeholder {
    width: 150px;
    height: 150px;
    aspect-ratio: 1 / 1;
}

@media(max-width:900px) {
    .order-cookie img,
    .order-cookie-placeholder {
        width: 110px;
        height: 110px;
    }
}

@media(max-width:580px) {
    .order-cookie img,
    .order-cookie-placeholder {
        width: 80px;
        height: 80px;
    }
}