/*
 * Exact visual assets from the supplied 1024 × 1536 reference.
 * The source image stays complete; CSS only frames the desired area.
 * Keep these coordinates synchronized with docs/ASSETS.md.
 */
.reference-asset {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--asset-ratio, 1);
    isolation: isolate;
}

.reference-asset > img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: var(--asset-width, 100%);
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    transform: translate(var(--asset-x, 0%), var(--asset-y, 0%));
    transform-origin: top left;
}

/* Source: x=60, y=40, width=160, height=51. */
.asset-logo {
    --asset-ratio: 160 / 51;
    --asset-width: 640.00000000%;
    --asset-x: -5.85937500%;
    --asset-y: -2.60416667%;
}

/* Source: x=334, y=100, width=418, height=364. */
.asset-hero {
    --asset-ratio: 418 / 364;
    --asset-width: 244.97607656%;
    --asset-x: -32.61718750%;
    --asset-y: -6.51041667%;
}

/* Source: x=17, y=756, width=376, height=269. */
.asset-story {
    --asset-ratio: 376 / 269;
    --asset-width: 272.34042553%;
    --asset-x: -1.66015625%;
    --asset-y: -49.21875000%;
}

/* Source: x=42, y=542, width=164, height=127. */
.asset-nutella {
    --asset-ratio: 164 / 127;
    --asset-width: 624.39024390%;
    --asset-x: -4.10156250%;
    --asset-y: -35.28645833%;
}

/* Source: x=217, y=542, width=165, height=127. */
.asset-oreo {
    --asset-ratio: 165 / 127;
    --asset-width: 620.60606061%;
    --asset-x: -21.19140625%;
    --asset-y: -35.28645833%;
}

/* Source: x=392, y=542, width=164, height=127. */
.asset-kinder-bueno {
    --asset-ratio: 164 / 127;
    --asset-width: 624.39024390%;
    --asset-x: -38.28125000%;
    --asset-y: -35.28645833%;
}

/* Source: x=567, y=542, width=161, height=127. */
.asset-white-coconut-caramel {
    --asset-ratio: 161 / 127;
    --asset-width: 636.02484472%;
    --asset-x: -55.37109375%;
    --asset-y: -35.28645833%;
}

/* Source: x=795, y=1017, width=66, height=53. */
.asset-ao-leite {
    --asset-ratio: 66 / 53;
    --asset-width: 1551.51515152%;
    --asset-x: -77.63671875%;
    --asset-y: -66.21093750%;
}

/* Source: x=795, y=1073, width=66, height=53. */
.asset-choco-branco {
    --asset-ratio: 66 / 53;
    --asset-width: 1551.51515152%;
    --asset-x: -77.63671875%;
    --asset-y: -69.85677083%;
}

/* Source: x=795, y=1130, width=66, height=53. */
.asset-mix-de-nuts {
    --asset-ratio: 66 / 53;
    --asset-width: 1551.51515152%;
    --asset-x: -77.63671875%;
    --asset-y: -73.56770833%;
}

/* Source: x=795, y=1244, width=66, height=53. */
.asset-triple-choco {
    --asset-ratio: 66 / 53;
    --asset-width: 1551.51515152%;
    --asset-x: -77.63671875%;
    --asset-y: -80.98958333%;
}

/* Source: x=795, y=1358, width=66, height=53. */
.asset-red-velvet {
    --asset-ratio: 66 / 53;
    --asset-width: 1551.51515152%;
    --asset-x: -77.63671875%;
    --asset-y: -88.41145833%;
}

/* Source: x=256, y=1056, width=179, height=144. */
.asset-map {
    --asset-ratio: 179 / 144;
    --asset-width: 572.06703911%;
    --asset-x: -25.00000000%;
    --asset-y: -68.75000000%;
}

/* Source: x=18, y=1233, width=410, height=170. */
.asset-cta {
    --asset-ratio: 410 / 170;
    --asset-width: 249.75609756%;
    --asset-x: -1.75781250%;
    --asset-y: -80.27343750%;
}

/* Source: x=60, y=40, width=51, height=51. */
.asset-cookie-mark {
    --asset-ratio: 51 / 51;
    --asset-width: 2007.84313725%;
    --asset-x: -5.85937500%;
    --asset-y: -2.60416667%;
}

/* Source: x=489, y=1054, width=32, height=32. */
.asset-google-mark {
    --asset-ratio: 32 / 32;
    --asset-width: 3200.00000000%;
    --asset-x: -47.75390625%;
    --asset-y: -68.61979167%;
}

/* Produtos ainda sem foto (image 'sem-foto'): mostra um aviso no lugar até a imagem chegar. */
.asset-sem-foto {
    --asset-ratio: 1.32;
    display: grid;
    place-items: center;
    background: #e6d8cd;
}

.asset-sem-foto > img {
    display: none;
}

.asset-sem-foto::after {
    content: "foto em breve";
    color: #805036;
    font-family: "More Sugar", "Lato", Arial, sans-serif;
    font-size: 15px;
    text-transform: uppercase;
}

/* Na bolinha do cardápio o aviso precisa caber em duas linhas curtas. */
.menu-product-image .asset-sem-foto {
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
}

.menu-product-image .asset-sem-foto::after {
    padding-inline: 12px;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
}