/*
Copyright 2019 Square Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
    PRODUCTS
*/

html, body{
    background-color: var(--white);
}

.products {
    display: grid;
    grid-template-columns: 200px 200px 200px 200px;
    grid-gap: 40px;
    width: 920px;
    padding: 8px 20px 48px 20px;
    margin: 0 auto;
}

.product {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 4px;
    box-shadow: var(--box-shadow);
    padding: 0;
}

/* .product:nth-child(4n) {
    margin-right: 0;
} */

.product .image-container {
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 4px;
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.10), 0 2px 2px 0 rgba(0,0,0,0.10), 0 1px 2px 0 rgba(0,0,0,0.10);
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.product .image-container:hover {
    margin-top: -2px;
    margin-bottom: 2px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10), 0 1px 16px 0 rgba(0,0,0,0.10), 0 2px 4px 0 rgba(0,0,0,0.10);
    filter: grayscale(100%);
}

.image-container .product-image {
    height: 200px;
    width: 200px;
    border-radius: 4px;
    object-fit: cover;
}

.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--background-color);
    color: var(--placeholder-gray);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.image-container .image-overlay {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color:var(--overlay-color, rgba(0,0,0,0.5));
    text-align: center;
    border-radius: 4px;

    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}

.product .image-container:hover .image-overlay {
    opacity: 1;
}

.product-name-plaque {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    box-sizing: border-box;
    height: 44px;
    max-height: 44px;
    margin: 0;
    padding: 6px 10px;
    display: -webkit-box;
    overflow: hidden;
    color: #F5F0EC;
    background: #6E3F59;
    border-radius: 10px 10px 0 0;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-line-clamp: 2;
}

.image-container .image-overlay button {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #fff;
    background-color: transparent;
    border-radius: 4px;
    padding: 8px 24px;
    font-weight: 500;
    line-height: 24px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}
.image-container .image-overlay button:focus { outline: 0; }

.form-control {
    margin:10px;
    padding: 14px 16px;
    height: 58px;
}


.modal.is-open {
    opacity: 1;
    visibility: visible;
    top: 50%;

    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}

.modal.no-fade {
    top: 50%;
    -webkit-transition: all 0s ease-in-out, opacity .4s ease-in-out;
       -moz-transition: all 0s ease-in-out, opacity .4s ease-in-out;
        -ms-transition: all 0s ease-in-out, opacity .4s ease-in-out;
            transition: all 0s ease-in-out, opacity .4s ease-in-out;
}

.modal.is-open.no-fade {
    -webkit-transition: all 0s ease-in-out;
       -moz-transition: all 0s ease-in-out;
        -ms-transition: all 0s ease-in-out;
            transition: all 0s ease-in-out;
}

.veil {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--ink);
    opacity: 0;
    visibility: hidden;
    z-index: 999;

    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}
.veil.visible {
    opacity: 0.5;
    visibility: visible;
}



.close {
    display: grid;
    place-items: center;
    height: 44px;
    width: 44px;
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--primary);
    background: rgba(245,240,236,.96);
    box-shadow: 0 3px 12px rgba(69,101,116,.2);
    font: 700 30px/1 var(--font-body);
    transition: all .1s ease-in-out;
    cursor: pointer;
}

.close:hover { color: var(--accent); background: var(--surface); }
.close:focus-visible { outline: 3px solid rgba(69,101,116,.5); outline-offset: 2px; }

.modal-image {
    height: 400px;
    width: 400px;
    flex: 0 0 400px;
    object-fit: cover;
}

.modal {
    position: fixed;
    top: 51%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    visibility: hidden;
    max-height: 80vh;
    width: 800px;
    margin: 0 auto;
    display: flex;
    background-color: var(--surface);
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.10), 0 8px 32px 4px rgba(0,0,0,0.10), 0 8px 8px 0 rgba(0,0,0,0.10);
    z-index: 1000;

    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.modal .product-info {
    max-height: 80vh;
    width: 400px;
    padding-bottom: 64px;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.modal .product-title {
    margin: 32px 32px 16px 32px;
    font-size: 22px;
    color: var(--dark-gray);
}

.modal .product-description {
    margin: 0 32px 0 32px;
}

.modal .product-meta {
    width: auto;
    margin: 24px 32px 0;
}

.modal .productCost {
    margin: 0;
    padding: 0;
    width: 338px;
    height: 28px;
    line-height: 28px;
    font-size: 22px
}

.modal .product-purchase {
    width: calc(100% + 64px);
    height: 64px;
    margin-left: -32px;
    margin-top: 24px;
    color: #fff;
    border: none;
    background-color: var(--green);
    transition: all .1s ease-in-out;
    cursor: pointer;
    padding: 16px 62px;
    border-radius: 0px;
}

.modifier-groups {
    margin-top: 20px;
}

.modifier-group {
    padding: 0;
    margin: 0 0 24px;
    border: 0;
}

.modifier-group-title {
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    color: var(--dark-gray);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.modifier-group-description {
    margin: 0 0 10px;
    color: var(--placeholder-gray);
    font-size: 14px;
    line-height: 20px;
}

.modifier-group-rule {
    margin: 0 0 10px;
    color: var(--neutral-gray);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

.modifier-group-error {
    display: none;
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 13px;
    line-height: 20px;
}

.modifier-group-invalid .modifier-group-error {
    display: block;
}

.modifier-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 56px;
    margin: 8px 0;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--surface);
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
}

.modifier-option + .modifier-option {
    border-top: 1px solid var(--border-color);
}
.modifier-option:has(.modifier-option-control:checked) { border-color: var(--primary); background: var(--secondary-surface); box-shadow: 0 0 0 2px rgba(69,101,116,.18); }

.modifier-option-control {
    flex: 0 0 auto;
}

.modifier-option > .modifier-option-control { position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none; }
.modifier-option:has(.modifier-option-control:focus-visible){outline:3px solid rgba(69,101,116,.3);outline-offset:2px}

.modifier-option-content,
.modifier-option-name,
.modifier-option-description {
    display: block;
}
.modifier-option-content{display:grid;width:100%;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .75rem}.modifier-option-description{grid-column:1/-1}.modifier-option-price{color:var(--primary);font-weight:800;white-space:nowrap}
.modifier-select{display:block;width:100%;min-height:66px;box-sizing:border-box;margin:.8rem 0 0;padding:1.1rem 3rem 1.1rem 1.1rem;border:1px solid var(--border-color);border-radius:14px;background:var(--surface);color:var(--ink);font:600 1.05rem/1.55 var(--font-body)}
.modifier-select option{min-height:48px;padding:.9rem 1rem;line-height:1.7}
.modifier-select:focus-visible{outline:3px solid rgba(69,101,116,.25);outline-offset:2px;border-color:var(--primary)}

.modifier-option-description {
    color: var(--placeholder-gray);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.modal .product-purchase{position:absolute;right:0;bottom:0;z-index:3;width:400px;margin:0;box-shadow:0 -8px 18px rgba(69,101,116,.16)}
.modal .product-purchase:focus { outline: 0; }
.product-sold-out,.product-availability,.cart-line-availability{color:#9b2c2c;font-weight:700}.product-purchase:disabled{cursor:not-allowed;opacity:.58;transform:none}
.variation-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.75rem 0}.variation-options legend{grid-column:1/-1;margin-bottom:.15rem;font-weight:700}.variation-option{display:flex;min-width:0;min-height:52px;box-sizing:border-box;align-items:center;gap:.55rem;padding:.65rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}.variation-option input{flex:0 0 auto}.variation-option span{display:grid;min-width:0;gap:.1rem}.variation-option strong,.variation-option small{overflow-wrap:anywhere}.variation-option:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 2px rgba(69,101,116,.2)}.variation-option.is-sold-out{cursor:not-allowed;opacity:.58}.variation-option.is-sold-out small{color:#9b2c2c;font-weight:700}
.add-to-cart-form[data-visible-variations="true"] .quantity-field{display:grid;width:min(100%,150px);gap:.35rem;margin-top:1rem;font-weight:700}.add-to-cart-form[data-visible-variations="true"] .quantity-field input{width:100%;min-width:0;box-sizing:border-box}.add-to-cart-form[data-visible-variations="true"] .product-availability{min-height:1.2em;font-weight:600}
@media(max-width:380px){.variation-options{grid-template-columns:minmax(0,1fr)}}

.btn {
    border-radius: 0;
}

.modal-body {
    min-width: 800px;
    padding: 0;
}

.modal-content {
    border: none;
    overflow: hidden;
    border-radius: .3em;
}

@media (max-width: 840px) {
    .modal {
        width: calc(100% - 32px);
    }

    .modal-image {
        width: 40%;
        flex-basis: 40%;
    }

    .modal .product-info {
        width: 60%;
    }
}

@media (max-width: 600px) {
    .modal {
        flex-direction: column;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-image {
        width: 100%;
        height: 180px;
        min-height: 180px;
        flex-basis: 180px;
    }

    .modal .product-info {
        width: 100%;
        max-height: none;
        overflow: visible;
    }
}

/* Berry's themed ordering surface */
html, body { background: var(--app-background); }
.cafe-page { padding: 0 1rem; }
.catalog-source { color: var(--neutral-gray); }
body .category-nav { position: sticky; top: 0; z-index: 5; padding: .65rem; border-radius: var(--radius-md); background: rgba(185,151,163,.94); backdrop-filter: blur(12px); }
body .category-nav a { border-color: var(--secondary); color: var(--primary); background: var(--surface); font-family: var(--font-heading); font-weight: 600; }
.products { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); width: min(920px, 100%); box-sizing: border-box; gap: 24px; }
.product, .product .image-container, .image-container .product-image { width: 100%; border-radius: var(--radius-md); }
.product { min-width: 0; overflow: hidden; background: var(--surface); box-shadow: var(--box-shadow); }
.image-container .image-overlay { border-radius: var(--radius-md); }
.modal { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.modal .product-title, .modifier-group-title { color: var(--primary); font-family: var(--font-heading); }
.modal .product-purchase { background: var(--primary); font-family: var(--font-heading); font-weight: 700; }
.productCost .green { color: var(--accent); font-family: var(--font-heading); }
body .customer-cart { bottom: 86px; border-color: var(--primary); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 -4px 26px rgba(69,101,116,.2); }
body .cart-line-actions button { color: var(--primary); border-color: var(--secondary); border-radius: 8px; background: var(--surface); box-shadow: none; }
body .cart-line-actions button[data-remove-cart-line],body .cart-line-actions button[data-edit-cart-line]{color:var(--accent);background:var(--surface)}
@media (min-width: 701px) { body .customer-cart { bottom: 12px; } }
@media (max-width: 600px) {
  .cafe-page { padding: 0; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 8px 0 32px; }
  .product, .product .image-container, .image-container .product-image { height: min(44vw, 190px); }
  body .category-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  body .category-nav a { flex: 0 0 auto; }
  body .customer-cart { padding: .85rem; }
}
.cafe-page{max-width:1200px;margin:0 auto 5rem}.catalog-source{text-align:center}.category-nav{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:0 auto 2rem}.category-nav a{border:1px solid var(--border-color);border-radius:999px;padding:.4rem .8rem}.catalog-category{scroll-margin-top:1rem}.catalog-category>h2{max-width:920px;margin:2rem auto 1rem}
.customer-cart{position:sticky;bottom:0;max-width:920px;margin:2rem auto 0;padding:1rem 1.25rem;background:var(--surface);border:2px solid var(--primary);border-radius:.75rem;box-shadow:0 -3px 18px rgba(69,101,116,.14);z-index:4}.customer-cart h2{margin:.1rem 0}.customer-cart ul{list-style:none;padding:0}.customer-cart li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--light-gray)}.cart-line-label{flex:1}.cart-line-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.cart-line-actions button{min-width:2rem;background:var(--surface);border:1px solid var(--primary);border-radius:.25rem;padding:.25rem .5rem;color:var(--primary);line-height:1.4;font-size:1rem;font-weight:700;cursor:pointer}.cart-line-actions button:disabled{color:var(--muted-icon);border-color:var(--mushroom);cursor:not-allowed}.cart-line-actions button[data-remove-cart-line],.cart-line-actions button[data-edit-cart-line]{border:0;background:var(--surface);color:var(--accent);text-decoration:underline}.cart-total{text-align:right;font-weight:700}.customer-cart form[hidden],.customer-cart p[hidden]{display:none}

/* Responsive cart shell: product browser and cart stay adjacent without overlap. */
.order-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:24px;max-width:1200px;margin:0 auto}.catalog-browser{min-width:0}.catalog-browser .products{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));width:100%;padding-inline:0}.catalog-browser .catalog-category>h2{max-width:none}.catalog-browser .category-nav{margin-bottom:1rem}body .order-layout .customer-cart{position:sticky;top:20px;bottom:auto;width:100%;max-width:none;margin:0;padding:0;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--box-shadow);overflow:hidden;z-index:4}.cart-toggle{display:flex;width:100%;min-height:64px;align-items:center;gap:.6rem;padding:.8rem 1rem;border:0;border-radius:0;background:var(--primary);box-shadow:none;text-align:left;cursor:default}.cart-toggle:hover:not(:disabled){transform:none;box-shadow:none}.cart-toggle-title{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;color:var(--surface)}.cart-summary{margin-left:auto;color:var(--surface);font-family:var(--font-heading);font-size:.82rem;font-weight:600;white-space:nowrap}.cart-toggle-icon{display:none;color:var(--surface);font-size:1.1rem}.cart-details{padding:.35rem 1rem 1rem}.customer-cart.is-empty .cart-details{padding-block:.25rem}.customer-cart.is-empty #cart-empty{margin:.45rem 0;color:var(--neutral-gray);font-size:.9rem}.customer-cart ul{margin:.25rem 0}.customer-cart li{align-items:flex-start;flex-direction:column;gap:.45rem}.cart-line-actions{width:100%}.cart-line-actions button{min-height:36px}.customer-cart .product-purchase{width:100%;min-height:48px}.cart-total{margin:.75rem 0;text-align:left;color:var(--primary);font-family:var(--font-heading);font-size:1.05rem}

@media (max-width:739px){.cafe-page{padding:0;margin-bottom:9.5rem}.order-layout{display:block}.catalog-browser .products{padding-bottom:32px}body .order-layout .customer-cart{position:fixed;right:10px;bottom:12px;left:10px;top:auto;width:auto;max-width:none;margin:0;z-index:850;border-color:var(--border-color);box-shadow:0 8px 28px rgba(69,101,116,.24)}.cart-toggle{min-height:58px;padding:.65rem .9rem;cursor:pointer}.cart-toggle-icon{display:inline-block;transition:transform .18s ease}.customer-cart.is-open .cart-toggle-icon{transform:rotate(180deg)}.cart-details{display:none;max-height:min(55vh,460px);overflow-y:auto;padding:.35rem 1rem 1rem}.customer-cart.is-open .cart-details{display:block}.customer-cart.is-open.is-empty .cart-details{display:block}.customer-cart li{align-items:flex-start}.cart-line-actions button{min-height:40px}.cart-summary{font-size:.78rem}}

@media (max-width:420px){body .order-layout .customer-cart{right:8px;left:8px}.cart-toggle{gap:.4rem;padding-inline:.75rem}.cart-toggle-title{font-size:.95rem}.cart-summary{font-size:.72rem}.catalog-browser .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

@media (max-width:600px){body .order-layout .customer-cart{bottom:calc(80px + env(safe-area-inset-bottom))}}

@media (max-width: 600px) {
  .modal { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .modal .product-title { margin-right: 56px; }
  .modal .close { position: absolute; top: 10px; right: 10px;
    width: 44px; height: 44px; z-index: 6; }
}

/* Item details: one touch-scroll region with the page locked behind it. */
body.modal-open .mobile-bottom-nav,body.modal-open .customer-cart{visibility:hidden}.modal .product-info{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.modal-image{object-position:center}

@media (max-width:600px){.modal{top:50%;width:calc(100% - 20px);height:auto;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);border-radius:18px;flex-direction:column;overflow:hidden;overscroll-behavior:contain}.modal-image{display:block;width:100%;height:clamp(92px,18vh,140px);min-height:92px;max-height:140px;flex:0 0 auto;object-fit:contain;background:var(--surface-soft)}.modal .product-info{width:100%;min-height:0;max-height:none;flex:1 1 auto;padding-bottom:54px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.modal .product-title{margin:14px 52px 4px 16px;font-size:1.2rem;line-height:1.35}.modal .product-description{margin:0 16px;font-size:.9rem;line-height:1.45}.modal .product-meta{margin:10px 16px 0}.modal .productCost{width:auto;height:auto;margin-bottom:8px;font-size:1.2rem;line-height:1.4}.modifier-groups{margin-top:12px}.modifier-group{margin-bottom:16px}.modifier-option{min-height:56px;padding:12px 14px}.modal .product-purchase{position:absolute;right:0;bottom:0;z-index:3;width:100%;height:auto;min-height:54px;margin:0;padding:13px 18px;border-radius:0;box-shadow:0 -8px 18px rgba(69,101,116,.16)}.modal .close{top:10px;right:10px;width:42px;height:42px;border-radius:50%;background-color:rgba(245,240,236,.94);background-position:center;z-index:5}}
.category-landing-title{text-align:center;margin:0 0 1rem}.category-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.category-card{position:relative;display:block;min-height:190px;overflow:hidden;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--box-shadow)}.category-card-image,.category-card-fallback{display:block;width:100%;height:100%;min-height:190px;object-fit:cover}.category-card-fallback{display:grid;place-items:center;background:linear-gradient(135deg,var(--surface),rgba(185,151,163,.65))}.category-card-fallback img{width:44%;height:auto;opacity:.86}.category-card-label{position:absolute;right:0;bottom:0;left:0;padding:.85rem .75rem;color:var(--surface);background:linear-gradient(transparent,rgba(40,47,51,.92));font-family:var(--font-heading);font-size:1rem;font-weight:700;line-height:1.25;text-align:center}.category-view-header{margin-bottom:1rem}.all-categories-link{display:inline-flex;min-height:44px;align-items:center;padding:.35rem .75rem;border-radius:var(--radius-sm);background:var(--surface);color:var(--primary);font-family:var(--font-heading);font-weight:700}.category-view-header h2{margin:.65rem 0 0}.allergen-information{margin:14px 0;padding:12px;border:1px solid var(--border-color);border-radius:12px;background:var(--surface-soft)}.allergen-information h3{margin:0 0 6px;font-size:.9rem;line-height:1.3;letter-spacing:.04em}.allergen-information p{margin:.35rem 0;font-size:.82rem;line-height:1.45}@media(max-width:600px){.category-card-grid{grid-template-columns:1fr;gap:12px}.category-card,.category-card-image,.category-card-fallback{min-height:148px;height:148px}.category-card-label{font-size:1.05rem;padding:1.25rem .8rem .8rem}}
.category-card{min-height:230px;background:var(--surface-soft)}.category-card-image,.category-card-fallback{min-height:230px;object-fit:contain}@media(max-width:600px){.category-card,.category-card-image,.category-card-fallback{min-height:220px;height:220px}}